Android Bottom Sheet
MaterialDialogBottomSheet
Bottom sheets:
A bottom sheet is a sheet of material that slides up from the bottom edge of the screen and presents a set of clear and simple actions.
Bottom sheets are primarily a mobile component.
Usage:
Bottom sheets are best suited to displaying three or more actions that do not require a description. If there are fewer than three actions, or a detailed description is required, consider using a menu or dialog instead.
You can use bottom sheets to show actions related to other apps, or to allow entry points to other apps (via the app icon).
Bottom sheets can be list-style or grid-style. Grid layouts are easier to scan.
MaterialDialogBottomSheet:
MaterialDialogBottomSheet is a custom dialog implementation to use BottomSheet MaterialView feature in pre Lollipop versions.
It can be used with an ease by simply enabling dialog as a BottomSheet without using any library integration.
Now let us see how to make your own custom dialog as follows,
STEP 1: Create an Activity or fragment with Dialog instance and assign bottom sheet custom layout in yoursetContentView of dialog.
MainActivity.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
package takeoffandroid.materialdialogbottomsheet;
import android.app.Dialog;
import android.content.pm.ResolveInfo;
import android.os.Build;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.io.File;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void openBottomSheet (View v) {
View view = getLayoutInflater ().inflate (R.layout.bottom_sheet, null);
TextView txtBackup = (TextView)view.findViewById( R.id.txt_backup);
TextView txtDetail = (TextView)view.findViewById( R.id.txt_detail);
TextView txtOpen = (TextView)view.findViewById( R.id.txt_open);
final TextView txtUninstall = (TextView)view.findViewById( R.id.txt_uninstall);
final Dialog mBottomSheetDialog = new Dialog (MainActivity.this,
R.style.MaterialDialogSheet);
mBottomSheetDialog.setContentView (view);
mBottomSheetDialog.setCancelable (true);
mBottomSheetDialog.getWindow ().setLayout (LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
mBottomSheetDialog.getWindow ().setGravity (Gravity.BOTTOM);
mBottomSheetDialog.show ();
txtBackup.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Clicked Backup",Toast.LENGTH_SHORT).show();
mBottomSheetDialog.dismiss();
}
});
txtDetail.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Clicked Detail",Toast.LENGTH_SHORT).show();
mBottomSheetDialog.dismiss();
}
});
txtOpen.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Clicked Open",Toast.LENGTH_SHORT).show();
mBottomSheetDialog.dismiss();
}
});
txtUninstall.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Clicked Uninstall",Toast.LENGTH_SHORT).show();
mBottomSheetDialog.dismiss();
}
});
}
}
|
activity_main.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#3F51B5"
android:text="Click to open"
android:textColor="@android:color/white"
android:onClick="openBottomSheet"/>
</RelativeLayout>
|
bottom_sheet.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/popup_window"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:background="@android:color/white"
android:padding="10dp"
android:orientation="vertical">
<TextView
android:id="@+id/txt_backup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/export"
android:drawablePadding="15dp"
android:gravity="center_vertical"
android:padding="15dp"
android:text="Backup"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/txt_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/details"
android:drawablePadding="15dp"
android:gravity="center_vertical"
android:padding="15dp"
android:text="Detail"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/txt_open"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/open"
android:drawablePadding="15dp"
android:gravity="center_vertical"
android:padding="15dp"
android:text="Open"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/txt_uninstall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/uninstall"
android:drawablePadding="15dp"
android:gravity="center_vertical"
android:padding="15dp"
android:text="Uninstall"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
|
STEP 2: Assign Dialog style attributes in styles.xml and create an xml animation file in anim folder for BottomSheet(i.e.,Bottom to Top Animation).
styles.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<style name="MaterialDialogSheet" parent="@android:style/Theme.Dialog">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowAnimationStyle">@style/MaterialDialogSheetAnimation</item>
</style>
<style name="MaterialDialogSheetAnimation">
<item name="android:windowEnterAnimation">@anim/popup_show</item>
<item name="android:windowExitAnimation">@anim/popup_hide</item>
</style>
</resources>
|
popup_show.xml
|
1
2
3
4
5
6
7
8
9
10
|
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="100%p"
android:toYDelta="0"
android:duration="300"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>
|
popup_hide.xml
|
1
2
3
4
5
6
7
8
9
10
|
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="0"
android:toYDelta="100%p"
android:duration="300"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>
|
STEP 3: To know further about designing icon and principles for BottomSheet, Please visit the official page of Google.
浙公网安备 33010602011771号