Show floating action button between two layouts widgets in android

How to add FAB inside android application middle of multiple layouts or widgets by crossing them.

Adding FAB between two layouts is a little bit of mind game because you have to specify multiple layouts one by one and the both layout must be LinearLayout . Now we have to use layout_anchor attribute inside android.support.design.widget.FloatingActionButton . So here is the complete step by step tutorial for Show floating action button between two layouts widgets in android.

android-project-download-code-button

Please follow the below steps :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.2.+'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

android-support-design

Here your go friends….Now We are going start coding

How to Show floating action button between two layouts widgets in android.

Code for MainActivity.java file.

package com.android_examples.fabbetweenlayouts_android_examplescom;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;

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

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

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Toast.makeText(MainActivity.this, "Fab Clicked", Toast.LENGTH_LONG).show();

            }
        });

    }
}

Code for activity_main.xml layout file.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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/LinearLayout1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:background="#CDDC39"
            android:layout_weight="50"/>

        <LinearLayout
            android:id="@+id/LinearLayout2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_weight="50"
            android:background="#C6FF00"
            />

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/LinearLayout1"
        app:backgroundTint="#2196F3"
        app:elevation="7dp"
        android:layout_margin="20dp"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchorGravity="bottom|right|end" />

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

Screenshot:

Show floating action button between two layouts widgets in android

Click here to download Show floating action button between two layouts widgets in android project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *