Belajar Android Studio Mengenal Layout bagian 2 – Relative Layout

Pada seri belajar android studio sebelumnya kita sudah belajar tentang linear layout. nah sekarang kita akan coba belajar layout android lainnya yang juga sering kita gunakan yaitu Relative Layout. Mari kita mulai

1. Masih dengan project yang tadi buat pada directory res/layout buat layout baru dengan nama relative_layout.xml

Klik Kanan folder layout lalu pilih New –> Layout Resource File

akan muncul jendela new resource file

Isi File name dengan relative_layout

Isi Root element dengan RelativeLayout, Kemudian Klik OK

Sacara otomatis akan membuat file relative_layput.xml difolder layout, Edit file tersebut lalu ketikkan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="User Name"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/textView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Password"
        android:id="@+id/textView2"
        android:layout_alignTop="@+id/editText2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/editText2"
        android:layout_below="@+id/editText"
        android:layout_alignRight="@+id/editText"
        android:layout_alignEnd="@+id/editText"
        android:layout_alignLeft="@+id/editText"
        android:layout_alignStart="@+id/editText" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:id="@+id/button"
        android:layout_below="@+id/editText2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

Pada file relative_layout.xml diatas terdapat 2 buah TextView untuk label, 2 buah EditText untuk input dan 1 buah CommadButton untuk tombol Login
2. Buka file MainActivity.java ganti activity_main.xml dengan relative_layout.xml

package net.agusharyanto.belajarlayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.relative_layout);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

3. Sekarang mari kita run projectnya

Hati-hati dalam penyusnan view pada RelativeLayout ini, karena letak view dipengaruhi oleh view lainnya.

Semoga Bermanfaat

Salam Hangat Developer Android

Agus Haryanto