Android Studio - Oval Button with shadow

Question

I have the following code for an oval button and am attempting to add a black shadow to it. I first implemented an oval button and it worked as desired, when I added the <layered-list> it ends up being a completely black oval with the first item not showing on any layers. Any help to make it act as a shadow and appear in layers would be appreciated.

button_round.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
     <layer-list>
         <item>
             <shape android:shape="oval">
                 <solid android:color="@color/colorLightGreen"/>
                <size android:width="90dp" android:height="90dp"/>
             </shape>
         </item>
         <item>
             <shape android:shape="oval">
                 <solid android:color="@color/colorShadowDark"/>
                 <size android:width="150dp" android:height="150dp"/>
             </shape>
         </item>
     </layer-list>
  </item>
</selector>

layout\activity_main.xml:

<Button
    android:id="@+id/start_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_round"
    android:onClick="startNumberGuessing"
    android:text="@string/startNGString"
    app:elevation="10dp"
    app:layout_constraintBottom_toTopOf="@+id/textView"
    app:layout_constraintEnd_toStartOf="@+id/imageView"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    app:layout_constraintVertical_bias="0.714" />

Answer 1

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="40dp"
card_view:cardElevation="3dp"
card_view:cardCornerRadius="2dp"
card_view:cardBackgroundColor="#fff">

you can use card view as a button, by increasing the cardCornerRadius size the corner will be rounded and the cardElevation maintain the shadow of the card.

before using card view please add dependency(use the latest version of dependency)

implement 'com.android.support:cardview-v7:23.3'

this answer may help you to create oval button.

Answer 2

Place light green oval after shadow oval in <layer-list> and use padding to make the shadow oval visible.

Below is the xml code that you can use as its solution.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <solid android:color="@color/colorShadowDark" />
                    <padding android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp" />
                    <size android:width="200dp" android:height="200dp" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="@color/colorLightGreen" />
                </shape>
            </item>

        </layer-list>
    </item>
</selector>

Answer 3

Don't use a shape on your button to this, instead use FloatingActionButton

The following code shows how the FloatingActionButton should appear in your layout file:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@drawable/ic_my_icon"
    android:layout_margin="16dp" />

FloatingActionButton has a oval format and a shadow by default

I hope that help you!