Clayton Oliveira Clayton Oliveira - 4 months ago 105
Android Question

Constraint layout button text center alignment

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.

enter image description here

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.

enter image description here

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">


<TextView
android:text="Welcome back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView2"
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:layout_marginTop="24dp"
app:layout_constraintTop_toTopOf="@+id/content_login"
android:textSize="30sp"
android:textAllCaps="true"
android:textStyle="normal|bold"
android:fontFamily="sans-serif-condensed" />

<TextView
android:text="We know... it's that good"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView3"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@+id/textView2"
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" />


<com.facebook.login.widget.LoginButton
android:id="@+id/login_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:layout_constraintTop_toBottomOf="@+id/textView3"
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:layout_marginTop="24dp"
android:paddingTop="10dp"
android:paddingBottom="10dp" />

<TextView
android:text="OR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView5"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@+id/login_button"
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" />

<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="@+id/etEmail"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@+id/textView5"
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:hint="Email"
android:textAlignment="center" />

<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/etPassword"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@+id/etEmail"
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:hint="Password"
android:textAlignment="center" />

<TextView
android:text="Forgot your password?"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView6"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@+id/etPassword"
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" />

<Button
android:text="Log in"
android:layout_width="match_parent"
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:gravity="center"
android:textAlignment="center"
/>

</android.support.constraint.ConstraintLayout>


EDIT Constraint Layout is still not production ready, pay attention for some Visual layout editor in Android Studio.

For the correct answer to work 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.

Answer

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>