Akademi Manajemen Informatika

Android Relative Layout example – Blog Sandi Dharma

[cci]RelativeLayout[/cci] is one of android container or [cci]ViewGroup[/cci]. Like it’s name, the main feature of [cci]Relativelayout[/cci] is to place one [cci]View[/cci] relative to other [cci]View[/cci] or with it’s parent it’s self.

Place a view relative to other view

In order to make a relative position of one view to another view, an [cci]id[/cci] is must be defined in referred view. Says you have two [cci]TextView[/cci] in layout, you want second [cci]TextView[/cci] placed to the right of first [cci]TextView[/cci] but the top of second [cci]TextView[/cci] is place to bottom of first [cci]TextView[/cci]. To do this, you must define an [cci]id[/cci] to the first [cci]TextView[/cci].

In above source code, we have put 2 [cci]TextView[/cci]. The frist [cci]TextView[/cci] have an id [cci]textView1[/cci]. Now, take a look at hightlighted line of the above source code. The line [cci]android:layout_toRightOf=”@id/textView1″[/cci] means set the position of [cci]TextView[/cci] to the right of first [cci]TextView[/cci]. While [cci]android:layout_below=”@id/textView1″[/cci] means place second [cci]TextView[/cci] to the bottom of first [cci]TextView[/cci].
Here the result of above layout:

READ  Langkah Mudah Menambahkan Letak Bisnis di Google Maps
Relative layuot exampl
Relative layuot exampl

There are more attributes that can be used to make relative position between views. Here are the complete list:

  • [cci]android:layout_toLeftOf[/cci]
    Positions the right edge of this view to the left of the given anchor view ID.
  • [cci]android:layout_toRightOf[/cci]
    Positions the left edge of this view to the right of the given anchor view ID.
  • [cci]android:layout_above[/cci]
    Positions the bottom edge of this view above the given anchor view ID.
  • [cci]android:layout_below[/cci]
    Positions the bottom edge of this view below the given anchor view ID.
  • [cci]android:layout_alignBaseline[/cci]
    Positions the baseline of this view on the baseline of the given anchor view ID.
  • [cci]android:layout_alignLeft[/cci]
    Makes the left edge of this view match the left edge of the given anchor view ID.
  • [cci]android:layout_alignTop[/cci]
    Makes the top edge of this view match the top edge of the given anchor view ID.
  • [cci]android:layout_alignRight[/cci]
    Makes the right edge of this view match the right edge of the given anchor view ID.
  • [cci]android:layout_alignBottom[/cci]
    Makes the bottom edge of this view match the bottom edge of the given anchor view ID.
  • [cci]android:layout_toStartOf[/cci]
    Positions the end edge of this view to the start of the given anchor view ID.
  • [cci]android:layout_toEndOf[/cci]
    Positions the start edge of this view to the end of the given anchor view ID.
  • [cci]android:layout_alignStart[/cci]
    Makes the start edge of this view match the start edge of the given anchor view ID.
  • [cci]android:layout_alignEnd[/cci]
    Makes the end edge of this view match the end edge of the given anchor view ID.
READ  Mengenal Nuxt JS, Kelebihan, Metode Kerja, & Metode Menginstall

Place a view relative to it’s parent

Another relative layout capability is place a view relative to it’s parent. This means you can make bottom edge of a view match bottom edge of its parent. Just add simple attribute [cci]android:layout_alignParentBottom=”true”[/cci] to your view then your view automatically aligned to its parent. I will give an example how to do this in code.

Here the result of above layout:

Relative layout example
Relative layout example

Except [cci]android:layout_alignParentBottom=”true”[/cci], there are another attributes for aligning to parent. Here are complete list

  • [cci]android:layout_alignParentTop=”true”[/cci]
    If true, makes the top edge of this view match the top edge of the parent.
  • [cci]android:layout_alignParentLeft=”true”[/cci]
    If true, makes the left edge of this view match the left edge of the parent.
  • [cci]android:layout_alignParentRight=”true”[/cci]
    If true, makes the right edge of this view match the right edge of the parent.
  • [cci]android:layout_alignParentBottom=”true”[/cci]
    If true, makes the bottom edge of this view match the bottom edge of the parent.
  • [cci]android:layout_alignParentTop=”true”[/cci]
    If true, makes the top edge of this view match the top edge of the parent.
  • [cci]android:layout_alignParentStart=”true”[/cci]
    If true, makes the start edge of this view match the start edge of the parent.
  • [cci]android:layout_alignParentEnd=”true”[/cci]
    If true, makes the end edge of this view match the end edge of the parent.
READ  Apa Itu Tipe Data String? Jenis, Fungsi, dan Contohnya