Android Layouts → Android AnchorSheetBehavior – Camposha

Android Layouts

Android Layouts

Android AnchorSheetBehavior

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 
    
    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

Leave a Reply

Your email address will not be published. Required fields are marked *

Price

Free

Rating

Not enough ratings to display
X