Android How to used bottom sheet

by · Published · Updated

Hii developer in this Article I am sharing Android development how to used bottom Sheet. Android Bottom Sheet component slides up from the bottom showing more relevant content. You can notice bottom sheets in apps like map apps (bottom sheet reveals location, directions information), music players (Play bar sticks to bottom and opens when swipe up and also open With button click ). The bottom sheet is the component of the android design support library.

Android Different type of  Bottom Sheets

 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 the same as the app making it part of the app. Example  Google Maps app.

Modal Bottom Sheet: The Modal bottom sheets have a higher elevation. These usually replaces menus or dialogs. Generally, modal bottom sheets used to show deep-linked content from other apps. example Google Drive app

Let,s Start to make an Android Bootem Sheet example.

Step 1: Simply create a Project with Activity. create an android activity home and open your java file and XML file. in you XML used Android  android.support.design.widget.CoordinatorLayout. And Create a Bottom_Sheet layout in and add these layout in your main XML file.

Make a bottom_sheet XML layout and Add-in Main XML File.

<?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"
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:orientation="vertical"
    app:behavior_hideable="true"
    app:behavior_peekHeight="50dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <TextView
            android:id="@+id/BottomSheetBtn"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:drawableTop="@drawable/icons_chevron"
            android:gravity="center"
            android:textAppearance="?android:textAppearanceMedium"
            android:textColor="#444"
            android:textStyle="bold" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gree"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/Alarm"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingTop="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_alarm"
            android:text="Alarm"/>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/gree"/>

        <TextView
            android:id="@+id/Timer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingTop="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_seconds"
            android:text="Timer"/>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/gree"/>

        <TextView
            android:id="@+id/Stopwatch"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingTop="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_stopwatch"
            android:text="Stopwatch"/>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/gree"/>

        <TextView
            android:id="@+id/Exercise"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingTop="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_deadlift"
            android:text="Exercise"/>


    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gree"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/Bmr_CalcultBtn"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingTop="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_calculator"
            android:text="BMR Calculator"/>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/gree"/>

        <TextView
            android:id="@+id/Bmi_CalculatBtn"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingTop="10dp"
            android:layout_weight="1"
            android:drawableTop="@drawable/icon_calculator"
            android:text="BMI Calculator"/>

    </LinearLayout>
</LinearLayout>

 Main XML File 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:layout_height="match_parent"
    android:background="#efefef"
    tools:context=".Fregmants_Screen.Step_Counter">


    <include layout="@layout/content_main" />

    <!-- Adding bottom sheet after main content -->
    <include layout="@layout/bottom_sheet" />

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

Main java file code.

in your java file implement the layout and file Id of your bottom sheet item and implement function on these on click listener.

public class Step_Counter extends AppCompatActivity {
TextView AlarmBtn,TimerBtn,StopwatchBtn,ExerciseBtn,Bmi_CalCuletBtn,
BMR_CalCuletBtn;BottomSheetBehavior sheetBehavior;
TextView BottomSheetBtn;

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_step__counter);
  AlarmBtn = (TextView) findViewById(R.id.Alarm);
  TimerBtn  = (TextView) findViewById(R.id.Timer);
  StopwatchBtn = (TextView) findViewById(R.id.Stopwatch);
  ExerciseBtn = (TextView) findViewById(R.id.Exercise);
  MaxValue  = (TextView) findViewById(R.id.MaxValue);
  Bmi_CalCuletBtn =(TextView)findViewById(R.id.Bmi_CalculatBtn);
  BMR_CalCuletBtn =(TextView)findViewById(R.id.Bmr_CalcultBtn);
  LinearLayout layoutBottomSheet =(LinearLayout)findViewById(R.id.bottom_sheet);
  sheetBehavior = BottomSheetBehavior.from(layoutBottomSheet);
  BottomSheetBtn = (TextView)findViewById(R.id.BottomSheetBtn);
BottomSheetBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
            if (sheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
                sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            } else {
                sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
            }
    }
});

/**
 * bottom sheet state change listener
 * we are changing button text when sheet changed state
 * */
sheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        switch (newState) {
            case BottomSheetBehavior.STATE_HIDDEN:
                sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                break;
            case BottomSheetBehavior.STATE_EXPANDED: {

            }
            break;
            case BottomSheetBehavior.STATE_COLLAPSED: {

            }
            break;
            case BottomSheetBehavior.STATE_DRAGGING:
                break;
            case BottomSheetBehavior.STATE_SETTLING:
                break;
        }
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {

    }
});  
}

 

Tags:

You may also like...