Curved Bottom Sheet

Curved Waved Animated Bottom Sheet.

Outputs

Curved-Bottom-Concave Curved-Bottom-Convex Curved-Top-Concave Curved-Top-Convex Waved

Summary

Curved Bottom Sheet, helps you to display fancy, extraordinary UX with Bottom Sheet Behavior. Even if its name contains Bottom,it also supports Top Sheet.If you bored classic BottomSheet, go on.

Download

This library is available in jitpack, so you need to add this repository to your root build.gradle at the end of repositories:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency:

dependencies {
    implementation 'com.github.TayfunCesur:CurvedBottomSheet:1.0.1'
}

Sample Usage

The sample app has all but if you want quick tip,

    <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <com.tayfuncesur.curvedbottomsheet.CurvedLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/bottom_sheet"
                app:fillColor="@color/colorAccent"
                app:behavior_hideable="false"
                app:behavior_peekHeight="200dp"
                app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
                
                //Your view here
                
     </com.tayfuncesur.curvedbottomsheet.CurvedLayout>
 </android.support.design.widget.CoordinatorLayout>

In your activity or fragment,

CurvedBottomSheet(view = bottom_sheet,
shape = CurvedBottomSheet.Shape.Concave,
location = CurvedBottomSheet.Location.BOTTOM,
type = CurvedBottomSheet.Type.CURVE)
.init()

Parameters

Parameter Type Description
radius float The default value is 180F. This parameter is so important to your curves beauty. In general, you must pass this parameter as your (screen width / 6). If you curios about reason, don't forget to have look at the bottom of page.
shape Enum(Concave,Convex) The default value is Concave. This parameter helps you to decide your shape is convex or concave.
location Enum(TOP,BOTTOM) The default value is BOTTOM.If you want to use TOP, don't forget to pass app:layout_behavior="com.tayfuncesur.curvedbottomsheet.TopSheetBehavior" to your CurvedLayout.
type Enum(CURVE,WAVE) The default value is CURVE. This parameter draws a wave or curve.
callback null The default value is null. This parameter allows you notified while sheet is scrolling.Maybe you want to do some magic works while scrolling. For instance, alpha animation. (It is done in the WavedActivity)

Attributes

Property Type Description
fillColor color The default color is White. This parameter fills your Curved layout background. Don't use backgroundColor property because you don't want to fill whole layout that includes the places outside of curve or wave
showControlPoints boolean The default value is false. This parameters draws points in layout. If you work debug mode,it can help you to determine the your control points.

Clarification

Explanation of app:fillColor Explanation of app:showControlPoints

Bonus Part : Alpha Animation

This bonus part has already implemented in WavedActivity

If you pass the Callback parameter to CurvedBottomSheet, you gonna have

            object : Callback {
                override fun onSlide(p0: View, p1: Float) {
                    // Here you can play alpha with p1 value. 
                    contentLayout.alpha = p1
                    dolphinLayout.alpha = 1 - p1
                }

GitHub