Monday, 3 December 2018

Android Floating Action Button With Text Material Design Without library





1) Make Sure This Library is Added In Your gradle.build file

    implementation 'com.android.support:design:28.0.0'

2) Activity.XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:gravity="center_horizontal"
        android:layout_marginRight="16dp">


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            app:fabSize="mini"
            android:tint="#ffffff"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/add_photo"
            tools:ignore="VectorDrawableCompat" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/photos"
            android:text="Photos"
            android:textAlignment="center"
            android:textSize="15sp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:background="@drawable/shape_lable"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_two"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            app:fabSize="mini"
            android:tint="#ffffff"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/music"
            tools:ignore="VectorDrawableCompat" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/music"
            android:text="Music"
            android:textAlignment="center"
            android:textSize="15sp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:background="@drawable/shape_lable"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            app:fabSize="mini"
            android:tint="#ffffff"
            android:layout_marginTop="5dp"
            app:srcCompat="@drawable/done"
            tools:ignore="VectorDrawableCompat" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/done"
            android:text="Done"
            android:textAlignment="center"
            android:textSize="15sp"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:background="@drawable/shape_lable"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            app:fabSize="normal"
            android:tint="#ffffff"
            app:srcCompat="@drawable/add"
            tools:ignore="VectorDrawableCompat"
            android:layout_marginTop="10dp"/>

    </LinearLayout>



</android.support.constraint.ConstraintLayout>


3) Activity.Java

import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.OvershootInterpolator;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    FloatingActionButton fab, fab_one, fab_two, fab_three;
    TextView photo, music, done;
    Float translationY = 100f;

    OvershootInterpolator interpolator = new OvershootInterpolator();


    Boolean isMenuOpen = false;


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

        fab = (FloatingActionButton) findViewById(R.id.fab);

        fab_one = (FloatingActionButton) findViewById(R.id.fab_one);
        fab_two = (FloatingActionButton) findViewById(R.id.fab_two);
        fab_three = (FloatingActionButton) findViewById(R.id.fab_three);

        photo = (TextView) findViewById(R.id.photos);
        music = (TextView) findViewById(R.id.music);
        done = (TextView) findViewById(R.id.done);

        fab_one.setAlpha(0f);
        photo.setAlpha(0f);
        fab_two.setAlpha(0f);
        music.setAlpha(0f);
        fab_three.setAlpha(0f);
        done.setAlpha(0f);

        fab_one.setTranslationY(translationY);
        photo.setTranslationY(translationY);
        fab_two.setTranslationY(translationY);
        music.setTranslationY(translationY);
        fab_three.setTranslationY(translationY);
        done.setTranslationY(translationY);

        fab.setOnClickListener(this);

        fab_one.setOnClickListener(this);
        fab_two.setOnClickListener(this);
        fab_three.setOnClickListener(this);
    }

    private void openMenu() {
    isMenuOpen = !isMenuOpen;

 fab.animate().setInterpolator(interpolator).rotation(45f).setDuration(300).start();

        fab_one.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
photo.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();

        fab_two.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
music.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();

        fab_three.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
done.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();


    }

    private void closeMenu() {
        isMenuOpen = !isMenuOpen;

        fab.animate().setInterpolator(interpolator).rotation(0f).setDuration(300).start();

        fab_one.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
        photo.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();

        fab_two.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
        music.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();

        fab_three.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
        done.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();

    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.fab:
                if (isMenuOpen) {
                    closeMenu();
                } else {
                    openMenu();
                }
                break;
            case R.id.fab_one:
                if (isMenuOpen) {
                    closeMenu();
                } else {
                    openMenu();
                }
                break;
            case R.id.fab_two:
                if (isMenuOpen) {
                    closeMenu();
                } else {
                    openMenu();
                }
                break;
            case R.id.fab_three:
                if (isMenuOpen) {
                    closeMenu();
                } else {
                    openMenu();
                }
                break;
        }
    }
}

No comments:

Android Studio - Get Current Latitude And Longitude

1. Add this dependencies in your gradle file     implementation 'com.google.android.gms:play-services-location:18.0.0' 2. Add this p...