What are Xamarin.Android GridView and How to create a nice GridView

DotNek Software Development 14 minute(s) read

Last updated: Mar 19, 2021

What is GridView?

GridView is a group view used to place and display all available items. All items in apps or websites are placed in these GridViews so that all of them are displayed to users in a regular and categorized manner. Placing and displaying items inside the GridView is done in such a way that first the adapter receives all the required information from the sources and based on the received information, places the items in the group view to be categorized and collected. Show users. In fact, the adapter is the interface between the user interface of the program and the source of information. The purpose of creating GridView is to display existing items to users in a grouped and categorized manner and to prevent items from being scattered. In other words, GridView columns and rows the page and places items inside the cells created between rows and columns to sort and organize items, as well as users' quick and easy access to items. Make possible.

GridView features:

android id:

This feature of GridView assigns a unique ID for each view.

android columnWidth:

This feature is used to determine the spacing of columns and the received data can be in, sp, dp, px and mm.

android gravity:

This feature is for determining the location of each view in GridView , and the data in which it is placed has five modes and can be selected from these five modes. The modes of this feature are left, bottom, top, center and right.

android horizontalSpacing:

Used to determine and adjust the horizontal distance between columns, and by entering data in this feature, the horizontal distance between columns is determined and adjusted.

android numColumns:

You can use this feature to enter and specify the number of columns created, or you can even use the automatic data entry of this feature, which is auto_fit. Auto_fit creates the number of columns according to the page size, that is, creates the column according to the page size as much as possible. In other words, the number of columns in this case depends on the size of the page.

android stretchMode:

To show how much each column is drawn and fills in the blanks. The data in this attribute specifies the amount that each column should be drawn.

stretchMode itself has four modes, and this data can be used to insert data in this feature and specify the amount of drag of each column.

spacingWidth:

This mode is used to stretch and eliminate the spaces between each column.

columnWidth:

Used to divide columns into equal sizes, in which case the distances between the created columns will be equal.

spacingWidthUniform:

This mode is used to divide each column into different sizes, so that the size and distance between the columns will not be equal.

android verticalSpacing:

This mode is also used to adjust the spacing between rows and rows. By increasing the data entered in this mode, the distance between the lines increases, and by decreasing them, the distances decrease and the rows will be closer to each other.

Note:

To create a GridView , we must create a layer so that the desired content is placed on that layer and displayed. The contents are the same as the items.

How to create a GridView?

First create a project called Custom GridView. Match the project name and Solution name.Create the layer you want to create the GridView and name it activity_main.xml.Create the following code in the layer and after going through this path, enter res / layout / activity_main.xml res / layout / activity_main.xml.

<Relative Layout xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
android: orientation = "vertical"
android: background = "# ffb74d">
<GridView
android: id = "@ + id / customgrid"
android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: layout_below = "@ + id / os_texts"
android: numColumns = "2" />

<TextView
android: id = "@ + id / os_texts"
android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: text = "Programchi.ir"
android: textSize = "25dp"
android: textAlignment = "center"
android: layout_marginTop = "2dp" />

</RelativeLayout>

These codes define and create a TextView and GridView but do not put any items inside it, to put the items inside the GridView you have to enter special codes.

Create a file and name it sample_gridlayout.xml and put the inserted codes inside that file. Of course, put some photos in that file to be selected as images of items.

Error! Not a valid embedded object.

<? xml version = "1.0" encoding = "utf-8"?>

<RelativeLayout
xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
android: padding = "3dp">

<ImageView
android: id = "@ + id / os_images"
android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: src = "@ mipmap / ic_launcher" />

<TextView
android: layout_below = "@ + id / os_images"
android: id = "@ + id / os_texts"
android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: text = "This is Just Dummy Text"
android: textAlignment = "center"
android: textSize = "18dp"
android: textStyle = "bold" />

</RelativeLayout>

These codes are inserted to specify the shape and location of the items. By entering these codes, you can specify the shape and location of items.

We need an adapter to do this so that item information can be received from various sources and the items can be placed in their places. In fact, the adapter receives the required information of the items from the sources and according to the received information, places the items in their places. To do this, we must create a Java file and name it CustomAdapter.java.Put the following code in the CustomAdapter.java Java file you created.

import android. content. Context;
import android. view. LayoutInflater;
import android. view. View;
import android. view. View.OnClickListener;
import android. view. ViewGroup;
import android. widget. BaseAdapter;
import android. widget. ImageView;
import android. widget. TextView;
import android. widget. Toast;

public class CustomAdapter extends BaseAdapter {
String [] result;
Context;
int [] imageId;
private static LayoutInflater inflater = null;
public CustomAdapter (MainActivity, String [] osNameList, int [] osImages) {
result = osNameList;
context = mainActivity;
imageId = osImages;
inflater = (LayoutInflater) context.
getSystemService (Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public int getCount () {
return result. length;
}
@Override
public Object getItem (int position) {
return position;
}
@Override
public long getItemId (int position) {
return position;
}
public class Holder
{
TextView os_text;
ImageView os_img;
}
@Override
public View getView (final int position, View convertView, ViewGroup parent) {
Holder = new Holder ();
View rowView;
rowView = inflater. inflate (R. layout.sample_gridlayout, null);
holder. os_text = (TextView) rowView.findViewById (R.id. os_texts);
holder. os_img = (ImageView) rowView.findViewById (R.id. os_images);
holder. os_text. setText (result [position]);
holder. os_img. setImageResource (imageId [position]);
rowView.setOnClickListener (new OnClickListener () {
@Override
public void onClick (View v) {
Toast.makeText (context, "You Clicked" + result [position], Toast.LENGTH_SHORT). show ();
}
});
return rowView;
}
}

This code includes a void that takes the number of photos of the items, and there is another void that finds the views. We have also defined the click command and by clicking on the images of each item, the related operations will be performed.

Put the following code in the main activity to prepare a list of images of each item, then find the views related to GridView and make the adapter settings to finally display the items in GridView.

import Android.App. Activity;
import android.os. Bundle;
import android. widget. GridView;
public class MainActivity extends Activity {
GridView;
public static String [] osNameList = {
"Android",
"iOS",
"Linux",
"MacOS",
"MS DOS",
"Symbian",
"Windows 10",
Windows XP
};
public static int [] osImages = {
R. mipmap. android,
R.mipmap.ios,
R. mipmap. linux,
R. mipmap. macos,
R. mipmap. msdos,
R. mipmap. symbian,
R. mipmap. windows10,
R. mipmap. winxp,};
@Override
protected void onCreate (Bundle savedInstanceState) {
super. onCreate (savedInstanceState);
setContentView (R. layout. activity_main);
gridview = (GridView) findViewById (R.id. customgrid);
gridview. setAdapter (new CustomAdapter (this, osNameList, osImages));
}
}
Create an ImageAdapter to display the images in the ubiquitous ImageAdapter (Context c)
{
context = c;
}

public override int Count {
get {return thumbIds.Length;}
}

public override Java. Lang. Object GetItem (int position)
{
return null;
}

public override long GetItemId (int position)
{
return 0;
}

// create a new ImageView for each item referenced by the Adapter
public override View GetView (int position, View convertView, ViewGroup parent)
{
ImageView;
if (convertView == null) {// if it's not recycled, initialize some attributes
imageView = new ImageView (context);
imageView.LayoutParameters = new GridView.LayoutParams (85, 85);
imageView.SetScaleType (ImageView.ScaleType. CenterCrop);
imageView.SetPadding (8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}

imageView.SetImageResource (thumbIds [position]);
return imageView;
}

// references to our images
int [] thumbIds = thumb
Resource.Drawable.sample_2, Resource.Drawable.sample_3,
Resource.Drawable.sample_4, Resource.Drawable.sample_5,
Resource.Drawable.sample_6, Resource.Drawable.sample_7,
Resource.Drawable.sample_0, Resource.Drawable.sample_1,
Resource.Drawable.sample_2, Resource.Drawable.sample_3,
Resource.Drawable.sample_4, Resource.Drawable.sample_5,
Resource.Drawable.sample_6, Resource.Drawable.sample_7,
Resource.Drawable.sample_0, Resource.Drawable.sample_1,
Resource.Drawable.sample_2, Resource.Drawable.sample_3,
Resource.Drawable.sample_4, Resource.Drawable.sample_5,
Resource.Drawable.sample_6, Resource.Drawable.sample_7
};
}

By performing all the above steps and inserting the code in the path of the specified files, you will first create a GridView , but there are no items inside this GridView. Then, by entering another code, you specify the shape and location of the items. After specifying the shape and location of the items, an adapter is defined to read the information from the sources and place the items. To do this, you define a Java file and insert the relevant code into the created file. After obtaining the number of images and items, it takes the relevant images from the specified path and assigns them to each of the items. If you have done all these steps, coding and routing correctly, you can create a GridView where each item with its images is in its proper place.