CODEWITHSUNDEEP
androidfloating-action-button
NizarETH
NizarETH

Reputation: 1009

horizontal direction of Floating action menu

I need a float action menu with horizontal direction, I found this library but it's linked to listview and not what I look for, I tested 'com.github.clans:fab:1.6.4' it's really good but always no horizontal direction.

any idea to find out ?

Upvotes: 0

Views: 1264

Answers (2)

NizarETH
NizarETH

Reputation: 1009

Thank's @Mayank for the code and the idea, for everyone with the same problem, this the code :

     <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:gravity="center"
            android:padding="6dp"

            >
            <android.support.design.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/parentlayout"

                android:layout_gravity="left"
                android:fitsSystemWindows="true"
                android:clipChildren="false"
                android:clipToPadding="false"
                >
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left"
                    android:layout_marginRight="120dp"

                    app:backgroundTint="@color/TealDark"
                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:pressedTranslationZ="-12dp"
                    android:src="@drawable/fab_add"
                    />
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginRight="90dp"
                    android:visibility="invisible"

                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:backgroundTint="@color/TealDark"
                    app:pressedTranslationZ="-12dp"
                    android:src="@drawable/file_image" />
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="8dp"
                    android:layout_gravity="bottom"
                    android:visibility="invisible"
                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:backgroundTint="@color/TealDark"
                    app:pressedTranslationZ="-12dp"

                    android:src="@drawable/filevideo" />
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-75dp"
                    android:layout_gravity="bottom"
                    android:visibility="invisible"
                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:backgroundTint="@color/TealDark"
                    app:pressedTranslationZ="-12dp"

                    android:src="@drawable/audiobook" />
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-158dp"
                    android:layout_gravity="bottom"
                    android:visibility="invisible"
                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:backgroundTint="@color/TealDark"
                    app:pressedTranslationZ="-12dp"

                    android:src="@drawable/file" />
            </android.support.design.widget.CoordinatorLayout>
        </LinearLayout>

for code java I use the same above :

final FloatingActionButton fab,fab1,fab2, fab3, fab4;
                fab = (FloatingActionButton)conformity_child.findViewById(R.id.fab);
                fab1 = (FloatingActionButton)conformity_child.findViewById(R.id.fab1);
                fab2 = (FloatingActionButton)conformity_child.findViewById(R.id.fab2);
                fab3 = (FloatingActionButton)conformity_child.findViewById(R.id.fab3);
                fab4 = (FloatingActionButton)conformity_child.findViewById(R.id.fab4);
                fab.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if(isFabOpen){
                            fab.startAnimation(rotate_backward);
                            fab1.startAnimation(fab_close);
                            fab2.startAnimation(fab_close);
                            fab3.startAnimation(fab_close);
                            fab4.startAnimation(fab_close);
                            fab1.setClickable(false);
                            fab2.setClickable(false);
                            fab3.setClickable(false);
                            fab4.setClickable(false);
                            isFabOpen = false;

                        } else {
                            fab.startAnimation(rotate_forward);
                            fab1.startAnimation(fab_open);
                            fab2.startAnimation(fab_open);
                            fab3.startAnimation(fab_open);
                            fab4.startAnimation(fab_open);
                            fab1.setClickable(true);
                            fab2.setClickable(true);
                            fab3.setClickable(true);
                            fab4.setClickable(true);
                            isFabOpen = true;
                        }
                    }
                });

animation : fab_close

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="0.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.8" />
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="300"/>
</set>

animation : fab_open

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.0" />
    <alpha android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="300"/>
</set>

Upvotes: 1

Mayank Bhatnagar
Mayank Bhatnagar

Reputation: 1346

The easiest way to do without any library is to set one FAB visible and the other two invisible, and make the two visible on the click of first FAB. Adding some code snippets as i have used this type of FAB Styling, moreover you can add your animation to icons so give it feel good effect.

<?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"
android:id="@+id/parentlayout"
android:background="#2a2a2a"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

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

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

<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="160dp"
    android:visibility="invisible"
    android:layout_marginBottom="16dp"
    app:backgroundTint="@color/colorPrimary"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    android:src="@android:drawable/ic_menu_share" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="90dp"
    android:visibility="invisible"
    android:layout_marginBottom="16dp"
    app:elevation="6dp"
    app:backgroundTint="@color/colorPrimary"
    app:pressedTranslationZ="12dp"
    android:src="@android:drawable/ic_menu_search" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:elevation="6dp"
    app:backgroundTint="@color/colorPrimary"
    app:pressedTranslationZ="12dp"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_input_add" />

And the usage in activity will be something like this.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Boolean isFabOpen = false;
private FloatingActionButton fab,fab1,fab2;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    fab = (FloatingActionButton)findViewById(R.id.fab);
    fab1 = (FloatingActionButton)findViewById(R.id.fab1);
    fab2 = (FloatingActionButton)findViewById(R.id.fab2);
    fab.setOnClickListener(this);
    fab1.setOnClickListener(this);
    fab2.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    int id = v.getId();
    switch (id){
        case R.id.fab:

            animateFAB();
            break;
        case R.id.fab1:
            break;
        case R.id.fab2:


            break;
    }
}
public void animateFAB(){

    if(isFabOpen){
       /* fab.startAnimation(rotate_backward);
        fab1.startAnimation(fab_close);
        fab2.startAnimation(fab_close);*/
        fab1.setClickable(false);
        fab2.setClickable(false);
        isFabOpen = false;

    } else {
       /* fab.startAnimation(rotate_forward);
        fab1.startAnimation(fab_open);
        fab2.startAnimation(fab_open);*/
        fab1.setClickable(true);
        fab2.setClickable(true);
        isFabOpen = true;
    }
}}

Upvotes: 0

Related Questions