Search code examples
androidkotlinviewbinding

How to use 2 view binding in one activity and bottom sheet behavior

There are 2 xms layouts of my demo:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:orientation="vertical"
        android:gravity="center"
        android:layout_marginBottom="100dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/expand"
            android:text="expand"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/collapse"
            android:text="collapse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <include
        layout="@layout/item_bottom_sheet" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

item_bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/bottom_sheet_behavior"
    android:background="#A39A9A"
    app:behavior_hideable="true"
    android:id="@+id/bottom_sheet">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Save Record?"
        android:textColor="@color/black"
        android:layout_marginTop="23dp"
        android:textSize="25sp"
        android:textAlignment="center"/>

    <LinearLayout
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp">
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnCancel"
            android:text="CANCEL"
            android:backgroundTint="#34B130"
            android:textColor="@color/black"
            android:layout_marginEnd="30dp"
            android:layout_width="120dp"
            android:layout_height="60dp"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnOk"
            android:text="OK"
            android:backgroundTint="#172A91"
            android:textColor="@color/white"
            android:layout_marginStart="30dp"
            android:layout_width="120dp"
            android:layout_height="60dp"/>
    </LinearLayout>

</LinearLayout>

And this is MainActivity :

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    private lateinit var bottomSheetBinding: ItemBottomSheetBinding
    private lateinit var bottomSheetBehavior: BottomSheetBehavior<*>
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(LayoutInflater.from(this))
        setContentView(binding.root)

        bottomSheetBinding = ItemBottomSheetBinding.inflate(LayoutInflater.from(this), binding.root, true)

        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetBinding.bottomSheet)

        bottomSheetBehavior.peekHeight = 0
        bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED


        binding.expand.setOnClickListener {
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
        }


        binding.collapse.setOnClickListener {
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
        }
        
        
        bottomSheetBinding.btnCancel.setOnClickListener {
            Toast.makeText(this, "xczc", Toast.LENGTH_SHORT).show()
        }
    }
}

If I use findviewbyid instead bottomSheetBinding then the app result is like I expect, but iI want to use viewBinding and when I run the app then the result will be : enter image description here

I have tried many ways but I unable to get the expected result. Please help me.

Solution

  • you have created the bottomSheet layout twice:

    first time by including it in the xml layout:

    <include layout="@layout/item_bottom_sheet"/>

    the second time when inflate it:

    bottomSheetBinding = ItemBottomSheetBinding.inflate(LayoutInflater.from(this), binding.root, true)

    but, when you use findviewbyid it works as the layout created only once.

    first solution:

    change it to

    bottomSheetBinding = ItemBottomSheetBinding.bind(binding.bottomSheet)

    second solution:

    remove this line from xml <include layout="@layout/item_bottom_sheet"/>

    i think the second solution is the best as you could attach the bottom sheet to any layout you want programmatically in easy way