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.

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

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:-

</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>

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>

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>

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

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 ();...

قراءة المزيد

بحث هذه المدونة الإلكترونية