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

Outsourcing

Are you looking for freelancers in the Philippines? Get in touch.

Donations

If you like what I do, you can support this channel by buying me a coffee. I would be grateful for your contribution! Your donations will help me create more FREE online courses and learning materials for programmers and remote workers.

item