FloatingActionButton doesn't show on KitKat

Question

I started using Android Studio 2 months ago for school, and I'm having some trouble with the FloatinActionButton. It doesn't show in KitKat, even though I'm using the support library.

This is what my Activity's XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
 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/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.leonardoguerrag.budget.MainActivity"
 android:clipToPadding="true"
 android:paddingBottom="0dp"
 android:background="@android:color/holo_orange_light">

<android.support.design.widget.FloatingActionButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:clickable="true"
 app:fabSize="mini"
 app:srcCompat="@android:drawable/ic_menu_compass"
 android:id="@+id/btnAgregarGasto"
 app:layout_constraintBottom_toTopOf="@+id/btnAgregar"
 android:layout_marginBottom="16dp"
 app:layout_constraintLeft_toLeftOf="@+id/btnAgregar"
 app:layout_constraintRight_toRightOf="@+id/btnAgregar" />

<android.support.design.widget.FloatingActionButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:clickable="true"
 app:fabSize="mini"
 app:srcCompat="@android:drawable/ic_input_get"
 android:id="@+id/btnAgregarBudget"
 app:backgroundTint="?attr/colorPrimary"
 app:layout_constraintBottom_toTopOf="@+id/btnAgregarGasto"
 android:layout_marginBottom="16dp"
 app:layout_constraintLeft_toLeftOf="@+id/btnAgregarGasto"
 app:layout_constraintRight_toRightOf="@+id/btnAgregarGasto" />

<android.support.design.widget.FloatingActionButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:clickable="true"
 app:fabSize="normal"
 app:srcCompat="@android:drawable/ic_input_add"
 android:id="@+id/btnAgregar"
 app:backgroundTint="@android:color/holo_blue_dark"
 app:layout_constraintBottom_toBottomOf="@+id/viewPager"
 android:layout_marginBottom="16dp"
 app:layout_constraintRight_toRightOf="@+id/viewPager"
 android:layout_marginEnd="16dp"
 android:layout_marginRight="16dp" /> 

<android.support.design.widget.TabLayout
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:tabMode="fixed"
 android:id="@+id/tabLayout"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent">
</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
 android:layout_width="0dp"
 android:id="@+id/viewPager"
 android:layout_height="0dp"
 app:layout_constraintTop_toBottomOf="@+id/tabLayout"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintHorizontal_bias="0.0"
 app:layout_constraintVertical_bias="0.0">    
</android.support.v4.view.ViewPager>

My dependencies:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
    exclude group: 'com.android.support', module: 'support-annotations'
})
    compile 'com.android.support:appcompat-v7:24.2.1'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha9'
    compile 'com.android.support:cardview-v7:24.2.1'
    compile 'com.android.support:design:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
}

It works as intended in Marshmallow and Nougat, probably on Lollipop.

I don't know what am I missing.

I looked into this, but couldn't find an answer.

Thanks!

Answer 1

Kitkat and earlier does some strange stuff with layouts and will sometimes layout your xml in order even when you have an element that says that it doesn't matter. So try putting it in the foreground either programmatically or putting the xml at the end.

Answer 2

Somehow the buttons where being displayed correctly but on the back of the ViewPager.

On my onCreate() function I just added .bringToFront(); on all my FABs and they are now visible!

Ex.

FloatingActionButton btnAgregar;
btnAgregar = (FloatingActionButton) findViewById(R.id.btnAgregar);
btnAgregar.bringToFront();