Bottom sheet component is used for showing content which slides up from bottom. You can see it on Google maps and other e Shopping apps where they show content using bottom sheets.
In this tutorial we are going to implement Bottom Sheet in our project. So let’s starts. You can find details about Bottom sheet here Bottom Sheet
Types of Bottom Sheet
There are two types of bottom sheets, Persistent Bottom Sheet and Modal Bottom Sheet.
- Persistent Bottom Sheet: The Persistent bottom sheet displays in-app content. It will be displayed at the bottom of the screen making some portion of the content visible. When activated it opens the full content. The elevation of the persistent bottom sheet is same as app making it part of the app. Below is the example of persistent bottom sheet of our project. Here we have not showing some portion of content because the need of our project. You can show by changing value of
app:behavior_peekHeight
. - Modal Bottom Sheet: Modal bottom sheets have higher elevation than the app. These usually replaces menus or dialogs. Generally modal bottom sheets used to show deep-linked content from other apps. Below are the examples of modal bottom sheet of our app .

Let’s Create New Project
- Create a new project in Android Studio File–>New–>New Project.
- Enter Application Name, Package Name, Select Empty Activity and click on finish.
Add Dependencies
Open build.gradle file and add support design dependency.
1 |
implementation 'com.android.support:design:26.1.0' |
Add Color and Change Style
- Under values open colors.xml and styles.xml file do changes.
1 2 3 4 5 6 7 8 9 10 11 |
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="loginColor">#ff9900</color> <color name="registerColor">#0099ff</color> </resources> |
Make Rounded Corner EditText and Button
- Right click on drawable folder–>New–>Drawable resource file.
- Write File Name and click Ok.
- We will create 3 Drawable resource file one to make rounded corner of Name, Mobile and password edittext box and for Login button and last for Register button.
- We have to add this file to Background property of edittext box and button.

Drawable resource file Login Button (shape_login_button.xml)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/loginColor" /> <corners android:radius="50dp"> </corners> </shape> |
Drawable resource file Register Button (shape_register_button.xml)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/registerColor" /> <corners android:radius="50dp"> </corners> </shape> |
Drawable resource file EditText (shape_edit_text.xml)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#f2f2f2" /> <corners android:radius="50dp"> </corners> </shape> |
Let’s create one more resource (shape_login_bottom_sheet.xml) file to give rounded shape to our persistence bottom sheet. We will include it to our botton_sheet_login.xml file in background property.
Create Bottom Sheet Layout
Now let’s create layout for Bottom Sheet. Here we are creating two layout Bottom sheet one for Login Form and another for Register Form.
- Create an xml layout under res ⇒ layout named bottom_sheet_login.xml and bottom_sheet_register.xml and add below code. Here few important attributes has to observed.
- app:layout_behavior: This attribute makes the layout act as bottom sheet. The value should be android.support.design.widget.BottomSheetBehavior
- app:behavior_peekHeight: This is the height of the bottom sheet when it is minimized. I don’s want to show bottom sheet so given its value 0dp you can give according to your design.
- app:behavior_hideable: Makes bottom sheet hidden when swiped it down.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="480dp" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" app:behavior_hideable="false" app:behavior_peekHeight="0dp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior" android:padding="20dp"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Welcome Back" android:textColor="@android:color/black" android:textSize="30dp" android:layout_marginBottom="10dp" android:gravity="center"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Create a new account" android:textColor="@android:color/darker_gray" android:textSize="25dp" android:gravity="center" android:layout_marginBottom="20dp"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Name" android:layout_marginBottom="20dp" android:background="@drawable/shape_edit_text" android:padding="12.5dp"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Mobile" android:layout_marginBottom="20dp" android:background="@drawable/shape_edit_text" android:padding="12.5dp"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:background="@drawable/shape_edit_text" android:padding="12.5dp" android:layout_marginBottom="20dp"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/register" android:layout_alignParentBottom="true" android:text="Register" android:textAllCaps="false" android:textColor="@android:color/white" android:background="@drawable/shape_register_button" android:layout_marginBottom="20dp"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Already have an account Login" android:textColor="@color/loginColor" android:textSize="20dp" android:layout_marginBottom="10dp" android:gravity="center"/> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="450dp" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" app:behavior_hideable="false" app:behavior_peekHeight="0dp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior" android:padding="20dp" android:id="@+id/bottom_sheet" android:background="@drawable/shape_login_bottom_sheet"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Welcome Back" android:textColor="@android:color/black" android:textSize="30dp" android:layout_marginBottom="10dp" android:gravity="center"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Login to your account" android:textColor="@android:color/darker_gray" android:textSize="25dp" android:gravity="center" android:layout_marginBottom="20dp"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Mobile" android:layout_marginBottom="20dp" android:background="@drawable/shape_edit_text" android:padding="12.5dp"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:background="@drawable/shape_edit_text" android:padding="12.5dp" android:layout_marginBottom="20dp"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/login" android:layout_above="@id/register" android:text="Login" android:textAllCaps="false" android:textColor="@android:color/white" android:layout_marginBottom="20dp" android:background="@drawable/shape_login_button"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Forgot your password?" android:textColor="@android:color/black" android:textSize="20dp" android:layout_marginBottom="20dp" android:gravity="center"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Don't have an account Sign in" android:textColor="@color/loginColor" android:textSize="20dp" android:layout_marginBottom="10dp" android:gravity="center"/> </LinearLayout> |
- Now include the bottom_sheet_login.xml in your main activity layout. Open layout files of main activity (activity_main.xml) modify as below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true" android:background="@drawable/background" tools:context="com.androidcodefinder.logindesignusingbottomsheet.MainActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:padding="20dp"> <ImageView android:id="@+id/logo" android:layout_width="80dp" android:layout_height="80dp" android:src="@drawable/logo" android:layout_marginBottom="10dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tagline" android:text="one stop destination \nfor electronics goods" android:layout_below="@id/logo" android:textColor="@android:color/white" android:textSize="40dp" android:textAllCaps="true" android:textStyle="bold" android:layout_marginBottom="10dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tagline_1" android:text="a multi brand electronics retail showroom." android:layout_below="@id/tagline" android:textColor="@android:color/white" android:textSize="23dp" android:textAllCaps="false"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/login" android:layout_above="@id/register" android:text="Login" android:textAllCaps="false" android:textColor="@android:color/white" android:layout_marginBottom="10dp" android:background="@drawable/shape_login_button"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/register" android:layout_alignParentBottom="true" android:text="Register" android:textAllCaps="false" android:textColor="@android:color/white" android:background="@drawable/shape_register_button"/> </RelativeLayout> <!-- Include Bottom Sheet Content --> <include layout="@layout/bottom_sheet_login"></include> </android.support.design.widget.CoordinatorLayout> |
Persistent Bottom Sheet
- First create Persistent Bottom Sheet open MainActivity.java class and do the below modifications.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
package com.androidcodefinder.logindesignusingbottomsheet; import android.support.design.widget.BottomSheetBehavior; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.LinearLayout; public class MainActivity extends AppCompatActivity { Button LoginButton,RegisterButton; LinearLayout linearLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); LoginButton = findViewById(R.id.login); RegisterButton = findViewById(R.id.register); //get the bottom sheet view linearLayout = findViewById(R.id.bottom_sheet); //init the bottom sheet view final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(linearLayout); LoginButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED); } }); } } |
If you run the project, you can see the bottom sheet displayed at the bottom. This will be considered as Persistent Bottom Sheet.
Modal Bottom Sheet – BottomSheetDialog and BottomSheetDialogFragment
- Modal Bottom Sheets are not part of view layout like Persistent sheets. Instead, they will be shown dynamically using BottomSheetDialog or BottomSheetDialogFragment. Now let’s see how to implement Modal Bottom Sheets.
- Create a new Fragment from File ⇒ New ⇒ Fragment ⇒ Fragment (Blank) and name it as CustomBottomSheetDialogFragment.java or just a create a class with the same name. Extend this class from BottomSheetDialogFragment.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
package com.androidcodefinder.logindesignusingbottomsheet; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.design.widget.BottomSheetDialogFragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * Created by Sumeet Jain on 28-06-2019. */ public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View v = inflater.inflate(R.layout.bottom_sheet_register, container,false); return v; } } |
Now Final change in MainActivity.java will be.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
package com.androidcodefinder.logindesignusingbottomsheet; import android.support.design.widget.BottomSheetBehavior; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.LinearLayout; public class MainActivity extends AppCompatActivity { Button LoginButton,RegisterButton; LinearLayout linearLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); LoginButton = findViewById(R.id.login); RegisterButton = findViewById(R.id.register); //get the bottom sheet view linearLayout = findViewById(R.id.bottom_sheet); //init the bottom sheet view final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(linearLayout); LoginButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED); } }); RegisterButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { new CustomBottomSheetDialogFragment().show(getSupportFragmentManager(),"Dialog"); } }); } } |
Android Login Screen Design Using Bottom Sheet

Download Complete Project
Subscribe To Our YouTube Channel
Like Us On Facebook
Other Tutorials-
- Facebook Account Kit SMS Authentication for Android
- Android Cascading Spinners Using Php Mysql
- Android Upload Image To Server Using PHP MySql
- Dashboard Design In Android Studio Using CardView Tutorial
- Android Build Intro Slider Using ViewPager
- Splash Screen Android
- Login Screen Using LinearLayout
- Awesome Login Screen Design Using Constraint Layout
- Firebase phone number authentication in android studio