Table of contents
1.
Introduction
2.
UI Elements
2.1.
Load UI using XML
2.2.
Load UI Programmatically
3.
Android Layout Types
4.
FAQs
5.
Key Takeaways
Last Updated: Mar 27, 2024
Easy

Android UI Layouts

Author Rahul Sain
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

The structure of a user interface in your app, such as an activity, is defined by a layout. The layout's elements are built utilizing a hierarchy of View and ViewGroup objects. A View is often something that the user can see and interact with. A ViewGroup, on the other hand, is an invisible container that determines the layout structure for View and other ViewGroup objects.

In this article, we will learn about UI Layouts in Android and the types of layouts. But before jumping into this, we would strongly recommend learning about Android Activities.

The upcoming section will discuss various UI elements provided by Android Inbuilt Library.

UI Elements

View is the user interface responsible for event processing and drawing and is used to generate responsive UI components such as TextView, Button, ImageView, EditText, RadioButton, and so on. They are commonly referred to as Widgets.

ViewGroup serves as the primary class for layouts and layout parameters, which store other Views or ViewGroups and define layout characteristics. They are commonly referred to as layouts.

Let's understand the difference between View and ViewGroup with the help of a screenshot

In the above image, we can see that the boxes with purple and grey colors are Relative and Linear Layout respectively. These layouts are examples of View Group. On the other hand, TextView and Button, situated in Grey Linear Layout, are examples of Views.

We can declare Views in these Layouts or ViewGroup. Also, we can use these UI elements by declaring them in the XML file or the KOTLIN or JAVA file programmatically(or dynamically).

Load UI using XML

Let's learn more about loading various Views and ViewGroups with the code provided below of activity_main.xml.

Code:

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:background="#A354FD"
        android:paddingStart="20dp"
        android:paddingTop="100dp"
        android:paddingEnd="20dp"
        android:paddingBottom="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:id="@+id/ll_grey"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#CEC7D6"
            android:padding="20dp"
            android:layout_alignParentTop="true">

            <TextView
                android:id="@+id/tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="50dp"
                android:text="TextView"
                android:textSize="18sp" />

            <Button
                android:id="@+id/btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:text="Button" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_green"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#6FBA54"
            android:padding="20dp"
            android:orientation="vertical"
            android:layout_alignParentBottom="true">

        </LinearLayout>

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Here, we are using three ViewGroups, namely ConstraintLayout (white background), then its child RelativeLayout (purple background), and then LinearLayout (grey background). In our LinearLayout ViewGroup, we use two Views, i.e., TextView (for text) and Button (for handling on click functionality).

We have defined another LinearLayout (green background) for our upcoming section to define these same elements dynamically.

We will study in detail these Layouts and Widgets in the upcoming article.

Load UI Programmatically

We can now see how we can build some views like Button or EditText with the help of a ViewGroup (LinearLayout) in this case. Let’s head over to MainActivity.kt and copy the code given below.

Code:

package com.codingninjas.ui

import android.os.Bundle
import android.widget.*
import android.widget.Toast.LENGTH_SHORT
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var textView: TextView
    private lateinit var button: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initViews()

        // creates the button
        val showButton = Button(this)
        showButton.text = "Show Text"

        // creates the editText
        val editText = EditText(this)

        val linearLayout = findViewById<LinearLayout>(R.id.ll_green)
        linearLayout.addView(showButton)
        linearLayout.addView(editText)

        showButton.setOnClickListener{
            // gets the text in EditText
            val text = editText.text

            // Shows the text to the user
            Toast.makeText(this, text, Toast.LENGTH_SHORT).show()
        }
    }

    private fun initViews() {
        textView = findViewById<TextView>(R.id.tv)
        button = findViewById<Button>(R.id.btn)
    }

    override fun onStart() {
        super.onStart()
        button.setOnClickListener {
            Toast.makeText(this, "Button Clicked", LENGTH_SHORT).show()
        }
    }
}

Normally, we bind views in the OnCreate() and use them in onStart(), but it is not mandatory. Here initViews() bind the views using findViewById() and we are setting up these views onClickListerner in onStart().

Output:

Android Layout Types

Android has several Layouts that you will utilize in almost all Android applications to provide a varied view, appearance, and feel.

We will discuss a few of them in our upcoming articles.

FAQs

  1. How are Android UI elements built?
    Ans: View and ViewGroup objects create all user interface elements in an Android program.
     
  2. Can a fragment exist without UI?
    Ans: A fragment is not necessary to be a part of the Activity layout; you can use a fragment without its UI as an unseen worker for the Activity, but it must be associated with an Activity to appear on the screen.
     
  3. Can we design UI in Android Studio?
    Ans: The Layout Editor allows you to easily create layouts by dragging UI elements into a visual design editor rather than manually entering layout XML.

Key Takeaways

In this article, we have extensively discussed various UI layouts in Android and types of layouts.

You can head over to our Android Development Course on the Coding Ninjas Website to dive deep into Android Development and build future applications.

We hope that this blog has helped you enhance your knowledge regarding UI elements and various layouts and if you would like to learn more, check out our articles on Linear Layout. Do upvote our blog to help other ninjas grow.

Happy Coding!

Live masterclass