Belajar Android

Membangun Aplikasi Pertama

“A journey of a thousand miles begins with a single step”
(Laozi)

Android.class
 Pelajaran 1
Berkenalan dengan User
Interface Android
Android.class
 Tujuan
Pelajaran 1:
Menyusun
User Interface
yang Indah

Android.class
 Kenalan dengan Views
• View merupakan batu bata pembangun User
Interface (UI)
• User Interface disusun oleh beberapa View
dalam hirarki atau bertingkat-tingkat
• View direpresentasikan dalam format XML
(eXtensible Markup Language)

Android.class
 Jenis Views
• Dalam Android, terdapat berbagai macam
jenis View yang tersedia untuk membangun UI
yang sederhana hingga yang kompleks
• Beberapa jenis View yang umum digunakan
adalah TextView, EditText, Button, ImageView,
LinearLayout

Android.class
 Views secara Umum
• TextView: menampilkan teks
• EditText: menampilkan teks yang dapat diubah
• ImageView: menampilkan gambar
• LinearLayout: sebagai view untuk menampung
view lain (containing) dan mengatur
penempatannya (layouting)

Android.class
 TextView
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aplikasi pertama untuk
dunia!" />

Android.class
 EditText
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Impian kamu" />

Android.class
 Button
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mulai" />

Android.class
 ImageView
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/red_bird"/>

Android.class
 LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/re
s/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="15dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aplikasi pertama untuk dunia!" />

</LinearLayout>

Android.class
 Konsep LinearLayout
LinearLayout adalah
TextView
sebuah komponen
penampung views yang EditText
menempatkan view di
Button
dalamnya dalam urutan
yang linear secara
horizontal atau vertikal
Linear Layout

Android.class
 Latihan 1
• Buatlah sebuah
halaman dengan
susunan view
sebagai berikut

Android.class
 Atribut pada View
• Atribut merupakan hal-hal yang melekat pada
suatu entitas
• View seperti TextView dan Button memiliki
atribut yang dapat diubah seperti text,
textColor, background
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aplikasi pertama untuk dunia!" />

Android.class
 Bermain dengan Atribut
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="15dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f0dc82"
android:textSize="21sp"
android:text="Belajar Pemrograman Android" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#cc5500"
android:text="Untuk Semua" />
</LinearLayout>

Android.class
 Atribut Padding
• Margin adalah ruang (space) antara konten
suatu view dengan tepi batasannya
• Ukuran suatu view dihitung termasuk dengan
padding-nya

TextView TextView
TextView

Android.class
 Atribut Margin
• Margin adalah ruang (space) tambahan di luar
batasan (bound) suatu view

TextView 1

TextView 2

Android.class
 Implementasi Atribut Padding
dan Margin
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f0dc82"
android:textSize="21sp"
android:padding="5dp"
android:text="Belajar Pemrograman
Android" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#cc5500"
android:layout_marginTop="5dp"
android:text="Untuk Semua" />

Android.class
 Sebelum dan Sesudah
Padding dan Margin

Android.class
 Atribut Width dan Height
• Atribut layout_width mengatur mengenai
lebar suatu view
• Atribut layout_height mengatur mengenai
tinggi suatu view
• Nilai atribut layout_width dan layout_height
dapat diisi dengan: match_parent,
wrap_content, dan suatu nilai dip (device
independent pixels)

Android.class
 Nilai Atribut Width dan Height
• match_parent: dimensi view diperluas dengan
mengisi ruang parent view-nya
• wrap_content : ukuran view disesuaikan
dengan ukuran kontennya
• Nilai dip (device independent pixels): suatu
nilai yang tetap, yang akan disesuaikan dengan
ukuran device. Contoh: 5dp

Android.class
 Implementasi Atribut Width dan Height

• Kedua atribut ini harus didefinisikan dalam

suatu view

Android.class
 Latihan 2
• Buatlah sebuah UI
sebagai berikut
bernama “Cover”

Android.class
 Pelajaran 2
Android Activity

Android.class
 Tujuan
Pelajaran 2:
Memahami
Daur Hidup
Android

Android.class
 Berkenalan dengan Activity
• Activity merupakan salah satu komponen
aplikasi penting
• Activity merepresentasikan sebuah tampilan
atau screen (UI dan logic)
• Ketika suatu activity berjalan (running),
activity tersebut memiliki prioritas tertinggi

Android.class
 User Interface dan Logic
• Logic yang mendeskripsikan Activity ditulis
dalam dokumen .java
• Tampilan yang berkaitan dengan User
Interface ditulis dalam dokumen .XML

Android.class
 Representasi Activity dalam Kode .java
public class FirstActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_first);
}
}

Android.class
 Daur Hidup
Activity

Android.class
 Daur Hidup Activity
• onCreate(): dipanggil saat suatu activity dibuat
• onStart(): dipanggil saat UI terlihat (visible) ke
pengguna
• onResume(): dipanggil saat suatu activity
masuk ke bagian depan (foreground) aplikasi.
Ini adalah status di mana pengguna
berinteraksi dengan pengguna

Android.class
 Daur Hidup Activity
• onPause(): dipanggil saat pengguna
meninggalkan suatu activity
• onStop(): dipanggil saat suatu activity tidak
terlihat lagi (not visible) ke pengguna

Android.class
 Lebih Jauh tentang Activity
• Activity adalah sebuah class
• Class merepresentasikan objek (nyata maupun
abstrak)
• Setiap class memiliki fields dan methods

Android.class
 Menghubungkan Activity dengan .XML

• Dalam kode Java, Activity dihubungkan

dengan sebuah UI melalui metode berikut:

setContentView(R.layout.activity_first);

Android.class
 Menghubungkan Activity
dengan Views
• Activity dalam kode Java memerlukan
referensi view ID
• View ID ditulis di setiap komponen View yang
ingin dirujuk dalam dokumen XML

Android.class
 Menghubungkan
Activity dengan
View di .XML
<ImageView
android:id="@+id/ivRedBird"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:layout_margin="15dp"
android:src="@drawable/red_bird"/>

Android.class
 Menghubungkan Activity
dengan View di .java
public class FirstActivity extends AppCompatActivity {

ImageView ivRedBird;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);

ivRedBird = (ImageView) findViewById(R.id.ivRedBird);

}
}

Android.class
 Menghubungkan Activity dengan views di
.XML
• Dalam kode Java, Activity dihubungkan
dengan banyak views melalui metode berikut:

ImageView ivRedBird = (ImageView)

findViewById(R.id.ivRedBird);

Android.class
 Latihan 3
• Berikanlah view ID pada dokumen XML
“Cover”. Silakan memberi penamaan view ID
sesuka hati
• Hubungkanlah ID tersebut ke dokumen .java
yang memuat activity

Android.class
 Menampilkan Pesan dalam Toast
• Untuk menampilkan suatu info menggunakan
Toast, kita dapat menggunakan class Toast
(yang sudah tersedia oleh Android)

Toast.makeText(this, "Kita berada dalam

onResume()", Toast.LENGTH_LONG).show();

Android.class
 Latihan 4
• Lakukan cetak informasi melalui Toast di
method onResume() yang tercantum dalam
daur hidup Android. Perhatikan hasilnya

Android.class
 Melakukan Debug Sederhana
• Untuk menampilkan suatu info dari apa yang
kita kerjakan, kita dapat menggunakan class
Log (yang sudah tersedia oleh Android)
• Kode Log ini bisa ditaruh di methods manapun
dalam Activity

Log.d("Cover", "Ini adalah pesan");

Android.class
 Melakukan Debug dalam onStart()
@Override
protected void onStart() {
super.onStart();

Log.d("Cover", "Kita berada dalam onStart");

}

Android.class
 Latihan 5
• Lakukan cetak informasi di setiap methods
yang tercantum dalam daur hidup Android
(minimal 5 buah)

Android.class
 Terima kasih :)

Android.class