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_COLLAPSEDJust 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 jcenter, so you need to add this repository to your root build.gradle:
allprojects {
repositories {
...
jcenter()
}
}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