Android Tutorial – Grid View

With gridview , elements can be displayed in more than one dimensional scrollable Grid.

In today’s tutorial , we will see Grid view with Custom Adapter.

Let us create an example to display list of names and names.

Download some images and save them in drawable directory

Step 1 – Create new android project and give name GridViewExample

Step 2 – Add a gridview control in activity_main.xml.

<GridView
  android:id="@+id/gv"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:padding="5dp"
  android:numColumns="2"
  android:verticalSpacing="10dp"
  android:horizontalSpacing="10dp"
  android:gravity="center_horizontal"
  android:layout_gravity="center_horizontal"
  >
</GridView>

Above grid has two columns, you can add no of columns as per your need.

Step 3 – Set the content view as activity_main.xml, in this gridview can be taken from layout using findViewById method.

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_home);
    gridView = (GridView) findViewById(R.id.gv);
  // gridView.setAdapter(new DeviceAdapter(this,osNameList,osImages));
}

Step 4 – Create a GridAdapter.java which will be extended from BaseAdapter


public class GridAdapter extends BaseAdapter {
  protected Context context;
  ArrayList<GridList> dList;
  private static LayoutInflater inflater=null;
 
  public DeviceAdapter(Context context, ArrayList<DeviceList>  dList) {
      this.context = context;
      this.dList = dList;
      inflater = ( LayoutInflater )context.
              getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  }

  @Override
  public int getCount() {
      // TODO Auto-generated method stub
      return dList.size();
  }

  @Override
  public Object getItem(int position) {
      // TODO Auto-generated method stub
      return position;
  }
  @Override
  public long getItemId(int position) {
      // TODO Auto-generated method stub
      return position;
  }
  public class Holder
  {
      TextView os_text;
      ImageView os_img;
  }

  @Override
  public View getView(final int position, View convertView, ViewGroup parent) {
      // TODO Auto-generated method stub
      Holder holder=new Holder();
      View rowView;

      rowView = inflater.inflate(R.layout.add_grid_layout, null);
      holder.os_text =(TextView) rowView.findViewById(R.id.os_texts);
      holder.os_img =(ImageView) rowView.findViewById(R.id.os_images);

          holder.os_text.setTe((position + 1)+" . "+dList.get(position).name);
          holder.os_img.setImageResource(R.drawable.image);
      

 
      rowView.setOnClickListener(new View.OnClickListener() {

          @Override
          public void onClick(View v) {
              // TODO Auto-generated method stub
              //Toast.makeText(context, "You Clicked "+result[position], Toast.LENGTH_SHORT).show();
            
}

Step 5 – Create GridList.java class

class GridList {
String deviceid =“”;
String name = “”;
public GridList(String deviceid, String name) {
this.deviceid = deviceid;
this.name = name;
}
}
Step 6 – In MainActivity.java class, create instance of GridList and fill the list and setAdapter to GridView
ArrayList<GridList> aDlist = new ArrayList<GridlList>();

GridList gridOne = new GridList(“1″,”Grid one”);
aDlist.add(gridOnel);

GridList gridTwo = new GridList(“2″,”Grid two”);
aDlist.add(gridTwo);


GridList gridThree = new GridList(“3″,”Grid Three”);
aDlist.add(gridThree);

GridList gridFour = new GridList(“4″,”Grid Four”);
aDlist.add(gridFour);

gridView.setAdapter(new DeviceAdapter(getApplicationContext(),aDlist));

Step 7 – Create add_grid_layout.xml for customised adapter display
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
android:background=”#312F32″
>
<LinearLayout
android:layout_width=”wrap_content”
android:orientation=”vertical”
android:layout_weight=”1″
android:layout_gravity=”center_horizontal”
android:visibility=”visible”
android:layout_height=”wrap_content”
>
<LinearLayout
android:layout_width=”100dp”
android:layout_height=”100dp”
android:gravity=”center_horizontal”
android:layout_gravity=”center_horizontal”
android:background=”@drawable/circle_border”
>
<ImageView
android:layout_width=”50dp”
android:layout_height=”50dp”
android:layout_margin=”5dp”
android:id=”@+id/os_images”
android:layout_gravity=”center_vertical”
android:gravity=”center_horizontal”

android:layout_marginBottom=”5dp”/>
</LinearLayout>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Text”
android:id=”@+id/os_texts”
android:layout_gravity=”center_horizontal”
android:textColor=”#ffffff”
android:textSize=”16dp”
/>
</LinearLayout>
</LinearLayout>

Leave a Reply

Your email address will not be published. Required fields are marked *