In this tutorial, you will learn how to create a CardView inside a GridLayout.
We are showing image and text in GridLayout style cardview. It means we are using a GridLayout to display the component.
Using gridLayout with cardView you can easily place both photo and text.
CardView makes UI extremely awesome. Because cardView provides properties such as shadow, elevation, radius, and more that make the UI look even more beautiful.
Why does grid layout matter?
There are several advantages to using gridlayout. It’s especially easy to manage the number of column and row.
Now, let’s create GridLayout with Cardview in the Android Studio.
How to create cardview inside GridLayout in android?
Step 1:
Create a new project in Android.
Step 2:
Select an empty activity.
Step 3:
Modify activity_main.xml
The below code uses GridLayout along with a Card View.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:background="#03A9F4"
tools:context=".MainActivity">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="true"
android:padding="25dp"
android:rowCount="5">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img1"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img2"
android:layout_width="120dp"
android:layout_height="116dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/findperscore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img3"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img4"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img5"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img6"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img7"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img8"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img9"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</ScrollView>
In the above code, you can use the cardview widget in a gridlayout to set the image and text. The cardview will become more beautiful.
Here in GridLayout took 2 columns and 5 rows because of row indices mustn’t exceed the row count. You can also specify the layout row and column in the cardview.
You can also change the background color and card view layout, as well as the grid layout, according to your requirements.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#D8CFCE"
android:orientation="vertical"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_height="wrap_content">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="true"
android:rowCount="5">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="120dp"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
android:padding="25dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img1"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
app:cardUseCompatPadding="true"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img2"
android:layout_width="120dp"
android:layout_height="116dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/findperscore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img3"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img4"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img5"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img6"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img7"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img8"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/img9"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_baseline_laptop_24" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF9800"
android:fontFamily="casual"
android:gravity="center"
android:padding="4dp"
android:text="text"
android:textColor="@color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</ScrollView>
</RelativeLayout>
After changing gridlayout and cardview the UI will look like the below.
