A Persistent Bottom Sheet-Like Instagram Insights | How to Create a Persistent Bottom Sheet in Android Studio

In this blog post, we’re going to create a persistent bottom sheet in android. Nowadays most app using this material design concept in their applications. Before implementing it let’s see what the bottom sheet is.

What is Bottom Sheet?

The android Bottom Sheet component is used to showing the more relevant content that slides up from the bottom. You can notice bottom sheets in apps like Map apps, music players, LinkedIn, etc. The bottom Sheet is the component of the Android Design Support Library.

In android, there are two types of bottom sheets that use most of the time, Persistent Bottom Sheet and Modal Bottom Sheet.

Persistent Bottom Sheet: It shows in-app content. It will display at the bottom of the mobile screen making some amount of the content visible. When activated it opens the full content that means when we slide up the bottom sheet it shows the remaining content of the sheet. Example: Instagram app (which we will make below)

Modal Bottom Sheet: Modal bottom sheets have a higher elevation than the app. These usually replace menus or dialogs in the app, generally, a model bottom sheet is used to show the linked content from other apps. Example: Google Drive app

What you’re looking for

Here I create a bottom sheet dialog that is as like as Instagram Insights page bottom sheet. Demo video:

Add the dependency

In build.gradle

dependencies {
//Material Design
implementation ‘com.google.android.material:material:1.3.0-alpha04’
}

Create the main XML

Now create an action button to show the bottom sheet in the main XML file (/res/layout/activity_main.xml).

<ImageView
android:id=”@+id/bottomSheetDialog”
android:layout_width=”28dp”
android:layout_height=”28dp”
android:src=”@drawable/ic_info”
android:layout_alignParentEnd=”true”
android:layout_centerVertical=”true”
android:layout_marginEnd=”20dp”
android:contentDescription=”@string/app_name”/>

In this imageview we set our bottom sheet.

Create bottom sheet

Now create a new layout file for the bottom sheet (/res/layout/bottom_sheet.xml) and add your fields.

<?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:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/bottomSheetContainer”
app:behavior_hideable=”true”
app:layout_behavior=”com.google.android.material.bottomsheet.BottomSheetBehavior”
android:background=”@drawable/bottom_sheet_back”>
<View
android:layout_width=”30dp”
android:layout_height=”4dp”
android:layout_marginTop=”40dp”
android:background=”@drawable/divider_back”
android:layout_gravity=”center”/>
<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:gravity=”center”
android:padding=”5dp”
android:layout_marginTop=”10dp”
android:text=”@string/your_insights”
android:textColor=”@color/colorPrimaryText”
android:textSize=”18sp”
android:textStyle=”bold”/>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_one”
android:textColor=”@color/colorSecondaryText”
android:textSize=”14sp”
android:layout_marginTop=”20sp”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp” />
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”15dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/overview”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_two”
android:textSize=”14sp”
android:textColor=”@color/colorSecondaryText”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp”
android:layout_marginTop=”10dp”/>
</LinearLayout>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/accounts_reached”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_three”
android:textSize=”14sp”
android:textColor=”@color/colorSecondaryText”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp”
android:layout_marginTop=”10dp”/>
<LinearLayout
android:orientation=”horizontal”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”accounts. This metric is “
android:layout_marginStart=”15dp”
android:textColor=”@color/colorSecondaryText”
android:textSize=”14sp”
android:layout_marginTop=”-4dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”estimated.”
android:textColor=”@color/colorAccent”
android:textSize=”14sp”
android:layout_marginTop=”-4dp”/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Content Interaction”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_four”
android:textSize=”14sp”
android:textColor=”@color/colorSecondaryText”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp”
android:layout_marginTop=”10dp”/>
</LinearLayout>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Total Followers”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_fifth”
android:textSize=”14sp”
android:textColor=”@color/colorSecondaryText”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp”
android:layout_marginTop=”10dp”/>
</LinearLayout>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_marginBottom=”50dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Content You Shared”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”10dp”/>
</LinearLayout>
</LinearLayout>

Add functionality

In the main java file create a hook for the bottom sheet, also initialize our imageview where we need to set the onclick for the bottom sheet.

final ImageView showBottomSheet = findViewById(R.id.bottomSheetDialog);
showBottomSheet.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(
MainActivity.this, R.style.BottomSheetDialogTheme);
View bottomSheetView = LayoutInflater.from(getApplicationContext())
.inflate(R.layout.layout_bottom_sheet,
(LinearLayout)findViewById(R.id.bottomSheetContainer));
bottomSheetDialog.setContentView(bottomSheetView);
bottomSheetDialog.show();
}
});

Source code:

activity_main.xml

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.core.widget.NestedScrollView 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:layout_gravity=”center”
tools:context=”.MainActivity”
android:background=”@color/colorPrimary”>
<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<androidx.appcompat.widget.Toolbar
android:id=”@+id/toolbar”
android:theme=”@style/AppTheme”
android:background=”@color/colorPrimary”
android:layout_width=”match_parent”
android:layout_height=”?attr/actionBarSize”
android:elevation=”5dp”>
<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>
<ImageView
android:id=”@+id/back”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/ic_back”
android:layout_centerVertical=”true”
android:contentDescription=”@string/app_name” />
<TextView
android:id=”@+id/insights”
android:layout_toEndOf=”@id/back”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/insights”
android:textSize=”18sp”
android:textStyle=”bold”
android:layout_centerVertical=”true”
android:layout_marginStart=”30dp”
android:textColor=”@color/colorAccent”/>
<ImageView
android:id=”@+id/bottomSheetDialog”
android:layout_width=”28dp”
android:layout_height=”28dp”
android:src=”@drawable/ic_info”
android:layout_alignParentEnd=”true”
android:layout_centerVertical=”true”
android:layout_marginEnd=”20dp”
android:contentDescription=”@string/app_name”/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>

layout_bottom_sheet.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:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/bottomSheetContainer”
app:behavior_hideable=”true”
app:layout_behavior=”com.google.android.material.bottomsheet.BottomSheetBehavior”
android:background=”@drawable/bottom_sheet_back”>
<View
android:layout_width=”30dp”
android:layout_height=”4dp”
android:layout_marginTop=”40dp”
android:background=”@drawable/divider_back”
android:layout_gravity=”center”/>
<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:gravity=”center”
android:padding=”5dp”
android:layout_marginTop=”10dp”
android:text=”@string/your_insights”
android:textColor=”@color/colorPrimaryText”
android:textSize=”18sp”
android:textStyle=”bold”/>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_one”
android:textColor=”@color/colorSecondaryText”
android:textSize=”14sp”
android:layout_marginTop=”20sp”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp” />
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”15dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/overview”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_two”
android:textSize=”14sp”
android:textColor=”@color/colorSecondaryText”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp”
android:layout_marginTop=”10dp”/>
</LinearLayout>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/accounts_reached”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_three”
android:textSize=”14sp”
android:textColor=”@color/colorSecondaryText”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp”
android:layout_marginTop=”10dp”/>
<LinearLayout
android:orientation=”horizontal”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”accounts. This metric is “
android:layout_marginStart=”15dp”
android:textColor=”@color/colorSecondaryText”
android:textSize=”14sp”
android:layout_marginTop=”-4dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”estimated.”
android:textColor=”@color/colorAccent”
android:textSize=”14sp”
android:layout_marginTop=”-4dp”/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Content Interaction”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_four”
android:textSize=”14sp”
android:textColor=”@color/colorSecondaryText”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp”
android:layout_marginTop=”10dp”/>
</LinearLayout>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Total Followers”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/your_insights_fifth”
android:textSize=”14sp”
android:textColor=”@color/colorSecondaryText”
android:layout_marginStart=”15dp”
android:layout_marginEnd=”15dp”
android:layout_marginTop=”10dp”/>
</LinearLayout>
<View
android:layout_width=”match_parent”
android:layout_height=”0.01mm”
android:layout_marginTop=”10dp”
android:background=”@color/divider”
tools:ignore=”InOrMmUsage” />
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_marginTop=”10dp”
android:layout_marginBottom=”50dp”
android:layout_height=”wrap_content”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Content You Shared”
android:textSize=”16sp”
android:textColor=”@color/colorPrimaryText”
android:textStyle=”bold”
android:layout_marginStart=”15dp”
android:layout_marginTop=”10dp”/>
</LinearLayout>
</LinearLayout>

MainActivity.java

package com.codewithgolap.bottomsheetdialog;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import com.google.android.material.bottomsheet.BottomSheetDialog;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

final ImageView showBottomSheet = findViewById(R.id.bottomSheetDialog);
showBottomSheet.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(
MainActivity.this, R.style.BottomSheetDialogTheme);
View bottomSheetView = LayoutInflater.from(getApplicationContext())
.inflate(R.layout.layout_bottom_sheet,
(LinearLayout)findViewById(R.id.bottomSheetContainer));
bottomSheetDialog.setContentView(bottomSheetView);
bottomSheetDialog.show();
}
});
}
}