Floating Action Button Example in Android 5.0

Android announced Material Design as a new feature to Android 5.0 Lollipop version. Material Design guides creation of user experiences that work well on different devices, with different input methods and on different platforms. Google is gradually implementing Material Design in their apps and products.

One interesting new design pattern is the promoted action, implemented as a floating action button. This pattern describes the underlying principles of Material Design and is a good place to start adapting existing applications to the new version of Android. In this example we will see how to implement a floating action button.

You will need android studio or Android L preview setup installed on your system to check this example running.

Example Steps

1.) Create a new project and name it FloatingActionButton.
2.) Write following into main.xml:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/sample_main_layout">

<ViewAnimator
android:id="@+id/sample_output"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">

<ScrollView
style="@style/Widget.SampleMessageTile"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
style="@style/Widget.SampleMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/horizontal_page_margin"
android:paddingRight="@dimen/horizontal_page_margin"
android:paddingTop="@dimen/vertical_page_margin"
android:paddingBottom="@dimen/vertical_page_margin"
android:text="@string/intro_message" />
</ScrollView>

<fragment
android:name="com.example.android.common.logger.LogFragment"
android:id="@+id/log_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</ViewAnimator>

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/darker_gray" />

<FrameLayout
android:id="@+id/sample_content_fragment"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0px" />

</LinearLayout>

3.) Create and write following into fab_layout.xml:

<FrameLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<com.example.android.floatingactionbuttonbasic.FloatingActionButton
android:id="@+id/fab_1"
android:layout_width="@dimen/fab_size"
android:layout_height="@dimen/fab_size"
android:layout_marginTop="16dp"
android:elevation="@dimen/fab_elevation"
android:background="@drawable/fab_background"
android:stateListAnimator="@animator/fab_anim"
android:layout_gravity="center_horizontal">

<ImageView
android:layout_width="@dimen/fab_icon_size"
android:layout_height="@dimen/fab_icon_size"
android:src="@drawable/fab_icons"
android:layout_gravity="center"
android:duplicateParentState="true"/>

</com.example.android.floatingactionbuttonbasic.FloatingActionButton>

<com.example.android.floatingactionbuttonbasic.FloatingActionButton
android:id="@+id/fab_2"
android:layout_width="@dimen/fab_size_small"
android:layout_height="@dimen/fab_size_small"
android:layout_marginTop="128dp"
android:elevation="@dimen/fab_elevation"
android:background="@drawable/fab_background"
android:stateListAnimator="@animator/fab_anim"
android:layout_gravity="center_horizontal">

<ImageView
android:layout_width="@dimen/fab_icon_size"
android:layout_height="@dimen/fab_icon_size"
android:src="@drawable/fab_icons"
android:layout_gravity="center"
android:duplicateParentState="true"/>

</com.example.android.floatingactionbuttonbasic.FloatingActionButton>
</FrameLayout>

4.) Write following into mainActivity:

package com.example.android.floatingactionbuttonbasic;

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ViewAnimator;

import com.example.android.common.activities.SampleActivityBase;
import com.example.android.common.logger.Log;
import com.example.android.common.logger.LogFragment;
import com.example.android.common.logger.LogWrapper;
import com.example.android.common.logger.MessageOnlyLogFilter;

/**
* A simple launcher activity containing a summary sample description, sample log and a custom
* {@link android.support.v4.app.Fragment} which can display a view.
* <p>
* For devices with displays with a width of 720dp or greater, the sample log is always visible,
* on other devices it's visibility is controlled by an item on the Action Bar.
*/
public class MainActivity extends SampleActivityBase {

public static final String TAG = "MainActivity";

// Whether the Log Fragment is currently shown
private boolean mLogShown;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

if (savedInstanceState == null) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
FloatingActionButtonBasicFragment fragment = new FloatingActionButtonBasicFragment();
transaction.replace(R.id.sample_content_fragment, fragment);
transaction.commit();
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
MenuItem logToggle = menu.findItem(R.id.menu_toggle_log);
logToggle.setVisible(findViewById(R.id.sample_output) instanceof ViewAnimator);
logToggle.setTitle(mLogShown ? R.string.sample_hide_log : R.string.sample_show_log);

return super.onPrepareOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()) {
case R.id.menu_toggle_log:
mLogShown = !mLogShown;
ViewAnimator output = (ViewAnimator) findViewById(R.id.sample_output);
if (mLogShown) {
output.setDisplayedChild(1);
} else {
output.setDisplayedChild(0);
}
supportInvalidateOptionsMenu();
return true;
}
return super.onOptionsItemSelected(item);
}

/** Create a chain of targets that will receive log data */
@Override
public void initializeLogging() {
// Wraps Android's native log framework.
LogWrapper logWrapper = new LogWrapper();
// Using Log, front-end to the logging chain, emulates android.util.log method signatures.
Log.setLogNode(logWrapper);

// Filter strips out everything except the message text.
MessageOnlyLogFilter msgFilter = new MessageOnlyLogFilter();
logWrapper.setNext(msgFilter);

// On screen logging via a fragment with a TextView.
LogFragment logFragment = (LogFragment) getSupportFragmentManager()
.findFragmentById(R.id.log_fragment);
msgFilter.setNext(logFragment.getLogView());

Log.i(TAG, "Ready");
}
}

OutPut