Native Mobile App Development With Java

Bottom Sheet Dialog

24-Sep-2024

Bottom Sheet Dialog


1/   Create  A New Project add xml .


<?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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="edit"
android:id="@+id/btnsheet"
android:gravity="center"
android:layout_marginLeft="150dp"
android:layout_marginTop="50dp"/>
</RelativeLayout>



2/   Add a custom xml for botttomsheet_xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/dialog_bg">

<TextView
android:id="@+id/chosetxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25dp"
android:layout_marginTop="5dp"
android:textAlignment="center"
android:textStyle="bold"
android:text="choose"/>

<LinearLayout
android:id="@+id/layouedit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_edit_24"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit"
android:layout_marginLeft="30dp"
android:textSize="19sp"/>

</LinearLayout>

<LinearLayout
android:id="@+id/layoueshare"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_share_24"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Share"
android:layout_marginLeft="30dp"
android:textSize="19sp"/>

</LinearLayout>
<LinearLayout
android:id="@+id/layouupload"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/cloud_upload_24"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Upload"
android:layout_marginLeft="30dp"
android:textSize="19sp"/>

</LinearLayout>

<LinearLayout
android:id="@+id/layouprint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_print_24"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Print"
android:layout_marginLeft="30dp"
android:textSize="19sp"/>

</LinearLayout>



</LinearLayout>

3/  Add sild in and out Animation for bottomsheet




1/  Create A New Project .


1/ in
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromYDelta="100%p"
android:toYDelta="0"
/>

</set>
2/ out 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromYDelta="0"
android:toYDelta="100%p"
/>

</set>

3/  Add this in the themes


<style name="DialogAnimation">
<item name="android:windowEnterAnimation">@anim/slid_in_button</item>
<item name="android:windowExitAnimation">@anim/slid_out_button</item>
</style>

5/  Add your xml  in the  MainAcitivity.class


package com.example.bottomdialog;

import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

Button btnsheet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
btnsheet = findViewById(R.id.btnsheet);
btnsheet.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog();
}
});
}

private void showDialog() {

final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.bottomsheet);

LinearLayout editlayout = dialog.findViewById(R.id.layouedit);
LinearLayout shrelayout = dialog.findViewById(R.id.layoueshare);
LinearLayout uploadlayout = dialog.findViewById(R.id.layouupload);
LinearLayout printlayout = dialog.findViewById(R.id.layouprint);

editlayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

Toast.makeText(MainActivity.this, "Edit is clicked", Toast.LENGTH_SHORT).show();
}
});
shrelayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

Toast.makeText(MainActivity.this, "share is clicked", Toast.LENGTH_SHORT).show();
}
});
uploadlayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

Toast.makeText(MainActivity.this, "upload is clicked", Toast.LENGTH_SHORT).show();
}
});
printlayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

Toast.makeText(MainActivity.this, "print is clicked", Toast.LENGTH_SHORT).show();
}
});

dialog.show();
dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation;
dialog.getWindow().setGravity(Gravity.BOTTOM);

}
}


Comments