Botao FAB does not stay in place

Question

I do not know what is happening the FAB button climbs on top of another component when compiling, but in the preview it is right.

<?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:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context="com.rbxsoft.rbxsalesforce.CaixaDeEntradaActivity">


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="0dp">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="@string/caixaDeEntrada"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />


        <android.support.v7.widget.RecyclerView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:paddingTop="30dp"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="8dp">

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

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabNovoPedido"
        android:layout_width="48dp"
        android:layout_height="53dp"
        android:layout_gravity="end|bottom"
        android:elevation="0dp"
        android:padding="4dp"
        android:src="@drawable/ic_plus"
        app:elevation="0dp"
        app:fabSize="normal"
        tools:layout_editor_absoluteX="292dp"
        tools:layout_editor_absoluteY="439dp" />

</android.support.constraint.ConstraintLayout>

Answer 1

He won’t stay in place because you didn’t apply any constraint for him. And the editor should warn you this with a sign warning. The attributes editor_absoluteY/X only serve to give a visual effect in the editor, they will not position your view how do you want her to stay.

Read a little about Constraintlayout, because to position their views, you will need to connect them to each other, creating nodes. In the editor itself you can do this.

Another thing, none of yours views are connected correctly, because you just threw them into your Layout.

<?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:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context="com.rbxsoft.rbxsalesforce.CaixaDeEntradaActivity">


    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="@string/caixaDeEntrada" />


        <android.support.v7.widget.RecyclerView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:paddingTop="30dp">

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

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabNovoPedido"
        android:layout_width="48dp"
        android:layout_height="53dp"
        android:elevation="0dp"
        android:padding="4dp"
        android:src="@drawable/ic_plus"
        app:elevation="0dp"
        app:fabSize="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

The above code should work as desired. Below I will explain some important things I added to your layout.

Note: the value 0dp it’s like mach_parent.

---

layout_constraintStart

This attribute will align the beginning of his view with another part of another view or of Parent (which in this case is the Constraint Layout).

You can use it with the following attributes: _toStartOf and _toEndOf.

---

layout_constraintEnd

It’s the same thing as the previous attribute, but it aligns the right part of your view with another view/Parent.

Can be used with: _toStartOf and _toEndOf

---

layout_constraintTop

It is also the same thing as the previous one, but it aligns the upper part and very reminiscent of the attribute layout_below of RelativeLayout if combined with _toBottomOf.

Can be used with: _toTopOf and _toBottomOf.

---

layout_constraintBottom

Align the bottom and remember the attribute layout_above of RelativeLayout if combined with _toTopOf.

Can be used with: _toTopOf and _toBottomOf.