Android UI Layouts

Android Layout is used to define the user interface which holds the UI controls or widgets that will appear on the screen of an android application or activity.

Generally, every application is combination of View and ViewGroup. As we know, an android application contains a large number of activities and we can say each activity is one page of the application. So, each activities contains multiple user interface components and those components are the instances of the View and ViewGroup.

A View is defined as the user interface which is used to create an interactive UI components such as TextView, EditText, Radio Button, etc. and it responsible for event handling and drawing.



A ViewGroup act as a base class for layouts and layouts parameters which hold other Views or ViewGroups and to define the layout properties.

The android framework will allow us to use UI elements or widgets in two ways:

  • Use UI elements in XML file
  • Create elements in Kotlin file dynamically

Types of Android Layout

Android Linear Layout: LinearLayout is a ViewGroup subclass, used to provide child View elements one by one either in a particular direction either horizontally or vertically based on the orientation property.

Android Relative Layout: RelativeLayout is a ViewGroup subclass, used to specify the position of child View elements relative to each other like (A to the right of B) or relative to the parent (fix to the top of parent).

Android Constraint Layout: ConstraintLayout is a ViewGroup subclass, used to specify the position of a layout constraints for every child View relative to other views present. A ConstraintLayout is similar to a RelativeLayout, but having more power.

Android Frame Layout: FrameLayout is a ViewGroup subclass, used to specify the position of View elements it contains on the top of each other to display only single View inside the FrameLayout.

Android Table Layout: TableLayout is a ViewGroup subclass, used to display the child View elements in rows and columns.

Android Web View: WebView is a browser which is used to display the web pages in our activity layout.

Android List View: ListView is a ViewGroup, used to display scrollable list of items in single column.

Android Grid View: GridView is a ViewGroup which is used to display scrollable list of items in grid View of rows and columns.


Use UI elements in XML file

Here, we can create a layouts similar to web pages. The XML layout file contain at least one root element in which additional layout elements or widgets can be added to build View hierarchy.

Following is the example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http:// schemas.android.com/apk/res/android"
    xmlns:tools="http:// schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--EditText with id editText-->
  
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:hint="Input"
        android:inputType="text"/>
  
    <!--Button with id showInput-->
  
    <Button
        android:id="@+id/showInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="show"
        android:backgroundTint="@color/colorPrimary"
        android:textColor="@android:color/white"/>
  
</LinearLayout>

chevron_right


Load XML Layout File and its elements from an Activity

When we have created layout, we need to load the XML layout resource from our activity onCreate() callback method and access the UI element form the XML using findViewById.

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

        // finding the button
        val showButton = findViewById<Button>(R.id.showInput)

        // finding the edit text
        val editText = findViewById<EditText>(R.id.editText)

Here, we can observe the above code and finds out that we are calling our layout using setContentView method in the form of R.layout.activity_main.

Generally, during the launch of our activity, onCreate() callback method will be called by android framework to get the required layout for an activity.

Create elements in Kotlin file dynamically

We can create or instantiate UI elements or widgets during runtime by using the custom View and ViewGroup objects programmatically in Kotlin file.

Below is the example of creating a layout using LinearLayout to hold an EditText and a Button in an activity programmatically.

filter_none

edit
close

play_arrow

link
brightness_4
code

package com.geeksforgeeks.myfirstkotlinapp
  
    import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Button import android.widget.EditText import android.widget.LinearLayout import android.widget.Toast
  
    class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
  
            // create the button
            val showButton
            = Button(this)
                  showButton.setText("Submit")
  
              // create the editText
              val editText
            = EditText(this)
  
                val linearLayout
            = findViewById<LinearLayout>(R.id.l_layout)
                  linearLayout.addView(editText)
                      linearLayout.addView(showButton)
  
              // Setting On Click Listener
              showButton.setOnClickListener
        {
  
            // Getting the user input
            val text = editText.text
  
                       // Showing the user input
                       Toast.makeText(this, text, Toast.LENGTH_SHORT)
                           .show()
        }
    }
}

chevron_right


Different attribute of the layouts

XML attributes Description
android:id Used to specify the id of the view.
android:layout_width Used to declare the width of View and ViewGroup elements in layout.
android:layout_height Used to declare the height of View and ViewGroup elements in layout.
android:layout_marginLeft Used to declare the extra space used in the left side of View and ViewGroup elements.
android:layout_marginRight Used to declare the extra space used in the right side of View and ViewGroup elements.
android:layout_marginTop Used to declare the extra space used in the top side of View and ViewGroup elements.
android:layout_marginBottom Used to declare the extra space used in the bottom side of View and ViewGroup elements.
android:layout_gravity Used to define how child Views are positioned in the layout.


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.