SAMSET DEVELOPER: May 2015

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">

</style>


<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/ColorPrimary</item>
<item name="colorPrimaryDark">@color/ColorPrimaryDark</item>


</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

SAMSET DEVELOPER

Headertab

Wednesday, 27 May 2015

Floating Action Button Material Design