Post Views: 8,474

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 .

Android Bottom Sheet Step by step tutorial — Android Login Screen Design Using Bottom Sheet

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.

implementation 'com.android.support:design:26.1.0'

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.

<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>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

<?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>

<?xml version="1.0" encoding="utf-8"?>

</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.

android bottom sheet shape — Rounded Corner Edittext and Buttons

Drawable resource file Login Button (shape_login_button.xml)

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"&gt;

    &lt;solid
        android:color="@color/loginColor" /&gt;

    &lt;corners
        android:radius="50dp"&gt;
    &lt;/corners&gt;
    
&lt;/shape&gt;

<?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)

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"&gt;

    &lt;solid
        android:color="@color/registerColor" /&gt;

    &lt;corners
        android:radius="50dp"&gt;
    &lt;/corners&gt;


&lt;/shape&gt;

<?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)

<?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>

<?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.

<?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>

<?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>

<?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>

<?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.

<?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>

<?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>

</android.support.design.widget.CoordinatorLayout>

Persistent Bottom Sheet

First create Persistent Bottom Sheet open MainActivity.java class and do the below modifications.

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);
            }
        });

       
    }
}

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.

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;
    }
}

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.

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");
            }
        });
    }
}

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");

}

});

}

RECENT POST

Leave a Reply Cancel reply

Types of Bottom Sheet

Let’s Create New Project

Add Dependencies

Add Color and Change Style

Make Rounded Corner EditText and Button

Create Bottom Sheet Layout

Persistent Bottom Sheet

Modal Bottom Sheet – BottomSheetDialog and BottomSheetDialogFragment

Android Login Screen Design Using Bottom Sheet

Download Complete Project

Subscribe To Our YouTube Channel

Like Us On Facebook

Other Tutorials-

RECENT POST

Leave a Reply Cancel reply