Create Button Fab More Icon With Text

Android How To Create Button Fab More With Icon and text

1. Project Structure

Package name : fabmore.button.fyprojects.com.fy

2. Gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "fabmoretext.button.fyprojects.com.fy"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support:support-v13:28.0.0'
    implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'com.github.bumptech.glide:glide:3.7.0'
    implementation 'com.balysv:material-ripple:1.0.2'
}

3. Res Folder Dtructure

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@android:color/white"
    android:orientation="vertical">

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

        <include layout="@layout/toolbar" />

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

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scrollbars="vertical"
                android:scrollingCache="true" />

        </RelativeLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end|right"
            android:gravity="center_horizontal"
            android:orientation="vertical">


            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_mic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/spacing_middle"
                android:clickable="true"
                android:tint="@color/grey_80"
                app:backgroundTint="@color/grey_20"
                app:fabSize="mini"
                app:rippleColor="@android:color/white"
                app:srcCompat="@drawable/ic_mic" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_call"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/spacing_middle"
                android:clickable="true"
                android:tint="@color/grey_80"
                app:backgroundTint="@color/grey_20"
                app:fabSize="mini"
                app:rippleColor="@android:color/white"
                app:srcCompat="@drawable/ic_call" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/spacing_smlarge"
                android:layout_marginLeft="@dimen/spacing_smlarge"
                android:layout_marginRight="@dimen/spacing_smlarge"
                android:layout_marginTop="@dimen/spacing_middle"
                android:clickable="true"
                android:tint="@android:color/white"
                app:fabSize="normal"
                app:rippleColor="@android:color/white"
                app:srcCompat="@drawable/ic_add" />

        </LinearLayout>


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

</LinearLayout>

item_people_chat.xml

<?xml version="1.0" encoding="utf-8"?>
<com.balysv.materialripple.MaterialRippleLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/RippleStyleBlack"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/lyt_parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:minHeight="?attr/actionBarSize"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/image"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="@dimen/spacing_large"
            android:layout_marginRight="@dimen/spacing_large"
            android:layout_marginTop="@dimen/spacing_middle"
            android:src="@drawable/photo_female_1" />

        <View
            android:layout_width="@dimen/spacing_medium"
            android:layout_height="0dp" />

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingBottom="@dimen/spacing_middle"
                android:paddingTop="@dimen/spacing_middle">

                <TextView
                    android:id="@+id/name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="@dimen/spacing_middle"
                    android:layout_marginRight="@dimen/spacing_middle"
                    android:text="People Name"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="@color/grey_90" />

                <TextView
                    android:id="@+id/description"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="@dimen/spacing_middle"
                    android:layout_marginRight="@dimen/spacing_middle"
                    android:layout_marginTop="@dimen/spacing_medium"
                    android:maxLines="2"
                    android:text="@string/middle_lorem_ipsum"

                    android:textAppearance="@style/TextAppearance.AppCompat.Small"
                    android:textColor="@color/grey_40" />

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/grey_10" />

        </LinearLayout>

    </LinearLayout>

</com.balysv.materialripple.MaterialRippleLayout>

item_section.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="@dimen/spacing_large"
    android:paddingLeft="@dimen/spacing_smlarge"
    android:paddingRight="@dimen/spacing_smlarge"
    android:paddingTop="@dimen/spacing_large">

    <TextView
        android:id="@+id/title_section"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Section Title"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:textColor="@color/grey_40"
        android:textStyle="bold" />

</LinearLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:contentInsetStartWithNavigation="0dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

array.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string-array name="sample_images_name">
        <item>Night Street</item>
        <item>Architect Desk</item>
        <item>City Building</item>
        <item>Computer Keyboard</item>
        <item>Grunge Window</item>

        <item>Park Bench</item>
        <item>Table Cocktails</item>
        <item>Side Park</item>
        <item>Hanging Clothes</item>
        <item>Coffee Camera</item>

        <item>Morning Flower</item>
        <item>Foggy Hill</item>
        <item>The Backpacker</item>
        <item>River Forest</item>
        <item>Mist Mountain</item>
    </string-array>

    <integer-array name="people_images">
        <item>@drawable/photo_male_1</item>
        <item>@drawable/photo_male_2</item>
        <item>@drawable/photo_female_1</item>
        <item>@drawable/photo_female_2</item>
        <item>@drawable/photo_male_3</item>

        <item>@drawable/photo_female_3</item>
        <item>@drawable/photo_male_4</item>
        <item>@drawable/photo_female_4</item>
        <item>@drawable/photo_female_5</item>
        <item>@drawable/photo_male_5</item>

        <item>@drawable/photo_female_6</item>
        <item>@drawable/photo_male_6</item>
        <item>@drawable/photo_male_7</item>
        <item>@drawable/photo_female_7</item>
        <item>@drawable/photo_female_8</item>
    </integer-array>

    <string-array name="people_names">
        <item>Anderson Thomas</item>
        <item>Adams Green</item>
        <item>Laura Michelle</item>
        <item>Betty L</item>
        <item>Miller Wilson</item>

        <item>Garcia Lewis</item>
        <item>Roberts Turner</item>
        <item>Mary Jackson</item>
        <item>Sarah Scott</item>
        <item>Kevin John</item>

        <item>Elizabeth</item>
        <item>Evans Collins</item>
        <item>Roberts</item>
        <item>Betty C</item>
        <item>Susan Lee</item>
    </string-array>

    <string-array name="month">
        <item>January</item>
        <item>February</item>
        <item>March</item>
        <item>April</item>
        <item>May</item>
        <item>June</item>
        <item>July</item>
        <item>August</item>
        <item>September</item>
        <item>October</item>
        <item>November</item>
        <item>December</item>
    </string-array>

</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#1976D2</color>
    <color name="colorPrimaryDark">#1565C0</color>
    <color name="colorPrimaryLight">#1E88E5</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorAccentDark">#F50057</color>
    <color name="colorAccentLight">#FF80AB</color>

    <color name="grey_3">#f7f7f7</color>
    <color name="grey_5">#f2f2f2</color>
    <color name="grey_10">#e6e6e6</color>
    <color name="grey_20">#cccccc</color>
    <color name="grey_40">#999999</color>
    <color name="grey_60">#666666</color>
    <color name="grey_80">#37474F</color>
    <color name="grey_90">#263238</color>
    <color name="grey_95">#1a1a1a</color>
    <color name="grey_100_">#0d0d0d</color>

    <color name="overlay_dark_30">#4D000000</color>
</resources>
    

dimens.xml

<resources>
    <!--genaral spacing-->
    <dimen name="spacing_xsmall">2dp</dimen>
    <dimen name="spacing_small">3dp</dimen>
    <dimen name="spacing_medium">5dp</dimen>
    <dimen name="spacing_xmedium">7dp</dimen>
    <dimen name="spacing_middle">10dp</dimen>
    <dimen name="spacing_large">15dp</dimen>
    <dimen name="spacing_smlarge">18dp</dimen>
    <dimen name="spacing_mlarge">20dp</dimen>
    <dimen name="spacing_mxlarge">25dp</dimen>
    <dimen name="spacing_xlarge">35dp</dimen>
    <dimen name="spacing_xmlarge">40dp</dimen>
    <dimen name="spacing_xxlarge">50dp</dimen>
    <dimen name="spacing_xxxlarge">55dp</dimen>
    <dimen name="appbar_padding_top">8dp</dimen>
</resources>

strings-data.xml

<resources>
    <string name="middle_lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur ipsum in placerat molestie.  Fusce quis mauris a enim sollicitudin</string>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!--style for ripple library-->
    <style name="RippleStyleWhite">
        <item name="mrl_rippleOverlay">true</item>
        <item name="mrl_rippleColor">#80FFFFFF</item>
        <item name="mrl_rippleHover">true</item>
        <item name="mrl_rippleAlpha">0.2</item>
    </style>

    <style name="RippleStyleBlack" parent="RippleStyleWhite">
        <item name="mrl_rippleColor">#8096989A</item>
    </style>

</resources>
    

4. Adapter

AdapterListSectioned

package fabmore.button.fyprojects.com.fy.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;

import fabmore.button.fyprojects.com.fy.R;
import fabmore.button.fyprojects.com.fy.model.People;
import fabmore.button.fyprojects.com.fy.utils.Tools;

public class AdapterListSectioned extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private final int VIEW_ITEM = 1;
    private final int VIEW_SECTION = 0;

    private List<People> items = new ArrayList<>();
    private Context ctx;
    private OnItemClickListener mOnItemClickListener;

    public interface OnItemClickListener {
        void onItemClick(View view, People obj, int position);
    }

    public void setOnItemClickListener(final OnItemClickListener mItemClickListener) {
        this.mOnItemClickListener = mItemClickListener;
    }

    public AdapterListSectioned(Context context, List<People> items) {
        this.items = items;
        ctx = context;
    }

    public class OriginalViewHolder extends RecyclerView.ViewHolder {
        public ImageView image;
        public TextView name;
        public View lyt_parent;

        public OriginalViewHolder(View v) {
            super(v);
            image = (ImageView) v.findViewById(R.id.image);
            name = (TextView) v.findViewById(R.id.name);
            lyt_parent = (View) v.findViewById(R.id.lyt_parent);
        }
    }

    public static class SectionViewHolder extends RecyclerView.ViewHolder {
        public TextView title_section;

        public SectionViewHolder(View v) {
            super(v);
            title_section = (TextView) v.findViewById(R.id.title_section);
        }
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyclerView.ViewHolder vh;
        if (viewType == VIEW_ITEM) {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_people_chat, parent, false);
            vh = new OriginalViewHolder(v);
        } else {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_section, parent, false);
            vh = new SectionViewHolder(v);
        }
        return vh;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        People p = items.get(position);
        if (holder instanceof OriginalViewHolder) {
            OriginalViewHolder view = (OriginalViewHolder) holder;

            view.name.setText(p.name);
            Tools.displayImageRound(ctx, view.image, p.image);
            view.lyt_parent.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (mOnItemClickListener != null) {
                        mOnItemClickListener.onItemClick(view, items.get(position), position);
                    }
                }
            });
        } else {
            SectionViewHolder view = (SectionViewHolder) holder;
            view.title_section.setText(p.name);
        }
    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    @Override
    public int getItemViewType(int position) {
        return this.items.get(position).section ? VIEW_SECTION : VIEW_ITEM;
    }

    public void insertItem(int index, People people){
        items.add(index, people);
        notifyItemInserted(index);
    }

}

5.Data

DataGenerator

package fabmore.button.fyprojects.com.fy.data;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v7.content.res.AppCompatResources;


import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Collections;
import java.util.List;
import java.util.Locale;
import java.util.Random;

import fabmore.button.fyprojects.com.fy.R;
import fabmore.button.fyprojects.com.fy.model.People;
import fabmore.button.fyprojects.com.fy.utils.Tools;

@SuppressWarnings("ResourceType")
public class DataGenerator {

    private static Random r = new Random();

    public static int randInt(int max) {
        int min = 0;
        return r.nextInt((max - min) + 1) + min;
    }

    /**
     * Generate dummy data people
     *
     * @param ctx android context
     * @return list of object
     */
    public static List<People> getPeopleData(Context ctx) {
        List<People> items = new ArrayList<>();
        TypedArray drw_arr = ctx.getResources().obtainTypedArray(R.array.people_images);
        String name_arr[] = ctx.getResources().getStringArray(R.array.people_names);

        for (int i = 0; i < drw_arr.length(); i++) {
            People obj = new People();
            obj.image = drw_arr.getResourceId(i, -1);
            obj.name = name_arr[i];
            obj.email = Tools.getEmailFromName(obj.name);
            obj.imageDrw = ctx.getResources().getDrawable(obj.image);
            items.add(obj);
        }
        Collections.shuffle(items);
        return items;
    }

    public static List<String> getStringsMonth(Context ctx) {
        List<String> items = new ArrayList<>();
        String arr[] = ctx.getResources().getStringArray(R.array.month);
        for (String s : arr) items.add(s);
        Collections.shuffle(items);
        return items;
    }


}

6.Model

People

package fabmore.button.fyprojects.com.fy.model;

import android.graphics.drawable.Drawable;

public class People {

    public int image;
    public Drawable imageDrw;
    public String name;
    public String email;
    public boolean section = false;

    public People() {
    }

    public People(String name, boolean section) {
        this.name = name;
        this.section = section;
    }

}

7.Utils

Tools

package fabmore.button.fyprojects.com.fy.utils;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Build;
import android.support.annotation.DrawableRes;
import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.target.BitmapImageViewTarget;

import fabmore.button.fyprojects.com.fy.R;

public class Tools {
    public static void setSystemBarColor(Activity act) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = act.getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.setStatusBarColor(act.getResources().getColor(R.color.colorPrimaryDark));
        }
    }

    public static String getEmailFromName(String name) {
        if (name != null && !name.equals("")) {
            String email = name.replaceAll(" ", ".").toLowerCase().concat("@mail.com");
            return email;
        }
        return name;
    }

    public static void displayImageRound(final Context ctx, final ImageView img, @DrawableRes int drawable) {
        try {
            Glide.with(ctx).load(drawable).asBitmap().centerCrop().into(new BitmapImageViewTarget(img) {
                @Override
                protected void setResource(Bitmap resource) {
                    RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(ctx.getResources(), resource);
                    circularBitmapDrawable.setCircular(true);
                    img.setImageDrawable(circularBitmapDrawable);
                }
            });
        } catch (Exception e) {
        }
    }
}

ViewAnimation

package fabmore.button.fyprojects.com.fy.utils;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.view.View;
public class ViewAnimation {

    public static void initShowOut(final View v) {
        v.setVisibility(View.GONE);
        v.setTranslationY(v.getHeight());
        v.setAlpha(0f);
    }

    public static void showIn(final View v) {
        v.setVisibility(View.VISIBLE);
        v.setAlpha(0f);
        v.setTranslationY(v.getHeight());
        v.animate()
                .setDuration(200)
                .translationY(0)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                    }
                })
                .alpha(1f)
                .start();
    }

    public static boolean rotateFab(final View v, boolean rotate) {
        v.animate().setDuration(200)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                    }
                })
                .rotation(rotate ? 135f : 0f);
        return rotate;
    }

    public static void showOut(final View v) {
        v.setVisibility(View.VISIBLE);
        v.setAlpha(1f);
        v.setTranslationY(0);
        v.animate()
                .setDuration(200)
                .translationY(v.getHeight())
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        v.setVisibility(View.GONE);
                        super.onAnimationEnd(animation);
                    }
                }).alpha(0f)
                .start();
    }

}

8.Activity

MainActivity

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

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

        <include layout="@layout/toolbar" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/app_bar_layout"
        android:scrollbars="vertical"
        android:scrollingCache="true" />

    <View
        android:id="@+id/back_drop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/overlay_dark_30"
        android:clickable="true"
        android:fitsSystemWindows="true" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:gravity="end|right"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/lyt_mic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|end|right"
                android:layout_margin="@dimen/spacing_middle"
                app:cardBackgroundColor="@android:color/white"
                app:cardCornerRadius="3dp"
                app:cardElevation="2dp"
                app:contentPadding="@dimen/spacing_medium">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="Record Voice"
                    android:textAppearance="@style/TextAppearance.AppCompat.Body2" />

            </android.support.v7.widget.CardView>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_mic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/spacing_middle"
                android:layout_marginLeft="@dimen/spacing_smlarge"
                android:layout_marginRight="@dimen/spacing_smlarge"
                android:layout_marginTop="@dimen/spacing_middle"
                android:clickable="true"
                android:tint="@color/grey_80"
                app:backgroundTint="@android:color/white"
                app:fabSize="mini"
                app:rippleColor="@android:color/black"
                app:srcCompat="@drawable/ic_mic" />

            <View
                android:layout_width="@dimen/spacing_xmedium"
                android:layout_height="0dp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/lyt_call"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|end|right"
                android:layout_margin="@dimen/spacing_middle"
                app:cardBackgroundColor="@android:color/white"
                app:cardCornerRadius="3dp"
                app:cardElevation="2dp"
                app:contentPadding="@dimen/spacing_medium">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="Call Friends"
                    android:textAppearance="@style/TextAppearance.AppCompat.Body2" />

            </android.support.v7.widget.CardView>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_call"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/spacing_middle"
                android:layout_marginLeft="@dimen/spacing_smlarge"
                android:layout_marginRight="@dimen/spacing_smlarge"
                android:layout_marginTop="@dimen/spacing_middle"
                android:clickable="true"
                android:tint="@color/grey_80"
                app:backgroundTint="@android:color/white"
                app:fabSize="mini"
                app:rippleColor="@android:color/black"
                app:srcCompat="@drawable/ic_call" />

            <View
                android:layout_width="@dimen/spacing_xmedium"
                android:layout_height="0dp" />

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/spacing_middle"
            android:layout_marginLeft="@dimen/spacing_smlarge"
            android:layout_marginRight="@dimen/spacing_smlarge"
            android:layout_marginTop="@dimen/spacing_middle"
            android:clickable="true"
            android:tint="@android:color/white"
            app:backgroundTint="@color/colorPrimary"
            app:fabSize="normal"
            app:rippleColor="@android:color/white"
            app:srcCompat="@drawable/ic_add" />

    </LinearLayout>

</RelativeLayout>