Custom Gride View with image and text using BaseAdapter.

GridView is used to show information in 2 dimension. during this tutorial we area unit getting to show you the way to implement custom GridView in android with pictures and Text.

GridView may be a ViewGroup that displays things in a two-dimensional, scrollable grid. The grid things area unit automatically inserted to the layout using a Custom Adapter.

Follow the below steps:

1. Start a new project named Customizegride.
2. Find some photos you'd like to use, or download sample images. Save the image files into the project's res/drawable/ directory.
3. Open the res/layout/main.xml file and insert the following:

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.customizegride.MainActivity"  
 >  
<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"/>
</RelativeLayout>  

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();  
       }  
     });  
   }  
 }  

Next step is to create a layout for the grid item that is to be displayed in GridView. Create the layout as grid_single.xml which has a TextView to display the text which is stored in the Array and a ImageView to display set of images in each grid item.

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

First, this implements some required strategies inherited from BaseAdapter. The creator and getCount() ar obvious. Normally, getItem(int) ought to come back the particular object at the desired position within the adapter, however it's unheeded for this instance. Likewise, getItemId(int) ought to come back the row id of the item, however it is not required here.

The first method necessary is getView(). This method creates a brand new read for every image additional to the ImageAdapter. once this is often known as, a read is passed in, that is often a recycled object (at least once this has been known as once), therefore there is a check to envision if the item is null. If it's null, associate ImageView is instantiated and organized with desired properties for the image presentation:

setLayoutParams(ViewGroup.LayoutParams) sets the peak and breadth for the View—this ensures that, no matter the dimensions of the drawable, every image is resized and cropped to fit in these dimensions, as applicable.
setScaleType(ImageView.ScaleType) declares that pictures ought to be cropped toward the middle (if necessary).
setPadding(int, int, int, int) defines the artefact for all sides. (Note that, if the pictures have completely different aspect-ratios, then less artefact can cause a lot of cropping of the image if it doesn't match the scale given to the ImageView.)
If the read passed to getView() isn't null, then the native ImageView is initialized with the recycled read object.

At the top of the getView() method, the position whole number passed into the tactic is used to pick out a picture from the mThumbIds array, that is ready because the image resource for the ImageView.


All that is left is to outline the mThumbIds array of drawable resources.

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