In this tutorial I am going to discuss about bottomsheet android Integration in android application.

Bottom Sheets are views that slide up from the bottom of the screen to reveal more content. Bottom Sheet is an Android component which shows a dismissible view from the bottom of the screen. Bottom Sheets are views that slide up from the bottom of the screen to reveal more content. Bottom Sheet is an Android component which shows a dismissible view from the bottom of the screen.

It is a part of android-support-library. Bottom Sheet can be a nice replacement for dialogs and menus but can hold any view so the use cases are endless. A Bottom Sheet is a sheet of material that slides up from the bottom edge of the screen. Displayed only as a result of a user-initiated action, and can be swiped up to reveal additional content. It is a temporary modal surface or a persistent structural element of an app.

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from templates to implement BottomSheet Behavior to your app .

1. Implement the appcompat and design support library :

Add the appcompat and design support library to your project

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'

Try to add the latest version of the appcompat and design support library . Once that’s done, save the file and perform a Gradle sync.

2. Create a button to your main layout file :

Now we create a button to your main layout file i.e. activity_main.xml of your Main_Activity.java file or just implement the following xml code.

activity_main.xml


<?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:id="@+id/coordinator"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
        <Button
            android:id="@+id/btnbottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Btn"/>
    </LinearLayout>
    <include layout="@layout/bottomdesign"/>

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

3. Create a Layout Resource file :

Now create a Layout Resource file Add a View as a direct child of CoordinatorLayout and named it as bottomdesign.xml . to implement bottomsheet android component.

Apply the behavior by adding the following xml attribute

app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
app:behavior_hideable="true" // whether this bottom sheet can be hidden by dragging it down.
app:behavior_peekHeight="10" //the peek height for the collapsed state.

bottomdesign.xml

<?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="200dp"
    android:id="@+id/bottomdesign"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:background="@android:color/holo_blue_dark" 
 app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    app:behavior_hideable="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Btn1"
            android:layout_centerInParent="true"
            android:layout_toLeftOf="@+id/btn2"
            android:layout_toStartOf="@id/btn2"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:id="@+id/btn1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Btn2"
            android:layout_weight="1"
            android:layout_centerInParent="true"
            android:layout_margin="10dp"
            android:id="@+id/btn2"/>
    </RelativeLayout>

</LinearLayout>

To programatically control the behavior of BottomSheet, we can call the methods to set peekHieght and set state

behavior.setPeekHeight(300);
behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
behavior.setState(BottomSheetBehavior.STATE_EXPANDED); etc.

4. Implement BottomSheet Behavior to your Main_Activty.java :

Now finally open your Main_Activity.java file and implement click Listener to your onCreate method and open your Bottomsheet android through the click listener.

Click Listener :

btn.setOnclickListener(new View.onClickListener(){
	@Override
            public void onClick(View view) {
		if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED){
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                }else{
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                }
	}
});

The View with the BottomSheet Behavior :

final View bottomdesign = (View)findViewById(R.id.bottomdesign);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomdesign);  

bottomSheetBehavior.setBottomSheetCallback(new BottomSheetCallback() {  
   @Override  
   public void onStateChanged(@NonNull View bottomSheet, int newState) {  
     // React to state change  
     Log.e("onStateChanged", "onStateChanged:" + newState);
	
   }  

  @Override  
  public void onSlide(@NonNull View bottomSheet, float slideOffset) {  
     // React to dragging events  
  }  
});

Main_Activity.java

package com.technxtcodelabs.myapplication;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button btnbottom;
    BottomSheetBehavior bottomSheetBehavior;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnbottom = (Button)findViewById(R.id.btnbottom);
        final View bottomdesign = (View)findViewById(R.id.bottomdesign);
        bottomSheetBehavior = BottomSheetBehavior.from(bottomdesign);

        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

        btnbottom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED){
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                }else{
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                }
            }
        });

        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, final int newState) {
                // React to state change

                Log.e("onStateChanged", "onStateChanged:" + newState);
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                // React to dragging events
            }
        });

    }
}

Now run the project/app to add bottomsheetbehavior in android device or any Emulator .

%d bloggers like this: