Android Floating Action Button (New Implementation)

The previous tutorial about Floating Action Button implementation is now deprecated regarding that now, there is a support library from Android which makes the implementation of FAB more easier. You just have to add to dependencies the Design Library in your gradle file and this way, you can use the Floating Action Button even for older versions of Android.

Note 1:app:borderWidth="0dp" is needed for API > 21 for now, because it seems there is an issue with the current android support library design. The shadow will not be visible for Lollipop versions if this is not set (for older versions of Android it is ok).Note 2: Notice that in order to add the elevation and translation attributes we have to add

1

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

to the root layout.

4. MyCustomAdapter.java

Now we have to create the adapter for the list view. In order to to this, we have to create a new java class and name it MyCustomAdapter. Copy the code below:

// The adapter MyCustomAdapter is responsible for maintaining the data backing this list and for producing

// a view to represent an item in that data set.

myList.setAdapter(adapter);

}

}

And that’s pretty much it. As you can see, is easier to add FAB now 🙂

How to Change Floating Action Button’s Color?

The default color, as you could see, is green, so if this color doesn’t match your app colors theme, you will have to change it. You can change just the FAB color by changin the colorAccent from your app theme. But for the purpose of this tutorial I will change the app bar also.

1. Go to res – values – colors.xml (if you don’t have the colors.xml you just have to right click the values folder – select New – Value resource file and write colors.xml in the window that opens). Now, that the file is created, add the following colors:

XHTML

1

2

3

4

5

6

7

<?xml version="1.0"encoding="utf-8"?>

<resources>

<!--Color primary 500 from palette colors -->

<color name="primary">#03A9F4</color>

<!--Color primary dark 700 from palette colors -->

<color name="primaryDark">#0288D1</color>

</resources>

2. For pre Lollipop versions (older versions), you just have to go res – values – styles.xml and copy the code below:

XHTML

1

2

3

4

5

6

7

8

9

10

11

<resources>

<!-- Base application theme. -->

<style name="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar">

<!-- Customizeyourthemehere.-->

<item name="colorPrimary">@color/primary</item>

<item name="colorPrimaryDark">@color/primaryDark</item>

<item name="colorAccent">@color/primary</item>

</style>

</resources>

3. For Lollipop version, we will have to add an extra item for navigation bar color. So, now, we have to create a new values folder for v21. You can create it like this:

– go to res folder and right click on it – select New – Android Resource directory – and from the Resource type drop down select values – select Version qualifier and inside the edit text from the right write 21.

And now, in the values-v21.xml folder, create a styles.xml file (exactly like colors.xml) and add the following code:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

<resources>

<!-- Base application theme. -->

<style name="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar">

<!-- Customizeyourthemehere.-->

<item name="colorPrimary">@color/primary</item>

<item name="colorPrimaryDark">@color/primaryDark</item>

<item name="android:navigationBarColor">@color/primary</item>

<item name="colorAccent">@color/primary</item>

</style>

</resources>

And this is how our app looks like now, with the Floating Action Button’s color changed (and navigation bar, for Lollipop) 😀

how on earth did you figure out that this requires “xmlns:app=http://schemas.android.com/apk/res-auto” and borderwidth=”0dp”
I have literally spent the last 4 hours trying to figure out why this wasn’t working down to API 16, the floating action button was literally square no matter the src icon provided… until I set that value. So, it doesn’t just affect API > 21…

Laura

I found an answer on stackoverflow after searching a few hours also. But it’s interesting, I didn’t know that this affects older versions. The elevation issue was occurring only for API >21. But it seems that there are other issues that this borderwidth=”0dp” can fix. Good to know. Thanks 😀

newuser

I’m using 3 tabs. I have fab button in each tab for different functions. So I want the fab button to disappear while switching between the tabs. Please help

Laura

You can try to set the fab button visibility to GONE (floatingActionButton.setVisibility(View.GONE)) when you tap on a new tab.

newuser

I have implemented swipe functionality using view pager. When I begin to swipe, the fab button should go invisible or gone.
When I tap on a new tab, the screen anyways gets changed. So need not worry about hiding fab button. But when I begin to swipe to a new tab, the fab button should go invisible and if I come back to the same tab again without completely swiping to a new tab, the fab button should appear again.
I believe it’s something to be done when a page is being swiped.
Thanks!

Laura

I see. Well you can listen for the viewPager swiping by using the setOnPageChangeListener() or the addOnPageChangeListener(). The first one is deprecated. And you should hide/show the FAB button in the onPageScrollStateChanged() like this:

Want to donate?

Meta

In this post, I will try to explain how to write functions in Kotlin by doing a parallel with Java. It’s not rocket science or anything special in this post, but this is the way I understand and remember better... The post Functions – Kotlin appeared first on My Android Solutions.

This site uses cookies from Google to deliver its services, to personalize ads and to analyze traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. AcceptRead More