![\"Android](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/Grid-View-1.jpg\")
<\/a><\/p>\nGridView is auto-scrollable. You need not use any ScrollView or NestedScrollView to make the grid scrollable. Whenever there are more items in the grid, you can scroll the grid without using any other view.<\/p>\n
How to create a GridView in Android<\/h3>\n
Creating a GridView involves two steps. Firstly, you need to design the GridView in the layout by using the <GridView> tags. Secondly, you need to insert data items into the grid. You need to use the Android Adapter. Android Adapter helps in getting the content from the data source and then dump into the GridView.<\/p>\n
Below is an example of how you can create a GridView in Android.<\/p>\n
XML Code:<\/strong><\/p>\n Kotlin Code to attach the adapter:<\/strong><\/p>\n The attributes present in the GridView are set properties that are applied to a GridView to style it and add more functionalities to it. Some of the prevalent attributes in GridView are mentioned below.<\/p>\n Sub-Activity is like an activity that opens up when you click on an item present in the GridView. To implement this, we need to add click event listeners to each data item of the GridView. In the implementation of GridView, you will also encounter the way of implementing sub-activity with GridView.<\/p>\n So, now we will see how you can implement GridView in your Android Applications. We will create a food listing application that will have food item pics in the form of a grid.<\/p>\n 1:<\/strong> Run your Android Studio and click on Create a new Project.<\/p>\n 2:<\/strong> Select Empty Activity and then provide your application name. Select Android Lollipop and then proceed.<\/p>\n 3:<\/strong> Now, you need to design your XML layout and add a GridView there. Use the below code to get started with GridView in your layout.<\/p>\n Code: activity_main.xml<\/strong><\/p>\n 4:<\/strong> Now, you need to design an XML layout to apply to each food item in the GridView.<\/p>\n Code: each_food_item.xml<\/strong><\/p>\n 5:<\/strong> Now, you need to create an Adapter class to add the items in GridView. For this you need to right-click on your package name and create a new Kotlin class called \u201cFoodAdapter\u201d.<\/p>\n Code: FoodAdapter.kt<\/strong><\/p>\n 6:<\/strong> Now, you need to create a sub-activity to show the full image of the data item you clicked. For this, you can right-click on the package name and click on new and select an empty activity. Now copy the below codes for your sub-activity.<\/p>\n Code: activity_sub.xml<\/strong><\/p>\n Code: SubActivity.kt<\/strong><\/p>\n 7:<\/strong> After your layout designing and adapter creation are done, you need to add the adapter\u2019s data items. For this, you can use the below code, and your GridView will then connect to the adapter.<\/p>\n Code: MainActivity.kt<\/strong><\/p>\n Now, let\u2019s run the application to see how the output looks. The application displays all the food items in the form of a grid, as shown below.<\/p>\n<GridView\r\n android:background=\"@color\/white\"\r\n android:id=\"@+id\/food_grid_view\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:numColumns=\"2\"\r\n android:horizontalSpacing=\"10dp\"\r\n android:verticalSpacing=\"10dp\"\r\n android:layout_margin=\"10dp\"\/>\r\n<\/pre>\n
\/\/creating the object of the Adapter and passing data and context\r\n val foodAdapter = FoodAdapter(this@MainActivity, foodImages)\r\n\r\n \/\/setting the adapter to our GridView\r\n foodGridView.adapter = foodAdapter\r\n<\/pre>\n
Attributes in Android GridView<\/h3>\n
\n\n
\n Attribute Name<\/b><\/td>\n Description<\/b><\/td>\n<\/tr>\n \n android:id<\/span><\/td>\n The \u201cid\u201d attribute of the GridView is used to identify the view in a pool of many views uniquely.\u00a0<\/span><\/td>\n<\/tr>\n \n android:horizontalSpacing<\/span><\/td>\n The \u201chorizontalSpacing\u201d attribute of GridView is used to provide a distance between the columns.\u00a0<\/span><\/td>\n<\/tr>\n \n android:verticalSpacing<\/span><\/td>\n The \u201cverticalSpacing\u201d attribute of GridView is used to provide a distance between the rows.\u00a0<\/span><\/td>\n<\/tr>\n \n android:gravity<\/span><\/td>\n The \u201cgravity\u201d attribute of the GridView is used to align the grid to the left, right, centre areas.\u00a0<\/span><\/td>\n<\/tr>\n \n android:numColumns<\/span><\/td>\n The \u201cnumColumns\u201d is used to set the count of columns you need in the GridView.\u00a0<\/span><\/td>\n<\/tr>\n \n android:height<\/span><\/td>\n The \u201cheight\u201d attribute is used to set the height of your GridView.<\/span><\/td>\n<\/tr>\n \n android:width<\/span><\/td>\n The \u201cwidth\u201d attribute is used to set the width of your GridView.<\/span><\/td>\n<\/tr>\n \n android:stretchMode<\/span><\/td>\n The \u201cstretchMode\u201d is usually used to fill the space caused by extra data elements.\u00a0<\/span><\/td>\n<\/tr>\n \n android:columnWidth<\/span><\/td>\n The \u201ccolumnWidth\u201d is used to set the width of each of the columns of the grid.\u00a0<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Sub-Activity in Android GridView<\/h3>\n
Implementation of Android GridView<\/h3>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:orientation=\"vertical\"\r\n android:background=\"@color\/white\"\r\n tools:context=\".MainActivity\">\r\n\r\n <TextView\r\n android:id=\"@+id\/title\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginTop=\"20dp\"\r\n android:layout_marginBottom=\"30dp\"\r\n android:text=\"TechVidvan GridView\"\r\n android:gravity=\"center\"\r\n android:textSize=\"30sp\"\r\n android:textColor=\"#009688\"\r\n \/>\r\n <GridView\r\n android:background=\"@color\/white\"\r\n android:id=\"@+id\/food_grid_view\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:numColumns=\"2\"\r\n android:horizontalSpacing=\"10dp\"\r\n android:verticalSpacing=\"10dp\"\r\n android:layout_margin=\"10dp\"\/>\r\n\r\n<\/LinearLayout>\r\n<\/pre>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<com.google.android.material.card.MaterialCardView\r\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n app:cardElevation=\"15dp\"\r\n android:layout_margin=\"10dp\"\r\n app:cardCornerRadius=\"20dp\"\r\n android:backgroundTint=\"@color\/white\"\r\n android:background=\"@color\/white\"\r\n >\r\n\r\n <ImageView\r\n android:layout_width=\"150dp\"\r\n android:layout_height=\"150dp\"\r\n android:layout_gravity=\"center\"\r\n android:id=\"@+id\/food_image_view\"\/>\r\n\r\n<\/com.google.android.material.card.MaterialCardView>\r\n<\/pre>\n
import android.content.Context\r\nimport android.view.LayoutInflater\r\nimport android.view.View\r\nimport android.view.ViewGroup\r\nimport android.widget.BaseAdapter\r\nimport android.widget.ImageView\r\nimport com.techvidvan.techvidvangridview.R\r\n\r\ninternal class FoodAdapter\r\n (\r\n \/\/getting the context and the food images list\r\n \/\/from MainActivity\r\n private val context: Context,\r\n private val foodImages: IntArray\r\n) :\r\n BaseAdapter() {\r\n\r\n \/\/declaring variables\r\n private var layoutInflater: LayoutInflater? = null\r\n private lateinit var foodImageView: ImageView\r\n\r\n override fun getCount(): Int\r\n {\r\n \/\/getting the count of the data items\r\n return foodImages.size\r\n }\r\n override fun getItem(position: Int): Any? {\r\n return null\r\n }\r\n override fun getItemId(position: Int): Long {\r\n return 0\r\n }\r\n override fun getView(\r\n position: Int,\r\n convertView: View?,\r\n parent: ViewGroup\r\n ): View? {\r\n\r\n \/\/creating the view\r\n var foodView = convertView\r\n if (layoutInflater == null) {\r\n\r\n \/\/creating a layout inflater\r\n layoutInflater =\r\n context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater\r\n }\r\n if (convertView == null)\r\n {\r\n foodView = layoutInflater!!.inflate(R.layout.each_food_item, null)\r\n }\r\n\r\n \/\/fetching each image view of the card\r\n foodImageView = foodView!!.findViewById(R.id.food_image_view)\r\n \/\/setting the food pic in each image view\r\n foodImageView.setImageResource(foodImages[position])\r\n\r\n return foodView\r\n }\r\n}\r\n<\/pre>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<androidx.constraintlayout.widget.ConstraintLayout\r\n xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n tools:context=\".SubActivity\">\r\n\r\n <ImageView\r\n android:id=\"@+id\/food_full_image\"\r\n android:layout_width=\"400dp\"\r\n android:layout_height=\"400dp\"\r\n app:layout_constraintBottom_toBottomOf=\"parent\"\r\n app:layout_constraintEnd_toEndOf=\"parent\"\r\n app:layout_constraintStart_toStartOf=\"parent\"\r\n app:layout_constraintTop_toTopOf=\"parent\" \/>\r\n\r\n<\/androidx.constraintlayout.widget.ConstraintLayout>\r\n<\/pre>\n
package com.techvidvan.techvidvangridview\r\n\r\nimport android.os.Bundle\r\nimport android.widget.ImageView\r\nimport androidx.appcompat.app.AppCompatActivity\r\n\r\n\r\nclass SubActivity : AppCompatActivity()\r\n{\r\n \/\/declaring imageView variable\r\n lateinit var foodFullImage:ImageView\r\n override fun onCreate(savedInstanceState: Bundle?)\r\n {\r\n super.onCreate(savedInstanceState)\r\n setContentView(R.layout.activity_sub)\r\n\r\n \/\/fetching the data from the MainActivity Intent\r\n val mIntent = intent\r\n val food_value = mIntent.getIntExtra(\"imageInt\", 0)\r\n\r\n \/\/binding the image view with the variable\r\n foodFullImage = findViewById(R.id.food_full_image)\r\n\r\n \/\/setting up the image on the image view using its resource id\r\n foodFullImage.setImageResource(food_value)\r\n }\r\n}\r\n<\/pre>\npackage com.techvidvan.techvidvangridview\r\n\r\nimport FoodAdapter\r\nimport android.content.Intent\r\nimport android.os.Bundle\r\nimport android.widget.AdapterView\r\nimport android.widget.GridView\r\nimport androidx.appcompat.app.AppCompatActivity\r\n\r\n\r\nclass MainActivity : AppCompatActivity()\r\n{\r\n \/\/declaring the GridView variable\r\n lateinit var foodGridView: GridView\r\n \/\/declaring a list containing images of food items\r\n private var foodImages = intArrayOf(R.drawable.food_pics_1,\r\n R.drawable.food_pics_2,\r\n R.drawable.food_pics_3,\r\n R.drawable.food_pics_4,\r\n R.drawable.food_pics_5,\r\n R.drawable.food_pics_6,\r\n R.drawable.food_pics_7,\r\n R.drawable.food_pics_8,\r\n R.drawable.food_pics_9,\r\n R.drawable.food_pics_10,\r\n R.drawable.food_pics_11,\r\n R.drawable.food_pics_12,\r\n R.drawable.food_pics_13,\r\n R.drawable.food_pics_14,\r\n R.drawable.food_pics_15,\r\n R.drawable.food_pics_16\r\n )\r\n\r\n override fun onCreate(savedInstanceState: Bundle?)\r\n {\r\n super.onCreate(savedInstanceState)\r\n setContentView(R.layout.activity_main)\r\n\r\n \/\/binding the gridView with our created variable\r\n foodGridView = findViewById(R.id.food_grid_view)\r\n\r\n \/\/creating the object of the FoodAdapter\r\n val foodAdapter = FoodAdapter(this@MainActivity, foodImages)\r\n\r\n \/\/setting the adapter to our GridView\r\n foodGridView.adapter = foodAdapter\r\n\r\n \/\/Adding On Click Event Listener to each of the food item pic\r\n foodGridView.onItemClickListener = AdapterView.OnItemClickListener { _, _, position, _ ->\r\n\r\n \/\/creating intent object to sub activity\r\n val myIntent = Intent(this@MainActivity, SubActivity::class.java)\r\n \/\/passing the image resource id to the sub activity\r\n myIntent.putExtra(\"imageInt\", foodImages[position])\r\n \/\/starting the sub activity\r\n startActivity(myIntent)\r\n }\r\n }\r\n}\r\n<\/pre>\n