Constraint layout button text center alignment

Question

I'm using the new Constraint layout to build my layout. I need to have Button that occupies almost the entire screen width and that was easy using constraints.

As you can see in the image I am setting the width to 0dp (Any size), but the text don't stick at the center what's usually the normal for a button text.

I've tried: - set gravity to center - set textAlignment to center

Looks like this properties can't work with 0dp width (Any size).

So I've tried to set the width to match_parent using gravity center.

It's a little bit to the right.

Does any one know how to fix that behavior ?

Note that i'm using alpha4

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha4'

XML code

<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/content_login"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="br.com.marmotex.ui.LoginActivityFragment"
    tools:showIn="@layout/activity_login">

    <Button
        android:text="Log in"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/btLogin"
        android:layout_marginTop="48dp"
        app:layout_constraintTop_toBottomOf="@+id/textView6"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="@+id/content_login"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/content_login"
        android:layout_marginLeft="16dp"
        android:textColor="@android:color/white"
        android:background="@color/BackgroundColor" />

</android.support.constraint.ConstraintLayout>

EDIT It was a bug in ConstraintLayout alpha4.

UPDATE Google has released alpha5, the above code now Works. Release note

Answer 1

It seems that the issue is with android:layout_width="match_parent" when using inside ConstraintLayout. Just set android:layout_width="0dp" and add constraints app:layout_constraintStart_toStartOf="parent" & app:layout_constraintEnd_toEndOf="parent", it'd just work fine.

<Button
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:text="Continue"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent" />

Answer 2

Have you tried ?

android:textAlignment="center"

This works for me.

Answer 3

Well I think its because of these constraints app:layout_constraintRight_toRightOf app:layout_constraintLeft_toLeftOf

replace your current button with this one :

    <Button
    android:text="Log in"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:id="@+id/btLogin"
    android:textColor="@android:color/white"
    android:background="@color/BackgroundColor"
    android:gravity="center"
    android:textAlignment="center"
    android:layout_marginTop="100dp"
    tools:layout_editor_absoluteX="-1dp"
    app:layout_constraintTop_toBottomOf="@+id/textView6" />

Hope this will help.

Answer 4

It's a little bit to the right.

I think margin(s) is causing these. And its not only affecting Buttons, in my experience. Margin is screwing TextInputEditText too.

Below is a working code but please pay attention to android:layout_width="match_parent" on the Button. Any time I clicked in the editor, it will change to android:layout_width="0dp", and ruin the button alignment.

<?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=".MainActivity">


    <Button
        android:id="@+id/button_survey"
        android:layout_width="match_parent" 
        android:layout_height="52dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="@+id/activity_main"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main"
        app:layout_constraintRight_toRightOf="@+id/activity_main"
        app:layout_constraintTop_toTopOf="@+id/activity_main"
        tools:text="@string/main_activity_btn_survey"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp" />


</android.support.constraint.ConstraintLayout>

Inspired by Hobo joe's solution, below is the way i prefer to did it. His solution is working but still need to use padding to create spacing. If margin was used instead, the alignment of button's text will go slightly to the right. So I used padding on LinearLayout(or ConstraintLayout) instead of margin on button.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main"
        app:layout_constraintTop_toTopOf="@+id/activity_main"
        app:layout_constraintRight_toRightOf="@+id/activity_main"
        app:layout_constraintBottom_toBottomOf="@+id/activity_main"
        android:padding="16dp">
        <Button
            android:text="Button"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:id="@+id/button_survey"
            android:layout_weight="1"
            tools:text="@string/main_activity_btn_survey"
            />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

Answer 5

This is a bug. However, you can work around it by placing the button inside a LinearLayout (Or other standard ViewGroup). Set the parent view and the button width to match_parent, and move whatever constraints you had on the button to the parent layout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="@+id/parent_left"
    app:layout_constraintTop_toTopOf="@+id/parent_top"
    app:layout_constraintRight_toRightOf="@+id/parent_right">

    <Button
        android:id="@+id/test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Centered Text"/>

</LinearLayout>