Floating Action Button

Question

I have been trying to use Floating Action Button. I tried to use some of the resources suggested on here and the links were great; however, I couldn\'t use alot of them beca

Answer 1

You don't have to create FAB now, its already available, just follow this Link

you need to add

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

   <android.support.design.widget.FloatingActionButton
        android:id="@+id/myFAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_plus_sign"
        app:elevation="4dp"
        ... />

</RelativeLayout>

and

FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        doMyThing();
    }
}); 

in code behind

For more detail follow : FloatingActionButton example with Support Library

Answer 2

There is no need to create FloatingActionButton by yourself now. The new com.android.support:design:23.0.1 can do that for you. Just follow the below procedure.

1.Add this line compile 'com.android.support:design:23.0.1' in dependencies in your build.gradle in Android Studio

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:design:23.0.1'
}

2.To create a FloatingActionButton using the following xml file.

<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:id="@+id/YourEventsLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <!--Add other elements here-->

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_margin="16dp"
            android:src="@drawable/ic_add_white_24dp"
            app:elevation="6dp"
            app:fabSize="normal"
            app:pressedTranslationZ="12dp" />

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

3. In MainActivity in onCreate method set setOnClickListener as follows

   FloatingActionButton fab; fab = (FloatingActionButton) getView().findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //Do what you want here } });

Answer 3

This is how you create a floating action button.

build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

            <LinearLayout
                android:id="@+id/viewTwo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.4"
                android:background="@android:color/holo_orange_light"
                android:orientation="horizontal"/>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

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

</RelativeLayout>

MainActivity.java

package com.ahotbrew.floatingactionbutton;

import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        FloatingActionButton FAB = (FloatingActionButton) findViewById(R.id.fab);
        FAB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Would you like a coffee?", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Hope that complete example helps someone.

The example is from http://www.ahotbrew.com/android-floating-action-button/ It also shows how to place the button in other locations if interested.

Answer 4

Just put compile 'com.android.support:design:22.2.1' in your module app dependencies.

In your xml:

<android.support.design.widget.FloatingActionButton
        style="@style/<your_style>"
        android:src="@drawable/<your_icon_src>"
        app:layout_anchor="@id/<if using along with list put your listID here>"
        app:layout_anchorGravity="bottom|right|end"
        android:id="@+id/fab"
        />

In you java:

FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });