Skip to content

Latest commit

 

History

History
162 lines (120 loc) · 7.72 KB

README.md

File metadata and controls

162 lines (120 loc) · 7.72 KB
Raw

Curved Bottom Sheet

Curved-Waved-Animated BottomSheet 😎

Build Status api jitpack jitpack

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: jitpack

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 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.