Tuesday, 31 May 2016

Floating Action Button



A floating action button represents the primary action in an application.
Go to gradle add this library
compile 'com.getbase:floatingactionbutton:1.10.0'
activity_main.xml
---------------------------
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
   
xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
xmlns:fab="http://schemas.android.com/apk/res-auto"
   
android:fitsSystemWindows="true"
   
tools:context="com.sgp.anil.floatingactionbutton.MainActivity">

    <
android.support.design.widget.AppBarLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:theme="@style/AppTheme.AppBarOverlay">

        <
android.support.v7.widget.Toolbar
           
android:id="@+id/toolbar"
           
android:layout_width="match_parent"
           
android:layout_height="?attr/actionBarSize"
           
android:background="?attr/colorPrimary"
           
app:popupTheme="@style/AppTheme.PopupOverlay" />

    </
android.support.design.widget.AppBarLayout>

    <
include layout="@layout/content_main" />

    <
com.getbase.floatingactionbutton.FloatingActionsMenu
       
android:id="@+id/fab_menu"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_gravity="right|bottom"
       
fab:fab_addButtonColorNormal="@color/accent"
       
fab:fab_addButtonColorPressed="@color/accent_dark"
       
fab:fab_addButtonPlusIconColor="@color/white"
       
fab:fab_addButtonStrokeVisible="false"
       
fab:fab_labelStyle="@style/menu_labels_style"
       
fab:fab_labelsPosition="left">

        <
com.getbase.floatingactionbutton.FloatingActionButton
           
android:id="@+id/fab_event"
           
android:layout_width="wrap_content"
           
android:layout_height="wrap_content"
           
fab:fab_colorNormal="@color/accent"
           
fab:fab_colorPressed="@color/accent_dark"
           
fab:fab_plusIconColor="@color/white"
           
fab:fab_icon="@mipmap/ic_launcher"
           
fab:fab_size="mini"
           
fab:fab_title="Events" />

        <
com.getbase.floatingactionbutton.FloatingActionButton
           
android:id="@+id/fab_photo"
           
android:layout_width="wrap_content"
           
android:layout_height="wrap_content"
           
fab:fab_colorNormal="@color/accent"
           
fab:fab_colorPressed="@color/accent_dark"
           
fab:fab_plusIconColor="@color/white"
           
fab:fab_icon="@mipmap/ic_launcher"
           
fab:fab_size="mini"
           
fab:fab_title="Photographs" />

        <
com.getbase.floatingactionbutton.FloatingActionButton
           
android:id="@+id/fab_others"
           
android:layout_width="wrap_content"
           
android:layout_height="wrap_content"
            
fab:fab_colorNormal="@color/accent"
           
fab:fab_colorPressed="@color/accent_dark"
           
fab:fab_plusIconColor="@color/white"
           
fab:fab_icon="@mipmap/ic_launcher"
           
fab:fab_size="mini"
           
fab:fab_title="Others" />

    </
com.getbase.floatingactionbutton.FloatingActionsMenu>

</
android.support.design.widget.CoordinatorLayout>
content_main.xml
-------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
  
android:orientation="vertical"
   
android:background="#999"
   
app:layout_behavior="@string/appbar_scrolling_view_behavior"
   
tools:context="com.sgp.anil.floatingactionbutton.MainActivity"
   
tools:showIn="@layout/activity_main">
    <
FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
       
xmlns:fab="http://schemas.android.com/apk/res-auto"
       
xmlns:tools="http://schemas.android.com/tools"
       
android:layout_width="match_parent"
       
android:layout_height="match_parent"
       
tools:context="in.city.bytes.view.MainActivity">

        <
LinearLayout
           
android:layout_width="match_parent"
           
android:layout_height="match_parent"
           
android:orientation="vertical">
           
<!-- other content in the activity -->
       
</LinearLayout>

        <
FrameLayout
           
android:id="@+id/frame_layout"
           
android:layout_width="match_parent"
           
android:layout_height="match_parent"
           
android:background="@color/white_overlay">
           
<!--  floating action menu with buttons -->
       
</FrameLayout>
    </
FrameLayout>

</
LinearLayout>
styles.xml
----------------------
<style name="menu_labels_style">
    <
item name="android:background">@drawable/fab_label_background</item>
    <
item name="android:textColor">@color/secondary_text</item>
</
style>
 color.xml
---------------
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <
color name="accent_dark">#ff2929</color>
    <
color name="accent">#ff5252</color>
    <
color name="secondary_text">#727272</color>
    <
color name="white">#FFFFFF</color>
    <
color name="white_overlay">#F3F3F3</color>
</
resources>
MainActivity.Java
---------------------------
package com.sgp.anil.floatingactionbutton;

import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;

import com.getbase.floatingactionbutton.FloatingActionButton;
import com.getbase.floatingactionbutton.FloatingActionsMenu;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    FloatingActionButton
fb1, fb2, fb3;

   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.
toolbar);
        setSupportActionBar(toolbar);

       
final FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frame_layout);
        frameLayout.getBackground().setAlpha(
0);
       
final FloatingActionsMenu fabMenu = (FloatingActionsMenu) findViewById(R.id.fab_menu);
       
fb1 = (FloatingActionButton) findViewById(R.id.fab_event);
       
fb2 = (FloatingActionButton) findViewById(R.id.fab_photo);
       
fb3 = (FloatingActionButton) findViewById(R.id.fab_others);
        fabMenu.setOnFloatingActionsMenuUpdateListener(
new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {
           
@Override
           
public void onMenuExpanded() {
               
frameLayout.getBackground().setAlpha(240);
               
frameLayout.setOnTouchListener(new View.OnTouchListener() {
                   
@Override
                   
public boolean onTouch(View v, MotionEvent event) {
                       
fabMenu.collapse();
                       
return true;
                    }
                });
            }

           
@Override
           
public void onMenuCollapsed() {
               
frameLayout.getBackground().setAlpha(0);
               
frameLayout.setOnTouchListener(null);
            }
        });
       
fb1.setOnClickListener(this);
       
fb2.setOnClickListener(this);
       
fb3.setOnClickListener(this);
    }

   
@Override
   
public void onClick(View v) {
       
switch (v.getId()) {
           
case R.id.fab_event:
                Snackbar.make(v,
"Event Clicked", Snackbar.LENGTH_LONG).show();
               
break;
           
case R.id.fab_photo:
                Snackbar.make(v,
"Photo Clicked", Snackbar.LENGTH_LONG).show();

               
break;
           
case R.id.fab_others:
                Snackbar.make(v,
"Others Clicked", Snackbar.LENGTH_LONG).show();

               
break;


        }
    }
}
 Output:
-----------------







No comments:

Post a Comment