Android Custom GridView with Example

Creating a custom GridView with Text and Image is as easy as Using a Simple GridView.
We need to just have a custom adapter and populate the GridView elements with custom adapter. It is similar to populating a ListView with Custom Adapter.


In this example I have explained how to how to make a custom grid with Text and Image and poipulate it’s content through Custom Adapter.

Steps:

• Create Layout
• Create Cutom Adapter and override it’s getView() method.
• Set the adapter to GridView

main.xml

[/B][/B][/B][/B]
[B][B][B][B]
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity” >

<GridView
android:id=”@+id/gridViewCustom”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_margin=”4dp”
android:columnWidth=”80dp”
android:gravity=”center”
android:numColumns=”auto_fit”
android:stretchMode=”columnWidth” />

</RelativeLayout>

Code (markup):

grid_row.xml

[/B][/B][/B][/B][/SIZE][/B]
[B][SIZE=4][B][B][B][B]<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:eek:rientation=”vertical”
android:padding=”5dp” >

<ImageView
android:id=”@+id/imageView”
android:layout_width=”50dp”
android:layout_height=”50dp”
android:layout_marginRight=”10dp”
android:src=”@drawable/ic_launcher” >
</ImageView>

<TextView
android:id=”@+id/textView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginTop=”5dp”
android:textSize=”15sp” >
</TextView>

</LinearLayout>

Code (markup):

CustomGridViewMainActivity.java

[/B][/B][/B][/B][/SIZE][/B][/SIZE][/B]
[B][SIZE=4][B][SIZE=4][B][B][B][B][INDENT]public class CustomGridViewMainActivity extends Activity
{

GridView gridView;
GridViewCustomAdapter grisViewCustomeAdapter;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

gridView=(GridView)findViewById(R.id.gridViewCustom);
// Create the Custom Adapter Object
grisViewCustomeAdapter = new GridViewCustomAdapter(this);
  // Set the Adapter to GridView
gridView.setAdapter(grisViewCustomeAdapter);

// Handling touch/click Event on GridView Item
gridView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View v, int position, long arg3) {
String selectedItem;
if(position%2==0)
selectedItem=”Facebook”;
else
selectedItem=”Twitter”;
Toast.makeText(getApplicationContext(),”Selected Item: “+selectedItem, Toast.LENGTH_SHORT).show();

}
});

}

}

Code (markup):

GridViewCustomAdapter.java

[/B][/B][/SIZE][/B][/SIZE][/B][/SIZE][/B]
[B][SIZE=4][B][SIZE=4][B][SIZE=4][B][B][INDENT]public class GridViewCustomAdapter extends ArrayAdapter
{
Context context;

public GridViewCustomAdapter(Context context)
{
super(context, 0);
this.context=context;

}

public int getCount()
{
return 24;
}

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
View row = convertView;

if (row == null)
{
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
row = inflater.inflate(R.layout.grid_row, parent, false);

TextView textViewTitle = (TextView) row.findViewById(R.id.textView);
ImageView imageViewIte = (ImageView) row.findViewById(R.id.imageView);

if(position%2==0)
{
textViewTitle.setText(“Facebook”);
imageViewIte.setImageResource(R.drawable.facebook);
}
else
{
textViewTitle.setText(“Twitter”);
imageViewIte.setImageResource(R.drawable.twitter);
}
}

return row;

}

}

Code (markup):

For Any help comment here or PM me ​