Pelajaran 5: Pengalaman Pengguna yang Menyenangkan
5.1: Drawable, Gaya, dan Tema
Tugas 1: Membuat Aplikasi Scorekeeper
1.1 Buat proyek “Scorekeeper”
1.2 Buat layout untuk aktivitas utama
- Disini saya menggunakan linear layout dan
- Dalam 1 View saya menambahkan komponen 2 Text View dan 2 Image Button yang dibungkus menggunakan Relative Layout
-Sehingga seperti berikut:
Setelah itu
- Menambahkan aset vektor
- Pilih File > New > Vector Asset untuk membuka Vector Asset Studio.
- Klik ikon untuk mengubahnya menjadi daftar file ikon material. Pilih kategori Content.
- Pilih ikon plus dan klik OK.
- Ubah nama file sumber daya “ic_plus” dan centang kotak Override di sebelah opsi ukuran.
- Ubah ukuran ikon ke 40dp x 40dp.
- Klik Next, lalu Finish.
- Ulangi proses ini untuk menambahkan ikon “minus” dan beri nama file “ic_minus”.
Hasilnya seperti berikut :
1.3 Inisialisasi TextView Anda dan variabel hitungan skor
Untuk mencatat skor, Anda memerlukan dua hal:
- Variabel integer agar Anda bisa melacak skor.
- Referensi ke TextView skor Anda di MainActivity sehingga Anda bisa memperbarui skor.
Dalam metode onCreate() MainActivity, temukan TextView skor Anda menurut id dan tetapkan TextView ke variabel anggota.
- Buat dua variabel anggota integer, yang menunjukkan skor setiap tim, dan inisialisasi ke 0.
1.4 Implementasikan fungsionalitas onClick untuk tombol Anda.
- Implementasi tombol OnClick untuk mengatasi aksi ketika button ditekan
Berikut ini Codenya:
/**
* Method that handles the onClick of both the decrement buttons
* @param view The button view that was clicked
*/
public void decreaseScore(View view) {
//Get the ID of the button that was clicked
int viewID = view.getId();
switch (viewID){
//If it was on Team 1
case R.id.decreaseTeam1:
//Decrement the score and update the TextView
mScore1–;
mScoreText1.setText(String.valueOf(mScore1));
break;
//If it was Team 2
case R.id.decreaseTeam2:
//Decrement the score and update the TextView
mScore2–;
mScoreText2.setText(String.valueOf(mScore2));
}
}
/**
* Method that handles the onClick of both the increment buttons
* @param view The button view that was clicked
*/
public void increaseScore(View view) {
//Get the ID of the button that was clicked
int viewID = view.getId();
switch (viewID){
//If it was on Team 1
case R.id.increaseTeam1:
//Increment the score and update the TextView
mScore1++;
mScoreText1.setText(String.valueOf(mScore1));
break;
//If it was Team 2
case R.id.increaseTeam2:
//Increment the score and update the TextView
mScore2++;
mScoreText2.setText(String.valueOf(mScore2));
}
}
Tugas 2: Membuat sumber daya Drawable
2.1 Buat Drawable Shape
- Klik kanan folder drawable di direktori sumber daya.
- Pilih New > Drawable resource file.
- Beri nama file “button_background” dan klik OK.
- Buang semua kode, kecuali:
<?xml version=”1.0″ encoding=”utf-8″?>
- Tambahkan kode berikut yang membuat bentuk oval dengan garis luar:
<shape
xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”oval”>
<stroke
android:width=”2dp”
android:color=”@color/colorPrimary”/>
</shape>
2.2 Terapkan drawable shape sebagai background
- Terapkan menggunakan command dibawah ini
android:background=”@drawable/button_background”
Sehingga bentuknya akan rounded
Tugas 3: Tata gaya tampilan Anda
3.1 Buat gaya tombol
Lakukan yang berikut:
- Dalam direktori sumber daya, cari dan buka file “values/styles.xml”. Di file inilah semua kode gaya Anda ditempatkan.
- Di antara tag <resources> , tambahkan gaya baru dengan atribut berikut untuk membuat gaya umum untuk semua tombol:
Setel gaya induk menjadi “Widget.AppCompat.Button” untuk mempertahankan atribut default tombol.
Tambahkan atribut yang mengubah latar belakang drawable menjadi latar belakang yang Anda buat di tugas sebelumnya.
<style name=”ScoreButtons” parent=”Widget.AppCompat.Button”>
<item name=”android:background”>@drawable/button_background</item>
</style>
- Buat gaya untuk tombol plus dengan melluaskan gaya “ScoreButtons”:
<style name=”PlusButtons” parent=”ScoreButtons”>
<item name=”android:src”>@drawable/ic_plus</item>
<item name=”android:contentDescription”>@string/plus_button</item>
</style>
- Buat gaya untuk tombol minus:
<style name=”MinusButtons” parent=”ScoreButtons”>
<item name=”android:src”>@drawable/ic_minus</item>
<item name=”android:contentDescription”>@string/minus_button</item>
</style>
- Di file layout untuk aktivitas utama, buang semua atribut yang Anda definisikan di gaya untuk setiap tombol dan ganti dengan gaya yang sesuai:
Menggunakan Command seperti dibawah ini
style=”@style/MinusButtons”
style=”@style/PlusButtons”
3.2 Buat gaya TextView
- Tambahkan atribut berikut ke semua TextView:
android:textAppearance=”@style/TextAppearance.AppCompat.Headline”
- Klik kanan di mana saja di atribut TextView skor pertama dan pilih Refactor > Extract > Style…
- Beri nama gaya “ScoreText” dan centang kotak textAppearance (atribut yang baru Anda tambahkan) serta Launch
- Pilih OK.
- Pastikan scope disetel ke file layout activity_main.xml dan klik OK.
- Sebuah panel di bagian bawah Android Studio akan terbuka jika gaya yang sama ditemukan di tampilan lain. Pilih Do Refactor untuk menerapkan gaya baru ke tampilan dengan atribut yang sama.
3.3 Memperbarui gaya
Buat perubahan berikut di file styles.xml Anda:
- Tambahkan atau modifikasi masing-masing atribut berikut di blok gaya yang ditetapkan:
@color/colorPrimary ScoreButtons
@style/TextAppearance.AppCompat.Display3 ScoreText
- Buat gaya baru yang disebut “TeamText” dengan atribut berikut:
<item name=”android:textAppearance”>@style/TextAppearance.AppCompat.Display1</item>
- Ubah atribut gaya TextView nama tim menjadi gaya TeamText yang baru dibuat di activity_main.xml.
Tugas 4: Tema dan Sentuhan Akhir
4.1 Jelajahi tema
- Di file manifes Android, temukan atribut <application> tag dan ubah android:theme ke:
android:theme=”@style/Theme.AppCompat.Light.NoActionBar”
Ini adalah tema yang ditentukan sebelumnya yang membuang bilah tindakan dari aktivitas Anda.
4.2 Tambahkan tombol tema ke menu
- Klik kanan direktori “res” dan pilih New > Android resource file.
- Beri nama file “main_menu”, ubah Resource Type ke Menu, dan klik OK.
- Tambahkan item menu dengan atribut berikut:
<item
android:id=”@+id/night_mode”
android:title=”@string/night_mode”/>
- Buka “strings.xml” dan buat dua sumber daya string:
<string name=”night_mode”>Night Mode</string>
<string name=”day_mode”>Day Mode</string>
- Tekan Ctrl – O untuk membuka menu Override Method di file Java aktivitas utama Anda dan pilih metode onCreateOptionsMenu yang terletak di bawah kategori “android.app.Activity”. Klik OK.
- Mekarkan menu yang baru Anda buat di dalam metode onCreateOptionsMenu() :
getMenuInflater().inflate(R.menu.main_menu, menu);
4.3 Ubah tema dari menu
Tema DayNight menggunakan kelas AppCompatDelegate untuk menyetel opsi mode malam di aktivitas Anda. Untuk Untuk
mengetahui selengkapnya tentang tema ini, kunjungi entri blog.
- Di file styles.xml, ubah induk AppTheme menjadi “Theme.AppCompat.DayNight.DarkActionBar.
- Ganti metode onOptionsItemSelected() di MainActivity dan periksa item menu mana yang diklik:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
//Check if the correct item was clicked
if(item.getItemId()==R.id.night_mode){}
}
- Sebagai respons terhadap klik pada tombol menu, Anda bisa memverifikasi setelan mode malam saat ini dengan
memanggil AppCompatDelegate.getDefaultNightMode() .
- Jika mode malam diaktifkan, ubah menjadi status nonaktif:
//Get the night mode state of the app
int nightMode = AppCompatDelegate.getDefaultNightMode();
//Set the theme mode for the restarted activity
if(nightMode == AppCompatDelegate.MODE_NIGHT_YES) {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
}
- Jika tidak, aktifkan mode ini:
else {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
}
- Tema hanya bisa berubah saat aktivitas sedang dibuat, sehingga panggil recreate() agar perubahan tema bisa
diterapkan.
- Metode onOptionsItemSelected() Anda harus mengembalikan true, karena klik item ditangani.
- Jalankan aplikasi Anda. Menu “Mode Malam” sekarang akan mengalihkan tema aktivitas Anda.
- Tambahkan kode berikut di metode onCreateOptionsMenu:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//Inflate the menu from XML
getMenuInflater().inflate(R.menu.main_menu, menu);
//Change the label of the menu based on the state of the app
int nightMode = AppCompatDelegate.getDefaultNightMode();
if(nightMode == AppCompatDelegate.MODE_NIGHT_YES){
menu.findItem(R.id.night_mode).setTitle(R.string.day_mode);
} else{
menu.findItem(R.id.night_mode).setTitle(R.string.night_mode);
}
return true;
}
- Jalankan aplikasi Label tombol menu sekarang berubah dengan tema.
Hasil akhirnya seperti berikut :
5.2: Desain Material Daftar, Kartu, dan Warna
Tugas 1: Mengunduh Kode Starter
1.1 Buka dan Jalankan Proyek Material Me
- Unduh dan buka zip file MaterialMe-Starter.
- Buka aplikasi di Android Studio.
- Bangun dan jalankan aplikasi.
1.2 Jelajahi Aplikasi
Di Folder Java Terdapat Sport.java, SportsAdapter.java dan MainActivity.java
Di Folder res terdapat strings.xml dan list_item.xml
Tugas 2: Menambahkan CardView dan Gambar
2.1 Tambahkan CardView
- Import CardView di file gradle
- Di FIle List Item Bungkus Linear Layout dengan CardView
dengan ketentuan sebagai berikut:
- Jalankan Aplikasi
2.2 Unduh gambar
- Unduh file di link https://github.com/google-developer-training/android-fundamentals-starter-apps/blob/master/5_2_P_starter_images.zip
- Salin file ini ke direktori res > drawable
- Definisikan drawable sebagai item di file xml Anda
2.3 Modifikasi objek Sport
- Tambahkan variabel anggota integer ke objek Sport yang akan berisi sumber daya yang dapat digambar:
private final int imageResource;
- Modifikasi konstruktor sehingga akan mengambil sebuah integer sebagai parameter dan menetapkannya ke variabel
anggota:
public Sport(String title, String info, int imageResource) {
this.title = title;
this.info = info;
this.imageResource = imageResource;
}
- Buat getter untuk integer sumber daya:
public int getImageResource() {
return imageResource;
}
2.4 Perbaiki metode initializeData()
- Dalam metode initializeData() , dapatkan TypedArray id sumber daya dengan memanggil
getResources().obtainTypedArray() , dan meneruskan nama larik sumber daya yang dapat digambar, yang Anda
definisikan di file strings.xml:
TypedArray sportsImageResources =
getResources().obtainTypedArray(R.array.sports_images);
Anda bisa mengakses elemen pada indeks i di TypedArray dengan menggunakan metode “get” yang sesuai,
bergantung pada tipe sumber daya di larik. Dalam kasus spesifik ini, ini berisi ID sumber daya, sehingga Anda bisa
menggunakan metode getResourceId() .
- Perbaiki kode di loop yang membuat objek Sport, dengan menambahkan ID sumber daya yang dapat digambar yang
sesuai sebagai parameter ketiga dengan memanggil getResourceId() di TypedArray:
for(int i=0;i<sportsList.length;i++){
mSportsData.add(new Sport(sportsList[i],sportsInfo[i],
sportsImageResources.getResourceId(i,0)));
}
- Bersihkan data di TypedArray setelah Anda membuat ArrayList data Sport:
sportsImageResources.recycle();
2.5 Tambahkan ImageView ke item daftar
- Ubah LinearLayout di dalam file list_item.xml menjadi RelativeLayout, dan hapus atribut orientasi.
- Tambahkan ImageView dengan atribut berikut:
- Tambahkan atribut berikut ke TextView yang ada:
2.6 Muat gambar menggunakan Glide
- Tambahkan dependensi berikut untuk Glide, di file build.gradle tingkat aplikasi Anda:
compile ‘com.github.bumptech.glide:glide:3.5.2’
- Tambahkan variabel di kelas SportsAdapter, kelas ViewHolder untuk ImageView, dan lakukan inisialisasi di konstruktor
ViewHolder:
mSportsImage = (ImageView) itemView.findViewById(R.id.sportsImage);
- Tambahkan baris kode berikut ke onBindViewHolder() untuk mendapatkan sumber daya gambar dari objek Sport dan
muat ke dalam ImageView menggunakan Glide:
Glide.with(mContext).load(currentSport.getImageResource()).into(holder.mSportsImage);
Begitulah cara memuat gambar dengan Glide. Glide juga memiliki beberapa fitur tambahan yang memungkinkan Anda
mengubah ukuran, mentransformasi, dan memuat gambar dengan berbagai cara. Kunjungi laman GitHub Glide untuk
mengetahui selengkapnya.
Tugas 3: Membuat CardView Anda bisa Swipe, dipindahkan dan diklik
3.1 Implementasikan gesek untuk menutup
- Buat objek ItemTouchHelper baru, di metode onCreate() MainActivity.java. Untuk argumennya, buat instance baru
ItemTouchHelper.SimpleCallback dan tekan Enter untuk membuat Android Studio mengisi metode yang diperlukan:
onMove() dan onSwiped() .
Catatan: Jika metode yang diperlukan tidak otomatis ditambahkan, klik bola lampu merah dan pilih Implement
methods.
- Konstruktor SimpleCallback akan diberi garis bawah merah karena Anda belum menyediakan parameter yang
diperlukan: arah yang Anda rencanakan untuk mendukung pemindahan dan penggesekan item daftar.
Karena kita hanya mengimplementasikan gesek untuk menutup sekarang, Anda harus meneruskan 0 untuk arah
pemindahan yang didukung dan ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT untuk arah penggesekan yang
didukung:
ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper
.SimpleCallback(0, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT) {}
- Sekarang Anda harus mengimplementasikan perilaku yang diinginkan di onSwiped() . Dalam hal ini, menggesek kartu
ke kiri atau ke kanan akan menghapusnya dari daftar. Panggili remove() di rangkaian data, dengan meneruskan
indeks yang sesuai dengan mendapatkan posisi dari ViewHolder:
mSportsData.remove(viewHolder.getAdapterPosition());
- Agar RecyclerView dapat menggerakkan penghapusan dengan benar, Anda juga harus memanggil
notifyItemRemoved() , lagi dengan meneruskan indeks yang sesuai dengan mendapatkan posisi dari ViewHolder:
mAdapter.notifyItemRemoved(viewHolder.getAdapterPosition());
- Setelah membuat objek ItemTouchHelper baru di metode onCreate() MainActivity, pangil attachToRecyclerView() di
instance ItemTouchHelper untuk menambahkannya ke RecyclerView Anda:
helper.attachToRecyclerView(mRecyclerView);
3.2 Implementasikan seret dan lepas
- Ubah argumen pertama SimpleCallback dari 0 untuk menyertakan setiap arah, karena kita ingin bisa melakukan seret
dan lepas di mana pun:
ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper
.SimpleCallback(ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT |
ItemTouchHelper.DOWN | ItemTouchHelper.UP, ItemTouchHelper.LEFT |
ItemTouchHelper.RIGHT) {}
- Dalam metode onMove() , dapatkan indeks asli dan target dari argumen kedua dan ketiga yang diteruskan (sesuai
dengan ViewHolder asli dan target).
int from = viewHolder.getAdapterPosition();
int to = target.getAdapterPosition();
- Pindahkan item di kumpulan data dengan memanggil Collections.swap() dan meneruskan kumpulan data dan indeks
awal dan akhir:
Collections.swap(mSportsData, from, to);
- Beri tahu adaptor bahwa item sudah dipindahkan, dengan meneruskan indeks lama dan baru:
mAdapter.notifyItemMoved(from, to);
3.3 Implementasikan tampilan detail
- Buat aktivitas baru dengan masuk ke File > New > Activity > Empty Activity.
- Beri nama DetailActivity, dan terima semua default.
- Di file layout yang baru dibuat, buang padding dari RelativeLayout rootview.
- Salin semua dari tampilan TextView dan ImageView dari file list_item.xml ke file activity_detail.xml.
- Tambahkan kata “Detail” ke setiap referensi ke sebuah id, untuk membedakannya dengan id list_item. Misalnya, ubah
id ImageView dari sportsImage ke sportsImageDetail, serta semua referensi ke id ini untuk penepatan relatif, seperti
layout_below.
- Untuk textview subTitleDetal, buang semua string teks placeholder dan tempelkan paragraf teks generik untuk
menggantikan semua teks detail (Misalnya, beberapa paragraf Lorem Ipsum).
- Ubah padding TextView menjadi 16dp.
- Bungkus keseluruhan activity_detail.xml di ScrollView dan ubah atribut layout_height RelativeLayout ke
“wrap_content”.
Catatan: Atribut untuk ScrollView mungkin berwarna merah terlebih dulu. Ini karena Anda harus menambahkan atribut
yang mendefinisikan namespace Android. Ini adalah atribut yang muncul di semua file layout Anda secara default:
xmlns:android=”http://schemas.android.com/apk/res/android” .
Cukup pindahkan deklarasi ini ke tampilan tingkat atas dan warna merah pun akan hilang.
- Dalam kelas SportsAdapter, buat kelas dalam ViewHolder agar mengimplementasikan View.OnClickListener dan dan
implementasikan metode yang diperlukan ( onClick() ).
- Setel OnClickListener ke itemview di konstruktor:
itemView.setOnClickListener(this);
- Dalam metode onClick() , dapatkan objek Sport untuk item yang diklik menggunakan getAdapterPosition() .
Sport currentSport = mSportsData.get(getAdapterPosition());
- Buat sebuah Intent yang meluncurkan aktivitas Detail, dan letakkan judul dan sumber daya gambar sebagai ekstra di
Intent:
Intent detailIntent = new Intent(mContext, DetailActivity.class);
detailIntent.putExtra(“title”, currentSport.getTitle());
detailIntent.putExtra(“image_resource”, currentSport.getImageResource());
- Panggil startActivity() di variabel mContext, dengan meneruskan Intent baru.
- Dalam DetailActivity.java, lakukan inisialisasi ImageView dan TextView judul di onCreate() :
TextView sportsTitle = (TextView)findViewById(R.id.titleDetail);
ImageView sportsImage = (ImageView)findViewById(R.id.sportsImageDetail);
- Dapatkan judul dari Intent yang masuk dan setel ke TextView:
sportsTitle.setText(getIntent().getStringExtra(“title”));
- Gunakan Glide untuk memuat gambar ke dalam ImageView:
Glide.with(this).load(getIntent().getIntExtra(“image_resource”,0))
.into(sportsImage);
Tugas 4: Tambahkan FAB dan pilih Palet Warna Material
4.1 Tambahkan FAB
- Tambahkan baris kode berikut ke file build.gradle tingkat aplikasi untuk menambahkan dependensi pustaka dukungan
desain:
compile ‘com.android.support:design:24.2.1’
- Gunakan studio aset vektor untuk mengunduh ikon untuk digunakan di FAB. Tombol akan menyetel ulang konten di
RecyclerView sehingga ikon ini akan melakukan:
. Mengubah nama ke ic_reset.
- Di xml, tambahkan tampilkan Tombol Aksi Mengambang dengan parameter berikut:
- Definisikan metode resetSports() di MainActivity.java agar cukup memanggil initializeData() untuk menyetel ulang
data.
4.2 Pilih Palet Material
- Buka file styles.xml Anda (yang ada di direktori values). Gaya AppTheme mendefinisikan tiga warna secara default:
colorPrimary, colorPrimaryDark, dan colorAccent. Gaya ini didefinisikan oleh nilai dari file colors.xml. Desain Material
menyarankan agar memilih setidaknya tiga warna ini untuk aplikasi Anda:
- Warna primer. Ini otomatis digunakan untuk mewarnai bilah aplikasi Anda.
- Warna gelap primer. Warna lebih gelap dari warna yang sama. Ini digunakan untuk bilah status di atas bilah aplikasi, di
antara yang lain.
- Warna aksen. Warna yang cukup kontras dengan warna primer. Ini digunakan untuk beragam sorotan, tetapi juga
menjadi warna default FAB. Anda bisa menggunakan Panduan Warna Material untuk memilih beberapa warna untuk
bereksperimen.
- Ambil warna dari panduan untuk digunakan sebagai warna utama Anda. Warna harus dalam rentang 300-700
sehingga Anda masih bisa memilih warna aksen dan gelap yang sesuai. Modifikasi nilai hex colorPrimary di file
colors.xml Anda agar sesuai dengan warna yang Anda pilih.
- Pilih tingkat warna yang lebih gelap dari warna yang sama untuk digunakan sebagai warna gelap primer. Modifikasi
warna hex colors.xml lagi agar sesuai dengan colorPrimaryDark.
- Pilih warna aksen untuk FAB Anda dari warna yang nilainya dimulai dengan A dan yang warnanya cukup kontras
dengan warna primer (seperti Orange A200). Ubah nilai colorAccent di colors.xml agar menyesuaikan.
- Tambahkan Tambahkan atribut android:tint ke FAB dan setel agar sama dengan #FFFFFF (putih) untuk mengubah
warna ikon ke putih.
4.4 SaveInstanceState
Anda telah belajar di pelajaran sebelumnya bahwa Anda harus bersiap karena aktivitas Anda dihapus dan dibuat ulang
pada waktu yang tidak diduga, misalnya saat layar Anda diputar. Di aplikasi ini, TextView yang berisi skor akan disetel
ulang ke nilai awal 0 saat perangkat diputar. Untuk memperbaiki ini, lakukan yang berikut:
- Ganti metode onSaveInstanceState() di MainActivity agar mempertahankan nilai dua TextView skor:
@Override
protected void onSaveInstanceState(Bundle outState) {
//Save the scores
outState.putInt(STATE_SCORE_1, mScore1);
outState.putInt(STATE_SCORE_2, mScore2);
super.onSaveInstanceState(outState);
}
- Di metode onCreate() MainActivity.java, periksa apakah terdapat savedInstanceState. Jika ada, pulihkan skor ke
tampilan teks:
if (savedInstanceState != null) {
mScore1 = savedInstanceState.getInt(STATE_SCORE_1);
mScore2 = savedInstanceState.getInt(STATE_SCORE_2);
//Set the score text views
mScoreText1.setText(String.valueOf(mScore1));
mScoreText2.setText(String.valueOf(mScore2));
}
Hasil Akhir seperti berikut:
5.3 Mendukung Lanskap, Beberapa Ukuran Layar, dan Pelokalan
Tugas 1: Mendukung Orientasi Lanskap
1.1 Ubah ke GridLayoutManager
- Buat file sumber daya baru yang bernama integers.xml. Masuk ke direktori sumber daya Anda, klik kanan nama
direktori nama dan pilih New > Values resource file.
- Beri nama file dengan integers.xml dan klik OK.
- Buat konstanta integer antara tag <resources> yang bernama “grid_column_count” dan setel sama dengan 1:
<integer name=”grid_column_count”>1</integer>
- Buat file sumber daya nilai lain, yang bernama integers.xml tetapi dengan karakteristik yang berbeda.
Perhatikan opsi “Available qualifiers” di dialog untuk membuat file sumber daya. Karakteristik ini disebut sebagai
“resource qualifiers” dan digunakan untuk melabeli konfigurasi sumber daya untuk beragam situasi.
- Pilih Orientation dan tekan simbol >> di tengah dialog untuk mengakses qualifier ini.
- Ubah pemilih orientasi Layar ke Landscape dan perhatikan bagaimana nama direktori “values-land” otomatis berubah.
Ini adalah inti qualifier sumber daya: nama direktori memberi tahu Android kapan harus menggunakan file layout
spesifik. Dalam hal ini, ini terjadi saat ponsel diputar ke mode lanskap.
- Klik OK untuk membuat file layout baru.
- salin konstanta integer yang Anda buat ke dalam file sumber daya ini, tetapi ubah nilainya menjadi 2.
1.2 Modifikasi MainActivity
- Dalam onCreate() di MainActivity, dapatkan integer dari file sumber daya integers.xml:
int gridColumnCount = getResources().getInteger(R.integer.grid_column_count);
Android Runtime akan memproses penentuan file integers.xml mana yang akan digunakan, bergantung pada status
perangkat.
- Ubah LinearLayoutManager ke GridLayoutManager, dengan meneruskan konteks dan integer yang baru dibuat:
mRecyclerView.setLayoutManager(new GridLayoutManager(this, gridColumnCount));
- Saat menggunakan aplikasi dalam mode lanskap, Anda akan melihat bahwa fungsionalitas gesek untuk menutup tidak lagi mudah digunakan, karena item sekarang berada dalam grid, bukan dalam daftar. Anda bisa menggunakan variabel
- gridColumnCount untuk menonaktifkan tindakan gesek jika terdapat lebih dari satu kolom:
int swipeDirs;
if(gridColumnCount > 1){
swipeDirs = 0;
} else {
swipeDirs = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
}
ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.SimpleCallback
(ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT | ItemTouchHelper.DOWN
| ItemTouchHelper.UP, swipeDirs)
Tugas 2 : Dukung Tablet
2.1 Buat Layout Menyesuaikan Tablet
- Buat file integers.xml yang menggunakan qualifier “smallest width” dengan nilai yang disetel ke 600. Android
menggunakan file ini kapan pun aplikasi berjalan pada tablet.
- Salin kode dari file integers.xml dengan qualifier sumber daya lanskap (memiliki jumlah grid 2) dan tempelkan ke file
integers.xml yang baru.
- Buat file integers.xml ketiga yang menyertakan lebar layar terkecil berukuran qualifier 600dp dan qualifier orientasi
lanskap.
- Ubah variabel grid_column_count ke 3 dalam lanskap, file integers.xml.
2.2 Perbarui gaya item daftar tablet
- Buat file sumber daya styles.xml baru yang menggunakan qualifier Smallest Screen Width dengan nilai 600.
- Salin gaya “SportsTitle” dan “SportsDetailText” dari file styles.xml asli ke file styles.xml baru yang berkualifikasi.
- Ubah induk gaya “SportsTitle” menjadi “TextAppearance.AppCompat.Display1”
- Gaya Display1 Android yang telah didefinisikan menggunakan nilai textColorSecondary dari tema saat ini
(ThemeOverlay.AppCompat.Dark) yang dalam hal ini adalah warna abu-abu muda. Warna abu-abu muda tidak tampil
dengan baik pada gambar spanduk di aplikasi Anda. Untuk memperbaiki ini, tambahkan atribut “android:textColor”
ke gaya “SportsTitle” dan setel ke “?android:textColorPrimary” .’
Catatan: Tanda tanya memberi tahu Android Runtime agar menemukan nilai dalam tema yang diterapkan pada View.
Dalam contoh ini, temanya adalah ThemeOverlay.AppCompat.Dark yang atribut textColorPrimary -nya adalah putih.
- Ubah induk gaya “SportsDetailText” ke “TextAppearance.AppCompat.Headline” .
Perbarui gaya tampilan teks di list_item.xml
- Kembali ke list_item.xml, ubah atribut gaya TextView “title” ke “@style/SportsDetailTitle”
- Ubah atribut gaya TextView “newsTitle” dan “subTitle” ke “@style/SportsDetailText” .
2.3 Perbarui gaya detail olahraga tablet
- Buat gaya berikut dalam file xml:
2. Ubah gaya TextView “newsTitleDetail” dan “subTitleDetail” dlaam file layout activity_detail.xml menjadi gaya
“SportsDetailText” yang telah Anda buat di langkah sebelumnya.
Tugas 3: Melokalkan Aplikasi Anda
3.1 Tambahkan file strings.xml
- Buat file sumber daya nilai baru.
- Panggil file strings.xml dan pilih Locale dari daftar qualifier yang tersedia.
- Di bagian “Language”, pilih en: English.
- Di bagian “Specific Region Only:”, pilih US: United States. Ini akan membuat direktori nilai khusus untuk lokal US,
yang bernama “values-en-rUS”.
- Salin keseluruhan file strings.xml generik ke file strings.xml baru dengan lokal khusus.
- Dalam file strings.xml generik, ubah item “Soccer” di larik sports_titles menjadi “Football”, serta ubah item terkait di larik “sports_info”.
- Jalankan Aplikasi
- Catatan: Untuk mengubah setelan lokal di perangkat Anda, masuk ke setelan perangkat, lalu pilih Language & input
dan ubah setelan Language. Jika Anda memilih English (United States), aplikasi akan memiliki
Hasil akhir akan seperti berikut:
Leave a Reply