Floating action buttons (or FAB) are: “A special case of promoted actions. They are distinguished by a circled icon floating above the UI and have special motion behaviors, related to morphing, launching, and its transferring anchor point.”
FAB is not compulsory to add FAB to your app if you want to avoid the FAB you are free to do that as well and for your Floating Action Button (FAB) the actual drawable size should be 24dp.
Design Support Library
You should now be able to add the
android.support.design.widget.FloatingActionButton view to the layout. The src attribute references the icon that should be used for the floating action.
open Gradle Scripts-> build.gradle
dependencies {
'compile 'com.android.support:design:23.0.1'
}
Source Code
FloatingActionButton
Exp:-
<android.support.design.widget.FloatingActionButton
android:layout_alignParentBottom="true"
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="30dp"
android:layout_marginLeft="20dp"
android:src="@android:drawable/ic_dialog_info" />
Screen Shot Example :-
Color palette For Android material Design
http://goo.gl/Vb0QcQ
Now lets start Floating Action Button Based on Material Design Step By step
1.first create Material Theme.
res-> styles.xml
<style name="flotingMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
2.Add Color For material design. res-> colors.xml
<color name="colorPrimary">#00BCD4</color>
<color name="colorPrimaryDark">#00838F</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationBarColor">#000000</color>
3.Add Material Theme in Your Manifests.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="demo.androidpoint.com.floatinglabelsedittext">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/flotingMaterialTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action
android:name="android.intent.action.MAIN"/>
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
4.Create toolbar layout.
create toolbar xml seperate file for all screen layout.
res->layout->toolbar.xml
Ex.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
5.Add Toolbar in Your layout.
add toolbar on your layout whenever you want by the user of include tage.
Ex.
<include
android:id="@+id/toolbar"layout="@layout/toolbar" />
6. Add Floating action buttons On Your Xml Layout.
res->layout=>activity_main.xml
<android.support.design.widget.FloatingActionButton
android:layout_alignParentBottom="true"
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="30dp"
android:layout_marginLeft="20dp"
android:src="@android:drawable/ic_dialog_info" />
7. Add Floating action buttons On Your Xml Layout.
java->Your Package_>MainActivity.java
insert this code inside onCrete method
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace your meassge here...", Snackbar.LENGTH_LONG).setAction("Action", null).show();
}
});
8. Output after click on Floating action buttons
after click on Floating button open
Snackbars will be open
9. For more information
http://goo.gl/aQmE0L
and other material design example
goo.gl/JlnYFY
http://goo.gl/0XPYWJ
