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:
build.gradle(Module:app)
implementation 'com.android.support:cardview-v7:26.1.0'
Next, build layout in your activities xml file:
activity_main.xml
<?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:
MainActivity.java
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
