Friday, 5 June 2015

Adding Floating action button from Android design support library



Google released the Android design support library last weekend. It comes with some nice features to work Material design principles. Here I am going to explain how to use the Floating action button.

The source code of this project could be found here:
https://github.com/jiahaoliuliu/MaterialDesignSample/tree/floatingActionButton

1. Integration
To integrate the library to our project, we just have to add the follow line to our build.gradle file:

compile 'com.android.support:design:22.2.0'

2. Adding the icon to the layout
Once the project has been synchronised, it is ready to add the icon. Here is an example of layout:

<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"
    tools:context=".MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_my_location_white_24dp"
        />
</RelativeLayout>

There two important things:
1. The main layout must be RelativeLayout, a layout which extends from it or any layout which uses layers. The FloatingActionButton must be the last element in the layout. This is because by using layers, one above the another, the order they are written in the XML file determines the superposition of the elements. This is, the last element is always the one on the top.

2. FloatingActionButton has been extended from ImageView, so it accepts src as parameters. To make the life easier, Google has released a set of icons that could be useful. They could be find here:

Just download the project and use the color and the size you like most.

3. Changing the color of the icon (Optional)
By default, the floating action button get the color from the accent color in the style. In my case, I am using Indigo. For more colours, check the Google design guide for colours.

To do so, the first thing is add the colours and the styles in the resources:
<resources>
    <!-- Base application theme. -->
    <style name="Indigo" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
    </style>

    <!-- Indigo -->
    <color name="primary">#3F51B5</color>
    <color name="primary_dark">#303F9F</color>
    <color name="accent">#FF4081</color>
    <color name="text_primary">#D9FFFFFF</color>
    <color name="text_secondary">#D9000000</color>
</resources>

Note that I am using the support library as it. If your minimal API is 21, you could use "android:colorPrimary" or so.
For more information about the theming for pre-Lollipop, check the Theming part of this guide:

Once this is done, just use the theme Indigo as the default theme:
<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/Indigo" >
    ....
</application>

Source code

More information

2 comments:

  1. Thanks but how do you use this in eclipse? I don't see any build.gradle file

    ReplyDelete
    Replies
    1. Hi:
      I don't think google provided the material design library for Eclipse. If you are still working on Eclipse, switch to Android Studio. It is much better.

      Delete