Android Material Design: BottomSheetBehavior

BottomSheet is a bottom-action bar from design23.3, and Google’s native software has this effect. Effect:

Google contacts

My own effect:

rendering

There are actually three things about BottomSheet in the sample code:

1, 2, 3, BottomSheetDialog BottomSheetDialogFragment BottomSheetBehavior

So if you want to look like BottomSheet. The first step is to ensure that the imported Design dependency is 23.3 or above.

The compile 'com. Android. Support: design: 26.0.0-1'Copy the code

1, BottomSheetBehavior

• Add to the XML fileapp:layout_behavior="@string/bottom_sheet_behavior"Then control the presentation by controlling the state of the BottomSheetBehavior.

<android.support.design.widget.CoordinatorLayout 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="com.mg.axe.bottomsheetsimple.MainActivity"> <LinearLayout android:id="@+id/llBottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" app:behavior_hideable="false" app:behavior_peekHeight="80dp" app:layout_behavior="@string/bottom_sheet_behavior"> <! - define your own layout - > < / LinearLayout > < / android. Support. The design. The widget. CoordinatorLayout >Copy the code

Code control:

• BottomSheetBehavior BottomSheetBehavior. From (set app:layout_behavior=”@string/bottom_sheet_behavior” view)

BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(linearLayout);
Copy the code

• Control expansion and contraction:

  if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
  } else {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
  }
Copy the code

1.1. Common Attributes and states

• Commonly used attributes

• Commonly used state

Note: The properties and states described above are not perfect. Can go to the official documentation developer.android.com/reference/a… (Remember to climb the wall, civilized Internet)

• State callback

bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, @override public void onSlide(@null View bottomSheet, float slideOffset) {}});Copy the code

2, BottomSheetDialogFragment and BottomSheetDialog

BottomSheetDialogFragment and BottomSheetDialog effects are the same. Both pop up dialogs at the bottom.

2.1, BottomSheetDialogFragment

BottomSheetDialogFragment inherited from DialogFragment and DialogFragment usage. DialogFragment:blog.csdn.net/lmj62356579… The only thing to notice is that the status bar turns black after the Dialog pops up. Solution: blog.csdn.net/maosidiaoxi…

Custom BottomSheetDialogFragment code:

public class MyBottomSheetDialogFragment extends BottomSheetDialogFragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @nullable Bundle savedInstanceState) {// View View = infler.inflate (r.layout.dialog_bottom, container, false); TextView gotit = (TextView) view.findViewById(R.id.gotIt); gotit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dismiss(); }}); return view; } @override public Dialog onCreateDialog(Bundle savedInstanceState) super.onCreateDialog(savedInstanceState); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); } return dialog; }}Copy the code

Usage:

MyBottomSheetDialogFragment dialogFragment = new MyBottomSheetDialogFragment();
dialogFragment.show(getSupportFragmentManager(), "MyBottomSheetDialogFragment");
Copy the code

2.2 BottomSheetDialog

BottomSheetDialog inherits from AppCompatDialog. It’s also very simple to use:

  BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);
  bottomSheetDialog.setContentView(R.layout.dialog_bottom);
  bottomSheetDialog.show();
Copy the code

Note: This is a simple presentation, if complex logic may require a custom BottomSheetDialog

3, the last

Source code address :github.com/AxeChen/Mat… Other Material Design blogs. Android Material Design: commonly used control study notes www.jianshu.com/p/776cc6329… (updated new content) Android Material Design: use the Palette to optimize interface colour collocation www.jianshu.com/p/dfa9aac61…