DotNek Tech Blog
  • HOME
  • SERVICES
    • MOBLIE APPS
      • APP DEVELOPMENT
      • GAME DEVELOPMENT
      • IOS DEVELOPMENT
      • ANDROID DEVELOPMENT
      • APP MONETIZING IDEAS
      • APP ADVERTISING
      • APP MARKETING & ASO
    • SEO
      • SEO - SEARCH ENGINE OPTIMIZATION
      • WEBSITE ANALYSIS
    • WEBSITE
      • WORDPRESS WEB DESIGN
      • CREATE AN ONLINE STORE
      • CUSTOM WEBSITE DEVELOPMENT
    • CUSTOM SOFTWARE
      • CUSTOM SOFTWARE DEVELOPMENT
      • BOT DEVELOPMENT
  • PRICING
  • ABOUT
    • ABOUT US
    • JOBS
  • LATEST PROJECTS
    • MOBLIE APPS
      • JIGSAW PUZZLE GAME
      • WATCH APP
    • WEBSITE
  • BLOG
    • GAMES BLOG
    • APPS BLOG
    • APP MONETIZING BLOG
    • WEB STANDARDS BLOG
    • MARKETING BLOG
    • SECURITY BLOG
  • CONTACT
    • CONTACT
    • FACEBOOK
    • INSTAGRAM
  • Menu
  • DotNek
  • Tech Blog
  • Apps
  • What are Xamarin.Android GridView and How to create a nice GridView

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

The GridView feature is used to design and display the views of websites and applications more easily and beautifully. In using the GridView feature to design the views of applications and websites
DotNek Software and Mobile App Development
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.

What are Xamarin.Android GridView ?

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

How to create a nice GridView ?

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.

About our Android and iOS app development services

Share with your friends

More from DotNek

Best 5 freelancing income websites

DotNek Software and Mobile App Development
DotNek
Jan 27, 2021

How to create an app for iOS and Android with one code?

DotNek Software and Mobile App Development
DotNek
Aug 07, 2020

What is Google Pigeon Algorithm?

DotNek Software and Mobile App Development
DotNek
Dec 08, 2020

Use the correct image alt & Image title for SEO

DotNek Software and Mobile App Development
DotNek
Oct 03, 2020

SEO principles for optimized content creation

DotNek Software and Mobile App Development
DotNek
Dec 02, 2020

How to win a "Buy Box" in Amazon and increase sales?

DotNek Software and Mobile App Development
DotNek
Nov 02, 2020

Most popular mobile app development mistakes

DotNek Software and Mobile App Development
DotNek
Aug 07, 2020

Duplicate content and its negative effect on SEO

DotNek Software and Mobile App Development
DotNek
Aug 07, 2020

How to start learning Android development

DotNek Software and Mobile App Development
DotNek
Oct 09, 2020

Factors to consider while developing a mobile game

DotNek Software and Mobile App Development
DotNek
Aug 07, 2020

Getting started with Xamarin.Forms and How to Install Xamarin on Visual Studio

DotNek Software and Mobile App Development
DotNek
Apr 01, 2021

What is website security?

DotNek Software and Mobile App Development
DotNek
Apr 18, 2021

How can I protect my children on the Internet?

DotNek Software and Mobile App Development
DotNek
Apr 18, 2021

The best WordPress speed up plugin

DotNek Software and Mobile App Development
DotNek
Jan 28, 2021

What are supported platforms in Xamarin.Forms?

DotNek Software and Mobile App Development
DotNek
Apr 04, 2021


FACEBOOK


LINKEDIN


PINTEREST


TWITTER


VK


INSTAGRAM


RSS


STACK OVERFLOW


TIKTOK


GITHUB


DRIBBBLE


BLOGGER


GOOGLE


MEDIUM


MIX


TUMBLR


REDDIT


YOUTUBE


VIMEO


WHATSAPP


SKYPE


SNAPCHAT


TELEGRAM


FLICKR


FOURSQUARE

© 2021 DotNek s.r.o. Software & Mobile Application Development. All rights reserved. .
Scroll to top