Bottom Sheet Dialog in Andriod application .

Bottom Sheet Dialog box :  Bottom Sheet Dialog is a component that slides up from the bottom of the screen. There are two types of bottom sheets Persistant Bottom Sheet and Modal Bottom Sheet.

Persistant Bottom Sheet : This bottom sheet shows in-application content. It will be shown at the base of the screen with a portion of its part noticeable , it shows full substance in the wake of growing it.

Modal Bottom Sheet : This bottom sheet functions as a menu or discourse with choices, it implies this replaces menu or exchange. It has a higher height than the determined base sheet. For the most part, they are utilized for incorporating profound connecting picker activities.

 How to implement bottom sheet dialog box in Android  app ?

Bottom Sheet Dialogs are very commonly used in a lot of applications today.

Here we will be imitating a bottom sheet dialog like the  Whatsapp App that enables us to set the profile name of our profile.

Like this one …

Let’s get started…

First we will design the basic profile layout. The design of this doesn’t matter much as this blog is focused more on the bottom sheet dialog. So to create the base profile layout paste the following code in your activity_main.xml file 

	<?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:id="@+id/nextBtn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentEnd="true"
	android:layout_marginTop="20dp"
	android:text="NEXT"
	android:layout_marginEnd="30dp"
	android:visibility="invisible"/>
	<ImageView
	android:id="@+id/img_view"
	android:layout_width="200dp"
	android:layout_height="200dp"
	android:src="@drawable/acc"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="30dp"/>
	<TextView
	android:id="@+id/textField"
	android:layout_width="match_parent"
	android:layout_height="40dp"
	android:layout_below="@+id/img_view"
	android:layout_marginTop="20dp"
	android:background="@drawable/text_background"
	android:layout_marginStart="30dp"
	android:layout_marginEnd="30dp"
	android:text="Name"
	android:textStyle="bold"
	android:textAlignment="center"
	android:textColor="#000"
	android:textSize="25dp"/>
	</RelativeLayout>

view raw xml hosted with ❤ by GitHub

text_background.xml

	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<solid
	android:color="#94FFFFFF"
	/>
	<stroke android:color="#000"
	android:width="3dp"/>
	<corners android:radius="10dp"/>
	</shape>

view raw xml hosted with ❤ by GitHub

After that we need to create a fragment that will be our bottom sheet dialog fragment. In the bottom_sheet,xml file paste in the following code.

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#FFFFFF">
	<TextView
	android:id="@+id/tv"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="20dp"
	android:layout_marginStart="20dp"
	android:text="Enter your name"
	android:textStyle="bold"
	android:textSize="17sp"
	android:textColor="#fff"
	android:layout_marginEnd="20dp"/>
	<EditText
	android:id="@+id/name_et"
	android:layout_below="@id/tv"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginStart="20dp"
	android:layout_marginEnd="20dp"
	android:layout_marginTop="5dp"
	android:backgroundTint="#fff"/>
	<Button
	android:id="@+id/save_btn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@+id/name_et"
	android:layout_marginTop="20dp"
	android:layout_marginBottom="40dp"
	android:layout_alignParentEnd="true"
	android:text="save"
	android:textColor="#026440"
	android:background="#011910"
	android:layout_marginEnd="40dp"/>
	<Button
	android:id="@+id/cancel_btn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@+id/name_et"
	android:layout_marginTop="20dp"
	android:layout_marginBottom="40dp"
	android:layout_alignParentEnd="true"
	android:text="cancel"
	android:textColor="#026440"
	android:background="#011910"
	android:layout_marginEnd="140dp"/>
	</RelativeLayout>

view raw xml hosted with ❤ by GitHub

Now to handle the functionality of the bottom sheet dialog box, paste the following code in BottomSheet.java file 

	import android.content.Context;
	import android.os.Bundle;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.Button;
	import android.widget.EditText;
	import androidx.annotation.NonNull;
	import androidx.annotation.Nullable;
	import com.google.android.material.bottomsheet.BottomSheetDialogFragment;
	public class BottomSheet extends BottomSheetDialogFragment {
	private BottmSheetListener listener;
	@Nullable
	@Override
	public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
	View v = inflater.inflate(R.layout.bottom_sheet,container,false);
	final EditText etName = v.findViewById(R.id.name_et);
	Button save,cancel;
	save = v.findViewById(R.id.save_btn);
	cancel = v.findViewById(R.id.cancel_btn);
	save.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	String name = etName.getText().toString().trim();
	listener.onButtonClicked(name);
	dismiss();
	}
	});
	cancel.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	dismiss();
	}
	});
	return v;
	}
	public interface BottmSheetListener{
	void onButtonClicked(String userName);
	}
	@Override
	public void onAttach(@NonNull Context context) {
	super.onAttach(context);
	try {
	listener = (BottmSheetListener) context;
	}catch (ClassCastException e){
	throw new ClassCastException(context.toString()
	+" must implement Bottom Sheet");
	}
	}
	}

view raw java hosted with ❤ by GitHub

And finally, in the MainActivity.java file add this code...

	import android.content.Intent;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.Button;
	import android.widget.TextView;
	import androidx.appcompat.app.AppCompatActivity;
	public class MainActivity extends AppCompatActivity implements BottomSheet.BottmSheetListener {
	private TextView nameTv;
	private Button nextBtn;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	nameTv = findViewById(R.id.textField);
	nextBtn = findViewById(R.id.nextBtn);
	nextBtn.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	startActivity(new Intent(getApplicationContext(),ParallaxScroll.class));
	}
	});
	nameTv.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	BottomSheet bottomSheet = new BottomSheet();
	bottomSheet.show(getSupportFragmentManager(),"whatsapp alike");
	bottomSheet.setStyle(BottomSheet.STYLE_NORMAL,R.style.DialogStyle);
	}
	});
	}
	@Override
	public void onButtonClicked(String userName) {
	nameTv.setText(userName);
	}
	}

view raw java hosted with ❤ by GitHub

Output :

 Happy Coding !!