How to adjust size imageview based on bottomsheet behavior?

Question

I've created an application with logo (imageview) and bottom sheet in there, when bottomsheet is up then the logo will move. But i want to make if bottomsheet up the changes not only move but the logo also change it size to be a big size, and when bottomsheet is down then the size of the logo back to the normal size, anyone can help me?

like this design of figma

This is my code xml right now the imageview just move not resize

<androidx.coordinatorlayout.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"
    android:background="@drawable/background"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/sheet"
        android:layout_width="match_parent"
        android:layout_height="450dp"
        android:background="@drawable/rounded"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        app:layout_insetEdge="bottom">

        <ImageView
            android:layout_width="60dp"
            android:layout_height="7dp"
            android:layout_gravity="center|top"
            android:layout_marginTop="16dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_baseline_remove_24" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="29dp"
                android:layout_marginTop="55dp"
                android:fontFamily="sans-serif-medium"
                android:text="Let’s Get \nStarted"
                android:textColor="@color/red"
                android:textSize="48sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:letterSpacing="0.015"
                android:text="Share your story here and get inspiration, \nmotivation, passion, and new friends."
                android:textSize="14sp"
                app:layout_constraintStart_toStartOf="@+id/textView"
                app:layout_constraintTop_toBottomOf="@+id/textView" />

            <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/btn_join"
                android:layout_width="335dp"
                android:layout_height="39dp"
                android:layout_marginTop="41dp"
                android:background="@drawable/button_rounded"
                android:text="Join Now"
                android:textAllCaps="false"
                android:textColor="@color/white"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView2" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="32dp"
                android:text="Already have an account? "
                android:textAlignment="center"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="@+id/btn_join"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/btn_join" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Login"

                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="@+id/textView3"
                app:layout_constraintStart_toEndOf="@+id/textView3"
                app:layout_constraintTop_toTopOf="@+id/textView3" />


        </androidx.constraintlayout.widget.ConstraintLayout>

    </FrameLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="219dp"
        android:layout_gravity="center"
          app:layout_dodgeInsetEdges="bottom">

        <ImageView
            android:id="@+id/love"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:src="@drawable/love"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.497"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.319" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

thankyou

score 0 · Answer 1 · answered Oct 19 '22 at 01:01

0

Track the event when bottomsheet is accessed and animate the view size for the image accordingly.

Here, You can get help with animating the view size.

answered Oct 19 '22 at 01:01

Arsh

279
2
6

How to adjust size imageview based on bottomsheet behavior?

1 Answers1