How to create a floating action button (FAB) in android, using AppCompat v21?



I would like to create a floating action button (to add items to a listview), like google calendar, maintaining compatibility with pre-lollipop Android versions (before 5.0).


I created this layout:


Activity main_activity.xml:



<LinearLayout ... >

<include
layout="@layout/toolbar"/>

<RelativeLayout ... >

<!-- My rest of the layout -->

<!-- Floating action button -->
<ImageButton style="@style/AppTheme"
android:layout_width="60dp"
android:layout_height="60dp"
android:text="New Button"
android:id="@+id/button"
android:src="@drawable/ic_fab"
android:background="@drawable/fab"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="24dp"
android:layout_marginRight="24dp"/>

</RelativeLayout>

</LinearLayout>


Drawable fab.xml:



<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://ift.tt/nIICcg"
android:shape="oval">
<solid android:color="#ffa48bc0"/>
</shape>


Style styles.xml



<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#ff1d79b1</item>
<item name="colorPrimaryDark">#ff084d95</item>
</style>
</resources>


The result is similar, but there isn't the shading, a characteristic of material design:


Calendar's floating action button:


Calendar's floating action button


My app's floating action button:


My app's floating action button


How can I add the shading to my button?


I have already used the attribute elevation, but does not work


No comments:

Post a Comment