This tutorial shows how to display a Map List containing texts and images in a Custom GridView.
Step 1: Create a new project with name GridViewExample and package name com.myexample.gridview. Select File/New/New Project. Fill the forms and click “Finish” button.
Step 2: Open res/layout/xml (or) main.xml and add following code. Here we add a GridView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<GridView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:columnWidth="130dp"
android:gravity="center"
android:numColumns="auto_fit"
android:id="@+id/mainGridView1"/>
</LinearLayout>
Step 3: In res/drawable/ directory add images to be used in ListView. E.g. ic_info_white_24dp.png, ic_lock_white_24dp.png, ic_security_white.png, ic_volume_up_white.png, home.png, ic_launcher.
Step 4: In res/layout/ directory add a new file list_item.xml and add following code. Here we add a TextView for displaying text and an ImageView for displaying images.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="8dp" android:gravity="center_horizontal" android:background="#375782"> <ImageView android:layout_height="100dp" android:layout_width="100dp" android:scaleType="fitCenter" android:id="@+id/listitemImageView1"/> <TextView android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content" android:text="Medium Text" android:textColor="#FEFEFE" android:id="@+id/listitemTextView1"/> </LinearLayout>
Step 5: Open app/src/main/java/package and open MainActivity.java. Add following code in it. Here we create a Map list with a title and image at each position, and set an adapter to display this in GridView.
package com.myexample.gridview;
import android.app.*;
import android.os.*;
import android.view.*;
import android.view.View.*;
import android.widget.*;
import java.util.*;
import android.content.*;
public class MainActivity extends Activity {
private GridView gridview1;
// Create a new Array of type HashMap
private ArrayList<HashMap<String, Object>> maplist = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
gridview1 = (GridView) findViewById(R.id.mainGridView1);
gridview1.setOnItemClickListener(new GridView.OnItemClickListener(){
@Override
public void onItemClick(AdapterView<?> p1, View p2, int p3, long p4){
Toast.makeText(getApplicationContext(), maplist.get(p3).get("title").toString(), Toast.LENGTH_LONG).show();
}
});
// Add items to the Map list
{
HashMap<String, Object> _item = new HashMap<>();
_item.put("title", "Info");
_item.put("icon", R.drawable.ic_info_white_24dp);
maplist.add(_item);
}
{
HashMap<String, Object> _item = new HashMap<>();
_item.put("title", "Privacy Policy");
_item.put("icon", R.drawable.ic_lock_white_24dp);
maplist.add(_item);
}
{
HashMap<String, Object> _item = new HashMap<>();
_item.put("title", "Security");
_item.put("icon", R.drawable.ic_security_white);
maplist.add(_item);
}
{
HashMap<String, Object> _item = new HashMap<>();
_item.put("title", "Volume");
_item.put("icon", R.drawable.ic_volume_up_white);
maplist.add(_item);
}
{
HashMap<String, Object> _item = new HashMap<>();
_item.put("title", "Home");
_item.put("icon", R.drawable.home);
maplist.add(_item);
}
{
HashMap<String, Object> _item = new HashMap<>();
_item.put("title", "Launcher");
_item.put("icon", R.drawable.ic_launcher);
maplist.add(_item);
}
GridAdapter adapter = new GridAdapter(this);
gridview1.setAdapter(adapter);
}
public class GridAdapter extends BaseAdapter {
private Context mContext;
public GridAdapter(Context c) {
mContext = c;
}
public int getCount() {
return maplist.size();
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
// Inflate the layout for each list item
LayoutInflater _inflater = (LayoutInflater)getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (v == null) {
v = _inflater.inflate(R.layout.list_item, null);
}
// Get the TextView and ImageView from CustomView for displaying item
TextView txtview = (TextView) v.findViewById(R.id.listitemTextView1);
ImageView imgview = (ImageView) v.findViewById(R.id.listitemImageView1);
// Set the text and image for current item using data from map list
txtview.setText(maplist.get(position).get("title").toString());
imgview.setImageResource(maplist.get(position).get("icon"));
return v;
}
}
}
Output:
Now run the app. The app will display a GridView with icons and texts.