Corner Sheet

Behavior to make a view expands from corner

Usage

The usage is similar to BottomSheetBehavior Corner Sheet - behavior that allow you expand a view from corner.

A simple view with behavior in xml will be look like:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/corner_behavior_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:backgroundTint="@color/colorPrimary"
            app:behavior_expanded_width="175dp"
            app:behavior_horizontal_peekHeight="94dp"
            app:behavior_peekHeight="60dp"
            app:layout_behavior="com.github.heyalex.cornersheet.behavior.CornerSheetBehavior"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.CornerShape"
            tools:ignore="MissingPrefix">

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:title="Corner Sample"
                app:titleTextColor="@android:color/white" />

        </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

You can use the following attributes on view with CornerSheetBehavior.

Properties	Type	Default
behavior_horizontalExpandingRatio	float	0.2f
behavior_expanded_width	dimension	0dp
behavior_horizontal_peekHeight	dimension	0dp

Customize corner shape with shapeAppearanceOverlay attribute:

 <style name="ShapeAppearanceOverlay.CornerShape" parent="">
        <item name="cornerSizeTopLeft">30dp</item>
        <item name="cornerFamily">rounded</item>
 </style>

There are 3 state of CornerSheetBehavior:

State	Description
CornerSheetBehavior.STATE_EXPANDED	expanded horizontally on behavior_expanded_width value
CornerSheetBehavior.STATE_COLLAPSED	expanded horizontally on behavior_horizontal_peekHeight value
CornerSheetBehavior.STATE_HIDDEN	hide horizontally

There are following api that can be used on CornerSheetBehavior:

behavior.expandingRatio = 0.5f
behavior.horizontalState = CornerSheetBehavior.STATE_EXPANDED
behavior.expandedWidth = 170.dp()
behavior.setHorizontalPeekHeight(60.dp(), animate = true) //will be animated if horizontal state is CornerSheetBehavior.STATE_COLLAPSED

Just check app module with "Behavior Sample":

There is also an option to use a view that can contain a header and content:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.github.heyalex.CornerDrawer
        android:id="@+id/corner_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        app:behavior_horizontal_peekHeight="58dp"
        app:content_color="@color/corner_drawer_content_color"
        app:content_view="@layout/content_layout"
        app:header_color="@color/corner_drawer_header_color"
        app:header_view="@layout/header_layout"
        app:layout_behavior="com.github.heyalex.cornersheet.behavior.CornerSheetHeaderBehavior"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.CornerShape" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

With CornerDrawer you don't need to set behavior_peekHeight and behavior_expanded_width, they will be assigned automatically when header_view will be inflated.

You can use an attributes on behavior that described below and a following attributes on CornerDrawer

Properties	Type	Default
header_view	reference	-1
header_color	reference	#FFF
content_view	reference	-1
content_color	reference	#FFF

The main preview is done with CornerDrawer, just check app module with "Support Sample"

Integration

This library is available on mavenCentral, so you need to add this repository to your root build.gradle:

allprojects {
    repositories {
        ...
        mavenCentral()
    }
}

Add one of the following dependency:

dependencies {

    //only CornerSheetBehavior
    implementation 'com.github.heyalex.cornersheet:core:v1.0.1'

    //CornerSheetBehavior and CornerDrawer
    implementation 'com.github.heyalex.cornersheet:drawer:v1.0.1'
}

Samples

You can find sample in app module, to understand functionality of library or just get an APK here