Headertab

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Wednesday 27 May 2015

Floating Action Button Material Design

Hi Guys today i am guide How to make Floating action button(FAB).Basically this features add lollipop material design.

Lets Start..
follow below instructions..

Create a new android project...

NOTE-Add custom floating action button library.
             https://github.com/Clans/FloatingActionButton/tree/master/library

Now you create a toolbar

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:elevation="4dp"
    app:title="FAB "
    app:subtitle="DEMO"
    xmlns:app="http://schemas.android.com/apk/res/com.samset.floatinactionbuttonfab_simple">


</android.support.v7.widget.Toolbar>

Go to resource folder and make a file by name color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ColorPrimary">#FF5722</color>
    <color name="ColorPrimaryDark">#E64A19</color>

</resources>

And now you mention this color in style.xml

<resources>
   <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
       
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    <style name="MenuLabelsStyle">
        <item name="android:background">@drawable/fab_label_background</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:textSize">14sp</item>
        <item name="android:maxLines">2</item>
        <item name="android:ellipsize">end</item>
    </style>
 <style name="MenuButtonsStyle">
        <item name="fab_size">mini</item>
        <item name="fab_showAnimation">@anim/jump_from_down</item>
        <item name="fab_hideAnimation">@anim/jump_to_down</item>
        <item name="fab_shadowColor">#444</item>
        <item name="fab_colorNormal">#FFB805</item>
        <item name="fab_colorPressed">#F2AB00</item>
        <item name="fab_colorRipple">#D99200</item>
    </style>
</resources>

Go and create Drawable Folder

fab_label_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#A6000000" />
            <padding android:left="8dp" android:top="4dp" android:right="8dp" android:bottom="4dp" />
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#99000000" />
            <padding android:left="8dp" android:top="4dp" android:right="8dp" android:bottom="4dp" />
            <corners android:radius="2dp" />
        </shape>
    </item>


</selector>

Create anim folder

And Now you create more files by name..

1-hide_to_buttom.xml
   
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/accelerate_quint"
    android:fromYDelta="0"
    android:toYDelta="30%p"
    android:duration="200" />

2-jump_from_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/overshoot">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="400" />
    <translate
        android:fromYDelta="30%p"
        android:toYDelta="0"
        android:duration="300" />
</set>

3-jump_to_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/anticipate_interpolator">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="200" />
    <translate
        android:fromYDelta="0"
        android:toYDelta="30%p"
        android:duration="200" />


</set>

Now Go

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
     xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.samset.floatinactionbuttonfab_simple.MainActivity" >
    <include layout="@layout/toolbar"
    android:id="@+id/tool"
    />
   
      <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:paddingRight="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true"
        fab:menu_backgroundColor="#ccffffff"
        fab:menu_labels_style="@style/MenuLabelsStyle"
        >

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/add_image"
            fab:fab_size="mini"
            style="@style/MenuButtonsStyle"
            fab:fab_label="Menu item 1" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/like_green"
            fab:fab_size="mini"
            fab:fab_label="Menu item 2"
             style="@style/MenuButtonsStyle"
            />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/reply_green"
            fab:fab_size="mini"
            style="@style/MenuButtonsStyle"
            fab:fab_label="I am sam" />

    </com.github.clans.fab.FloatingActionMenu>
   

</RelativeLayout>

go to MainActivity.java

public class MainActivity extends ActionBarActivity {
Toolbar toolbar;
private List<FloatingActionMenu> menus = new ArrayList<FloatingActionMenu>();
private Handler mUiHandler = new Handler();
private FloatingActionButton fab1;
private FloatingActionButton fab2;
private FloatingActionButton fab3;

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

toolbar = (Toolbar) findViewById(R.id.tool); // Attaching the layout to the toolbar object
        setSupportActionBar(toolbar);
       
       //Step 1
        FloatingActionMenu menu1 = (FloatingActionMenu) findViewById(R.id.menu1);
       
      //Step 2   Hear you can add programatically FAB buttons
        FloatingActionButton programFab1 = new FloatingActionButton(this);
        programFab1.setButtonSize(FloatingActionButton.SIZE_MINI);
        programFab1.setLabelText("Programmatically added button");
        programFab1.setImageResource(R.drawable.facebook);
        menu1.addMenuButton(programFab1);
       
      //Step 3
        menus.add(menu1);
        menu1.hideMenuButton(false);
       
      //Step 4
        int delay = 400;
        for (final FloatingActionMenu menu : menus) {
            mUiHandler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    menu.showMenuButton(true);
                }
            }, delay);
            delay += 150;
        }

        menu1.setClosedOnTouchOutside(true);
       
      //Step 5
        fab1 = (FloatingActionButton) findViewById(R.id.fab1);
        fab2 = (FloatingActionButton) findViewById(R.id.fab2);
        fab3 = (FloatingActionButton) findViewById(R.id.fab3);
       
        //Step 6
        fab1.setOnClickListener(clickListener);
        fab2.setOnClickListener(clickListener);
        fab3.setOnClickListener(clickListener);

        //Step 7
       
        createCustomAnimation();
}



@SuppressLint("NewApi")
private void createCustomAnimation() {
        final FloatingActionMenu menu3 = (FloatingActionMenu) findViewById(R.id.menu1);

        AnimatorSet set = new AnimatorSet();

        ObjectAnimator scaleOutX = ObjectAnimator.ofFloat(menu3.getMenuIconView(), "scaleX", 1.0f, 0.2f);
        ObjectAnimator scaleOutY = ObjectAnimator.ofFloat(menu3.getMenuIconView(), "scaleY", 1.0f, 0.2f);

        ObjectAnimator scaleInX = ObjectAnimator.ofFloat(menu3.getMenuIconView(), "scaleX", 0.2f, 1.0f);
        ObjectAnimator scaleInY = ObjectAnimator.ofFloat(menu3.getMenuIconView(), "scaleY", 0.2f, 1.0f);

        scaleOutX.setDuration(50);
        scaleOutY.setDuration(50);

        scaleInX.setDuration(150);
        scaleInY.setDuration(150);

        scaleInX.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                menu3.getMenuIconView().setImageResource(menu3.isOpened()
                        ? R.drawable.ic_close : R.drawable.ic_star);
            }
        });

        set.play(scaleOutX).with(scaleOutY);
        set.play(scaleInX).with(scaleInY).after(scaleOutX);
        set.setInterpolator(new OvershootInterpolator(2));

        menu3.setIconToggleAnimatorSet(set);
    }


private View.OnClickListener clickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            String text = "";

            switch (v.getId()) {
                case R.id.fab1:
                    text = fab1.getLabelText();
                    break;
                case R.id.fab2:
                    text = fab2.getLabelText();
                    break;
                case R.id.fab3:
                    text = fab3.getLabelText();
                    break;
               
            }

            Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
        }
    };


}

Download icon








See Preview

 

No comments:

Post a Comment