How to make sliding bottom and top panel with gestures in Android java

Question

I would like to do something like this

I would like to make the top panel slide up when I slide my finger up from the white bar at the bottom of it and the other panel slide up when I slide up from the white bar as well.

What would you recommend doing? I mean, what would be the best solution from your POV?

Answer 1

make a layout name bottom_sheet_dialog_layout.xml

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/download"
            android:background="?android:attr/selectableItemBackground"
            android:padding="8dp">
    
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_baseline_cloud_download_24"
                android:layout_margin="8dp"/>
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Download File"
                android:layout_gravity="center_vertical"
                android:padding="8dp"/>
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/shareLinearLayout"
            android:background="?android:attr/selectableItemBackground"
            android:padding="8dp">
    
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_baseline_share_24"
                android:layout_margin="8dp"/>
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Share"
                android:layout_gravity="center_vertical"
                android:padding="8dp"/>
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/uploadLinearLaySout"
            android:background="?android:attr/selectableItemBackground"
            android:padding="8dp">
    
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_baseline_add_to_drive_24"
                android:layout_margin="8dp"/>
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Upload To Google Drive"
                android:layout_gravity="center_vertical"
                android:padding="8dp"/>
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/copyLinearLayout"
            android:background="?android:attr/selectableItemBackground"
            android:padding="8dp">
    
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_baseline_file_copy_24"
                android:layout_margin="8dp"/>
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Copy Link"
                android:layout_gravity="center_vertical"
                android:padding="8dp"/>
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/delete"
            android:background="?android:attr/selectableItemBackground"
            android:padding="8dp">
    
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_baseline_delete_24"
                android:layout_margin="8dp"/>
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Delete File Selection"
                android:layout_gravity="center_vertical"
                android:padding="8dp"/>
        </LinearLayout>
    </LinearLayout>
    

then create a method

       private void showBottomSheetDialog() {
    
        final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);
  LayoutInflater layoutInflater = LayoutInflater.from(context)
        View dialogView = layoutInflater.inflate(R.layout.bottom_sheet_dialog_layout, null)
        bottomSheetDialog.setContentView(dialogView)
       
        bottomSheetDialog.show();
    }

go to activity onCreate method in you button action listener call the method.

    Button mBottton = findViewById(R.id.button);
        mBottton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showBottomSheetDialog()
        }
    });