FloatingActionButton dynamic behaviour

Recently I tried to update my Pomodoro Timer, called Conserva,to use Material Design. I decided to do that because I wanted to give it a more modern look and feel.

The first step was to replace the old square buttons with the new FloatingAction buttons! So I removed them from the bottom where they were difficult to use and often made me reset the timer instead of starting a new one.

I put two new floating buttons on the bottom left and bottom right of my application; it was very easy because the web is full of good tutorials about making them. The difficult part was to make them change color and icon at runtime. Here is part of the xml I used inside a RelativeLayout:

<RelativeLayout
android:id="@+id/fabLayout"
android:layout_width="match_parent"
android:gravity="bottom|center_horizontal|end"
android:layout_weight="6.32"
android:layout_height="96dp">;

<android.support.design.widget.FloatingActionButton
android:id="@+id/startStopFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/colorPomodoro"
android:src="@drawable/ic_play_arrow_white_36dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
app:borderWidth="0dp"
android:clickable="true"
android:scaleType="center"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
/>;

<android.support.design.widget.FloatingActionButton
android:id="@+id/resetFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/colorReset"
android:src="@drawable/ic_replay_white_36dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
app:borderWidth="0dp"
android:clickable="true";
android:scaleType="center"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
/>

Moreover, I wanted to keep compatibility with very old versions of Android, so I had to use the appcompat library. You can also notice the app XML namespace instead of android for newer attributes, you can enable it by adding it to the root element.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"

However, the color and the icon of my buttons depends on the state of the application because the button will be red when the app can start a Pomodoro, green when it can start a break or gray while it is running. The icon changes to reflect its state as well.

In the layout xml I used a background ColorStateList to set the color of the FloatingAction Buttons, a ColorStateList allows to set a color for different states of an object: enabled, pressed, … . This was more than I needed in my application , so I created a ColorStateList with only one color using android.content.res.ColorStateList.valueOf(int) .

To get the color in a backward compatible way I had to use android.support.v4.content.ContextCompat.getColor(Context context,  int color) , otherwise I would have got warnings for deprecated code.

Then I  had to apply the new color to the FloatingAction Button, in my very first attempt I used the setSupportBackgroundTintList(ColorStateList) method to apply, but when I updated to the latest Android SDK version I had to use the normal setBackgroundTintList(ColorStateList) .

I had the same problems for the icon: to obtain a Drawable I used android.support.v4.content.ContextCompat.getDrawable(Context context,  int drawble)  .

This is the refrece code:


FloatingActionButton startStopButton = (FloatingActionButton) findViewById(R.id.startStopFab);


startStopButton.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(this, color)));

Drawable pomodoroImage = ContextCompat.getDrawable(this, pomodoroButtonImageId);
startStopButton.setImageDrawable(pomodoroImage);

Just to be more compliant with the Material Design specification I chose the colors from the Google’s suggested one and used the Google’s stock icons.

Image from https://www.flickr.com/photos/photon_de/2700323949/

Leave a Comment

Your email address will not be published. Required fields are marked *