142 Java Android Program to Customize GridView Style in Android
Posted by Superadmin on December 06 2015 13:56:11

---

Here is source code of the Program to Demonstrate Custom Grid View Layout in Android. The program is successfully compiled and run on a Windows system using Eclipse Ide. The program output is also shown below.
Main Activity

package com.example.custom_grid_view;

import java.util.ArrayList;

import android.app.Activity;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends Activity {
private GridView gridView;
private Myadapter adapter;

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

gridView = (GridView) findViewById(R.id.gridView);
adapter = new Myadapter(this, R.layout.row_grid, getData());
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View v,
int position, long id) {
Toast.makeText(MainActivity.this, position + "#Selected",
Toast.LENGTH_SHORT).show();
}

});
}

private ArrayList getData() {
final ArrayList imageItems = new ArrayList();
TypedArray imgs = getResources().obtainTypedArray(R.array.image_ids);
for (int i = 0; i < imgs.length(); i++) {
Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),
imgs.getResourceId(i, -1));
imageItems.add(new item(bitmap, "Image#" + i));
}

return imageItems;

}

}
Myadapter

package com.example.custom_grid_view;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class Myadapter extends ArrayAdapter {
private Context context;
private int layoutResourceId;
private ArrayList data = new ArrayList();

public Myadapter(Context context, int layoutResourceId, ArrayList data) {
super(context, layoutResourceId, data);
this.layoutResourceId = layoutResourceId;
this.context = context;
this.data = data;
}

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

if (row == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new ViewHolder();
holder.imageTitle = (TextView) row.findViewById(R.id.text);
holder.image = (ImageView) row.findViewById(R.id.image);
row.setTag(holder);
} else {
holder = (ViewHolder) row.getTag();
}

item item = (item) data.get(position);
holder.imageTitle.setText(item.getTitle());
holder.image.setImageBitmap(item.getImage());
return row;
}

static class ViewHolder {
TextView imageTitle;
ImageView image;
}
}
item

package com.example.custom_grid_view;

import android.graphics.Bitmap;

public class item {
private Bitmap image;
private String title;

public item(Bitmap image, String title) {
super();
this.image = image;
this.title = title;
}

public Bitmap getImage() {
return image;
}

public void setImage(Bitmap image) {
this.image = image;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}
}


Activity_Main

<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"
android:background="#f0f0f0"
tools:context=".MainActivity" >

<GridView
android:id="@+id/gridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="100dp"
android:drawSelectorOnTop="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp"
android:background="@drawable/grid_color">
</GridView>

</RelativeLayout>
grid.xml

<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:layout_marginTop="5dp"
android:background="@drawable/ic_launcher"
android:clickable="true"
android:focusable="true"
android:orientation="vertical"
android:padding="5dp" >

<ImageView
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="100dp" >
</ImageView>

<TextView
android:id="@+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center"
android:textSize="12sp" >
</TextView>

</LinearLayout>



You define a colour in drawable folder and apply this to the grid item.

grid_color.xml



<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@android:color/black" android:state_pressed="true"/>
<item android:drawable="@android:color/black" android:state_selected="true"/>
<item android:drawable="@android:color/white"/>

</selector>