Android Studio Textview Step By Step Tutorial

Before writing about Android Studio Textview, there are other articles that can be read. That article is an android gradient background, please read if you are interested. This article is intended for beginners in Android Studio. In this article, I will only give a basic tutorial. So if your level is already advanced, this article is not suitable for you.

At the end of this article, I hope you can make a textView like mine. The end result of this tutorial is you can make like this. Very simple.

Android Studio TextView
Android Studio TextView

I made a textView like a picture above is not difficult. But people who are new to Android Studio will find it difficult. For information, I use Android Studio version 3.5.

Creating a New Project

The first step is to create a new project in Android Studio.

  • In the Choose Your Project window, select the Phone and Tablet tab.
  • Then you select Empty Activity, then click Next. For detail please see picture below.
Step to Create a New Project - Choose Your Project
Choose Your Project
  • The Configure Your Program window will appear.
  • Fill in the Name of the project as you want.
  • In the Package Name, it will be filled automatically. You don’t need to edit.
  • Specify the folder where you will save this project.
  • Choose the Java language. There are actually two language choices, Java or Kotlin.
  • Then click Finish. For more clearly see the picture.
Configure Your Project
Configure Your Project
  • Then a window will appear as shown below. Now you are ready to learn textView.
Ready to Learn Android Studio TextView
Ready to Learn Android Studio TextView

Android Studio TextView Attributes

Textview has many attributes. But I will only give a few of the most commonly used attributes.

  • android:id –> Used to provide unique control identification
  • android:width -> is used to give wide the text
  • android:height -> is used to give tall the text
  • android:text -> to display text
  • android:textColor -> I use this to give color to the text
  • android:gravity -> used to align the text
  • android:textSize –> used to specify the size of text
  • android:textStyle –> used to change the style (bold, italic, bolditalic) of text.

Those are some of the attributes of textView that are often used. I will give an example of how to use it.

This is Code of Android Studio TextView

This is code of the XML file.

<?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:id="@+id/hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textColor="#009688"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="text bottom"
        android:textSize="50sp"
        android:textColor="#9C27B0"
        android:textAllCaps="true"
        app:layout_constraintTop_toBottomOf="@+id/hello"
        android:textAlignment="center"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="text top"
        android:textSize="50sp"
        android:textAlignment="center"
        android:textAllCaps="true"
        android:textColor="#E91E63"
        app:layout_constraintBottom_toTopOf="@+id/hello"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Explanation of the code above:

  • In the first textView, I use layout_constraint attribute. The layout_constraint attribute is to bind an element to another element.
  • Layout_width and layout_height are mandatory attributes of textView elements in Android Studio.
  • android:textColor to change the color.

In the example that I was making, I made three textView.

  1. I wrote Hello World on the first textView.
  2. Then I write the text bottom in the second textView.
  3. In the third textView I write the text top.

You might ask, why different between XML and the results after the program has been run?

Comparison XML and Result
Comparison XML and Result

I will explain the differences in the order of the words Hello World, text bottom and text top. For your understanding, please see the comparison image above.

Consider the first textView:

 <TextView
        android:id="@+id/hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textColor="#009688"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

I use four layout_constraint in the first textView. It forces the textView in the middle of the screen. The first textView is bound to the screen. I give the first textView’s id is @+id/hello.

Consider the second textView:

  <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="text bottom"
        android:textSize="50sp"
        android:textColor="#9C27B0"
        android:textAllCaps="true"
        app:layout_constraintTop_toBottomOf="@+id/hello"
        android:textAlignment="center"
        />

The second textView there is one layout_constraint, that is app:layout_constraintTop_toBottomOf=”@+id/hello”. This constraint makes the text bottom placed on the bottom of the Hello World word. The top of the text bottom word appears after the Hello World word.

Consider the last textView:

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="text top"
        android:textSize="50sp"
        android:textAlignment="center"
        android:textAllCaps="true"
        android:textColor="#E91E63"
        app:layout_constraintBottom_toTopOf="@+id/hello"
        />

In the last textView, there is one constraint. The constraint is app:layout_constraintBottom_toTopOf=”@+id/hello”. This constraint makes the text top placed on the top of the Hello World word, although in the XML it placed in the last.

app:layout_constraintBottom_toTopOf=”@+id/hello” this means the bottom of element tied to the top of other element.

I hope this android studio textview tutorial could help many people.

Thank you very much for reading my articles.

Leave a Reply

Your email address will not be published. Required fields are marked *