Android L Raised Normal Button

Question

I've been hunting high and low for a way to get a "raised" rounded rectangular button without completely doing it myself using backgrounds and a custom view. I want buttons like this:

I thought this would do it:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MyActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter the Danger Zone"
        android:id="@+id/btn"
        android:elevation="8dp" <!-- Here -->
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"/>

</RelativeLayout>

But this does nothing. The button looks the same. WTF?

And yes, I'm using the latest SDK, etc. etc.

Edit: So I added a translationZ. Now, a shadow appears as the activity is opening, but disappears when the animation is done. ???

My apologies for my earlier comment -- I was interrupted and couldn't complete it. What I was aiming for was that `android:elevation` *should* be controlling this, and I was going to ask if you were using `appcompat-v7` or the native API Level 21 `Theme.Material` and kin. However, I can reproduce your problem using `Theme.Material.Light`, and I can't explain it. — CommonsWare, Nov 22 '14 at 01:33
In theory, yes, but, in theory, it should be working now. I have asked [a related question](http://stackoverflow.com/questions/27080338/android-5-0-androidelevation-works-for-view-but-not-button), using the `ElevationBasic` SDK sample, which also exhibits this apparently-broken behavior. — CommonsWare, Nov 22 '14 at 17:33

score 1 · Answer 1 · answered Nov 21 '14 at 21:41

1

Try adding state list animator:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_enabled="true"
    android:state_pressed="true">
    <set>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="8dp"
            android:valueType="floatType" />
    </set>
</item>
<item>
    <set>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="2dp"
            android:valueType="floatType" />
    </set>
</item>
</selector>

answered Nov 21 '14 at 21:41

IuriiO

611
7
13

like so: @anim/btn_anim (or directly on your button, if you're not using styles). – IuriiO Nov 21 '14 at 21:42
However, I hope there is a more elegant way of doing this. – Charles Nov 22 '14 at 00:17
2

@Charles: `android:stateListAnimator="@null"` will remove the stock `StateListAnimator`, allowing `android:elevation` to work. – CommonsWare Nov 24 '14 at 23:10

score 1 · Answer 2 · edited Apr 06 '16 at 08:44

1

I had a similar problem i thought was due to wrongly inflated layouts, but it appeared that adding clipToPadding did the trick. This must be set to the parent ViewGroup containing the view you want to cast a shadow.

<YourParentLayout
...
android:clipToPadding="false"
...

also if your view has no background, use android:outlineProvider="bounds"

edited Apr 06 '16 at 08:44

Michaël Azevedo

3,874
7
31
45

answered Apr 06 '16 at 08:20

Stefan Bushev

111
1
3

Android L Raised Normal Button

2 Answers2

Linked