Search code examples
androidxmlandroid-layoutconstraintsandroid-constraintlayout

Can't center button in constraint layout

This question may have been asked a million times and seem trivial but i still do not understand the logic behind it after reading about 100 of answers.

I have this ultra simple layout XML

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

From my understanding if i set opposing constraints the render engine interprets them automatically as percentage... i mean right ? If no specific margin or anything is set then it evens out the distances. This would clearly mean that the button should tae a centered position inside the view. But it doesnt....

enter image description here

I dont understand it. i want to center with WITHOUT SETTING A MARGIN since a margin, from my understanding, is something independent of the constraint. It works within a constraint. but nevertheless i set a margin of 50 on each side. once a margin is set on opposing sides the engine should automatically render it as percentage.... right ?

So this XML:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginBottom="50dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

should say something like "the constraint is 50% to left right top and bottom" which essentially again is exactly the middle. Of course this is again not working. The engine interprets it as absolute value and the button is in another awkward position:

enter image description here

So how to do this ??

What I DON'T WANT TO DO: Adjust it with some kind of Guideline or Bias.

I want the plain thing. Just 4 constraints (4 lines inside the xml) and a button that is in the middle of the screen on any device.

Maybe someone can share some insight ?

Solution

  • You should delete these two attributes:

    app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.0"

    As you can see the official reference, default bias is fifty-fifty (50% = 0.5).

    For example the following will make the left side with a 30% bias instead of the default 50%, such that the left side will be shorter, with the widget leaning more toward the left side (Fig. 5):