Android UI – Grid Layout with Image and Text

It is a typical application interface on a mobile application – a grid layout with images being used in grid to lead the navigation flow in the application

A combination of the GridView and an Image Adapter Class make this happen

Here is a sample of such an application running on Nexus7

Application with Image Based Grid Layout

MainActivity 

GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));

activity_main.xml

<GridView xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@+id/gridview”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:columnWidth=”150dp”
android:numColumns=”auto_fit”
android:verticalSpacing=”10dp”
android:horizontalSpacing=”10dp”
android:stretchMode=”columnWidth”
android:gravity=”center”
/>

 

grid_item.xml

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@+id/GridItem”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical”
android:gravity=”center_horizontal”>

<ImageView
android:id=”@+id/icon_image”
android:layout_width=”200dp”
android:layout_height=”150dp” >
</ImageView>

<TextView
android:id=”@+id/icon_text”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center_horizontal”
android:text=”TextView”
android:textColorHighlight=”#656565″ >
</TextView>

</LinearLayout>

ImageAdapter

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 mContext;

public ImageAdapter(Context c) {
mContext = c;
}

public int getCount() {
return mThumbIds.length;
}

public Object getItem(int position) {
return null;
}

public long getItemId(int position) {
return 0;
}

// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
View v;

if (convertView == null) { // if it’s not recycled, initialize some attributes
LayoutInflater li = (LayoutInflater) mContext.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
v = li.inflate(R.layout.grid_item, null);
TextView tv = (TextView)v.findViewById(R.id.icon_text);
tv.setText(mTextsIds[position]);
ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
//iv.setLayoutParams(new GridView.LayoutParams(85, 85));
//iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
iv.setPadding(8, 8, 8, 8);
iv.setImageResource(mThumbIds[position]);
} else {
v = (View) convertView;
}
return v;
}

// references to our images
private Integer[] mThumbIds = {
R.drawable.batman_96, R.drawable.caillou_96,
R.drawable.dennis_96, R.drawable.disney_96,
R.drawable.heman_96, R.drawable.looneytunes_96,
R.drawable.popeye_96, R.drawable.ppg_96, R.drawable.sd_96,
R.drawable.spm_96, R.drawable.superman_96,
R.drawable.tintin_96, R.drawable.tj_96, R.drawable.wp_96,
R.drawable.ww_96

};

// references to our texts
private String[] mTextsIds = {
“Batman”, “Caillou”,
“Dennis The Menace”, “Disney”,
“He-Man”, “Looney Tunes”,
“Popeye”, “Power Puff Girls”, “Scooby Doo”,
“Spiderman”, “Superman”,
“Tintin”, “Tom and Jerry”, “Winnie the Poo”, “Woody Woodpecker”
};
}

Advertisements

One Response to Android UI – Grid Layout with Image and Text

  1. Otilia says:

    Hello! I could have sworn I’ve been to this web site before but after
    going through many of the articles I realized it’s new to me.
    Anyhow, I’m definitely happy I discovered it and I’ll be book-marking it and checking back frequently!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: