Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android round button with shadow

I am new to android I have a button in my app:

<Button android:elevation="10dp"
        android:id="@+id/btnAddJob"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/round_btn"
        android:drawableLeft="@drawable/plus"
        android:paddingLeft="9dp"
        android:gravity="center"
        android:layout_marginLeft="300dp" />

and the round_btn:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval" android:thickness="24dp" >
        <stroke android:color="@color/colorText" android:width="24dp" />
        <solid android:color="@color/colorText"/>
        <size android:width="150dp" android:height="150dp"/>
    </shape>
</item>

The problem is I want it to have shadow so the button seems higher than other elements. Can anybody help please?

like image 614
Nazila Avatar asked Jul 24 '16 06:07

Nazila


People also ask

What are android shadows?

Shadows are drawn by the parent of the elevated view, and thus subject to standard view clipping, clipped by the parent by default. Elevation is also useful to create animations where widgets temporarily rise above the view plane when performing some action.

How to set Button Corner color in android?

Use the “android:color” attribute on the solid element to set the fill color of the shape to the button color we previously added to the colors. xml file. The corners element is used to apply a specific radius to the corners of the rectangle shape to create round corners.

What is android elevation?

Elevation (Android) Elevation is the relative depth, or distance, between two surfaces along the z-axis. Specifications: Elevation is measured in the same units as the x and y axes, typically in density-independent pixels (dp).


2 Answers

just add material library :

implementation 'com.google.android.material:material:1.2.0-alpha03'

and use MaterialButton :

 <com.google.android.material.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:textStyle="bold"
        app:cornerRadius="20dp" //you can set radius easily
/>
like image 169
mohosyny Avatar answered Sep 28 '22 00:09

mohosyny


round.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="90"
        android:endColor="@color/lgt_button"
        android:startColor="@color/drk_button" />

    <corners android:radius="20dip" />

    <stroke
        android:width="1px"
        android:color="@color/drk_button" />
</shape>

shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/black_alpha" />

    <corners android:radius="20dip" />
</shape>

buttonbordershadow.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/shadow" />

    <item
        android:bottom="4px"
        android:drawable="@drawable/round" />
</layer-list>

set button background

android:background="@drawable/buttonbordershadow"

Source: Rounded button with shadow in Android

like image 34
Ramesh Prajapati Avatar answered Sep 28 '22 00:09

Ramesh Prajapati