How to align buttons in Android Studio

Question

I have just started learning to programme for Android in Java and as my first program, I decided to write a simple TicTacToe game. Since I am new to Android Studio I don't know how the alignment works here.

I am perfectly satisfied with the alignment of buttons in content_main.xml but for some reason when I run the code in the emulator they get shifted to the left.

Just in case if it might come in handy I attach the xml code to this post

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.anar.testnewest.MainActivity"
    tools:showIn="@layout/activity_main">

    <RelativeLayout
        android:layout_width="368dp"
        android:layout_height="442dp"
        android:layout_centerInParent="true"
        android:textAlignment="center"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="34dp">


        <Button
            android:id="@+id/btn1"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="99dp"
            android:onClick="btn1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/btn1"
            android:layout_alignBottom="@+id/btn1"
            android:layout_toLeftOf="@+id/btn3"
            android:layout_toStartOf="@+id/btn3"
            android:onClick="btn2" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/btn2"
            android:layout_alignBottom="@+id/btn2"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:onClick="btn3" />

        <Button
            android:id="@+id/btn4"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/btn1"
            android:layout_marginTop="26dp"
            android:onClick="btn4" />

        <Button
            android:id="@+id/btn5"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/btn4"
            android:layout_alignBottom="@+id/btn4"
            android:layout_centerHorizontal="true"
            android:onClick="btn5" />

        <Button
            android:id="@+id/btn6"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/btn5"
            android:layout_alignEnd="@+id/btn3"
            android:layout_alignRight="@+id/btn3"
            android:onClick="btn6" />

        <Button
            android:id="@+id/btn7"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@+id/btn4"
            android:layout_alignRight="@+id/btn4"
            android:layout_below="@+id/btn4"
            android:layout_marginTop="22dp"
            android:onClick="btn7" />

        <Button
            android:id="@+id/btn8"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/btn7"
            android:layout_alignBottom="@+id/btn7"
            android:layout_alignLeft="@+id/btn5"
            android:layout_alignStart="@+id/btn5"
            android:onClick="btn8" />

        <Button
            android:id="@+id/btn9"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/btn8"
            android:layout_alignBottom="@+id/btn8"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:onClick="btn9" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="70dp"
            android:text="TicTacToe"
            android:textColor="@color/colorAccent"
            android:textSize="40sp" />

    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

Thanks in advance for your time and help guys :)

Answer 1

If you want to the right layout .

Just add app:layout_constraintLeft_toLeftOf="parent" and app:layout_constraintTop_toTopOf="parent" to your RelativeLayout .

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

<RelativeLayout
    android:layout_width="368dp"
    android:layout_height="442dp"
    android:layout_centerInParent="true"
    android:textAlignment="center"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent">


    <Button
        android:id="@+id/btn1"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="99dp"
        android:onClick="btn1"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btn1"
        android:layout_alignBottom="@+id/btn1"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_toStartOf="@+id/btn3"
        android:onClick="btn2"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btn2"
        android:layout_alignBottom="@+id/btn2"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:onClick="btn3"/>

    <Button
        android:id="@+id/btn4"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/btn1"
        android:layout_marginTop="26dp"
        android:onClick="btn4"/>

    <Button
        android:id="@+id/btn5"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btn4"
        android:layout_alignBottom="@+id/btn4"
        android:layout_centerHorizontal="true"
        android:onClick="btn5"/>

    <Button
        android:id="@+id/btn6"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/btn5"
        android:layout_alignEnd="@+id/btn3"
        android:layout_alignRight="@+id/btn3"
        android:onClick="btn6"/>

    <Button
        android:id="@+id/btn7"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/btn4"
        android:layout_alignRight="@+id/btn4"
        android:layout_below="@+id/btn4"
        android:layout_marginTop="22dp"
        android:onClick="btn7"/>

    <Button
        android:id="@+id/btn8"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btn7"
        android:layout_alignBottom="@+id/btn7"
        android:layout_alignLeft="@+id/btn5"
        android:layout_alignStart="@+id/btn5"
        android:onClick="btn8"/>

    <Button
        android:id="@+id/btn9"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btn8"
        android:layout_alignBottom="@+id/btn8"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:onClick="btn9"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="70dp"
        android:text="TicTacToe"
        android:textColor="@color/colorAccent"
        android:textSize="40sp"/>

</RelativeLayout>
</android.support.constraint.ConstraintLayout>

Output

Answer 2

Just add these properties to RelativeLayout ,

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

It is better to have Start and End than Left and Right properties. B'cos it also supports RTL layouts.