In this article, we are going to learn how to create BottomSheet Dialog in Android using java.
In the below image you can see that what are we going to build.
Hope so you are interested to know how to make the above BootomSheet Dialog in Android using Java, so now without wasting much time let’s start.
You can also refer our video tutorial for same.
So let’s start with this tutorial :
BottomSheet Dialog in Android
1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and provide a name to your project. choose Empty activity. By default activity name is MainActivity.java.
2. Now to In order to implement BottomSheet Dialog in our App, we need a dependency here. So open build.gradle file and add the below dependency.
implementation 'com.google.android.material:material:1.3.0-alpha02'
3. Now create a new drawable res file by navigating res => drawable => New => Drawable resource file =>button_back.xml and put the below line of codes to make the round corners of button.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#F64141"></solid>
<corners
android:radius="30dp"></corners>
</shape>
4. Now go to your activity_main.xml file and paste the below lines of code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Order now"
android:id="@+id/orderNowBtn"
android:layout_centerInParent="true"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
android:background="@drawable/button_back"
android:textColor="#fff"/>
</RelativeLayout>
5. Now create a new layout res file by navigating res => layout=> New => Layout resource file =>bottom_sheet_dialog.xml and put the below line of codes to make the design for BottomSheet Dialog.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="50dp"
android:src="@drawable/checkmark"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Thankyou for\n your order"
android:gravity="center"
android:textStyle="bold"
android:textColor="#000"
android:textSize="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="You can track the delivery in \nthe order section"
android:gravity="center"
android:textColor="#D86B6B"
android:textSize="16dp"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="Track my order"
android:gravity="center"
android:background="@drawable/button_back"
android:textColor="#fff"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:textSize="16dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Order something else"
android:gravity="center"
android:textStyle="bold"
android:textColor="#000"
android:layout_marginBottom="50dp"
android:textSize="16dp"/>
</LinearLayout>
6. Now go to MainAcitivity.java and just paste the below lines of code to define the functionality of BottomSheet Dialog.
package com.thecodingshef.bottomsheetdialog;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.google.android.material.bottomsheet.BottomSheetDialog;
public class MainActivity extends AppCompatActivity {
Button orderNowbtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
orderNowbtn=findViewById(R.id.orderNowBtn);
orderNowbtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
BottomSheetDialog bottomSheetDialog=new BottomSheetDialog(MainActivity.this); bottomSheetDialog.setContentView(R.layout.bottom_sheet_dialog);
bottomSheetDialog.setCanceledOnTouchOutside(false);
bottomSheetDialog.setDismissWithAnimation(true);
bottomSheetDialog.show();
}
});
}
}
7. Finally, run the app and you will get the output as shown in the demo image.
If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.
Thank you 🙂 Keep Learning !