Android Kotlin onClickListener 似乎隐藏了 MotionLayout 的 OnSwipe

Question

I use MotionLayout to collapse/expand header in toolbar. I want to be able to expand/collapse my header even also by swiping textview R.id.toolbar_title , but now this OnSwipe on main_activity_scene.xml concenring the parent ( R.id.ll_toolbar ) of this TextView R.id.toolbar_title seems to be hidden by onClickListener and this swipe gesture not work on this TextView . But this view is a part of R.id.ll_toolbar so I want this TextView also to be able to swipe.

I hope you understand.

Here is my code:

MainActivity.kt

class MainActivity : AppCompatActivity(), OnChangeFragment {

    private lateinit var toolbarSubtitle: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)

        initToolbarMembers()

        changeFragment(CurrencyListFragment(), ChangeFragmentData())
    }

    override fun changeFragment(fragment: Fragment, changeFragmentData: ChangeFragmentData) {
        if(fragment is SpecificCurrencyFragment) {
            val args = Bundle()
            args.putSerializable(SpecificCurrencyFragment.MAP_DATA_RECEIVE, changeFragmentData.mapOfCurrency)
            args.putString(SpecificCurrencyFragment.DAY_DATA_RECEIVE, changeFragmentData.day)
            fragment.setArguments(args)
        }
        supportFragmentManager.beginTransaction().apply {
            setCustomAnimations(R.anim.fade_in, R.anim.fade_out)
            replace(R.id.fragment_container, fragment)
            addToBackStack(null)
            commit()
        }
        when (fragment) {
            is CurrencyListFragment -> changeToolbarSubtitle("CurrencyListFragment.kt")
            is AboutFragment -> changeToolbarSubtitle("AboutFragment.kt")
            is SpecificCurrencyFragment -> changeToolbarSubtitle("SpecificCurrencyFragment.kt")
        }
    }

    override fun onBackPressed() {
        super.onBackPressed()
        finishAffinity()
    }

    private fun initToolbarMembers() {
        //findViewById<TextView>(R.id.toolbar_title).setOnClickListener { changeFragment(CurrencyListFragment(), ChangeFragmentData()) }
        findViewById<TextView>(R.id.about).setOnClickListener { changeFragment(AboutFragment(), ChangeFragmentData()) }
        toolbarSubtitle = findViewById(R.id.toolbar_subtitle)
    }

    private fun changeToolbarSubtitle(subtitle: String) {
        toolbarSubtitle.text = subtitle
    }
}

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    motion:layoutDescription="@xml/main_activity_scene">

    <ImageView
        android:id="@+id/iv_header"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@mipmap/exchange_rates"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/ll_toolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/teal_700"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="8dp"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintTop_toBottomOf="@+id/iv_header">

        <RelativeLayout
            android:id="@+id/rl_inside_toolbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/toolbar_subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/toolbar_title"
                android:text="fragment"
                android:textSize="12sp"
                android:textStyle="bold" />
        </RelativeLayout>
    </LinearLayout>


    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize" />

    <TextView
        android:id="@+id/about"
        android:layout_width="wrap_content"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center_vertical"
        android:text="ABOUT"
        android:layout_marginEnd="10dp"
        android:textSize="18sp"
        android:visibility="visible"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.motion.widget.MotionLayout>

main_activity_scene.xml

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
       <KeyFrameSet>
           <KeyAttribute
               motion:motionTarget="@+id/about"
               motion:framePosition="0"
               android:alpha="0" />
       </KeyFrameSet>
        <OnSwipe
            motion:touchRegionId="@+id/ll_toolbar"
            motion:touchAnchorId="@+id/iv_header"
            motion:touchAnchorSide="bottom" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:layout_height="1dp"
            android:layout_width="match_parent"
            android:id="@+id/iv_header" />
    </ConstraintSet>
</MotionScene>

Thank you in advance!

Answer 1

I have been working something like this.

I hope useful for you.

for hide or animation in appbar, I used CoordinatorLayout . Ui Architecht is like this:

ProfileFragment:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:fillViewport="true"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <include
                android:id="@+id/profile_include"
                layout="@layout/profile_layout_content" />
        </androidx.core.widget.NestedScrollView>

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.constraintlayout.motion.widget.MotionLayout
                android:id="@+id/profile_header_info"
                android:layout_width="match_parent"
                app:motionDebug="SHOW_PATH"
                android:layout_height="wrap_content"
                android:minHeight="80dp"
                android:background="@color/primary"
                app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"
                app:layoutDescription="@xml/fragment_profile_xml_profile_header_info_scene"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                .....

            </androidx.constraintlayout.motion.widget.MotionLayout>
        </com.google.android.material.appbar.AppBarLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

and for motion xml

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/profile_user_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="24dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toEndOf="@+id/profile_image"
            motion:layout_constraintTop_toTopOf="@+id/profile_image">
        </Constraint>
        <Constraint
            android:id="@+id/profile_user_login"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toTopOf="@+id/profile_user_desc"
            motion:layout_constraintEnd_toEndOf="@+id/profile_user_name"
            motion:layout_constraintStart_toStartOf="@+id/profile_user_name"
            motion:layout_constraintTop_toBottomOf="@+id/profile_user_name">
        </Constraint>
        <Constraint
            android:id="@+id/profile_user_desc"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="@+id/profile_image"
            motion:layout_constraintEnd_toEndOf="@+id/profile_user_login"
            motion:layout_constraintStart_toStartOf="@+id/profile_user_login"
            motion:layout_constraintTop_toBottomOf="@+id/profile_user_login" />
        <Constraint
            android:id="@+id/profile_image"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_marginStart="24dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="16dp"
            android:elevation="10dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.0"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/profile_user_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            motion:layout_constraintStart_toEndOf="@+id/profile_image"
            motion:layout_constraintTop_toTopOf="@+id/profile_image">
            <CustomAttribute
                motion:attributeName="textSize"
                motion:customDimension="10sp" />
        </Constraint>
        <Constraint
            android:id="@+id/profile_user_login"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="@id/profile_user_name"
            motion:layout_constraintStart_toEndOf="@+id/profile_user_name"
            motion:layout_constraintTop_toTopOf="@id/profile_user_name"
            motion:layout_constraintEnd_toEndOf="parent">

            <CustomAttribute
                motion:attributeName="textSize"
                motion:customDimension="8sp" />
        </Constraint>
        <Constraint
            android:id="@+id/profile_user_desc"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="@+id/profile_image"
            motion:layout_constraintEnd_toEndOf="@+id/profile_user_login"
            motion:layout_constraintStart_toStartOf="@+id/profile_user_name"
            motion:layout_constraintTop_toBottomOf="@+id/profile_user_name" />
        <Constraint
            android:id="@+id/profile_image"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:elevation="10dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.0"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <Constraint
            android:id="@+id/profile_header_divider"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginTop="0dp"
            motion:layout_constraintEnd_toEndOf="@+id/profile_user_desc"
            motion:layout_constraintStart_toStartOf="@+id/profile_image"
            motion:layout_constraintTop_toBottomOf="@+id/profile_user_desc" />
        <Constraint
            android:id="@+id/profile_header_company_icon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            motion:layout_constraintStart_toStartOf="@+id/profile_header_divider"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <KeyFrameSet>
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="100"
                motion:motionTarget="@+id/profile_header_divider" />
        </KeyFrameSet>
        <KeyFrameSet>
<!--            <KeyAttribute-->
<!--                android:alpha="0"-->
<!--                motion:framePosition="100"-->
<!--                motion:motionTarget="@+id/profile_user_desc" />-->
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="100"
                motion:motionTarget="@+id/profile_header_company" />
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="100"
                motion:motionTarget="@+id/profile_header_location" />
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="100"
                motion:motionTarget="@+id/profile_header_create_at" />
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="100"
                motion:motionTarget="@+id/profile_header_company_icon" />
            <KeyAttribute
                android:alpha="0.0"
                motion:framePosition="100"
                motion:motionTarget="@+id/profile_header_location_icon" />
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="100"
                motion:motionTarget="@+id/profile_header_create_at_icon" />
        </KeyFrameSet>

        <OnSwipe />

    </Transition>
</MotionScene>

for change app bar size I used this method in fragment:

  private fun coordinateMotion() {
        val appBarLayout: AppBarLayout? = binding.appbarLayout
        val motionLayout: MotionLayout = binding.profileHeaderInfo as MotionLayout

        val p = DecimalFormat("0.0");

        val listener = AppBarLayout.OnOffsetChangedListener { unused, verticalOffset ->
            val seekPosition = -verticalOffset / appBarLayout?.totalScrollRange!!.toFloat()
            motionLayout.progress = seekPosition
            Log.d(TAG, "coordinateMotion: $seekPosition")
        }

        appBarLayout?.addOnOffsetChangedListener(listener)
    }