Skip to main content

Layout in Android?

 Layout in Android?



It is used to display screen structure( layout) in Android Application, Layout can be Linear, Relative, Grid, Table, Absolute, Frame, and Constraint Layout in Android.



We can create Layout initially in the android application because Layout provides Parent and Child Container in the Android application.


The default orientation of the Linear Layout is Horizontal.


1) Linear Layout:-

It is used to display elements using Linear sequence and its orientation can be verticle and horizontal.

Linear Layout is the simplest layout in android applications.

We can easily place a Linear Layout as a Parent Layout and Child Layout.


1)

<LinearLayout

android:orientation="verticle"

>




</LinearLayout>



2)   Linear Layout using Nested Sequence.


<LinearLayout

android:orientation="verticle"

>

<LinearLayout

android:orientation="verticle"

>


</LinearLayout>


<LinearLayout

android:orientation="verticle"

>


</LinearLayout>

</LinearLayout>



2) Relative Layout:-


This is the most flexible layout in the android application, using this layout we can place android widget using any position using below, above, left, and right properties.

We can co-relate elements based on Relative Layout based on dimension.

We can use another layout or relative layout as a child layout in an application.


Code for Relative Layout:-


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity12"
    android:paddingTop="40dp"
    >
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txtname1"
        android:layout_above="@id/txtemail"

        android:hint="Enter dsafsafdsf"></EditText>
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txtemail"
       android:layout_marginTop="50dp"
        android:hint="Enter Email">

    </EditText>
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txtname"
        android:layout_below="@id/txtemail"

        android:hint="Enter name"></EditText>


     <EditText
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/txtmobile"
         android:layout_below="@id/txtname"

         android:hint="Enter Mobileno">

     </EditText>

</RelativeLayout>




3)   Table Layout:-


This Layout is used to display records using multiple Table Rows. we can arrange the screen of android using a table view pattern.It provides only TableRow to arrange data row-wise.


Syntax of TableLayout:-


<TableLayout>

<TableRow>


</TableRow>


<TableRow>


</TableRow>


<TableRow>


</TableRow>


</TableLayout>


Example of <TableLayout>

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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=".TableExample">

    <TableRow>
        <TextView
            android:text="WELCOME IN SCS"
            android:id="@+id/txtdisplaydata"
            >

        </TextView>


    </TableRow>
    <TableRow>
     <ImageView
         android:src="@drawable/sss"
         ></ImageView>


    </TableRow>
    <TableRow>
        <ImageView
            android:src="@drawable/sss"
            ></ImageView>


    </TableRow>

</TableLayout>


4)  GridLayout:-

Using this layout we can arrange data using rows and columns using layout_row and layout_column property.

This layout always will be used as a Child Layout in Android applications.



<GridLayout>




</GridLayout>



Example of GridLayout:-


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".GridLayoutExample">

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <Button
        android:text="ONE"
        android:id="@+id/bgl"
        android:layout_width="wrap_content"

        android:layout_row="1"
        android:layout_column="1"
        ></Button>

    <Button
        android:text="TWO"
        android:id="@+id/bg2"
        android:layout_row="1"
        android:layout_column="2"
        ></Button>

    <Button
        android:text="THREE"
        android:id="@+id/bg3"
        android:layout_row="2"
        android:layout_column="1"
        ></Button>

    <Button
        android:text="FOUR"
        android:id="@+id/bg4"
        android:layout_row="2"
        android:layout_column="2"
        ></Button>
    </GridLayout>
</RelativeLayout>


5) Absolute Layout:-

This layout will work based on a coordinate system using x co-ordinate and y co-ordinate.

This layout basically used in android graphics applications.

<AbsolouteLayout>

</AbsolouteLayout>


Example of Absolute Layout in Android Applications:-


<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 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=".AbsolouteLayoutExample">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnabs"
        android:layout_x="50dp"
        android:layout_y="100dp"
        android:text="ONE"
        ></Button>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnabs1"
        android:layout_x="50dp"
        android:layout_y="200dp"
        android:text="ONE"
        ></Button>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnabs2"
        android:layout_x="50dp"
        android:layout_y="300dp"
        android:text="ONE"
        ></Button>
</AbsoluteLayout>




6)  FrameLayout:-


It is also called Full-screen Layout in the android application, it is used to display single content or container content for ImageView, VideoView in the android application.

<FrameLayout>

</FrameLayout>


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".FrameLayoutExample">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/bg"
        >

    </ImageView>

</FrameLayout>



 7) Constraint Layout:-

This is called modern layout in android application, it provides auto-layout features to make the responsive screen.

It is the upgraded form of Relative Layout of android, by default activity contains constraint layout.

This layout can be easily managed by a drag and drop approach.





Complete Code of Constraint Layout:-


<?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=".ConstraintLayoutExample">

    <Button
        android:id="@+id/button"
        android:layout_width="184dp"
        android:layout_height="61dp"
        android:layout_marginTop="116dp"
        android:text="Button",
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/button3"
        app:layout_constraintTop_toTopOf="parent" />
 
        android:layout_height="61dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintVertical_bias="0.109" />

</androidx.constraintlayout.widget.ConstraintLayout>






























Labels:

Comments

Post a Comment

POST Answer of Questions and ASK to Doubt

Popular posts from this blog

Uncontrolled form input in React-JS

  Uncontrolled form input in React-JS? If we want to take input from users without any separate event handling then we can uncontrolled the data binding technique. The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here, the HTML elements maintain their own state that will be updated when the input value changes. To write an uncontrolled component, you need to use a ref to get form values from the DOM. In other words, there is no need to write an event handler for every state update. You can use a ref to access the input field value of the form from the DOM. Example of Uncontrolled Form Input:- import React from "react" ; export class Info extends React . Component {     constructor ( props )     {         super ( props );         this . fun = this . fun . bind ( this ); //event method binding         this . input = React . createRef ();...
Post a Comment
Read more

JSP Page design using Internal CSS

  JSP is used to design the user interface of an application, CSS is used to provide set of properties. Jsp provide proper page template to create user interface of dynamic web application. We can write CSS using three different ways 1)  inline CSS:-   we will write CSS tag under HTML elements <div style="width:200px; height:100px; background-color:green;"></div> 2)  Internal CSS:-  we will write CSS under <style> block. <style type="text/css"> #abc { width:200px;  height:100px;  background-color:green; } </style> <div id="abc"></div> 3) External CSS:-  we will write CSS to create a separate file and link it into HTML Web pages. create a separate file and named it style.css #abc { width:200px;  height:100px;  background-color:green; } go into Jsp page and link style.css <link href="style.css"  type="text/css" rel="stylesheet"   /> <div id="abc"> </div> Exam...
Post a Comment
Read more

DSA in C# | Data Structure and Algorithm using C#

  DSA in C# |  Data Structure and Algorithm using C#: Lecture 1: Introduction to Data Structures and Algorithms (1 Hour) 1.1 What are Data Structures? Data Structures are ways to store and organize data so it can be used efficiently. Think of data structures as containers that hold data in a specific format. Types of Data Structures: Primitive Data Structures : These are basic structures built into the language. Example: int , float , char , bool in C#. Example : csharp int age = 25;  // 'age' stores an integer value. bool isStudent = true;  // 'isStudent' stores a boolean value. Non-Primitive Data Structures : These are more complex and are built using primitive types. They are divided into: Linear : Arrays, Lists, Queues, Stacks (data is arranged in a sequence). Non-Linear : Trees, Graphs (data is connected in more complex ways). Example : // Array is a simple linear data structure int[] number...
Post a Comment
Read more