riclage/anchor-bottom-sheet-behavior

BottomSheet behavior with collapsed, expanded and anchor states

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.riclage:anchor-bottom-sheet-behavior:0.15-alpha'
	}

	dependencies {
		implementation("com.github.riclage:anchor-bottom-sheet-behavior:0.15-alpha")
	}

	<dependency>
	    <groupId>com.github.riclage</groupId>
	    <artifactId>anchor-bottom-sheet-behavior</artifactId>
	    <version>0.15-alpha</version>
	</dependency>


                            
    libraryDependencies += "com.github.riclage" % "anchor-bottom-sheet-behavior" % "0.15-alpha"


                            
    :dependencies [[com.github.riclage/anchor-bottom-sheet-behavior "0.15-alpha"]]

Readme

AnchorBottomSheetBehavior

An interaction behavior plugin for a child view of CoordinatorLayout to make it work as a bottom sheet with collapsed, expanded and anchored states. Looking for iOS?

AnchorBottomSheetBehavior in action

Usage

Just add the attribute below to the View you want to act as the anchorable bottom sheet.

app:layout_behavior="com.trafi.anchorbottomsheetbehavior.AnchorBottomSheetBehavior"

In a layout file, you could specify it like this.

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <!-- background content -->

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        app:layout_behavior="com.trafi.anchorbottomsheetbehavior.AnchorBottomSheetBehavior">

        <!-- bottom sheet content -->

    </FrameLayout>
        
</android.support.design.widget.CoordinatorLayout>

Or try out the included sample.

Installation

// top-level build.gradle
allprojects {
    repositories {
        // ..
        maven { url 'https://jitpack.io' }
    }
}

// module build.gradle
dependencies {
    // ..
    implementation 'com.trafi:anchor-bottom-sheet-behavior:0.12-alpha'
}

Advanced usage

<FrameLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    app:behavior_anchorOffset="320dp"
    app:behavior_peekHeight="192dp"
    app:behavior_defaultState="collapsed"
    app:layout_behavior="com.trafi.anchorbottomsheetbehavior.AnchorBottomSheetBehavior">

val behavior = AnchorBottomSheetBehavior.from(bottom_sheet)
behavior.state = AnchorBottomSheetBehavior.STATE_EXPANDED
behavior.allowUserDragging = false
behavior.anchorOffset = 200
behavior.peekHeight = 100
behavior.addBottomSheetCallback(object : AnchorBottomSheetBehavior.BottomSheetCallback() {
    override fun onSlide(view: View, offset: Float) {
        // offset == 0f when bottom sheet is collapsed
        // offset == 1f when bottom sheet is expanded
    }
    
    override fun onStateChanged(view: View, state: Int) {
        when (state) {
            AnchorBottomSheetBehavior.STATE_COLLAPSED -> TODO()
            AnchorBottomSheetBehavior.STATE_ANCHORED -> TODO()
            AnchorBottomSheetBehavior.STATE_EXPANDED -> TODO()
        }
    }
})