Membuka Layout Editor
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
Android Studio).
di sisi kiri
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.
Editor Anda sekarang akan terlihat seperti yang ditunjukkan pada gambar 3.
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.
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.
ConstraintLayout
Gambar 4. Ilustrasi dua tampilan yang diposisikan di dalam ConstraintLayout
Misalnya, Anda bisa mendeklarasikan layout berikut (di gambar 4):
Tampilan A terletak 16dp dari atas layout induk.
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.
Menambahkan tombol
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).
2. Klik Open editor di bagian atas jendela editor. Ini akan membuka Translations
Editor, yang menyediakan antarmuka sederhana untuk menambahkan dan mengedit
string default Anda, serta membantu semua string terjemahan tetap teratur.
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
pilih button_send.
, lalu
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).
Sebelum melanjutkan, klik Show Blueprint
di toolbar Layout Editor.
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.
Meskipun tujuan Anda bukanlah untuk mengetengahkan tampilan, ini adalah cara
yang cepat untuk membuat rantai di antara kedua tampilan tersebut. Rantai adalah
pembatas dua arah di antara dua atau beberapa tampilan yang memungkinkan Anda
untuk memasang tampilan yang diikat secara bersamaan. Namun, ini juga menghapus
margin horizontal, jadi Anda akan mengembalikannya.
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
Run
di toolbar untuk mengupdate aplikasi dengan layout baru. Atau klik
untuk menginstal dan menjalankan aplikasi.
Tombol ini tetap tidak melakukan apa pun. Untuk menjalankan activity lain saat tombol ditap, lanjutkan ke pelajaran berikutnya.
Memulai Activity Lain
Sebelumnya Berikutnya
Pelajaran ini mengajarkan Anda cara
1. Merespons tombol send
2. Membangun Intent
3. Membuat activity kedua
4. Menambahkan tampilan teks
5. Menampilkan pesan
6. Menambahkan navigasi naik
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
tombol
}
}
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
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.
Intent
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);
setContentView(R.layout.activity_main);
}
/** 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
import
import
import
import
android.content.Intent;
android.support.v7.app.AppCompatActivity;
android.os.Bundle;
android.view.View;
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.
2. Di jendela Configure Activity, masukkan "DisplayMessageActivity" untuk Activity Name dan
klik Finish (biarkan semua properti lain disetel ke default).
Android Studio secara otomatis melakukan tiga hal:
Membuat file DisplayMessageActivity.java.
Membuat file layout activity_display_message.xml yang sesuai.
Menambahkan elemen 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 tengahtengah 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.
Menampilkan pesan
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
import
import
import
import
android.content.Intent;
android.support.v7.app.AppCompatActivity;
android.os.Bundle;
android.view.ViewGroup;
android.widget.TextView;
Menambahkan navigasi naik
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 untuk DisplayMessageActivity dan ganti dengan kode berikut:
Sekarang sistem Android akan secara otomatis menambahkan tombol Up di bilah aplikasi.
Menjalankan aplikasi
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!
Untuk meneruskan pembelajaran dasar-dasar development aplikasi Android, ikuti link di
bawah ini untuk menuju kelas berikutnya.
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
Android Studio).
di sisi kiri
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.
Editor Anda sekarang akan terlihat seperti yang ditunjukkan pada gambar 3.
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.
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.
ConstraintLayout
Gambar 4. Ilustrasi dua tampilan yang diposisikan di dalam ConstraintLayout
Misalnya, Anda bisa mendeklarasikan layout berikut (di gambar 4):
Tampilan A terletak 16dp dari atas layout induk.
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.
Menambahkan tombol
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).
2. Klik Open editor di bagian atas jendela editor. Ini akan membuka Translations
Editor, yang menyediakan antarmuka sederhana untuk menambahkan dan mengedit
string default Anda, serta membantu semua string terjemahan tetap teratur.
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
pilih button_send.
, lalu
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).
Sebelum melanjutkan, klik Show Blueprint
di toolbar Layout Editor.
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.
Meskipun tujuan Anda bukanlah untuk mengetengahkan tampilan, ini adalah cara
yang cepat untuk membuat rantai di antara kedua tampilan tersebut. Rantai adalah
pembatas dua arah di antara dua atau beberapa tampilan yang memungkinkan Anda
untuk memasang tampilan yang diikat secara bersamaan. Namun, ini juga menghapus
margin horizontal, jadi Anda akan mengembalikannya.
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
Run
di toolbar untuk mengupdate aplikasi dengan layout baru. Atau klik
untuk menginstal dan menjalankan aplikasi.
Tombol ini tetap tidak melakukan apa pun. Untuk menjalankan activity lain saat tombol ditap, lanjutkan ke pelajaran berikutnya.
Memulai Activity Lain
Sebelumnya Berikutnya
Pelajaran ini mengajarkan Anda cara
1. Merespons tombol send
2. Membangun Intent
3. Membuat activity kedua
4. Menambahkan tampilan teks
5. Menampilkan pesan
6. Menambahkan navigasi naik
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
tombol
}
}
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
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.
Intent
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);
setContentView(R.layout.activity_main);
}
/** 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
import
import
import
import
android.content.Intent;
android.support.v7.app.AppCompatActivity;
android.os.Bundle;
android.view.View;
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.
2. Di jendela Configure Activity, masukkan "DisplayMessageActivity" untuk Activity Name dan
klik Finish (biarkan semua properti lain disetel ke default).
Android Studio secara otomatis melakukan tiga hal:
Membuat file DisplayMessageActivity.java.
Membuat file layout activity_display_message.xml yang sesuai.
Menambahkan elemen 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 tengahtengah 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.
Menampilkan pesan
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
import
import
import
import
android.content.Intent;
android.support.v7.app.AppCompatActivity;
android.os.Bundle;
android.view.ViewGroup;
android.widget.TextView;
Menambahkan navigasi naik
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 untuk DisplayMessageActivity dan ganti dengan kode berikut:
Sekarang sistem Android akan secara otomatis menambahkan tombol Up di bilah aplikasi.
Menjalankan aplikasi
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!
Untuk meneruskan pembelajaran dasar-dasar development aplikasi Android, ikuti link di
bawah ini untuk menuju kelas berikutnya.