We all know that a lot of IOS menus are from the bottom of the pop-up, this display is still very good, and the ugly Android default box has always been we must abandon, so we Android how to make the corresponding effect of the box. Here’s how to do it.

Dialog_goods_sku_layout.xml is displayed at the bottom

<? The 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="wrap_content"> <RelativeLayout android:id="@+id/top_layout" android:layout_width="match_parent" android:layout_height="90dp" android:elevation="1dp" tools:ignore="UnusedAttribute">  <FrameLayout android:layout_width="match_parent" android:layout_height="75dp" android:background="@android:color/white"  android:layout_alignParentBottom="true" android:paddingStart="120dp"> <LinearLayout android:layout_width="wrap_content"  android:layout_height="wrap_content" android:layout_gravity="bottom" android:paddingBottom="5dp" android:orientation="vertical"> <TextView android:id="@+id/tv_total_price" android:layout_width="wrap_content" Android :layout_height="wrap_content" Android :text="￥88.88" Android :textColor="@color/colorPrimary" android:textSize="16sp" android:textStyle="bold" tools:ignore="HardcodedText,TextViewEdits" /> <TextView android:id="@+id/tv_goods_no" android:layout_width="wrap_content" android:layout_height="wrap_content" Android :visibility="visible" Android :text=" undefined" 888888" tools:ignore="HardcodedText" /> </LinearLayout> </FrameLayout> <android.support.v7.widget.CardView android:id="@+id/cardView" android:layout_width="90dp" android:layout_height="90dp" android:layout_marginEnd="14dp" android:layout_marginStart="20dp" android:layout_marginBottom="5dp" app:cardBackgroundColor="@android:color/white" app:cardCornerRadius="6dp" app:cardElevation="2dp"> <ImageView android:id="@+id/iv_goods" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/aaa" tools:ignore="ContentDescription" /> </android.support.v7.widget.CardView> </RelativeLayout> <android.support.v4.widget.NestedScrollView android:id="@+id/scrollView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/top_layout" android:background="@android:color/white"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginEnd="14dp" android:layout_marginStart="14dp" android:layout_marginTop="100dp" android:orientation="vertical"> </LinearLayout> </android.support.v4.widget.NestedScrollView> <LinearLayout android:id="@+id/bottom_layout" android:layout_width="match_parent" android:layout_height="50dp" android:layout_below="@+id/scrollView" android:orientation="horizontal"> <TextView android:id="@+id/tv_add_shopping_sku" android:layout_width="0dp" Android: layout_height = "match_parent" android: layout_weight = "1" android: alpha = "0.8" Android :background="@color/colorAccent" Android :gravity="center" Android :text=" android:textColor="@android:color/white" tools:ignore="HardcodedText" /> <TextView android:id="@+id/tv_orders_sku" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" Android :background="@color/colorPrimary" Android :gravity="center" Android :text=" android:textColor="@android:color/white" tools:ignore="HardcodedText" /> </LinearLayout> </RelativeLayout>Copy the code

BottomSheetDialog pops up in Java

private void initDialog() { BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this); bottomSheetDialog.setContentView(R.layout.dialog_goods_sku_layout); // Set a transparent background color for the layout, Let images highlight bottomSheetDialog. GetDelegate (). The findViewById (android. Support. The design. R.i d.d esign_bottom_sheet) .setBackgroundColor(getResources().getColor(android.R.color.transparent)); bottomSheetDialog.show(); }Copy the code

It’s a simple two-step process, the top is the layout and the bottom is loading the layout into the BottomSheetDialog. This requires us to introduce the design package.