Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/HeyAlex/CornerSheet

Behavior to expand view from corner
https://github.com/HeyAlex/CornerSheet

android-ui animation bottom-sheets bottom-sheets-slide bottomsheet bottomsheet-android corner-sheet

Last synced: 8 days ago
JSON representation

Behavior to expand view from corner

Awesome Lists containing this project

README

        

Corner Sheet


Behavior to make a view expands from corner


## Usage

The usage is similar to [BottomSheetBehavior](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior)
Corner Sheet - behavior that allow you expand a view from corner.

![](https://github.com/HeyAlex/CornerSheet/blob/master/raw/corner_sample_pic.png)
A simple view with behavior in xml will be look like:

```xml

```

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:
```xml

<item name="cornerSizeTopLeft">30dp</item>
<item name="cornerFamily">rounded</item>

```

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 |

![](/raw/behavior_states_sample.png)

There are following api that can be used on `CornerSheetBehavior`:
```kotlin
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":

![](/raw/corner_behavior_sample.gif)

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

```xml

```

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:

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

Add one of the following dependency:

```groovy
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](https://github.com/HeyAlex/CornerSheet/raw/master/raw/app-debug.apk)