Custom Gride View with image,text using BaseAdapter.

In this tutorial we are create custom gride view.gride view same as custom listview.

first create project than create java class and xml layout.code show bewlo

-add GridView widgets in activity_main.xml

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout 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:padding="10dp"  
   tools:context="com.example.aaru.costomizegride.MainActivity"  
 >  
  <GridView   android:id="@+id/gridView"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:numColumns="3"  
    android:gravity="center"   />  
 </RelativeLayout>  

-get id and put some dummy images in drawble folder and in array.

MainActivity.class

 package com.example.aaru.costomizegride;  
 import android.support.v7.app.AppCompatActivity;  
 import android.os.Bundle;  
 import android.view.View;  
 import android.widget.AdapterView;  
 import android.widget.GridView;  
 import android.widget.Toast;  
 import java.util.ArrayList;  
 public class MainActivity extends AppCompatActivity {  
   GridView gridView;  
   ArrayList<String>alName=new ArrayList<>();  
   ArrayList<Integer>alImage=new ArrayList<>();  
   @Override  protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     gridView= (GridView) findViewById(R.id.gridView);  
     for (int i=0;i<24;i++){  
       alName.add("Name "+(i+1));  
     }  
     alImage.add(R.drawable.sample_0);  
     alImage.add(R.drawable.sample_1);  
     alImage.add(R.drawable.sample_2);  
     alImage.add(R.drawable.sample_3);  
     alImage.add(R.drawable.sample_4);  
     alImage.add(R.drawable.sample_5);  
     alImage.add(R.drawable.sample_6);  
     alImage.add(R.drawable.sample_7);  
     alImage.add(R.drawable.sample_0);  
     alImage.add(R.drawable.sample_1);  
     alImage.add(R.drawable.sample_2);  
     alImage.add(R.drawable.sample_3);  
     alImage.add(R.drawable.sample_4);  
     alImage.add(R.drawable.sample_5);  
     alImage.add(R.drawable.sample_6);  
     alImage.add(R.drawable.sample_7);  
     alImage.add(R.drawable.sample_0);  
     alImage.add(R.drawable.sample_1);  
     alImage.add(R.drawable.sample_2);  
     alImage.add(R.drawable.sample_3);  
     alImage.add(R.drawable.sample_4);  
     alImage.add(R.drawable.sample_5);  
     alImage.add(R.drawable.sample_6);  
     alImage.add(R.drawable.sample_7);  
     CustomAdapter customAdapter=new CustomAdapter(alName,alImage,MainActivity.this);  
     gridView.setAdapter(customAdapter);  
     gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
       @Override      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
         Toast.makeText(MainActivity.this, alName.get(position), Toast.LENGTH_SHORT).show();  
       }  
     });  
   }  
 }  

-create xml layout and put below code.

raw.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="wrap_content"  
   android:layout_height="wrap_content"  
   android:orientation="vertical"  
   >  
   <ImageView  
     android:layout_width="90dp"  
     android:layout_height="90dp"  
     android:id="@+id/imageView"  
     android:src="@mipmap/ic_launcher"  
     />  
   <TextView   
     android:id="@+id/textName"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignEnd="@+id/imageView"  
     android:layout_alignRight="@+id/imageView"  
     android:layout_below="@+id/imageView"  
     android:layout_marginEnd="26dp"  
     android:layout_marginRight="26dp"  
     android:text="Name" />  
 </LinearLayout>  

-create a class name is customadapter inflate the raw xml .

CustomAdapter.class

  package com.example.aaru.costomizegride;  
 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;  
 import android.widget.Toast;  
 import java.util.ArrayList;  
 /** * Created by Aaru on 9/28/2017. */  
 public class CustomAdapter extends BaseAdapter {  
   ArrayList<String> alName = new ArrayList<>();  
   ArrayList<Integer> alImage;  
   Context context;  
   LayoutInflater layoutInflater;  
   public CustomAdapter(ArrayList<String> alName, ArrayList<Integer> alImage, Context context) {  
     this.alName = alName;  
     this.alImage=alImage;  
     this.context = context;  
     layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
   }  
   @Override  public int getCount() {  
     return alName.size();  
   }  
   @Override  public Object getItem(int position) {  
     return null;  
   }  
   @Override  public long getItemId(int position) {  
     return 0;  
   }  
   @Override  public View getView(final int position, View convertView, ViewGroup parent) {  
     final View view=layoutInflater.inflate(R.layout.raw,null);  
     TextView textName=(TextView)view.findViewById(R.id.textName);  
     ImageView imageView =(ImageView) view.findViewById(R.id.imageView);  
     imageView.setImageResource(alImage.get(position));  
     textName.setText(alName.get(position));  
     textName.setOnClickListener(new View.OnClickListener() {  
       @Override      public void onClick(View v) {  
         Toast.makeText(context, alName.get(position), Toast.LENGTH_SHORT).show();  
       }  
     });  
     return view;  
   }  
 }  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Enjoy Coding>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>