Programming Android: Create Icon with Text Using GridView and Layout Inflater

How to create Icon With text like home screen, here is my example screen:

To do something like this we need to use GridView and make The Icon with text using the XML layout and then using LayoutInflater to read the XML and put it into the Adapter. Lets begin with the icon.xml(we put it into /res/layout/) that will be the view to show ImageView and Text together.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widget44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_x="201px"
android:layout_y="165px"
android:gravity="center_horizontal">
<ImageView
android:id="@+id/icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="@+id/icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:gravity="center_horizontal"
android:textColorHighlight="#656565">
</TextView>
</LinearLayout>

Here we put the ImageView and TextView into Linear Layout. In line 7 and 8 we define how big is our icon with layout_x and layout_y. Thats all, this icon.xml file next we will use in the Adapter to fill in our GridView.

Lets go to our GridView XML. I name it main_switch.xml, this locate in /res/layout/.

<?xml version="1.0" encoding="utf-8"?>
<GridView
  xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/GridView01"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
    android:padding="10dp"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:columnWidth="60dp"
    android:stretchMode="columnWidth"
    android:gravity="center">
</GridView>

In this XML file we define the main layout of our screen, and how will be the grid will be display. This will be load to our main Activity.

Lets go to our Activity Class

public class MainSwitch extends Activity{
	GridView grid_main;
	@Override
	public void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main_switch);

		grid_main = (GridView)findViewById(R.id.GridView01);
		grid_main.setAdapter(new ImageAdapter(this));
	}
	public class ImageAdapter extends BaseAdapter{
		Context mContext;
		public static final int ACTIVITY_CREATE = 10;
		public ImageAdapter(Context c){
			mContext = c;
		}
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return 5;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			View v;
			if(convertView==null){
				LayoutInflater li = getLayoutInflater();
				v = li.inflate(R.layout.icon, null);
				TextView tv = (TextView)v.findViewById(R.id.icon_text);
				tv.setText("Profile "+position);
				ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
				iv.setImageResource(R.drawable.icon);

			}
			else
			{
				v = convertView;
			}
			return v;
		}
	}
}

Line 4 – line 10 : we overide onCreate() from the Activity class, here we setContentView() to main_switch.xml, get the GridView and then fill it with the ImageAdapter class that extend from BaseAdapter.

line 24-41 : we define the view that will display on the grid, we use LayoutInflater to get view from icon.xml file that we already define before. We also can manipulate both ImageView and TextView with what parameter that we want to set, for example we can set the text or change the ImageView Resource, etc.

line 18-21 : we set how many icon we want to display.