Android Studio Doesn't Draw Button Correctly

In my Android studio project I have a fragment with constraint layout inside. Here is XML. Copy

layout_constraintHorizontal_bias this will make a small variation from center. try code given below,

            <Button
                android:id="@+id/confirmButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/rounded_corner_shape_tint"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:text="Confirm Pin"
                android:textColor="@color/appMainColor"
                android:textSize="14sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

Solution 2:

Remove the below line from your button layout in xml.

app:layout_constraintHorizontal_bias="0.5"

Horizontal Bias: This allows us to position a view along the horizontal axis using a bias value, this will be relative to it’s constrained position.

For more information about Constraint Layout refer this article

Solution 3:

android:id="@+id/pinLayout" has hight of 250dp that's why button doesn't position at vertically center. try the code given below.

<android.support.constraint.ConstraintLayoutxmlns: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"><android.support.constraint.ConstraintLayoutandroid:id="@+id/pinLayout"android:layout_width="match_parent"android:layout_height="250dp"><android.support.constraint.ConstraintLayoutandroid:id="@+id/cl_root"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"tools:visibility="visible"><TextViewandroid:id="@+id/numberTextView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginBottom="8dp"android:gravity="top"android:text="00000000"android:textColor="@color/appTintColor"android:textSize="18sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout><android.support.constraint.ConstraintLayoutandroid:id="@+id/constraintLayout"android:layout_width="match_parent"android:layout_height="0dp"app:layout_constraintTop_toBottomOf="@id/cl_root"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHeight_percent="0.4"app:layout_constraintStart_toStartOf="parent"><LinearLayoutandroid:layout_width="0dp"android:layout_height="0dp"android:orientation="horizontal"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><TextViewandroid:id="@+id/pinView1"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="0.25"android:gravity="center"android:text="-"android:textColor="@color/appTintColor"android:textSize="36sp" /><TextViewandroid:id="@+id/pinView2"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="0.25"android:gravity="center"android:text="-"android:textColor="@color/appTintColor"android:textSize="36sp" /><TextViewandroid:id="@+id/pinView3"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="0.25"android:gravity="center"android:text="-"android:textColor="@color/appTintColor"android:textSize="36sp" /><TextViewandroid:id="@+id/pinView4"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="0.25"android:gravity="center"android:text="-"android:textColor="@color/appTintColor"android:textSize="36sp" /></LinearLayout></android.support.constraint.ConstraintLayout></android.support.constraint.ConstraintLayout><android.support.constraint.ConstraintLayoutandroid:id="@+id/constraintLayout2"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHeight_percent="0.4"app:layout_constraintStart_toStartOf="parent"><Buttonandroid:id="@+id/confirmButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/rounded_corner_shape_tint"android:paddingLeft="16dp"android:paddingRight="16dp"android:text="Confirm Pin"android:textColor="@color/appMainColor"android:textSize="14sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout></android.support.constraint.ConstraintLayout>

Solution 4:

try to use RelativeLayout instead of ConstraintLayout by changing all ConstraintLayout to RelativeLayout in your xml

<android.support.constraint.ConstraintLayout >
...
Your content
...
</android.support.constraint.ConstraintLayout>

to

<RelativeLayout >
...
Your content
...
</RelativeLayout>

then you might give set your button to be center in parent

android:layout_centerInParent="true"

for your TextView pinView1, pinView2, pinView3 and pinView4 you have simply put it inside a LinearLayout.