Hello.
In this tutorial I will show you how to make a grid layout in your application. You can change number of columns, rows, number of items and all other cool stuff. Pretty handy for things like displaying the images.
Please note that the minimum SDK version must be 21, so take care of it in your build gradle.
Add cardview dependency in your build gradle:
implementation 'com.android.support:cardview-v7:26.1.0'
Next, build layout in your activities xml file:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" android:background="#D3D3D3" android:weightSum="10" tools:context="com.example.bodhi64.virtuozatutorials.MainActivity"> <RelativeLayout android:layout_weight="2" android:layout_width="match_parent" android:layout_height="0dp"> <TextView android:id="@+id/textGrid" android:text="GRID LAYOUT" android:textSize="34sp" android:textColor="#000" android:layout_centerInParent="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> <GridLayout android:id="@+id/mainGrid" android:rowCount="3" android:columnCount="2" android:alignmentMode="alignMargins" android:columnOrderPreserved="false" android:layout_weight="8" android:layout_width="match_parent" android:layout_height="0dp" android:padding="14dp"> <!-- ROW 1 --> <!-- COLUMN 1 --> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="0dp" android:layout_columnWeight="1" android:layout_marginBottom="16dp" android:layout_rowWeight="1" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" app:cardElevation="8dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_gravity="center_horizontal|center_vertical" android:layout_margin="16dp" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/ic_back1" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:textAlignment="center" android:text="Text" android:textColor="#000" android:textSize="18sp" android:textStyle="bold" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v7.widget.CardView> <!-- COLUMN 2 --> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="0dp" android:layout_columnWeight="1" android:layout_marginBottom="16dp" android:layout_rowWeight="1" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" app:cardElevation="8dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_gravity="center_horizontal|center_vertical" android:layout_margin="16dp" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/ic_back2" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:textAlignment="center" android:text="Text2" android:textColor="#000" android:textSize="18sp" android:textStyle="bold" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v7.widget.CardView> <!-- ROW 2 --> <!-- COLUMN 1 --> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="0dp" android:layout_columnWeight="1" android:layout_marginBottom="16dp" android:layout_rowWeight="1" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" app:cardElevation="8dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_gravity="center_horizontal|center_vertical" android:layout_margin="16dp" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/ic_back3" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:textAlignment="center" android:text="Text3" android:textColor="#000" android:textSize="18sp" android:textStyle="bold" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v7.widget.CardView> <!-- COLUMN 2 --> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="0dp" android:layout_columnWeight="1" android:layout_marginBottom="16dp" android:layout_rowWeight="1" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" app:cardElevation="8dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_gravity="center_horizontal|center_vertical" android:layout_margin="16dp" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/ic_back4" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:textAlignment="center" android:text="Text4" android:textColor="#000" android:textSize="18sp" android:textStyle="bold" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v7.widget.CardView> <!-- ROW 3 --> <!-- COLUMN 1 --> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="0dp" android:layout_columnWeight="1" android:layout_marginBottom="16dp" android:layout_rowWeight="1" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" app:cardElevation="8dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_gravity="center_horizontal|center_vertical" android:layout_margin="16dp" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/ic_back5" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:textAlignment="center" android:text="Text" android:textColor="#000" android:textSize="18sp" android:textStyle="bold" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v7.widget.CardView> <!-- COLUMN 2 --> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="0dp" android:layout_columnWeight="1" android:layout_marginBottom="16dp" android:layout_rowWeight="1" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" app:cardElevation="8dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_gravity="center_horizontal|center_vertical" android:layout_margin="16dp" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:src="@drawable/ic_back6" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:textAlignment="center" android:text="Text2" android:textColor="#000" android:textSize="18sp" android:textStyle="bold" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v7.widget.CardView> </GridLayout> </LinearLayout>
You can change number of columns and rows in your layout file by changing android:rowCount and android:columnCount properties of GridLayout.
I used my own images and you need add them yourself, ofc.
Now, we will set click listeners for each element in GridLayout.
In your main activity, copy and paste this code:
import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.CardView; import android.view.View; import android.widget.GridLayout; import android.widget.Toast; public class MainActivity extends AppCompatActivity { GridLayout gridLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gridLayout=(GridLayout)findViewById(R.id.mainGrid); setSingleEvent(gridLayout); } // we are setting onClickListener for each element private void setSingleEvent(GridLayout gridLayout) { for(int i = 0; i<gridLayout.getChildCount();i++){ CardView cardView=(CardView)gridLayout.getChildAt(i); final int finalI= i; cardView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,"Clicked at index "+ finalI, Toast.LENGTH_SHORT).show(); } }); } } }
And that is it. This is how you implement GridLayout in your app. You can see something similar in applications like Instagram. CardView will be represented as an ImageView and you can manipulate everything as you want.
Cheers
Share with your friends