Android Mobile Application Development: Android custom Grid of Buttons

I was just working with android to get a grid of buttons and on hover and on focus grid buttons are changing there icons. for this purpose i just made some code which i wants to share with all of you!!

it is easy to understand and easy to develop we just need to focus on few things, these are the following steps :)
1> create a project with name GridofButtons with a main activity named MainActivity.java and the main xml layout as activity_main.xml

just copy the following code to activity class:

package jitesh.grid.button;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Point;

public class MainActivity extends Activity {

GridView GridView01;
View MyView;
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

/*Here we setContentView() to main.xml, get the GridView and then fill it with the
ImageAdapter class that extend from BaseAdapter */

GridView01 = (GridView)findViewById(R.id.GridView01);
GridView01.setAdapter(new ImageButtonAdapter(this));
// MyView.getHeight();
// Log.d("height",MyView.getHeight()+"");
GridView01.setVerticalSpacing(22);

GridView01.setGravity(Gravity.CENTER_HORIZONTAL);

}


public class ImageButtonAdapter extends BaseAdapter
{
Context MyContext;

public ImageButtonAdapter(Context _MyContext)
{
MyContext = _MyContext;
}

public int getCount()
{
/* Set the number of element we want on the grid */
return 6;
}

public View getView(final int position, View convertView, ViewGroup parent)
{
MyView = convertView;

if ( convertView == null )
{
/*we define the view that will display on the grid*/

//Inflate the layout
LayoutInflater li = getLayoutInflater();
MyView = li.inflate(R.layout.gridbutton, null);

// Add The Text!!!
TextView tv = (TextView)MyView.findViewById(R.id.icon_text);
tv.setText(name[position]);
tv.setTextColor(getResources().getColor(R.color.gridbuttonbackground));
// Add The Image!!!
ImageButton iv = (ImageButton)MyView.findViewById(R.id.icon_image);

iv.setImageResource(mThumbIds[position]);

iv.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Toast.makeText(getApplicationContext(),
// "its working"+"onClick"+"position ["+position+"]",
// Toast.LENGTH_SHORT).show();
navigateToScreen(position, getApplicationContext());
}
});

}

return MyView;
}

public Object getItem(int arg0) {
// TODO Auto-generated method stub
return null;
}

public long getItemId(int position) {
// TODO Auto-generated method stub
return 6;
}


}
private Integer[] mThumbIds = {
R.drawable.fifth, R.drawable.first,
R.drawable.fourth, R.drawable.second,
R.drawable.sixth, R.drawable.third
};
private String[] name={"first","second","third","fourth","fifth","sixth"};
public void navigateToScreen(int i, Context context){

switch (i) {
case 0:

break;
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
break;
case 5:
break;
}
}
}

2> in second step copy the layout as follows in yours activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/element1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bg"
android:orientation="vertical" >


<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/GridView01"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:gravity="center_horizontal|center_vertical"
android:horizontalSpacing="0dip"
android:numColumns="2"
android:padding="10dp"
android:stretchMode="columnWidth" >
</GridView>
</LinearLayout>
3> create an another xml layout with name gridbutton.xml
copy the following layout to this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widget44"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:gravity="center_horizontal"
android:orientation="vertical" >

<ImageButton
android:id="@+id/icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/first" />

<TextView
android:id="@+id/icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
</TextView>

</LinearLayout>

4> Now we need to make few selectors as follows:
put all these inside drawable

a) first.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/oneh" /> 
<item android:state_focused="true"
android:drawable="@drawable/oneh" /> 
<item android:drawable="@drawable/one" /> 
</selector>

b)second.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/twoh" /> 
<item android:state_focused="true"
android:drawable="@drawable/twoh" /> 
<item android:drawable="@drawable/two" /> 
</selector>

c)third.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/threeh" /> 
<item android:state_focused="true"
android:drawable="@drawable/threeh" /> 
<item android:drawable="@drawable/three" /> 
</selector>

d)fourth.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/fourh" /> 
<item android:state_focused="true"
android:drawable="@drawable/fourh" /> 
<item android:drawable="@drawable/four" /> 
</selector>

e) fifth.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/fiveh" /> 
<item android:state_focused="true"
android:drawable="@drawable/fiveh" /> 
<item android:drawable="@drawable/five" /> 
</selector>

f) sixth.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/sixh" /> 
<item android:state_focused="true"
android:drawable="@drawable/sixh" /> 
<item android:drawable="@drawable/six" /> 
</selector>

5> in this step make a colors.xml inside ...\res\values

and copy these lines there

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="gridbuttonbackground">#ffffffff</color>
</resources>

6> now copy all these images to drawable