Android Kotlin Beginner Tutorial Tic Tac Toe | Part 2 – The Layout

Welcome to part-2 of this Android Kotlin beginner tutorial series where we will be making a fun Tic Tac Toe game app. To go to part 1 of this series, click here.

In this tutorial, we will be creating the layout of our Android Tic Tac Toe app.
This is what our app will look like at the end of this tutorial.

Video Tutorial

If you would rather watch a video then read all the way, you can check out this. Although, the video is a quick walkthrough. For detailed tutorial, please consider reading this article. If you choose to watch the video and find it useful, please give it a thumbsup and subscribe to the channel. Thank you. Lets continue.

Layout Types

Alright folks, before we begin, a quick word about layouts we’re going to use.

Linear Layout

A Linear Layout displays its children in line either vertically or horizontally depending on whether the android:orientation attribute is set to vertical or horizontal. Learn more about LinearLayout here.

Relative Layout

A Relative Layout displays its children relative to one another. A child of Relative layout takes its position in relation to its siblings. You can read more about Relative Layout here.

Constraint Layout

A constraint layout allows you to arrange its children in a flexible way. A constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. The position of a child is set according to these constraints. Learn more about Constraint Layout here.

Android Tic Tac Toe App Layout

Alright, now that you are familiar with the layouts, let’s get going.
This is what we want our layout to be.

We will have a parent vertical Linear Layout with 5 children:

1. Child 1 would be a Constraint Layout. In this layout, we will have 3 TextView.
2. Child 2, 3, and 4 would be horizontal Linear Layouts each having 3 buttons. All 3 linear layouts together makeup the 3×3 tic tac toe game board.
3. Child 5 would be a Relative Layout containing a single button. You might say why Relative Layout if there’s going to be just 1 child? Well, I just wanted to use it that’s why. But we’ll put something there at some point don’t worry.

Alright, Clear enough. Lets create this layout then.

Linear Layout(Vertical) as Parent

In the previous tutorial, we left off at the default hello-world app. Open the activity_main.xml file in the res/layout folder. This is our layout file we will be editing in this tutorial. This is what activity_main.xml looks like now:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Change the androidx.constraintlayout.widget.ConstraintLayout to LinearLayout and add android:orientation="vertical" attribute to this LinearLayout. Delete the TextView inside.

Ok, this is what our layout file looks like now

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

</LinearLayout>

Ok, let us create the children of our vertical LinearLayout.

Child 1: Constraint Layout

Let us add a Constraint Layout inside our Linear Layout and set layout_width to match_parent and layout_height to wrap_content.

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</androidx.constraintlayout.widget.ConstraintLayout>

Add a TextView widget to the constraint layout. This would be our Score Board title.

<TextView
      android:id="@+id/text_view_title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="SCORE BOARD"
      android:textSize="30sp"/>

Add right, left and top Constraints to it like this in the Design View.

Once you’ve added the constraints, notice that in the code these attributes are automatically added by the Android Studio to the scoreboard TextView widget.

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

So you can either choose to write these attributes directly in code or do them in design view, whatever floats your boat. You’ll mostly find yourself frequently switching between the two as per convenience.

Alright, we need to add two more TextViews to this section. These will display the scores of Player 1 and Player 2. Add android:layout_height="100dp" attribute to the Constraint Layout to add room for these two new TextViews. Also, add some padding to the constraint view by adding this attribute: android:padding="5dp". Now add these TextViews to the constraint layout.

<TextView
    android:id="@+id/text_view_p1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Player 1: 0"
    android:textSize="30sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/text_view_p2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="5dp"
    android:text="Player 2: 0"
    android:textSize="30sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

After this, our layout should look like the image below.

Child 2, 3, 4: Horizontal LinearLayout

Now let’s create our horizontal linear layouts. Each of these layouts will have 3 Button widgets which will make up our 3×3 playing board. We’ll id them like this:

Here is the code for the first row. Note that the LinearLayout attribute
android:gravity="center", pulls the children to the center.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">
        <Button
            android:id="@+id/btn00"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

Go ahead and create two more such LinearLayouts. Make sure to write proper ids for the Buttons. Once you are done, the layout should look something like this:

Child 5: Relative Layout

Below is the code for the RelativeLayout. We’ve added a top margin of 10dp to this layout to distance it from the 3×3 Game Board.

Please note the android:layout_centerHorizontal="true" attribute of the Button Widget. It is a RelativeLayout parameter that centers the View/Widget horizontally in a RelativeLayout.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp">

        <Button
            android:id="@+id/button_reset"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="Reset Game"/>
</RelativeLayout>

Now our layout should look like this:

We are almost done. Just one thing remains.

Extract String and Dimension Resources

You must have noticed that till now, all the text in the Buttons and TextViews is hardcoded. The margins we have put are right there on the widget. What if we want to change the “Player 1” text to “Player One” or change the margin from 10dp to 12dp? We would have to go to the exact widget and change it there and it will change it for that widget only. What if there are 100 such widgets? It gets tedious very fast.

So, to sort this out, we extract the strings and the dimensions into a strings.xml and dimens.xml resource file, respectively. The resources (strings/dimensions) are stored in the resource file as a key:value pair which can be accessed as @dimen/example_dimen and @string/example_string.

Put your cursor on the resource you want to extract and press Alt+Enter to open the Actions dialog. From the list of the suggested actions, choose extract string/dimen resource.

Alright Morty, now that we’ve extracted the string and dimen resources, we’re ready to move on to the next Part.

So far, we have created the layout and there are all these buttons and what not. Click the run button to see it for yourself. Try clicking on any of the buttons. Yea! they don’t do anything. Well, thats because we haven’t implemented any functionality to our buttons and other Widgets/Views.

In Part-3 of this tutorial series on Android Tic Tac Toe app, we will learn how to make all those buttons do stuff. Stay tuned. Part 3 coming up.