Android Bottom Sheets

Bottom Sheets

Bottom Sheets:

Bottom Sheet is an application where the section slips up from the base of the screen, which optimistically provides extra data or choices.

Commonly, it is used to show additional details, actions, or options in order not to overwhelm the main content or occupy the full screen on an Android application designed according to Material Design Guidelines.

Example:

                                    
                                        <?xml version="1.0" encoding="utf-8"?>
                                        <android.support.design.widget.CoordinatorLayout
                                            xmlns:android="http://schemas.android.com/apk/res/android"
                                            xmlns:tools="http://schemas.android.com/tools"
                                            android:layout_width="match_parent"
                                            android:layout_height="match_parent"
                                            xmlns:app="http://schemas.android.com/apk/res-auto"
                                            tools:context=".BottomSheetExample">
                                        
                                            <LinearLayout
                                                android:layout_width="match_parent"
                                                android:layout_height="match_parent"
                                                android:orientation="vertical"
                                                android:padding="16dp">
                                        
                                                <TextView
                                                    android:id="@+id/textState"
                                                    android:layout_width="match_parent"
                                                    android:layout_height="wrap_content"
                                                    android:text="State"
                                                    android:textColor="@color/colorOrange"
                                                    android:textSize="30sp"
                                                    android:gravity="center"/>
                                        
                                                <Button
                                                    android:id="@+id/b1"
                                                    android:layout_width="match_parent"
                                                    android:layout_height="wrap_content"
                                                    android:text="Expand"
                                                    android:textAllCaps="false"
                                                    android:textColor="@color/colorWhite"
                                                    android:background="@color/colorAccent"
                                                    android:gravity="center"
                                                    android:layout_marginTop="10dp"/>
                                        
                                                <Button
                                                    android:id="@+id/b2"
                                                    android:layout_width="match_parent"
                                                    android:layout_height="wrap_content"
                                                    android:text="Collapse"
                                                    android:textAllCaps="false"
                                                    android:textColor="@color/colorWhite"
                                                    android:background="@color/colorAccent"
                                                    android:gravity="center"
                                                    android:layout_marginTop="10dp"/>
                                        
                                            </LinearLayout>
                                        
                                            <android.support.v4.widget.NestedScrollView
                                                android:id="@+id/bottom_sheet"
                                                android:layout_width="match_parent"
                                                android:layout_height="250dp"
                                                android:background="@color/colorPrimaryDark"
                                                app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
                                                app:behavior_peekHeight="60dp"
                                                app:behavior_hideable="true">
                                        
                                                <TextView
                                                    android:layout_width="match_parent"
                                                    android:layout_height="match_parent"
                                                    android:text="Hey! This is the bottom sheet\n\n where you can expand or collapse bottom sheet by touch events."
                                                    android:textSize="18sp"
                                                    android:padding="16dp"
                                                    android:textColor="@color/colorWhite"
                                                />
                                        
                                            </android.support.v4.widget.NestedScrollView>
                                        
                                        </android.support.design.widget.CoordinatorLayout>

                                    
                                        // Add the following dependency in your app's build.gradle(Module: app)
// implementation 'com.google.android.material:material:1.3.0'

import androidx.annotation.NonNull;
import com.google.android.material.bottomsheet.BottomSheetBehavior;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class BottomSheetExample extends AppCompatActivity {

    TextView textView;
    Button expand, collapse;
    BottomSheetBehavior bottomSheetBehavior;

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

        View bottomsheet = findViewById(R.id.bottom_sheet);
        bottomSheetBehavior = BottomSheetBehavior.from(bottomsheet);

        textView = findViewById(R.id.textState);
        expand = findViewById(R.id.b1);
        collapse = findViewById(R.id.b2);

        expand.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });

        collapse.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
            }
        });

        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View view, int i) {
                switch (i) {
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        textView.setText("Collapsed");
                        break;
                    case BottomSheetBehavior.STATE_EXPANDED:
                        textView.setText("Expanded");
                        break;
                    case BottomSheetBehavior.STATE_HIDDEN:
                        textView.setText("Hidden");
                        break;
                }
            }

            @Override
            public void onSlide(@NonNull View view, float v) {
                textView.setText("Sliding");
            }
        });
    }
}

                                    
                                        // Add the following dependency in your app's build.gradle(Module: app)
// implementation 'com.google.android.material:material:1.3.0'

import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView
import androidx.annotation.NonNull
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomsheet.BottomSheetBehavior

class BottomSheetExample : AppCompatActivity() {

    private lateinit var textView: TextView
    private lateinit var expand: Button
    private lateinit var collapse: Button
    private lateinit var bottomSheetBehavior: BottomSheetBehavior<*>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_bottom_sheet_example)

        val bottomSheet: View = findViewById(R.id.bottom_sheet)
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet)

        textView = findViewById(R.id.textState)
        expand = findViewById(R.id.b1)
        collapse = findViewById(R.id.b2)

        expand.setOnClickListener {
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
        }

        collapse.setOnClickListener {
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
        }

        bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
            override fun onStateChanged(@NonNull view: View, newState: Int) {
                when (newState) {
                    BottomSheetBehavior.STATE_COLLAPSED -> textView.text = "Collapsed"
                    BottomSheetBehavior.STATE_EXPANDED -> textView.text = "Expanded"
                    BottomSheetBehavior.STATE_HIDDEN -> textView.text = "Hidden"
                }
            }

            override fun onSlide(@NonNull view: View, v: Float) {
                textView.text = "Sliding"
            }
        })
    }
}

Output