Grid View with Image and Label in Android


Step1.    Create a XML in Layout of type Linear Layout.

Step2. Paste  Following  Code for Image view and Label .

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:padding=”5dp”

android:orientation=”vertical” >

<ImageView

android:id=”@+id/grid_item_image”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_marginRight=”10px”

android:src=”@drawable/demo” >

</ImageView>

<TextView

android:id=”@+id/grid_item_label”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@+id/label”

android:layout_marginLeft=”2dp”

android:layout_marginTop=”5dp”

android:textSize=”10dp” >

</TextView>

</LinearLayout>

you can also create own image view and label but in that case name of these should be same any where .(ex. java code).

Step3. Create a class file in src with name  “ImageAdapter” it will be shown in src as ImageAdapter.java.

Step 4. paste Following code in this file (ImageAdopter.java).

package com.example.looknfeel;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class ImageAdapter extends BaseAdapter {

private Context context;

private final String[] mobileValues;

public ImageAdapter(Context context, String[] mobileValues) {

this.context = context;

this.mobileValues = mobileValues;

}

public View getView(int position, View convertView, ViewGroup parent) {

LayoutInflater inflater = (LayoutInflater) context

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View gridView;

if (convertView == null) {

gridView = new View(context);

// get layout from mobile.xml

gridView = inflater.inflate(R.layout.mobile, null);

// set value into textview

TextView textView = (TextView) gridView

.findViewById(R.id.grid_item_label);

textView.setText(mobileValues[position]);

// set image based on selected text

ImageView imageView = (ImageView) gridView

.findViewById(R.id.grid_item_image);

String mobile = mobileValues[position];

imageView.setImageResource(R.drawable.demo);

} else {

gridView = (View) convertView;

}

return gridView;

}

@Override

public int getCount() {

return mobileValues.length;

}

@Override

public Object getItem(int position) {

return null;

}

@Override

public long getItemId(int position) {

return 0;

}

}

*** Replace Package name with your package.

Step 5. create a Xml file of Grid Layout Type.

Step 6. Create a class with name FriendView . and paste following Code  .

package com.example.looknfeel;

import android.app.Activity;

import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.View.OnFocusChangeListener;

import android.view.View.OnTouchListener;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.Button;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

public class FriendView extends Activity {

GridView grid_main;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.friendview);// replace friend view by name of grid xml.

GridView gridView = (GridView) findViewById(R.id.grid_view);

final String[] MOBILE_OS = new String[] {

“Android”, “iOS”,”Windows”, “Blackberry” };

// gridView.setAdapter(new ImageAdapter(this,null));

gridView.setAdapter(new ImageAdapter(this, MOBILE_OS));

gridView.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> parent, View v,

int position, long id) {

Intent move = new Intent(FriendView.this, FriendDetail.class);

move.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);

startActivity(move);

}

});

}

}

Step 7. change the name of images with with are available in your drawable .

Hope your Grid View with image and label will be created .

ImageBest of Luck…….

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: