Text, images, and buttons

In this topic, you'll learn about the most popular and frequently used UI widgets: TextView, EditText, ImageView, Button, and ImageButton. You will find out how to display and use these View elements, see what they look like, and discover how to assign attributes with your chosen values to them. Stay tuned!

TextView

The TextView component is designed to display read-only text and is one of the most common UI elements. You can use TextViews to provide descriptive labels and other information that helps people to understand and navigate your apps.

The android:text attribute can be used in your markup file to display text in a TextView, as shown below:

android:text="Hi!"

However, this is no longer considered to be the best approach. Instead, it is recommended to use text resources because they will enable multilingual support in the future:

<!-- strings.xml -->
<string name="hello">Hi!</string>

<!-- inside a TextView tag -->
android:text="@string/hello"

The following code example demonstrates how to add a TextView component to a layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_user"
        android:textSize="32sp"/>

</LinearLayout>

The text in the code can be set using the setText() method:

setContentView(R.layout.activity_main)
...
// find the view declared in activity_main.xml
val textView = findViewById<TextView>(R.id.textView)
// set the text
textView.text = "Hi, $username!"
// or using text resources
textView.setText(R.string.hello)

You can also assign the text display color using the textColor attribute.

EditText

TextView has an inheritor called EditText, which is used to make text elements editable. Generally speaking, EditText is an editable version of TextView. EditText is commonly utilized in applications to provide input fields, especially in forms. In the below example, the android:inputType has been set to "number". This ensures that the system will display the appropriate soft input method, which in this case is the number keyboard:

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/enter_age"
    android:inputType="number"
    android:textSize="28sp"/>

EditText has another interesting attribute called hint. It allows you to set the text that will be displayed as a tooltip if the EditText element is empty:

ImageView

The ImageView component, as its name suggests, is designed to display images. The android:src attribute is used to specify the image, and the app:srcCompat attribute is utilized to support vector drawables via AppCompatImageView. ImageView is the basic container element for using graphics. You can set images from different sources, such as program resources and content providers, and there are several methods for loading images in the ImageView class:

• setImageResource(int resId): sets an image by resource ID
• setImageBitmap(Bitmap bitmap): sets a Bitmap
• setImageDrawable(Drawable drawable): sets a drawable (covered in the Drawables topic)

For scaling pictures, ImageView has a scaleType property and an XML attribute supporting several values.

<ImageView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:src="@drawable/android" />

Button

Buttons inherit from TextView and use many familiar attributes: textColor, textSize, and so on. The main difference is the appearance: a typical button has rounded corners and a shadow:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/click_me"
    android:textAppearance="@style/TextAppearance.AppCompat.Large" />

Look closely at the Button with the text "I HAVE AN ICON" shown below. It has an icon on the left and text on the right, which is achieved by using the drawableLeft attribute inherited from TextView:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_smile"
    android:text="@string/smile_icon"/>

ImageButton

The final UI element we are going to cover is called ImageButton, which is basically an ImageView with a button-like appearance. This component is a button with an image instead of text. A standard ImageButton looks like a regular button:

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/bender"/>

You've learned about the main attributes of some common UI components in this topic, but many more are available. You can find the complete list in the Layout Editor's Attributes panel.

Conclusion

Now you know how and when to use five very popular UI widgets: TextView, EditText, Button, ImageView, and ImageButton. These are the design elements that are most likely to form part of your Android apps. They have lots of different attributes, and you've become familiar with the ones that are utilized most frequently. Don't forget that Views also have click listener events, which allow you to assign behaviors to each component.