no

How to use GridView layout in android

So, lately I've been relearning android development and as I expected there were already a lot of changes since I last code in it (eclai...

So, lately I've been relearning android development and as I expected there were already a lot of changes since I last code in it (eclair). Like the concept of Fragment (which I love), unfortunately statistics show that most of the users are still using API 10 (Gingerbread), so I'm sticking with it :-).

What I would like to achieve right now is a menu using grid view, and here's how I code it.

1.) We need a MainActivity where we will load the GridView:
@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 GridView menuGrid = (GridView) findViewById(R.id.menu);
 menuGrid.setAdapter(new MenuAdapter(this));

 menuGrid.setOnItemClickListener(new OnItemClickListener() {
  public void onItemClick(AdapterView parent, View v,
    int position, long id) {
   Toast.makeText(MainActivity.this, "" + position,
     Toast.LENGTH_SHORT).show();
  }
 });
}

2.) The MenuAdapter, that will serve as the interface between the data (string array, db) and the view:
public class MenuAdapter extends BaseAdapter {
 private Context context;
 private String[] labels;
 private int[] images = { R.drawable.menu_1, R.drawable.menu_2,
   R.drawable.menu_3, R.drawable.menu_4 };

 public MenuAdapter(Context context) {
  this.context = context;
  this.labels = context.getResources().getStringArray(R.array.menu_items);
 }

 @Override
 public int getCount() {
  return this.labels.length;
 }

 @Override
 public Object getItem(int arg0) {
  return null;
 }

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

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

  TextView textView = (TextView) convertView;

  if (textView == null) {
   textView = (TextView) View.inflate(context, R.layout.menu_item,
     null);
  }

  textView.setText(this.labels[position]);
  textView.setCompoundDrawablesWithIntrinsicBounds(0, images[position],
    0, 0);

  return textView;
 }
}

3.) The layouts/views: MainActivity
<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" >

    <include
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        layout="@layout/menu" />

</RelativeLayout>
Menu (Note that we use compound view (icon/text))
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="25dp"
    android:horizontalSpacing="5dp"
    android:numColumns="2"
    android:verticalSpacing="20dp" />
MenuItem
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menuItem"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:drawableTop="@drawable/icon"
    android:gravity="center_horizontal"
    android:text="@string/common_label"
    android:textColor="@color/menu_item" />

4.) And the resource: strings
 <string-array name="menu_items">
        <item>Menu 1</item>
        <item>Menu 2</item>
        <item>Menu 3</item>
        <item>Menu 4</item>
    </string-array>

Related

java-android 8918412107192777332

Post a Comment Default Comments

1 comment

AAREN said...

Thanks for taking time for sharing this article, it was excellent.

android application development

item