floating action button backward compatibility issue

Question

So I'm making an app with several floating action buttons, although in my case they are fixed in the view, but I like the way they look

Anyhow, it seems that for older API such as jelly bean it has issues showing up as the attached image, but it kitkat and later it is shown perfectly, any ideas how to fix this ?

xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="ly.bsagar.libyanaguid.services">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_weight="1"
        android:gravity="center">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center"
            android:text="@string/internetService"
            android:textSize="@dimen/text_size_large" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_public_black_24dp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_marginLeft="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_weight="2"
        android:gravity="center">

        <android.support.design.widget.FloatingActionButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/fab_margin"
            android:layout_weight="1"
            android:onClick="ActInternet"
            android:src="@drawable/ic_done_black_24dp" />

        <android.support.design.widget.FloatingActionButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/fab_margin"
            android:layout_weight="1"
            android:onClick="DisInternet"
            android:src="@drawable/ic_clear_black_24dp" />

        <android.support.design.widget.FloatingActionButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/fab_margin"
            android:layout_weight="1"
            android:onClick="getSetting"
            android:src="@drawable/ic_settings_black_24dp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/fab_margin"
        android:layout_weight="1"
        android:gravity="center">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center"
            android:text="@string/callWaiting"
            android:textSize="@dimen/text_size_large" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_phone_paused_black_24dp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_weight="2"
        android:gravity="center">

        <android.support.design.widget.FloatingActionButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/fab_margin"
            android:layout_weight="1"
            android:onClick="actwaiting"
            android:src="@drawable/ic_done_black_24dp" />

        <android.support.design.widget.FloatingActionButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/fab_margin"
            android:layout_weight="1"
            android:onClick="deactwaiting"
            android:src="@drawable/ic_clear_black_24dp" />

        <android.support.design.widget.FloatingActionButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/fab_margin"
            android:layout_weight="1"
            android:onClick="statuswaiting"
            android:src="@drawable/ic_error_outline_black_24dp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_weight="1"
        android:gravity="center">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center"
            android:text="@string/missedCallNotification"
            android:textSize="@dimen/text_size_medium" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_phone_missed_black_24dp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_weight="2"
        android:gravity="center">

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/fab_margin"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:onClick="actmissed"
            android:src="@drawable/ic_done_black_24dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="@dimen/fab_margin"
            android:layout_weight="1"
            android:onClick="deactmissed"
            android:src="@drawable/ic_clear_black_24dp" />

    </LinearLayout>

</LinearLayout>

bad view

good view (ignore that square, I was testing something

thanks in advance

Answer 1

Well, I don't know what issue you're facing but it might be problem with backward compatibility of this view.

You may try this aditional free Floating Action Button library for Android It has many customizations and requires SDK version 9 and higher

Full Demo Video

Also if possible downgrade (if you're using newer version) Google's Design libray in build.gradle file

compile 'com.android.support:design:22.2.0'

More solutions you would find here:

How to create a floating action button (FAB) in android, using AppCompat v21?

Floating Action Button for lower version

Hope it help