Introduction to Android layouts and all the components.

Hello viewer, You can now have our Tutorial Lessons in your android mobile device and read it offline.
Download kotlin Programming APP on PlayStore
Download Website SEO Lessons APP on PlayStore

Layouts, organize our views

The prerequisite for this tutorial is the knowledge of layouts resources, allowing us to describe our views in Android.

Let’s start to see now, the main components, also called Widgets, that will allow us to organize our views in different ways.

LinearLayout

This container will organize its elements in line, horizontal or vertical. For that, it will be necessary to specify in the layout the parameter orientation, with as vertical or horizontal value

android:orientation:"vertical"

Here is a list of important functions you will need in a Linearlayout :

  • gravity : allows to specify how the views are placed in the container (here it is the parent who describes the behavior of the threads)
  • layout_gravity : allows to specify how the view is placed in its container (here it is the son who describes his behavior in the parent)
  • layout_weight : to give weight to a view, the bigger the weight will be, the higher its display priority will be

Here is an example that summarizes all of its functions

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
 
        <View
            android:layout_width="0dp"
            android:layout_height="50dip"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark" />
 
        <View
            android:id="@+id/blue"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="50dip"
            android:background="@android:color/holo_blue_dark" />
 
    </LinearLayout>
 
    <View
        android:layout_marginTop="16dip"
        android:id="@+id/green"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:background="@android:color/holo_green_dark" />
 
    <View
        android:id="@+id/orange"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:background="@android:color/holo_orange_dark" />
 
</LinearLayout>

RelativeLayout

This container will allow us to place its elements relative to each other. He can also assign them a position relative to himself (he will be named parent here ). To place them, we will use the identifiers:

android:id="@+id/identifier"

Here is a list of the important functions you will need in a RelativeLayout :

  • layout_centerInParent : to center the element in its parent
  • layout_centerHorizontal : allows to center the element horizontally in its parent
  • layout_centerVertical : allows to center the element vertically in its parent
  •  layout_alignParentLeft : allows to put the element to the left of its parent
  •  layout_alignParentRight : allows to put the element to the right of its parent
  •  layout_alignParentTop : put the item at the top of its parent
  •  layout_alignParentBottom : allows to put the element at the bottom of its parent
  • layout_toLeftOf  : allows to place an element to the left of a view (designated by its id)
  • layout_toRightOf  : allows to place an element to the right of a view (designated by its id)
  • layout_alignBottom : allows to align the bottom of this view with the bottom of another element (designated by its id)
  • layout_alignTop : align the top of this view with the top of another element (designated by its id)
  • layout_alignRight : allows to align the right side of this view with the right side of another element (designated by its id)
  • layout_alignLeft : allows to align the left side of this view with the left side of another element (designated by its id)

 

Here is a complete example that may help you understand

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <View
        android:id="@+id/red"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_red_dark" />
 
    <View
        android:id="@+id/blue"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_alignTop="@+id/red"
        android:layout_marginLeft="16dip"
        android:layout_toRightOf="@+id/red"
        android:background="@android:color/holo_blue_dark" />
 
    <View
        android:id="@+id/green"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_below="@+id/red"
        android:layout_marginLeft="16dip"
        android:layout_marginTop="16dip"
        android:layout_toRightOf="@+id/red"
        android:background="@android:color/holo_green_dark" />
 
    <View
        android:id="@+id/orange"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_above="@+id/red"
        android:layout_marginBottom="16dip"
        android:layout_marginLeft="16dip"
        android:layout_toLeftOf="@+id/red"
        android:background="@android:color/holo_orange_dark" />
 
</RelativeLayout>

 

Frame Layout

FrameLayout is usually used to display a single view (only one item) because it is difficult to arrange views with it. The views are drawn in a stack, the most recent of which is at the top. However, you can still use the layout_gravity attribute.

The most used attribute in this kind of layout and the setVisibility which allows to display / hide a view. So you can have multiple views superimposed and displayed whatever you want using the setVisibility. The one has three possible values:

  • View.GONE, hide the view and take no place
  • View.VISIBLE, makes the view visible
  • View.INVISIBLE, allows to hide the view while keeping the place taken by it

For more info on layouts, I’ll let you look at the following link  Layouts | Android

About The Author

Related posts