How to Create a Bottom sheet Dialog on item click in recylear view android Studio with white bottom navigation background

Here we are creating a bottom sheet on item click in recyclear view with bottom sheet white backround as show in image

Step 1: Add Style into style.xml in resources tag

<item name="bottomSheetStyle">@style/BottomSheetstyle</item>

</style>

<item name="android:background">@android:color/transparent</item>

</style>

Step :2 Create an drawable xml file bottom_sheet_layout.xml you can use your own layout with those component

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/bottom_sheet_layout"

style="@style/BottomSheetDialogtheme"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_marginTop="50dp"

android:background="@drawable/background_bottom_sheet"

android:orientation="vertical">

<pl.droidsonroids.gif.GifImageView

android:id="@+id/bottom_sheet_gif"

android:layout_width="match_parent"

android:layout_height="210dp"

android:layout_gravity="center"

android:layout_margin="15dp"

android:background="#00000000" />

<ImageView

android:id="@+id/bottom_sheet_cancle"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_alignParentRight="true"

android:layout_gravity="center"

android:layout_margin="15dp"

android:src="@drawable/ic_baseline_cancel_24"></ImageView>

<TextView

android:id="@+id/bottom_sheet_title"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/bottom_sheet_gif"

android:layout_gravity="center"

android:gravity="center_horizontal"

android:hint="Name"

android:padding="10dp"

android:textColor="@color/color_ex_title"

android:textSize="25dp"

android:textStyle="bold"></TextView>

<View

android:id="@+id/bottom_sheet_view2"

android:layout_width="match_parent"

android:layout_height="2dp"

android:layout_below="@id/bottom_sheet_title"

android:background="@color/colorPrimary"></View>

<LinearLayout

android:id="@+id/bottom_sheet_layout_2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/bottom_sheet_title"

android:gravity="center"

android:orientation="horizontal"

android:padding="5dp">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_margin="5dp"

android:src="@drawable/ic_time"></ImageView>

<TextView

android:id="@+id/bottom_sheet_duration"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_margin="5dp"

android:hint="Duration"

android:textColor="@color/color_ex_times"

android:textSize="18dp"></TextView>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginStart="20dp"

android:layout_marginTop="5dp"

android:layout_marginEnd="5dp"

android:layout_marginRight="5dp"

android:layout_marginBottom="5dp"

android:src="@drawable/ic_times24"></ImageView>

<TextView

android:id="@+id/bottom_sheet_times"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_margin="5dp"

android:hint="Times"

android:textColor="@color/color_ex_times"

android:textSize="18dp"></TextView>

</LinearLayout>

<View

android:id="@+id/bottom_sheet_view1"

android:layout_width="match_parent"

android:layout_height="2dp"

android:layout_below="@id/bottom_sheet_layout_2"

android:background="@color/colorPrimary"></View>

<ScrollView

android:id="@+id/scroll_bar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/bottom_sheet_view1"

android:scrollIndicators="none"

android:scrollbars="none">

<TextView

android:layout_marginBottom="30dp"

android:id="@+id/bottom_sheet_Discription"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Discription"

android:padding="18dp"

android:textColor="@color/color_ex_duration"

android:textSize="18dp"></TextView>

</ScrollView>

</RelativeLayout>

Step :3 paste this function into main activity android studio

private void Bottomsheet_onclcik_item(final int posistion) {

final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this, R.style.BottomSheetDialogtheme);

View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.excersize_bottom_sheet,

(RelativeLayout) findViewById(R.id.bottom_sheet_layout));

bottomSheetDialog.setContentView(view);

ImageView imageViewcancle = bottomSheetDialog.findViewById(R.id.bottom_sheet_cancle);

TextView txttitle = bottomSheetDialog.findViewById(R.id.bottom_sheet_title);

TextView txtduration = bottomSheetDialog.findViewById(R.id.bottom_sheet_duration);

TextView txttimes = bottomSheetDialog.findViewById(R.id.bottom_sheet_times);

TextView txtdiscription = bottomSheetDialog.findViewById(R.id.bottom_sheet_Discription);

txttitle.setText(list_excersizes.get(posistion).getTitle());

txtdiscription.setText(list_excersizes.get(posistion).getDiscription());

txtduration.setText(list_excersizes.get(posistion).getDuration() + " " + getResources().getString(R.string.duration));

txttimes.setText(getResources().getString(R.string.repeat) + " " + list_excersizes.get(posistion).getTimes() + " " + getResources().getString(R.string.times));

bottomSheetDialog.getBehavior().setState(BottomSheetBehavior.STATE_EXPANDED);

Window window = bottomSheetDialog.getWindow();

window.findViewById(com.google.android.material.R.id.container).setFitsSystemWindows(false);

View decorView = window.getDecorView();

decorView.setSystemUiVisibility(decorView.getSystemUiVisibility() | View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);

imageViewcancle.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

bottomSheetDialog.cancel();

}

});

bottomSheetDialog.show();

}

Step :4 Now call this funtion on recylear view on item click and pass position of item

adpter.setOnItemClickListener(new Adpter.OnItemClickListner() {

@Override

public void onItemClick(int posistion) {

Bottomsheet_onclcik_item(posistion);

}

});

AndroidShortCode

Search This Blog