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!

Where in the xml is your first block of code located? And what is the hierarchy of containers containing the `FloatingActionButton`. — J Blaz, Oct 11 '16 at 22:36
Hello! I edited my question and added my entire XML. I'm using the "new" ConstraintLayout (My professor said it was going to be in our next exam, so I was practicing) Sorry for my bad english! — LeonardoGuerraG, Oct 12 '16 at 00:32
I would try putting it at the end of the xml. Make it the very last element of still inside the `ConstraintLayout ` — J Blaz, Oct 12 '16 at 15:33
I finally got it! It was like you said, omehow it was on the back of the ViewPager, but it was working. What I did was just adding .bringToFron(); on the buttons on my onCreate() function. — LeonardoGuerraG, Oct 12 '16 at 16:30

score 3 · Accepted Answer · answered Oct 12 '16 at 16:32

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();

score 0 · Answer 2 · answered Oct 12 '16 at 16:33

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.

FloatingActionButton doesn't show on KitKat

2 Answers2