Show Floating Action Button above ListView in android example tutorial

How to put place FAB just above the listView items at right bottom side of android activity screen.

Most of the android applications with latest android lollipop and marshmallow libraries with latest designs are used floating action buttons because with them android developer can easily add simple and sober buttons on android activity screen and also Most of the E-Commerce websites android apps show the FAB just above their products list. So in this tutorial we are going to Show Floating Action Button above ListView in android example tutorial.

android-project-download-code-button

Note :  Please follow the below steps to add design support library in your android application project :

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 above ListView in android example tutorial.

Code for MainActivity.java file.

package com.android_examples.fababovelistview_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.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    ListView listItemView;
    FloatingActionButton fab;

    String[] listItemsValue = new String[] {
            "Android",
            "PHP",
            "Web Development",
            "Blogger",
            "SEO",
            "Photoshop",
            "Android Studio",
            "Eclipse",
            "SDK Manager",
            "AVD Manager"
    };

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

        listItemView = (ListView)findViewById(R.id.listView1);
        fab = (FloatingActionButton)findViewById(R.id.fab1);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_2, android.R.id.text1, listItemsValue);

        listItemView.setAdapter(adapter);

        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.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:context="com.android_examples.fababovelistview_android_examplescom.MainActivity">


    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
         >
    </ListView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="52dp"
        android:layout_marginRight="16dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:clickable="true"
        android:src="@android:drawable/ic_media_play"
        app:elevation="4dp" />

</RelativeLayout>

Screenshot:

Show Floating Action Button above ListView in android example tutorial

Click here to download Show Floating Action Button above ListView in android example tutorial project with source code.

Leave a Reply

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