How can I add shadow to ImageButton?

Question

this is my first time posting. And I've been using this website as a great resource. But I have come upon an issue. I've tried applying a shadow effect to my ImageButton but it doest work? What I'm trying to achieve is the shadow you can see on the floating bubble (Material Design). I have a circle ImageButton, but I wish to add a shadow around it. How can I achieve that?

This is circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#C62666"/>
</shape>

This is circle_button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#E92D6C"/>
</shape>

This is my selector which combines both drawable's into one. button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle_button"
        android:state_focused="true"
        android:state_pressed="true" />
    <item android:drawable="@drawable/circle_button_pressed"
        android:state_focused="false"
        android:state_pressed="true" />
    <item android:drawable="@drawable/circle_button_pressed"
            android:state_focused="true" />
    <item android:drawable="@drawable/circle_button"
        android:state_focused="false"
        android:state_pressed="false" />
</selector>

And this is how I apply it to my ImageButton

<ImageButton
           android:id="@+id/btn_apply"
           android:layout_width="68dp"
           android:layout_height="68dp"
           android:layout_alignParentTop="true"
           android:layout_alignRight="@+id/scrollView1"
           android:layout_marginRight="45dp"
           android:layout_marginTop="94dp"
           android:adjustViewBounds="true"
           android:background="@drawable/button"
           android:scaleType="fitCenter"
           android:src="@drawable/apply_two" />

So again? How can I add a shadow to my button? Thanks for your time.

Drisko

use android:elevation="4dp" in imagebutton in android L – Phosphoresce

Related: https://mcmap.net/q/95499/-android-l-fab-button-shadow – Disqualify

Answer 1

you can use a combination of elevation and a background drawable with a shadow. Here's how you can modify your ImageButton to achieve this effect: Firstly, Wrap your ImageButton inside a CardView to take advantage of the elevation property, which automatically adds a shadow.

<androidx.cardview.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="34dp" <!-- it should be half of your button's width or height -->
    app:cardElevation="8dp">

    <ImageButton
        android:id="@+id/btn_apply"
        android:layout_width="68dp"
        android:layout_height="68dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:src="@drawable/apply_two"
        android:background="@null" />
</androidx.cardview.widget.CardView>

Secondly, Make sure to add the CardView dependency in your build.gradle file:

implementation 'androidx.cardview:cardview:1.0.0'

Thirdly, Adjust the layout_width, layout_height, and app:cardCornerRadius values to fit your design. The app:cardCornerRadius should be half of your button's width or height to create a circular shape.

Finally, Remove the android:background="@drawable/button" attribute from your ImageButton to allow the CardView to handle the shadow.

Oliviaolivie