Android AnchorSheetBehavior

| Page Views: 40

This is a project that adds anchor state to the android BottomSheetBehavior.

AnchorBottomSheetBehavior extends the Android's behavior BottomSheetBehavior by adding the following:

  1. STATE_ANCHOR: push the bottom sheet to an anchor state defined by Anchor offset
  2. STATE_FORCE_HIDE: force the bottom sheet to hide regardless of hideable flag

Here's the demo for this project:

Android AnchorBottomSheetBehavior

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 xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post