How to add Image above ImageButton when It has elevation

Question

I have an interesting problem, I have a ImageButton(without elevation) and I put an image above ImageButton. And it's looks like;

But if I set elevation to the ImageButton(cd image) the green circle going to ImageButton's behind. Image with elevation;

Anybody knows why and how do I solve this? I couldn't figure out this problem. Thanks to everybody and here is my XML code;

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="@dimen/preset_share_button_width"
    android:layout_height="@dimen/preset_share_button_height"
    android:layout_marginBottom="50dp"
    android:layout_marginStart="32dp"
    android:adjustViewBounds="false"
    android:background="@drawable/preset_share_icon_background"
    android:cropToPadding="false"
    android:elevation="6dp"
    android:scaleType="centerInside"
    android:src="@drawable/add_tone"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/imageButton3"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:background="@drawable/tick_background"
    android:scaleType="center"
    android:src="@drawable/tick_icon"
    app:layout_constraintBottom_toTopOf="@+id/imageButton2"
    app:layout_constraintEnd_toEndOf="@+id/imageButton2"
    app:layout_constraintStart_toEndOf="@+id/imageButton2"
    app:layout_constraintTop_toTopOf="@+id/imageButton2" />

<TextView
    style="@style/defaultText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="Add Tone"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/imageButton2"
    app:layout_constraintHorizontal_bias="0.555"
    app:layout_constraintStart_toStartOf="@+id/imageButton2"
    app:layout_constraintTop_toBottomOf="@+id/imageButton2" />

I think It's not about elevation value I tried but didn't worked. Thanks anyway. — tpbafk, Jun 25 '18 at 13:29
I just tried in my code, This is an elevation issue. I set elevation to second image (Green Checkmark) same or higher than 1st image(CD Image). It worked. — Chirag Savsani, Jun 25 '18 at 13:33
I didn't saw **second Image** that you wrote and now I tried and worked I'm sorry for my hasty behavior and thank you so much. — tpbafk, Jun 25 '18 at 13:35

score 0 · Answer 1 · answered Jun 25 '18 at 13:53

Change the ImageButton below ImageView Like this.

    <ImageView
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:background="@drawable/tick_background"
        android:scaleType="center"
        android:src="@drawable/tick_icon"
        app:layout_constraintBottom_toTopOf="@+id/imageButton2"
        app:layout_constraintEnd_toEndOf="@+id/imageButton2"
        app:layout_constraintStart_toEndOf="@+id/imageButton2"
        app:layout_constraintTop_toTopOf="@+id/imageButton2" />

<ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="@dimen/preset_share_button_width"
        android:layout_height="@dimen/preset_share_button_height"
        android:layout_marginBottom="50dp"
        android:layout_marginStart="32dp"
        android:adjustViewBounds="false"
        android:background="@drawable/preset_share_icon_background"
        android:cropToPadding="false"
        android:elevation="6dp"
        android:scaleType="centerInside"
        android:src="@drawable/add_tone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageButton3"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        style="@style/defaultText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Add Tone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/imageButton2"
        app:layout_constraintHorizontal_bias="0.555"
        app:layout_constraintStart_toStartOf="@+id/imageButton2"
        app:layout_constraintTop_toBottomOf="@+id/imageButton2" />

How to add Image above ImageButton when It has elevation

1 Answers1