Last active
October 30, 2018 13:38
-
-
Save cutiko/11ccfb0bf4e7c034cc5da2b3795cbeab to your computer and use it in GitHub Desktop.
Simple template to create an Android Bottom Sheet navigation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| If you get a red underline under the app you can add tools:ignore="MissingPrefix" to get rid off it | |
| or yu can move this whole to another file and use include, see this SO | |
| https://stackoverflow.com/questions/40972522/unexpected-namespace-prefix-app-found-for-tag-relativelayout-android | |
| --> | |
| <FrameLayout 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/bottomSheet" | |
| android:layout_width="match_parent" | |
| android:layout_height="wrap_content" | |
| android:background="@android:color/white" | |
| android:elevation="16dp" | |
| app:behavior_hideable="true" | |
| app:behavior_peekHeight="0dp" | |
| app:layout_behavior="android.support.design.widget.BottomSheetBehavior"> | |
| <!-- | |
| There are several thinks you should be aware here. | |
| First, Im using a FrameLayout as a parent for the fragment cause this way | |
| I can add this .xml file using an include in the parent. And the fragment take of the logic, if it is design or if it is | |
| procedures (xml and Java). | |
| Second, you have to include a background color, otherwise this is transparent, pointless. | |
| Third, coudln't find the elevation in the android material guide for bottom sheet but did found it in the elevation guid | |
| in the general content https://material.google.com/material-design/elevation-shadows.html#elevation-shadows-elevation-android | |
| Fourth, hideable is set to true, so if the user swipe it down it will be not visible, if you set it to false, then swipe | |
| down will lower the view but the peek height will remain visible | |
| Five, behavior_peekHeight is set to 0 that means the user initially can see the bottom sheet and will change state programatically | |
| you can add a peek heigth if needed | |
| And six, this is the key app:layout_behavior="android.support.design.widget.BottomSheetBehavior" what out it you have nothing | |
| One last thing adding an id is always usefull cause that way in the view you can get and change state programatically | |
| --> | |
| <fragment | |
| android:id="@+id/nameOfYourFragment" | |
| android:name="com.yourDomain.yourApp.views.main.bottomSheet.BottomSheetFragment" | |
| android:layout_width="match_parent" | |
| android:layout_height="wrap_content" | |
| tools:layout="@layout/fragment_bottom_sheet" /> | |
| </FrameLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class BottomSheetFragment extends Fragment { | |
| private BottomSheetBehavior sheetBehavior; | |
| public BottomSheetFragment() { | |
| // Required empty public constructor | |
| } | |
| @Override | |
| public View onCreateView(LayoutInflater inflater, ViewGroup container, | |
| Bundle savedInstanceState) { | |
| return inflater.inflate(R.layout.fragment_bottom_sheet, container, false); | |
| } | |
| /*You have to acces the Acitvity view by overriding onActivityCreated otherwise view is not available and it will crash*/ | |
| @Override | |
| public void onActivityCreated(@Nullable Bundle savedInstanceState) { | |
| super.onActivityCreated(savedInstanceState); | |
| FrameLayout bottomSheet = (FrameLayout) getActivity().findViewById(R.id.bottomSheet); | |
| sheetBehavior = BottomSheetBehavior.from(bottomSheet); | |
| } | |
| /*We are not doing nothing with this listener, this method is here to guide you*/ | |
| private void setBottomSheet() { | |
| /*Just a random thought, this is one of the few method I have seen being named Callback...*/ | |
| sheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { | |
| @Override | |
| public void onStateChanged(@NonNull View bottomSheet, int newState) { | |
| if (BottomSheetBehavior.STATE_COLLAPSED == newState) { | |
| //TODO do something | |
| } else { | |
| //TODO do something else | |
| } | |
| } | |
| @Override | |
| public void onSlide(@NonNull View bottomSheet, float slideOffset) { | |
| //TODO do something and tell me about it in the comments, | |
| //cause I have never had the need for this, really! I want to know | |
| } | |
| }); | |
| } | |
| /*This method is not used, it is here for guide you*/ | |
| private void expandBottomSheet() { | |
| /*Some button could trigger this and the bottom sheet would expand*/ | |
| sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED); | |
| /*You can change expand for collapse to do the opposite*/ | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can see a full project here:
https://github.com/cutiko/BottomSheetExample