Search code examples
androidandroid-layoutkotlinandroid-cardviewandroid-coordinatorlayout

Convert Bottom Sheet Card View to Top Sheet Card View


I was able to create a bottom sheet card view. I am trying convert what I haveto a top sheet card view(when user clicks button, card view should appear from the top, not bottom). Any assistance is appreciated.

SheetBehaviorActivity.kt

class SheetBehaviourActivity : AppCompatActivity() {

    lateinit var sheetBehavior: BottomSheetBehavior<*>

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btn: Button = this.findViewById(R.id.testing_bottom_sheet_btn)

        btn.setOnClickListener {
            if (sheetBehavior.state != BottomSheetBehavior.STATE_EXPANDED) {
                sheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
                btn.text = "Close sheet"
            } else {
                sheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN
                btn.text = "Expand sheet"
            }
        }

        val sheetContainer = findViewById<CardView>(R.id.bottom_sheet_container)

        sheetBehavior = BottomSheetBehavior.from(sheetContainer)
        sheetBehavior.isHideable = true
        sheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN

    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activities.SheetBehaviourActivity">

    <Button
        android:id="@+id/testing_bottom_sheet_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Expand Sheet" />

    <android.support.v7.widget.CardView
        android:id="@+id/bottom_sheet_container"
        android:layout_width="match_parent"
        app:cardCornerRadius="20dp"
        app:cardBackgroundColor="@android:color/holo_blue_light"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:layout_height="300dp"/>

</android.support.design.widget.CoordinatorLayout>

Solution

  • This is TopSheetBehavior implementation topSheetLayout work fine in my case

    Here is how you do it :

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activities.SheetBehaviourActivity">
    
        <Button
            android:id="@+id/testing_bottom_sheet_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Expand Sheet" />
    
        <android.support.v7.widget.CardView
            android:id="@+id/bottom_sheet_container"
            android:layout_width="match_parent"
            app:cardCornerRadius="20dp"
            app:cardBackgroundColor="@android:color/holo_blue_light"
            app:behavior_hideable="true"
            app:behavior_peekHeight="56dp"
            app:layout_behavior="your.package.components.TopSheetBehavior"/>
    
    </android.support.design.widget.CoordinatorLayout>
    

    This TopSheetBehavior is just replacing the behavior parameter