Advertisements

Experimenting with Different Layouts

I have explained about different layouts in android and why those are used. But now you have to learn that where you will be using which layout so that the view you want to create is easy to develop in XML.

We will take different examples for Linear / Relative / Constraint layouts as these are the most used layouts right now. let’s start, open your activity_main.xml:

LinearLayout: Vertical Orientation

 
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:text="Vertical Orientation"
        android:textStyle="bold"
        android:textSize="26dp"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/btn_click"
        android:layout_margin="16dp"
        android:text="My Button"
        android:background="#6A2BD6"
        android:textColor="#fff"
        android:textSize="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

LinearLayout: Horizontal Orientation

<LinearLayout 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"
    android:orientation="horizontal"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="25dp"
        android:text="Vertical Orientation"
        android:textSize="26dp"
        android:textStyle="bold"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/btn_click"
        android:layout_margin="16dp"
        android:text="My Button"
        android:background="#6A2BD6"
        android:textColor="#fff"
        android:textSize="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Relative Layout

<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=".MainActivity">


    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="My Relative Layout"
        android:textSize="26dp"
        android:textStyle="bold"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/btn_click1"
        android:layout_margin="16dp"
        android:text="My Button2"
        android:layout_below="@id/txt"
        android:background="#6A2BD6"
        android:textColor="#fff"
        android:textSize="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" /> 
    <Button
        android:id="@+id/btn_click"
        android:layout_margin="16dp"
        android:text="My Button1"
        android:layout_toEndOf="@id/txt"
        android:background="#6A2BD6"
        android:textColor="#fff"
        android:textSize="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:textSize="20dp"
        android:layout_below="@id/btn_click1"
        android:text="Parent End"/>


</RelativeLayout>
Relative Layout Example

Constraint Layout

This layout is for new developers or we can say it is easy to develop application UI through constraint layout. watch my video to learn how it is easy to develop UI through this layout.

How useful was this post?

Do not forget to rate! this helps us to Improve.

Average rating / 5. Vote count:

Read More Like This..

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Advertisements

Safiya Akhtar

Safiya Akhtar is Android Application Developer in India. She is currently working as a public consultant for career and education too, besides blogging and freelancing. She believes that it is never too late or too early to start what you have always dreamed of.

Your Views And Question are Welcome Here!

Advertisements