1

I was looking to create a view like this:
enter image description here
It has the behavior of a button, so I used a ConstraintLayout and placed the image and the TextView ('some text here') on top of the button using constraints (the other text and icon is implemented as button text and icon respectively).

The xml is as follows (inside the constraint layout):

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_plan_change"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:paddingHorizontal="10dp"
            android:paddingVertical="30dp"
            android:text="start now"
            android:textAlignment="viewEnd"
            app:icon="@drawable/ic_chevron_right_black_24dp"
            app:iconGravity="end"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/iv_plan_change"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginHorizontal="10dp"
            android:layout_marginVertical="25dp"
            android:background="@drawable/circle_background"
            android:backgroundTint="?attr/colorPrimary"
            android:elevation="2dp"
            android:padding="10dp"
            android:src="@drawable/ic_money"
            app:layout_constraintBottom_toBottomOf="@id/btn_plan_change"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintStart_toStartOf="@id/btn_plan_change"
            app:layout_constraintTop_toTopOf="@+id/btn_plan_change" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/tv_plan_change"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:elevation="2dp"
            android:gravity="center_vertical"
            android:lineSpacingExtra="5dp"
            android:text="some text here"
            app:layout_constraintBottom_toBottomOf="@+id/btn_plan_change"
            app:layout_constraintStart_toEndOf="@+id/iv_plan_change"
            app:layout_constraintTop_toTopOf="@+id/btn_plan_change" />

As you can see, I have used an elevation of 2dp on both the ImageView and the TextView to keep it on the same elevation as the button, but on pressing the button, both of them go behind the button and can't be seen.
I have experimented with animating translationZ of both both views on button press and release, but it doesn't work so well (sometimes animates later than button, sometimes goes behind it).

I would love to have a working implementation.

Cheticamp
  • 61,413
  • 10
  • 78
  • 131
unc0ded
  • 111
  • 7
  • Interesting and not sure why that is happening. It seems to be an artifact of the button being selected. If focus shifts, the view come back. You can change the elevation of the image view and the text view to `3dp` and be done with it. – Cheticamp Jul 29 '21 at 20:15
  • @Cheticamp I did check the default properties of the button, it translates 6dp in z (on press), which means a total z height of 8dp. However animating the textview and the imageview along with the button does not seem to work out very well (even using the delay and duration values of the animation from button's default state list animator as well). It simply does not work together with the button. – unc0ded Jul 30 '21 at 16:53
  • Have you tried `3dp` for the elevation forgoing the translation? – Cheticamp Jul 30 '21 at 17:00
  • Yeah, does not work. Setting 8dp does work though, but the shadow has to be disabled otherwise it looks weird. – unc0ded Jul 31 '21 at 08:59

0 Answers0