PEMROGRAMAN BERGERAK

“Layout Android Studio”

DISUSUN OLEH:
1. GALIH GOVINDA (160402059)
2. DANNY AGUNG PRATAMA (160402010)
3. M. RAFLI YASRIL (160402032)
4. NOFRI MISALDI (160402033)
5. ANDRE GUNAWAN (160402079)

SEMESTER : V Reg-A
SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER
UNIVERSITAS MUHAMMDIYAH RIAU
T.A 2018

1
 KATA PENGANTAR
Segala puji bagi Allah SWT yang telah memberikan nikmat serta hidayah-Nya terutama
nikmat kesempatan dan kesehatan sehingga kami dapat menyelesaikan makalah kami yang
berjudul “Layout Android Studio” ini. Shalawat serta salam kita sampaikan kepada Nabi
besar kita Muhammad SAW yang telah memberikan pedoman hidup yakni Al-Qur’an dan
sunnah untuk keselamatan umat di dunia.
Makalah ini merupakan salah satu tugas mata kuliah Pemrograman Bergerak di
program studi Sistem Informasi, Fakultas Ilmu Komputer pada Universitas Muhammadiyah
Riau. Selanjutnya penulis mengucapkan terima kasih yang sebesar-besarnya kepada Bapak
Syahril, S. Kom., M. Kom. selaku dosen pembimbing mata kuliah ini dan kepada segenap
pihak yang telah memberikan bimbingan serta arahan selama penulisan makalah ini.
Kami berharap semoga makalah ini dapat menambah pengetahuan dan pengalaman
untuk para pembaca. Bahkan kami berharap lebih jauh lagi agar makalah ini bisa pembaca
praktekkan dalam kehidupan sehari-hari.
Kami yakin masih banyak kekurangan dalam penyusunan makalah ini karena
keterbatasan pengetahuan dan pengalaman kami. Untuk itu kami sangat mengharapkan kritik
dan saran yang membangun dari pembaca demi kesempurnaan makalah ini.
Pekanbaru, 20 September 2018

Penyusun

2
 DAFTAR ISI

Halaman Makalah…………………………………………………………………………...1
Kata Pengantar………………………………………………………………………………2
Daftar Isi……………………………………………………………………………………..3

Linear Layout...……....………………………………………………………………………. 4
Absolut Layout.……....……………………………………………………………………… 7
Relative Layout………………………………………………………………………………. 9
Frame Layout...……....……………………………………………………………………….11
Screen Orientation…....………………………………………………………………………13

Daftar Pustaka………………………………………………………………………………..14

3
 Linear Layout
Layout adalah suatu tampilan tata letak di android studio untuk mengatur
penempatan text/gambar yang sudah terkonsep.Jadi layout di sini adalah
bagian terpenting untuk memperindah tampilan pada aplikasi agar nyaman di
lihat bagi pengguna.
Linear Layout adalah design tampilan pada aplikasi kita dengan tata
letak secara vertical dan horizontal dimana tata letak aplikasi kita hanya bisa
memasukan media secara mendatar dan menurun.

Cara membuat Linear layout Vertical dan Horizontal pada android studio:

1. Buat project baru pada android studio dan beri nama project sesuai
keinginan kita contoh nama project:”Linearlayout”.
2. Masukan script berikut pada activity_main.xml.

Script Linear Vertical :

<?xml version="1.0" encoding="utf-8"?>

<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="com.example.android.layouting.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ini Linear Layout Vertical"
android:textSize="25dp"
android:textColor="#000000"
android:layout_marginLeft="60dp" />

4
 <EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TextBox"
android:gravity="center" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TextBox"
android:gravity="center" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TextBox"
android:gravity="center" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TOMBOL"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TOMBOL"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TOMBOL"/>

</LinearLayout>

Script Linear Horizontal :

<?xml version="1.0" encoding="utf-8"?>
<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="com.example.android.layouting.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ini Linear Layout Horizontal "
android:textSize="25dp"
android:textColor="#000000"
android:layout_marginLeft="40dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

5
 <Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1" />

<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="4"/>
</LinearLayout>

</LinearLayout>

Berikut hasil script linear vertical dan horizontal diatas :

Vertical Horizontal

6
 Absolute Layout
Absolute Layout adalah salah satu komponen user interface. Yang
digunakan untuk mengatur tata letak suatu widget seperti Button, TextView,
EditText, dan sebagainya. Dengan menggunakan atribut layout_x dan layout_y
pada komponen user interface, seperti Button, yang digunakan untuk mengatur
koordinat atau angka di atribut layout_x dan layout_y.
Cara membuat Linear layout Vertical dan Horizontal pada android studio:

1. Buat project baru pada android studio dan beri nama project sesuai
keinginan kita contoh nama project:”Basic Android”.
2. Masukan script berikut pada activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:background="#FFF5F5F5"

tools:context="android.cianjur.developer.net.basicandroid.MainActiv
ity"
tools:ignore="Deprecated">

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Contoh Absolute Layout"
android:textSize="15sp"
android:textStyle="bold"
tools:layout_editor_absoluteX="64dp"
tools:layout_editor_absoluteY="72dp" />

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_y="30dp"
android:hint="Email"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="28dp" />

<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_y="80dp"
android:hint="Password"
android:inputType="textPersonName"

7
 tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="28dp" />

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_y="125dp"
android:text="Masuk"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="126dp" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="215dp"
android:layout_y="125dp"
android:text="Daftar"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="126dp" />

</AbsoluteLayout>

Berikut hasil script Absolut Layout :

8
 Relative Layout

Relative Layout design tampilan pada aplikasi kita dengan tata letak secara
bebas tanpa aturan sesuai keinginan kita.tidak seperti Linear Layout yang hanya
terpaku pada salah satu tampilan vertical dan horizontal.

1. Buat project baru pada android studio dan beri nama project sesuai
keinginan kita, contoh nama project:”Relative Layout”.
2. Masukan script berikut pada activity_main.xml.

<?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"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<Spinner
android:id="@+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/times" />
<Spinner
android:id="@id/times"
android:layout_width="96dp"

9
 android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentRight="true" />
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_alignParentRight="true"
android:text="@string/done" />
</RelativeLayout>

Berikut hasil script Relative Layout diatas :

10
 Frame Layout

FrameLayout merupakan jenis layout yang elemen UI didalamnya saling

bertumpuk dengan elemen UI lain, urutan elemen UI menentukan urutan
tampilan.
Layout ini adalah layout yang paling sederhana. Layout ini akan membuat
komponen yang ada didalamnya menjadi menumpuk atau saling menutupi satu
dengan yang lainnya (layering). Komponen yang paling pertama pada layout ini
akan berada dibawah komponen-komponen diatasnya.

1. Buat project baru pada android studio dan beri nama project sesuai
keinginan kita, contoh nama project:”FrameLayout”.
2. Masukan script berikut pada activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1113">

<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="@color/colorPrimary"
/>
<Button
android:layout_width="300px"
android:layout_height="100px"
android:layout_gravity="center"
android:text="Tombol"
android:background="@color/colorAccent"
android:textColor="#fff"
android:textSize="20sp" />
</FrameLayout>

11
Berikut hasil script Relative Layout diatas :

Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian
atur sendiri, kalian dapat menggunakan beberapa atribut berikut ini:

 android:layout_marginLeft: Untuk mengatur jarak (batasan) sudut kiri

elemen UI pada elemen UI lainnya.
 android:layout_marginRight: Untuk mengatur jarak (batasan) sudut kanan
elemen UI pada elemen UI lainnya.
 android:layout_marginTop: Untuk mengatur jarak (batasan) atas elemen UI
pada elemen UI lainnya.
 android:layout_marginBottom: Untuk mengatur jarak (batasan) bawah
elemen UI pada elemen UI lainnya.
 android:layout_gravity: Untuk mengatur posisi rata kanan, kiri, atas, bawah,
center, center horizontal dan center vertical.

12
 Screen Orientation
Orientasi layar android ada dua macam tampilan yaitu Landscape dan
Portrait. Secara default Android Studio mempunyai setingan agar aplikasi
selalu menyesuaikan posisi perangkat. Artinya jika layar diposisi landscape
maka aplikasi pun ikut landscape, dan jika layar diputar dalam posisi portrait
maka aplikasi pun ikut portrait.
Pada android studio untuk menentukan orientation landscape atau
portrait dapat diatur dengan menambahkan sedikit kode ajaib, kode itu seperti
berikut ini :

android:screenOrientation menjadi Portrait.

android:screenOrientation= "portrait" <!-- mode hanya portrait -->

android:screenOrientation= "landscape" <!-- mode hanya landscape -->

set Atribut ini terletak di dalam tag <activity>, sedangkan tag <activity>
terletak di dalam tag <application>. Agar lebih jelas silahkan lihat kode berikut
untuk pengaturan mode screen-nya :

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="danny.com.relativelayout">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity"
android:screenOrientation="landscape"  ubah ke portrait
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" /
>
</intent-filter>
</activity>
</application>

</manifest>

13
 DAFTAR PUSTAKA

https://www.okedroid.com/p/ebook.html
https://badoystudio.com/cara-menggunakan-frame-layout-pada-android-dengan-mudah/
https://medium.com/@mahesaiqbal6/layout-pada-aplikasi-android-3e85cf66757e
https://legacy.gitbook.com/book/google-developer-training/android-developer-
fundamentals-course-concepts/details

14