Curved Bottom Sheet

Curved-Waved-Animated BottomSheet 😎

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:$latest_version"
}

Note: This project has been migrated to AndroidX at v1.1 by the contribution of @ChintanRathod. If you haven't migrated your project to AndroidX yet, you can use v1.0.2

dependencies {
    implementation "com.github.TayfunCesur:CurvedBottomSheet:1.0.2"
}

Sample Usage

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

    <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android">

        <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="com.google.android.material.bottomsheet.BottomSheetBehavior">
                
                //Your view here
                
     </com.tayfuncesur.curvedbottomsheet.CurvedLayout>
 </androidx.coordinatorlayout.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
                }

Useful Resources

Here is a good article
Online tool to play with it
Great Explanation Video in just 4 min

Here is the all detailed Medium Story

Project Maintained By

Tayfun Cesur

Open-Source Enthusiast | Android Engineer

Greetings

If you have any questions, hit me on Twitter

Licence

Copyright 2019 Tayfun CESUR

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

tayfuncesur / curvedbottomsheet Goto Github PK