This is a project that adds anchor state to the android BottomSheetBehavior.
AnchorBottomSheetBehavior extends the Android’s behavior BottomSheetBehavior by adding the following:
STATE_ANCHOR
: push the bottom sheet to an anchor state defined by Anchor offsetSTATE_FORCE_HIDE
: force the bottom sheet to hide regardless of hideable flag
Here’s the demo for this project:
Installation
We are using a third party library so we start by adding an implementation statement to fetch for us the library.
First we go to the root level build.gradle and add jitpack maven repository under the repositories closure as follows:
allprojects { repositories { ... maven { url 'https://jitpack.io' } } }
Then we navigate to the app level build.gradle and add the following under the dependencies:
implementation 'com.github.skimarxall:AnchorSheetBehavior:master-SNAPSHOT'
XML Layouts
(a). activity_main.xml
As expected we have CoordinatorLayout defined at the root of xml layout.
Then we have a clickable TextView which when clicked will toggle the state of our AnchorSheetBehavior.
We will use a FrameLayout as our anchor panel. Inside we will have a textView to contain our content.
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android_layout_width="match_parent" android_layout_height="match_parent"> <TextView android_layout_width="match_parent" android_layout_height="match_parent" android_layout_margin="30dp" android_gravity="center_horizontal" android_onClick="onTap" android_text="Tap me!" android_textSize="25sp" /> <FrameLayout android_id="@+id/anchor_panel" android_layout_width="match_parent" android_layout_height="match_parent" android_background="@color/colorPrimaryDark" app_layout_behavior="com.hardsoftstudio.widget.AnchorSheetBehavior" app_behavior_peekHeight="@dimen/panel_content_height"> <TextView android_id="@+id/panel_content" android_layout_width="match_parent" android_layout_height="@dimen/panel_content_height" android_gravity="center" android_textColor="@android:color/white" android_text="@string/slide_me_up" android_textSize="20sp" /> </FrameLayout> </android.support.design.widget.CoordinatorLayout>
Java Code
(a). MainActivity.java
We start by declaring our AnchorBottomSheetBehavior
and TextView which will hold our data.
Remember we had a clickable textview defined in our layout. When clicked the following method will get invoked:
public void onTap(View view) { switch (anchorBehavior.getState()) { case AnchorSheetBehavior.STATE_ANCHOR: anchorBehavior.setState(AnchorSheetBehavior.STATE_EXPANDED); break; case AnchorSheetBehavior.STATE_COLLAPSED: anchorBehavior.setState(AnchorSheetBehavior.STATE_ANCHOR); break; case AnchorSheetBehavior.STATE_HIDDEN: anchorBehavior.setState(AnchorSheetBehavior.STATE_COLLAPSED); break; case AnchorSheetBehavior.STATE_EXPANDED: anchorBehavior.setState(AnchorSheetBehavior.STATE_ANCHOR); break; default: break; } }
There you can see we have used a switch statement to switch through the various AnchorSheetBehavior
states, setting the appropriate states in the process.
Here’s the full code:
package com.hardsoftstudio.anchorbottomsheet; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.TextView; import com.hardsoftstudio.widget.AnchorSheetBehavior; public class MainActivity extends AppCompatActivity { private AnchorSheetBehavior<View> anchorBehavior; private TextView content; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); content = findViewById(R.id.panel_content); anchorBehavior = AnchorSheetBehavior.from(findViewById(R.id.anchor_panel)); anchorBehavior.setHideable(true); anchorBehavior.setState(AnchorSheetBehavior.STATE_HIDDEN); anchorBehavior.setAnchorSheetCallback(new AnchorSheetBehavior.AnchorSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, @AnchorSheetBehavior.State int newState) { content.setText(newState == AnchorSheetBehavior.STATE_EXPANDED ? R.string.slide_me_down : R.string.slide_me_up); } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { } }); } @Override public void onBackPressed() { int state = anchorBehavior.getState(); if (state == AnchorSheetBehavior.STATE_COLLAPSED || state == AnchorSheetBehavior.STATE_HIDDEN) { super.onBackPressed(); } else { anchorBehavior.setState(AnchorSheetBehavior.STATE_COLLAPSED); } } public void onTap(View view) { switch (anchorBehavior.getState()) { case AnchorSheetBehavior.STATE_ANCHOR: anchorBehavior.setState(AnchorSheetBehavior.STATE_EXPANDED); break; case AnchorSheetBehavior.STATE_COLLAPSED: anchorBehavior.setState(AnchorSheetBehavior.STATE_ANCHOR); break; case AnchorSheetBehavior.STATE_HIDDEN: anchorBehavior.setState(AnchorSheetBehavior.STATE_COLLAPSED); break; case AnchorSheetBehavior.STATE_EXPANDED: anchorBehavior.setState(AnchorSheetBehavior.STATE_ANCHOR); break; default: break; } } }
How to Download and Run
First download the project below.
The download contains both a library as well as code. Just go to the app folder and you find the code for the sample.
Go over to your app level build.gradle and add our implementation statement just as we did in the Installation section.
No. | Resource | Action |
---|---|---|
1. | GitHub | Download |
2. | GitHub | Browse |
3. | Credit | @miguelhincapie |
Greate work indeed ! Can we freely use your anchor sheet behaviour code?