Constraint Layout cannot align to the corner of the screen - bottom of

Question

Constraint Layout cannot align to the corner of the screen - bottom of

Asked 4 years, 5 months ago

Viewed 64 times

-2

Hello, I have a Layout. xml that has a text as parameter and that in the lower right corner of this screen should be displayed a Floating Action Button, as shown in the preview layout below What in practice does not happen, because in practice the FAB not only does not stay at the edge of the screen, but also overlaps the displayed text, this only happened after updating the version of Constraint in builde.Radle, which may have been?

.xml of the Layout:

<androidx.constraintlayout.widget.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="match_parent"
    android:layout_height="match_parent">

        <TextView
            android:id="@+id/text_cadastroBoi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/vermelho3"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/addAlgo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:clickable="true"
            android:elevation="16dp"
            android:focusable="true"
            android:scaleType="center"
            android:src="@drawable/ic_add_unique_ox"
            android:visibility="visible"
            app:backgroundTint="#fffff9"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:maxImageSize="60dp"
            app:pressedTranslationZ="12dp" />

        <TextView
            android:id="@+id/textview_addBoiLote"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="14dp"
            android:layout_marginBottom="8dp"
            android:background="#212121"
            android:padding="8dp"
            android:text="Adicionar boi sem Bluetooth"
            android:textColor="#ffffff"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="@+id/addBoiSemBlue"
            app:layout_constraintEnd_toStartOf="@+id/addBoiSemBlue" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/addBoiSemBlue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="160dp"
            android:background="?android:attr/selectableItemBackground"
            android:clickable="true"
            android:elevation="16dp"
            android:focusable="true"
            android:src="@drawable/ic_ox_unique"
            android:visibility="invisible"
            app:backgroundTint="#ffffff"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:maxImageSize="56dp"
            app:pressedTranslationZ="12dp" />

        <TextView
            android:id="@+id/textview_addBoi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="23dp"
            android:layout_marginBottom="10dp"
            android:background="#212121"
            android:padding="8dp"
            android:text="Adicionar boi via Bluetooth"
            android:textColor="#ffffff"
            android:visibility="invisible"
            app:fabSize="normal"
            app:layout_constraintBottom_toBottomOf="@+id/addBovinoBle"
            app:layout_constraintEnd_toStartOf="@+id/addBovinoBle" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/addBovinoBle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="80dp"
            android:background="?android:attr/selectableItemBackground"
            android:clickable="true"
            android:elevation="16dp"
            android:focusable="true"
            android:scaleType="center"
            android:src="@drawable/ic_ox_unique_ble"
            android:visibility="invisible"
            app:backgroundTint="#ffffff"
            app:fabSize="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:maxImageSize="60dp"
            app:pressedTranslationZ="12dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Edith the question to put the code of the .xml. Probably this is because the ConstraintLayout is not occupying the entire screen. As for the FAB being in front of the text, as far as I understand this is the expected behavior.

– Rafael Tavares

2020/05/27 at 18:57
Edited, so you can only put it on the edge of the screen if the textView takes up all the space?

– luke cross

2020/05/27 at 19:01
Why -1? The question is correct...

– luke cross

2020/05/27 at 19:09

2 answers

Browser other questions tagged android android-layout constraint

You are not signed in. Login or sign up in order to post.

by Rogerio Santos • **552** points · Answer 1 · 2020-05-27T19:15:32+00:00

1

In the case of the first, you are aligning the top of the Fab with the base of the text:

app:layout_constraintTop_toBottomOf="@+id/text_cadastroBoi"

Align with the Parent:

app:layout_constraintBottom_toBottomOf="parent"

In the case of the second, you are aligning FAB with items that are not Parent:

app:layout_constraintBottom_toTopOf="@+id/addBovinoBle" 
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/text_cadastroBoi"

To the lower right corner would be:

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Then just set the margins.

In the case app:layout_constraintTop_toBottomOf="parent" not "should" be Parent, because the top would block the bottom, that kind of locks the FAB in the outside corner of the screen, I’ll try something similar, thank you!

– luke cross

2020/05/27 at 19:33
Oops, I’m so sorry.. layout_constraintBottom_toBottomOf.. I’ll correct the answer

– Rogerio Santos

2020/05/27 at 19:34
I got the same result for now, but I think the way is the one you said yourself

– luke cross

2020/05/27 at 19:34
Do like the second, erase any other Constraint, leave only the two, Bottom and End.

– Rogerio Santos

2020/05/27 at 19:36
I think it has to do with the size of my text, because the more text I put on, the more the buttons "go down", but with short texts they never really stay in the corner, it’s weird

– luke cross

2020/05/27 at 19:39
It is as if even defining Constraint as match_parent the device still sees it as Wrap_content, this is very buggy kkkkk

– luke cross

2020/05/27 at 19:40
See if you still have reference to the text, as it is set to Rent, should not interfere

– Rogerio Santos

2020/05/27 at 19:40
As you might in the . xml update, even so, continues the same result, honestly I’m already extremely confused kkkkk

– luke cross

2020/05/27 at 19:49
Match_parent does not work with Constraint Layout as parent... What a mess of Google

– luke cross

2020/05/27 at 19:59
Pro Matchparent work you need to do the Constraint on both sides, Endtoend Starttostart

– Rogerio Santos

2020/05/28 at 12:31

Show 5 more comments

by luke cross • 19 points · Answer 2 · 2020-05-28T12:37:17+00:00

The constraints layouts have the wonderful Vertical and Horizontal guidelines, which can restrict the position of the element where needed, I used a single Vertical Guideline and added the parameters of the Rogerio Santos response and got the perfect result, even when rotating the screen.

Reference on the guidelines