Assalamualaikum
Ketemu lagi nih, sahabat blogger di blog pembelajaran Android Studio. Di postingan ini saya akan berbagi ilmu tentang komponen PickerView, ListView dan Application Resource pada Android Studio. Untuk sahabat yang ingin mengetahui komponen User Interface Android Studio lainnya, sahabat bisa kunjungi Tutorial Membuat Layout App Registrasi Dari Beberapa Komponen User Interface(UI) Android Studio dan PENGENALAN DAN PENGGUNAAN KOMPONEN UI (User Interface) PADA ANDROID STUDIO.
Di android, hampir semuanya adalah resource. Nah apa kah sahabat tahu apa itu Application Resource?
Sumber daya (resource) adalah file tambahan dan konten statis yang digunakan kode anda, seperti bitmap, penepatan layout, string antarmuka pengguna, dan lainnya. Resource berupa text string, style & theme, color, dimension, image & icon, audio, video, dan data lainnya yang digunakan oleh aplikasi. Semua yang didefinisikan dapat dipanggil dari manapun di dalam project yang dibuat.Contohnya yang paling umum dan sederhana adalah string resource untuk mendefinisikan text yang fleksibel.
Folder Resource pada project android merupakan tempat untuk file-file selain code dan memang untuk android ini diletakan pada folder resource di simpan secara terpisah dari file kelas .java dan lagi umumnya resource disimpan dalam XML.
Resource harus dibuat di direktori peoject/ res di dalam sub direktori tertentu. Berikut merupakan folder dalam resource :
⇒ drawable : berisi sumber daya grafis atau tempat untuk gambar dan xml lain.
⇒ layout : berisi sumber daya layout dan UI.
⇒ menu : berisi sumberdaya untuk menampilkan option atau action di activity
⇒ values : berisi sumberdaya string, style & theme, color, dimension
string ⇒ teks
style & theme ⇒ style(warna untuk AppBar)
color ⇒ warna
dimenstion ⇒ ukuran (margin, padding,font,dll)
Memang tidak semua dipakai dalam membuat aplikasi, untuk lebih jelas gimana cara penggunaannya kita lihat dibawah. Resource digunakan pada komponen User Interface dan application resource dapat ditulis dalam kode XML ataupun dalam kode JAVA.
Tutorial Cara penggunaan PickerView, ListView, dan Application Resource .
1. PickerView
Komponen User Interface PickerView terbagi menjadi dua yaitu TimePicker dan DatePicker.
⇒ TimePicker berfungsi untuk membantu user memilih waktu yang diinginkan untuk diinputkan pada aplikasi Android. Dalam penerapannya yaitu pada aplikasi Alarm, calender, reminder, to-do list, ticket reservation dan masih banyak aplikasi lainnya yang membutuhkan user untuk menginput waktu(jam dan menit) di aplikasi tersebut.
→ Pertama-tama buat project baru Android Studio.
→ Pada file activity_main.xml ketikan script seperti dibawah ini.
<?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=".MainActivity">
//Membuat Komponen TimePicker
<TimePicker
android:id="@+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
//Membuat Button untuk mengambil waktu timepicker
<Button
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:backgroundTint="#2980b9"
android:textColor="#FFFFFF"
android:text="TOMBOL"/>
</LinearLayout>
→ Selanjutnya pada file MainActivity.java untuk menjalankan fungsi Time Picker ketik script seperti dibawah.
package ryeyen08.blogspot.com.timepicker;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TimePicker;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
//Inisialisasi variabel
TimePicker timePicker;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
timePicker=(TimePicker) findViewById(R.id.timePicker);
timePicker.setIs24HourView(true);
Button button =(Button) findViewById(R.id.btn);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
toast();
}
});
}
public void toast(){
int hour, minute;
int currentApiVersion = Build.VERSION.SDK_INT;
if (currentApiVersion > Build.VERSION_CODES.LOLLIPOP_MR1){
hour= timePicker.getHour();
minute= timePicker.getMinute();
} else {
hour=timePicker.getCurrentHour();
minute=timePicker.getCurrentMinute();
}
Toast.makeText(getApplicationContext(), "Time Selected : "+hour+":"+minute, Toast.LENGTH_LONG).show();
}
}
→ Run App, maka pada emulator akan tampil seperti gambar ini.
 |
| Hasil emulator TimePicker |
⇒ DatePicker berfungsi untuk membantu user memilih tanggal yang diinginkan di aplikasi Android. Dalam penerapannya digunakan pada aplikasi yang membutuhkan penginputan tanggal seperti aplikasi pemesanan tiket, aplikasi reminder, dan sebagainya.
→ Pertama-tama buat project baru Android Studio.
→ Pada file activity_main.xml ketikan script seperti dibawah ini.
<?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=".MainActivity">
//Membuat Komponen Datepicker
<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_gravity="center"/>
//Membuat Button untuk mengambil waktu datepicker
<Button
android:id="@+id/btndate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:backgroundTint="#2980b9"
android:textColor="#FFFFFF"
android:text="TOMBOL"/>
</LinearLayout>
→ Selanjutnya untuk menjalankan fungsi Date Picker ketikan script dibawah ini pada file MainActivity.java.
package ryeyen08.blogspot.com.datepicker;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
DatePicker datePicker;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
datePicker=(DatePicker) findViewById(R.id.datePicker);
Button button =(Button) findViewById(R.id.btndate);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
toast();
}
});
}
public void toast(){
Toast.makeText(getApplicationContext(), "Tanggal : "+datePicker.getDayOfMonth() +"/"+(datePicker.getMonth()+1)+"/"+datePicker.getYear(),
Toast.LENGTH_LONG).show();
}
}
→ Run App, maka pada emulator akan tampil seperti gambar ini.
 |
| Hasil emulator DatePicker |
2. ListView
ListView adalah salah satu widget yang dapat digunakan untuk menampilkan data atau nilai dalam bentuk daftar/list, nilai atau data yang ditampilkan pada ListView tersebut didapat dari sebuah Array atau Database yang sudah ditentukan.
→ Pertama-tama buat project baru Android Studio.
→ Pada activity_main.xml ketikan script seperti dibawah ini.
<?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=".MainActivity">
<ListView
android:id="@+id/listView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/btnListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#2980b9"
android:textColor="#FFFFFF"
android:text="TOMBOL"/>
</LinearLayout>
→ Setelah itu ketikan script pada file MainActivity.java seperti text dibawah.
package ryeyen08.blogspot.com.listview;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String presidenIndonesia[]= {"Soekarno", "Shoeharto", "B.J.Habibie", "Abdurrahman Wahid", "Megawati Sukarnoputri", "Susilo Bambang Yudhoyono", "Joko Widodo"};
ListView listView =(ListView) findViewById(R.id.listView);
listView.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, presidenIndonesia));
}
}
→ Run App, maka pada emulator akan tampil seperti gambar ini.
 |
| Hasil emulator ListView |
3. Application Resource
Resource dapat dipakai untuk mendefinisikan color, image, layout, menu dan nilai string.
Jenis-jenis resource yang umum digunakan di aplikasi Android :
→ Pertama-tama buat project baru Android Studio.
A. Membuat sebuah string resource.
Pertama kita harus mendefinisikan dulu untuk setiap teks yang ingin di tampilkan di aplikasi dalam berkas /res/values/strings.xml. Setiap nilai yang ditambahkan di dalam berkas tersebut terdiri atas key dan nilai dari teks itu sendiri. Berikut ini kita akan membuat sebuah button dengan teks "Submit", dibawah ini nilai yang seharusnya ditambah ke strings.xml.
<resources>
<string name="app_name">AppResource</string>
<string name="submit_label">Submit</string>
</resources>
Sekarang kapanpun kita memanggil id submit_label, kita akan mendapat teks "Submit".
B. Mereferensikan App Resource.
Untuk mengaksesnya dari file XML lain, cukup panggil menggunakan simbol '@'. Nah kita ketikan script ini pada file activity_main.xml.
Untuk mengakses resource ini dari file java, perlu memanggil metode getResource.getString atau getString dengan memanggil id-nya.Ketik script ini pada file MainActivity.java dan pola yang sama ini dapat kita pakai untuk memanggil semua jenis resource.
C. Mendefinisikan Color Resource
Kita membuat color resource pada file colors.xml.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFF</color>
<color name="yellow">#FFFF00</color>
<color name="aqua">#03DAC5</color>
</resources>
Dan untuk memanggil color resource dari file XML lain dengan cara :
D. Mendefinisikan Dimension Resource
Pada file ini kita menentukan ukuran untuk margin dan ukuran font. Kita buat berkas dimens.xml dengan langkah berikut :
⇒ Buka struktur folder project android pilih → res/values→ klik kanan values → New-Values resource file, seperti urutan pada gambar dibawah.
⇒ Buat sebuah file dengan nama dimens.xml→ Ok.
⇒ Ketik script pada file dimens.xml seperti berikut.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textview_width">50dp</dimen>
<dimen name="textview_height">250dp</dimen>
<dimen name="ball_radius">120dp</dimen>
<dimen name="font_size">18sp</dimen>
</resources>
⇒ Dan ketika pemanggilan di java pada file MainActivity.java, seperti berikut. Dan jangan lupa untuk mendefinisikan variabelnya.
package ryeyen08.blogspot.com.appresource;
import androidx.appcompat.app.AppCompatActivity;
import android.content.res.Resources;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
Resources res;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String submitText = getResources().getString(R.string.submit_label);
Resources res = getResources();
float fontSize = res.getDimension(R.dimen.font_size);
}
}
⇒ Sedangkan untuk di xml pada file activity_main.xml kita panggil ukuran pada file dimens.xml dan warana pada file colors.xml, seperti script dibawah ini.
<TextView
android:layout_width="@dimen/textview_width"
android:layout_height="@dimen/textview_height"
android:textSize="@dimen/font_size"
android:textColor="@color/yellow"
android:text="dimensi text yellow"/>
→ Setelah beberapa implementasi resource diatas kita → Run App, maka pada emulator akan tampil seperti gambar ini.
 |
| Tampilan emulator Application Resource |
Latihan tutorial membuat project Layout AppResourceHappiness, yuk ikuti langkah-langkah nya :
1. Buka IDE Android Studio, lalu buat project baru "Create New Project".
2. Pilih →"Empty Activity" → "Next".
3. "Configure Your Project"
Name → AppResourceHappiness(Bisa diisi sesuai keinginan)
Package Name → bisa di biarkan otomatis, atau bisa diubah menjadi nama blog disini saya menggunakan url blog saya ryeyen08.blogspot.com lalu diikuti nama project AppResourceHappiness
Save Location → bisa dibrowser sesuai yang di inginkan, disini saya menyimpannya di E:DOKUMEN STIKOM/SEMESTER 6/PAB/Modul5/AppResourceHappiness
Language → Java
Minimum API Level → API 16 → klik "Finish"
4. Tampilan project IDE Android Studio, ubah lah "ConstraintLayout" pada "Component Tree"
5. Cara ubah → klik kanan ConstraintLayout → Convert view...
6. Pilih → "LinearLayout" → "Apply".
7. Ubahlah LinearLayout → klik kanan → "LinearLayout" → "Convert Orientation to vertical".
8. Membuat string resource untuk mendefinisikan sebuah teks, pilih berkas → /res/values/strings.xml dan ketikan script dibawah :
<resources>
<string name="app_name">AppResource Happiness Meter</string>
</resources>
9. Membuat dimen resource untuk mendefinisikan ukuran, pilih berkas → /res/values→ klik kanan values → New-Values resource file, lalu beri nama dimens.xml→ Ok.
10. Tambahkan script dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="default_margin">8dp</dimen>
</resources>
<?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=".MainActivity">
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="@dimen/activity_vertical_margin"
android:text="Masukan Nama Anda !" />
<EditText
android:id="@+id/editPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/default_margin"
android:ems="10"
android:inputType="textPersonName"/>
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/activity_vertical_margin"
android:text="Bagaimana Perasaan Anda Hari Ini ?"/>
</LinearLayout>12. Selanjutnya kita akan menambahkan opsi perasaan user, dengan kita mendefinisikan terlebih dahulu warna pada file colors.xml scriptnya seperti ini.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="green">#4CAF50</color>
<color name="orange">#FF9800</color>
<color name="red">#FD1504</color>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
</resources>
<?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=".MainActivity">
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="@dimen/activity_vertical_margin"
android:text="Masukan Nama Anda !" />
<EditText
android:id="@+id/editPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/default_margin"
android:ems="10"
android:inputType="textPersonName"/>
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/activity_vertical_margin"
android:text="Bagaimana Perasaan Anda Hari Ini ?"/>
<RadioGroup
android:id="@+id/Radigroup1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bagus :)"
android:textColor="@color/green" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/orange"
android:text="Kesal :("/>
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/red"
android:text="Sedih :'("/>
</RadioGroup>
</LinearLayout>
 |
| Hasil emulator AppResourceHappiness |
Bagaimana sahabat blooger berhasil tidak? jika ada kendala bisa langsung komentar dibawah kita diskusikan bersama. Semoga ilmu nya bermanfaat, kritikan dan saran sangat membantu untuk perkembangan kedepannya. Sampai ketemu di postingan selanjutnya.
Terimakasih....
0 comments:
Posting Komentar