• Tidak ada hasil yang ditemukan

Membuka Layout Editor

N/A
N/A
Protected

Academic year: 2018

Membagikan "Membuka Layout Editor"

Copied!
13
0
0

Teks penuh

(1)

Membuka Layout Editor

Catatan: Pelajaran ini mengharapkan Anda untuk menggunakan Android Studio 2.3 atau lebih tinggi dan telah mengikuti pelajaran sebelumnya untuk membuat project Android.

Untuk memulai, persiapkan ruang kerja Anda seperti berikut:

1. Di jendela Project Android Studio, buka app > res > layout > activity_main.xml. 2. Untuk memberi lebih banyak ruang bagi Layout Editor, sembunyikan jendela Project

dengan memilih View > Tool Windows > Project (atau klik Project di sisi kiri Android Studio).

3. Bila editor Anda menampilkan sumber XML, klik tab Design di bagian bawah jendela.

4. Klik Show Blueprint sehingga hanya layout blueprint yang terlihat. 5. Pastikan Show Constraints sudah aktif. Tooltip pada toolbar akan tertulis Hide

Constraints (karena mereka sekarang terlihat).

6. Pastikan Autoconnect tidak aktif. Tooltip pada toolbar akan tertulis Turn On Autoconnect (karena sekarang Autoconnect tidak aktif).

7. Klik Default Margins di toolbar dan pilih 16 (Anda tetap bisa mengatur margin untuk setiap tampilan nanti).

8. Klik Device in Editor di toolbar dan pilih Pixel XL.

(2)

Gambar 3. Layout Editor menampilkan activity_main.xml

Jendela Component Tree di sisi kiri bawah menunjukkan tampilan hierarki layout. Dalam kasus ini, tampilan root adalah ConstraintLayout, yang hanya berisi satu objek TextView.

ConstraintLayout adalah layout yang mendefinisikan posisi untuk setiap tampilan berdasarkan batas terhadap tampilan saudara dan layout induk. Dengan cara ini, Anda bisa membuat layout sederhana dan kompleks dengan hierarki tampilan datar. Artinya, ini menghindari perlunya layout bersarang (layout di dalam layout, seperti yang ditunjukkan pada gambar 2), yang bisa meningkatkan waktu yang dibutuhkan untuk menggambar UI.

Gambar 4. Ilustrasi dua tampilan yang diposisikan di dalam ConstraintLayout

Misalnya, Anda bisa mendeklarasikan layout berikut (di gambar 4):

(3)

 Tampilan A terletak 16dp dari kiri layout induk.

 Tampilan B terletak 16dp di sebelah kanan tampilan A.

 Tampilan B sejajar dengan bagian atas tampilan A.

Pada bagian berikutnya, Anda akan membuat layout yang mirip dengan ini.

Menambahkan kotak teks

Gambar 5. Kotak teks dibatasi ke bagian atas dan kiri layout induk

1. Pertama-tama, Anda harus menghapus semua yang terdapat dalam layout. Jadi klik TextView di jendela Component Tree, kemudian tekan Delete.

2. Dari jendela Palette di sebelah kiri, klik Text di panel kiri, lalu seret Plain Text ke dalam editor desain dan letakkan di dekat bagian atas layout. Ini adalah widget EditText yang menerima input teks biasa.

3. Klik tampilan di editor desain. Anda sekarang bsa melihat tuas pengubah ukuran di setiap sudut (kotak), dan jangkar pembatas di setiap sisi (lingkaran).

Untuk kontrol yang lebih baik, Anda mungkin perlu melakukan zoom in editor ke 75% atau lebih besar menggunakan tombol pada toolbar.

4. Klik-dan-tahan jangkar di sisi atas, lalu seret ke atas sampai terkunci ke bagian atas layout dan lepaskan. Itulah pembatas—ia menetapkan tampilan harus 16dp dari atas layout (karena Anda menyetel margin default ke 16dp).

5. Demikian pula, buatlah pembatas dari sisi kiri tampilan ke sisi kiri layout.

Hasilnya akan terlihat seperti screenshot di gambar 5.

(4)

Gambar 6. Tombol dibatasi ke sisi kanan kotak teks dan garis dasarnya

1. Dari jendela Palette, klik Widgets di panel kiri, lalu seret Button ke dalam editor desain dan letakkan di dekat sisi kanan.

2. Buat pembatas dari sisi kiri tombol ke sisi kanan kotak teks.

3. Untuk membatasi tampilan dalam penjajaran horizontal, Anda perlu membuat pembatas antara garis dasar teks. Jadi klik tombolnya, lalu klik Baseline Constraint

, yang muncul di editor desain tepat di bawah tampilan yang dipilih. Jangkar garis dasar muncul di dalam tombol. Klik-dan-tahan jangkar ini lalu seret ke jangkar garis dasar yang muncul di kotak teks.

Hasilnya akan terlihat seperti screenshot di gambar 6.

Catatan: Anda juga bisa membuat penjajaran horizontal dengan menggunakan tepi atas atau bawah, tetapi tombolnya memuat pengisi di sekitar gambarnya, sehingga penjajaran visual tidak akan akurat bila Anda menyejajarkan tampilan dengan cara ini.

Mengubah string UI

Klik Show Design di toolbar untuk melihat pratinjau UI. Perhatikan bahwa input teks sudah terisi dengan "Name" dan tombolnya diberi label "Button." Jadi sekarang Anda akan

mengubah string ini.

1. Buka jendela Project lalu buka app > res > values > strings.xml.

Ini adalah file sumber daya string, di sini Anda harus menetapkan semua string UI Anda. Melakukan hal ini memungkinkan Anda untuk mengelola semua string UI di satu lokasi, yang mempermudah untuk menemukan, mengupdate, dan melakukan pelokalan (dibandingkan dengan string hard-coding dalam layout atau kode aplikasi).

(5)

3.

Gambar 7. Dialog untuk menambahkan string baru

Klik Add Key untuk membuat string baru sebagai "hint text" untuk kotak teks. 1. Masukkan "edit_message" untuk nama kunci.

2. Masukkan "Enter a message" untuk nilainya.

3. Klik OK.

4. Tambahkan kunci lain bernama "button_send" dengan nilai "Send."

Sekarang Anda bisa menyetel string ini untuk setiap tampilan. Jadi silakan kembali ke file layout dengan mengklik activity_main.xml di tab bar, dan tambahkan string seperti berikut:

1. Klik kotak teks di layout dan, bila jendela Properties belum terlihat di sebelah kanan, klik Properties di sidebar kanan.

2. Cari properti hint lalu klik Pick a Resource di sebelah kanan kotak teks. Pada dialog yang muncul, klik dua kali edit_message dari daftar.

3. Masih menampilkan properti kotak teks, hapus juga nilai properti text (yang saat ini disetel ke "Name").

4. Sekarang klik tombol di layout, cari properti text, klik Pick a Resource , lalu pilih button_send.

Membuat ukuran kotak teks yang fleksibel

Untuk membuat layout yang responsif terhadap beragam ukuran layar, Anda sekarang akan merancang kotak teks agar bisa membentang untuk mengisi semua ruang horizontal yang ada (setelah memperhitungkan tombol dan margin).

(6)

Gambar 8. Hasil mengklik Center Horizontally

Gambar 9. Klik untuk mengubah lebar ke Match Constraints

Gambar 10. Kotak teks sekarang membentang untuk mengisi ruang yang ada

1. Pilih kedua tampilan (klik satu tampilan kemudian tahan Shift dan klik tampilan lain), lalu klik kanan salah satu tampilan dan pilih Center Horizontally.

(7)

2. Pilih tombol dan buka jendela Properties. Setel margin kiri dan kanan menjadi 16. 3. Pilih kotak teks dan atur margin kiri menjadi 16.

4. Masih pada bagian properti kotak teks, klik indikator lebar sampai disetel ke Match Constraints, seperti yang ditunjukkan oleh keterangan 1 di gambar 9.

"Match constraints" berarti lebar saat ini ditentukan oleh pembatas dan margin horizontal. Oleh karena itu, kotak teks membentang untuk mengisi ruang horizontal (setelah memperhitungkan tombol dan semua margin).

Sekarang layout sudah selesai dan akan terlihat seperti gambar 10.

Bila layout Anda tampaknya tidak berubah seperti yang diharapkan, klik di bawah ini untuk melihat seperti apa tampilan XML Anda yang seharusnya dan bandingkan dengan apa yang Anda lihat di tab Text. (Bila atribut Anda muncul dengan urutan berbeda, tidak apa-apa.) Lihat XML layout akhir

Untuk informasi selengkapnya tentang rantai dan semua hal lain yang bisa Anda lakukan dengan ConstraintLayout, silakan baca Membangun UI Responsif dengan

ConstraintLayout.

Menjalankan aplikasi

Bila aplikasi Anda sudah terinstal pada perangkat dari pelajaran sebelumnya, cukup klik Apply Changes di toolbar untuk mengupdate aplikasi dengan layout baru. Atau klik Run untuk menginstal dan menjalankan aplikasi.

(8)

Memulai Activity Lain

SebelumnyaBerikutnya

Pelajaran ini mengajarkan Anda cara

1. Merespons tombol send

Setelah menyelesaikan pelajaran sebelumnya, Anda memiliki aplikasi yang menampilkan activity (satu layar) dengan satu kolom teks dan satu tombol. Dalam pelajaran ini, Anda akan menambahkan beberapa kode ke MainActivity yang memulai activity baru untuk

menampilkan pesan saat pengguna menge-tap Send.

Catatan: Pelajaran ini merekomendasikan Anda untuk menggunakan Android Studio 2.3 atau yang lebih tinggi.

Merespons tombol send

Tambahkan sebuah metode di MainActivity.java yang dipanggil oleh tombol sebagai berikut:

1. Di file app > java > com.example.myfirstapp > MainActivity.java, tambahkan stub metode

sendMessage() seperti yang ditunjukkan di bawah ini:

public class MainActivity extends AppCompatActivity { @Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

/** Called when the user taps the Send button Disebut saat pengguna mengetuk

tombol Kirim */

public void sendMessage(View view) {

// Do something in response to button Lakukan sesuatu sebagai respons terhadap

(9)

} }

Anda mungkin melihat error karena Android Studio tidak bisa menyelesaikan kelas View yang digunakan sebagai argumen metode. Klik untuk menempatkan kursor Anda pada deklarasi View, kemudian lakukan Quick Fix dengan menekan Alt + Enter (atau Option + Enter pada Mac). (Bila muncul menu, pilih Import class.)

2. Sekarang kembali ke file activity_main.xml untuk memanggil metode ini dari tombol:

1. Klik untuk memilih tombol di Layout Editor.

2. Di jendela Properties, cari properti onClick dan pilih sendMessage [MainActivity]

dari menu drop-down.

Sekarang saat tombol di-tap, sistem akan memanggil metode sendMessage().

Perhatikan detail yang diperlukan dalam metode ini agar sistem bisa mengenalinya sesuai dengan atribut android:onClick. Secara khusus, metode ini harus mendeklarasikan hal berikut:

 Akses publik

 Nilai pengembalian void

 Sebuah View sebagai satu-satunya parameter (ini adalah objek View yang diklik)

Berikutnya, Anda perlu mengisi metode ini untuk membaca konten kolom teks dan mengirimkan teks itu ke activity lain.

Membangun Intent

Intent adalah objek yang menyediakan waktu proses yang mengikat komponen-komponen terpisah, misalnya dua activity. Intent menyatakan "intent untuk melakukan sesuatu" dari aplikasi. Anda bisa menggunakan intent untuk berbagai jenis tugas, tetapi dalam pelajaran ini, intent Anda akan memulai activity lain.

Di MainActivity.java, tambahkan konstanta EXTRA_MESSAGE dan kode sendMessage(), seperti yang ditunjukkan di sini:

public class MainActivity extends AppCompatActivity {

public static final String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE";

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

(10)

/** Called when the user taps the Send button */ public void sendMessage(View view) {

Intent intent = new Intent(this, DisplayMessageActivity.class); EditText editText = (EditText) findViewById(R.id.editText);

String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent);

} }

catatan => DisplayMessageActivity segai penamaan untuk activiti yg mau d sambungkan atau d panggil

Android Studio akan kembali menjumpai error Cannot resolve symbol, jadi tekan Alt + Enter (atau Option + Return pada Mac). Impor Anda akan terlihat seperti berikut:

import android.content.Intent;

import android.support.v7.app.AppCompatActivity; import android.os.Bundle;

import android.view.View;

import android.widget.EditText;

Error tetap terjadi untuk DisplayMessageActivity, tetapi itu bukan masalah; Anda akan memperbaikinya di bagian berikutnya.

Inilah yang terjadi di sendMessage():

 Konstruktor Intent membutuhkan dua parameter:

o Context sebagai parameter pertama (this digunakan karena kelas Activity

merupakan subkelas dari Context)

o Class komponen aplikasi yang menjadi target sistem dalam mengirimkan Intent

(dalam hal ini, activity yang harus dimulai).

 Metode putExtra() menambahkan nilai EditText ke intent. Intent bisa membawa tipe

data sebagai pasangan nilai-kunci bernama extras. Kunci Anda adalah konstanta publik

EXTRA_MESSAGE karena activity berikutnya menggunakan kunci untuk mendapatkan

kembali nilai teks. Cara terbaik mendefinisikan kunci untuk ekstra intent adalah

menggunakan nama paket aplikasi Anda sebagai awalan. Ini akan memastikan kunci itu unik, seandainya aplikasi Anda berinteraksi dengan aplikasi lain.

 Metode startActivity() memulai instance DisplayMessageActivity yang

ditetapkan oleh Intent. Sekarang Anda perlu membuat kelas tersebut.

Membuat activity kedua

1. Di jendela Project, klik kanan folder app dan pilih New > Activity > Empty Activity.

(11)

Android Studio secara otomatis melakukan tiga hal:

 Membuat file DisplayMessageActivity.java.

 Membuat file layout activity_display_message.xml yang sesuai.

 Menambahkan elemen <activity> yang diperlukan di AndroidManifest.xml.

Jika Anda menjalankan aplikasi dan menge-tap tombol pada activity pertama, activity kedua akan dimulai tetapi kosong. Hal ini karena activity kedua menggunakan layout kosong yang disediakan oleh template.

Menambahkan tampilan teks

Gambar 1. Tampilan teks yang ditempatkan di tengah bagian atas layout

Activity baru ini berisi file layout kosong, jadi sekarang Anda perlu menambahkan tampilan teks tempat pesan akan muncul.

1. Buka file app > res > layout > activity_display_message.xml.

2. Klik Turn On Autoconnect di toolbar.

3. Dari jendela Pallete, seret TextView ke dalam layout dan tempatkan di dekat bagian atas layout, di dekat posisi tengah sehingga menempel pada garis vertikal yang muncul, kemudian lepaskan. Autoconnect menambahkan pembatas untuk menempatkan tampilan di tengah-tengah posisi horizontal.

4. Buat satu pembatas lagi dari bagian atas tampilan teks ke bagian atas layout, sehingga tampak seperti yang ditunjukkan pada gambar 1.

Opsional, buat beberapa penyesuaian pada gaya teks dengan memperluas textAppearance di jendela Properties dan mengubah atribut seperti textSize dan textColor.

(12)

Sekarang Anda akan memodifikasi activity kedua untuk menampilkan pesan yang diteruskan oleh activity pertama.

1. Di DisplayMessageActivity.java, tambahkan kode berikut ke metode onCreate():

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_display_message);

// Get the Intent that started this activity and extract the string

Intent intent = getIntent(); String message =

intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

// Capture the layout's TextView and set the string as its text TextView textView = (TextView) findViewById(R.id.textView); textView.setText(message);

}

2. Tekan Alt + Enter (atau Option + Return di Mac) untuk mengimpor kelas yang tidak ada. Impor Anda akan terlihat seperti berikut:

import android.content.Intent;

Setiap layar di aplikasi Anda yang bukan pintu masuk utama (semua layar yang bukan layar "utama") harus menyediakan navigasi sehingga pengguna bisa kembali ke layar induk logis sebelumnya dalam hierarki aplikasi dengan mengetuk tombol Up di bilah aplikasi.

Yang perlu Anda lakukan adalah mendeklarasikan activity yang akan menjadi induk logis di file AndroidManifest.xml. Jadi buka file app > Manifests > AndroidManifest.xml, cari tag <activity> untuk DisplayMessageActivity dan ganti dengan kode berikut:

<activity android:name=".DisplayMessageActivity"

android:parentActivityName=".MainActivity" >

<!-- The meta-data tag is required if you support API level 15 and lower -->

<meta-data

android:name="android.support.PARENT_ACTIVITY" android:value=".MainActivity" />

</activity>

Sekarang sistem Android akan secara otomatis menambahkan tombol Up di bilah aplikasi.

(13)

Sekarang jalankan kembali aplikasi dengan mengklik Apply Changes di toolbar. Ketika terbuka, ketik pesan di kolom teks, dan tekan Send untuk memunculkan pesan dalam activity kedua.

Gambar 2. Screenshot dari kedua activity

Selamat, Anda sudah membuat aplikasi Android pertama Anda!

Gambar

Gambar 4. Ilustrasi dua tampilan yang diposisikan di dalam ConstraintLayout
Gambar 5. Kotak teks dibatasi ke bagian atas dan kiri layout induk
Gambar 6. Tombol dibatasi ke sisi kanan kotak teks dan garis dasarnya
Gambar 7. Dialog untuk menambahkan string baru
+4

Referensi

Garis besar

Dokumen terkait

Kecanduan merupakan melakukan sesuatu hal secara berlebihan dan terus menerus. kecanduan dalam mengkonsumsi narkoba sangat berbahaya bagi setiap orang. Sesungguhnya

Sel normal akan berhenti tumbuh jika berada pada tempat atau posisi yang tidak semestinya, sedang sel kanker tidak, sehingga dapat timbul anak sebar (metastase).. (4) Tidak

Pada bab I telah dikaji bahwa suatu graf dapat dianalogikan dengan manusia. Manusia sebagai suatu graf mempunyai titik dan mempunyai garis, titik adalah awal dari

a) Peningkatan iman dan takwa serta ahlak mulia. c) Keragaman potensi dan kara kteristi k daerah dan lingkungan setempat. d) Tuntutan pembangunan daerah dan nasional. Acuan

Dengan besar energi yang tidak stabil sepanjang waktu, maka nilai energi aliran air terjun setinggi 0,55 meter yang bisa digunakan untuk analisis adalah besar

Waktu yang dibutuhkan untuk mengeringkan garam, suhu udara optimum dalam proses pengeringan garam karena keterbatasan dengan titik didih dari yodium, suhu didalam briket garam,

Perubahan faktor ekonomi eksternal kenaikan GDP Jepang, depresiasi nilai tukar yen terhadap dollar Amerika Serikat, dan penurunan tariff impor furnitur rotan Jepang

 Dua jajaran genjang maupun belah ketupat belum tentu sebangun, meskipun perbandingan sisi yang bersesuaian sama belum tentu besar sudutnya sama..  Dua segitiga sama sisi