Android UI Layouts - GeeksforGeeks

21 Feb, 2022
Android Layout is used to define the user interface that holds the UI controls or widgets that will appear on the screen of an android application or activity screen. Generally, every application is a 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 activity contains multiple user interface components and those components are the instances of the View and ViewGroup. All the elements in a layout are built using a hierarchy of View and ViewGroup objects.
A View is defined as the user interface which is used to create interactive UI components such as TextView, ImageView, EditText, RadioButton, etc., and is responsible for event handling and drawing. They are Generally Called Widgets.
View
A ViewGroup act as a base class for layouts and layouts parameters that hold other Views or ViewGroups and to define the layout properties. They are Generally Called layouts.
ViewGroup
The Android framework will allow us to use UI elements or widgets in two ways:  
Use UI elements in the XML file
Create elements in the Kotlin file dynamically
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 the parent).
Android Constraint Layout: ConstraintLayout is a ViewGroup subclass, used to specify the position of 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 a 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 that is used to display the web pages in our activity layout.
Android ListView: ListView is a ViewGroup, used to display scrollable lists of items in a single column.
Android Grid View: GridView is a ViewGroup that is used to display a scrollable list of items in a grid view of rows and columns.
Here, we can create a layout similar to web pages. The XML layout file contains at least one root element in which additional layout elements or widgets can be added to build a View hierarchy. Following is the example:  
XML
<?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>
When we have created the layout, we need to load the XML layout resource from our activity onCreate() callback method and access the UI element from 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 the setContentView method in the form of R.layout.activity_main. Generally, during the launch of our activity, the onCreate() callback method will be called by the android framework to get the required layout for an activity. 
We can create or instantiate UI elements or widgets during runtime by using the custom View and ViewGroup objects programmatically in the Kotlin file. Below is the example of creating a layout using LinearLayout to hold an EditText and a Button in an activity programmatically. 
Kotlin
import android.os.Bundleimport android.widget.Buttonimport android.widget.EditTextimport android.widget.LinearLayoutimport android.widget.Toastimport android.appcompat.app.AppCompatActivity 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()        }    }}
XML attributes
Description
bhartik021
rkbhola5
android
Kotlin Android
Kotlin
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Broadcast Receiver in Android With Example
Android RecyclerView in Kotlin
Content Providers in Android with Example
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Kotlin Setters and Getters
How to Add and Customize Back Button of Action Bar in Android?
Kotlin Android Tutorial
Kotlin when expression
How to Change the Color of Status Bar in an Android App?