Pengenalan komponen UI (PickerView & ListView) dan penggunaan application resource pada Android Studio - naskahkode
kali ini saya akan membahas bagaimana Pengenalan komponen UI (PickerView & ListView) dan penggunaan application resource pada Android Studio - naskahkode, banyak sekali referensi yang menjelaskan tentang Komponen UI Android Studio, dan di sini saya mengipmplementasikan bagaimana Pengenalan komponen UI (PickerView & ListView) dan penggunaan application resource pada Android Studio - naskahkode
Dengan harapan semoga tulisan ini akan menambah pengetahuan dan pemahaman kita bagaimana Pengenalan komponen UI (PickerView & ListView) dan penggunaan application resource pada Android Studio - naskahkode Amin.
Teori Singkat
Application Resource
Aplikasi yang bagus adalah aplikasi yang mengakses sumber daya secara programatikal dari pada menggunakannya secara hardcoding ke dalam source code. Ada beberapa alasan Menyimpan resource di suatu merupakan pengembangan yang lebih terorganisasi. Mengeksternalisasikan sumber daya seperti string akan memudahkan untuk menglokalisasikan aplikasi untuk bahasa-bahasa yang berbeda berdasarkan daerah geografis.
Selain itu, pembuatan string resource juga akan memudahkan jika string digunakan beberapa kali dan terjadi perubahan. Kita hanya perlu mengubah satu nilai string resource tanpa harus mengubahnya di source code satu persatu.
Apa itu Application Resource
Semua aplikasi android dibuat dengan dua hal : fungsionalitas (instruksi kode) dan data (sumber daya). Fungsionalitas adalah kode yang menentukan bagiamana aplikasi akan bekerja, di dalamnya terdapat algoritma yang membuat aplikasi berjalan. Sumber daya (resource) berupa text string, style & theme, color, dimension, image & icon, audio, video, dan data lainnya yang digunakan oleh aplikasi.
Lokasi Application Resource
File sumber daya Android disimpan secara terpisah dari file kelas .java di project Android. Pada umumnya sumber daya disimpan dalam XML. Semua sumber daya harus dibuat di direktori project /res di dalam sub-direktori tertentu.
Di bawah ini merupakan nama-nama sub-direktori /res :
- /res/drawable-*/ : berisi sumber daya grafis
- /res/layout/ : berisi sumberdaya layout dan UI
- /res/menu/ : berisi sumberdaya untuk menampilkan option atau action di activity
- /res/values/ : berisi sumberdaya string, style & theme, color, dimension.
Resource digunakan pada komponen UI seperti textView, imageView, Button, dan lain-lain. Application Resource dapat ditulis dalam kode xml ataupun dalam kode java.
1. Komponen TimePicker
Komponen TimePicker berfungsi untuk membantu user memilih waktu yang diinginkan untuk diinputkan pada aplikasi Android. Dalam penerapannya, TimePicker banyak digunakan pada aplikasi Alarm, calendar, reminder, to-do list, ticket reservation dan aplikasi lainnya yang membutuhkan user untuk menginputkan waktu (jam dan menit) di aplikasi tersebut.
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
<?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">
<TimePicker
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#2980b9"
android:layout_marginTop="50dp"
android:textStyle="bold"
android:textSize="21dp"
android:textColor="#FFFFFF"
android:text="TOMBOL"/>
</LinearLayout>package com.naskahkode.timepicker;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.os.Build;
import android.view.View;
import android.widget.Button;
import android.widget.TimePicker;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
TimePicker TimePicker;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TimePicker = (TimePicker) findViewById(R.id.time);
TimePicker.setIs24HourView(true);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
toast();
}
});
}
public void toast() {
int hour, minute;
int currentApiVersion = Build.VERSION.SDK_INT;
//Lollipop MRI adalah versi API level 22
if (currentApiVersion > Build.VERSION_CODES.LOLLIPOP_MR1) {
//Jika API level adalah diatas 22
hour = TimePicker.getHour();
minute = TimePicker.getMinute();
} else {
//Jika API level adalah 22 kebawah
hour = TimePicker.getCurrentHour();
minute = TimePicker.getCurrentMinute();
}
Toast.makeText(getApplicationContext(), "Time Selected : " + hour + ":" + minute,
Toast.LENGTH_LONG).show();
}
}
2. Komponen DatePicker
Elemen DatePicker berfungsi untuk membantu user memilih tanggal yang diinginkan di aplikasi Android. Pada penerapannya, DatePicker banyak digunakan pada aplikasi yang membutuhkan penginputan tanggal. Seperti aplikasi pemesanan tiket, aplikasi reminder, to do list dan sebagainya.
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
<?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">
<DatePicker
android:id="@+id/tgl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#03DAC5"
android:layout_marginTop="50dp"
android:textStyle="bold"
android:textColor="#FFFFFF"
android:text="TOMBOL"/>
</LinearLayout>package com.naskahkode.datepicker;
import androidx.appcompat.app.AppCompatActivity;
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.tgl);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
toast();
}
});
}
public void toast(){
Toast.makeText(getApplicationContext(), "Tanggal : " + datePicker.getDayOfMonth()
+ "/" + (datePicker.getMonth()+1) + "/" + datePicker.getYear(), Toast.LENGTH_LONG).show();
}
}
3. Komponen ListView
Element ListView adalah salah satu widget yang 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.
ListView pada saat ini sudah tergantikan dengan RecyclerView yang memiliki konsep Material Design, karena lebih custom dan juga dapat mengatur tampilan layoutnya.Walaupun begitu, ListView masih banyak digunakan oleh programmer untuk membuat list/daftar item yang sederhana pada aplikasi mereka.
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
<?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/lis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#03DAC5"
android:textStyle="bold"
android:textSize="21dp"
android:textColor="#FFFFFF"
android:text="TOMBOL"/>
</LinearLayout>package com.naskahkode.listview;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
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", "Soeharto", "B.J. Habibi", "SBY",
"Abdurrahman Wahid", "Megawati", "Joko Widodo"};
ListView lis = (ListView) findViewById(R.id.lis);
lis.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, presidenIndonesia));
}
}
4. Application Resource
Di Android, hampir semuanya adalah sebuah resource. Mendefinisikan resource yang nantinya dapat diakses di aplikasi merupakan bagian mendasar dari proses pengembangan aplikasi Android.
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
B. Membuat Sebuah String Resource sebagai penentu id atau title Untuk setiap teks yang ingin ditampilkan di aplikasi (misalnya label sebuah Button dan teks didalam TextView), kita pertama harus mendefinisikan dulu teks tersebut di dalam berkas /res/values/strings.xml.
Setiap nilai yang ditambahkan di dalam berkas tersebut terdiri atas key (sebagai id untuk teks) dan nilai dari teks itu sendiri. Contoh, apabila kita ingin membuat sebuah Button dengan teks “Submit”, berikut ini nilai yang mesti ditambahkan ke strings.xml:
<resources>
<string name="app_name">AppResource</string>
<string name="hello">Hello</string>
<string name="submit_label">Submit</string>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="fuchsia">#FF00FF</color>
<color name="kuning">#FFEB3B</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"?>
<resources>
<dimen name="textview_height">50dp</dimen>
<dimen name="textview_width">520dp</dimen>
<dimen name="ball_radius">120dp</dimen>
<dimen name="font_size">28sp</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">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/submit_label"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:textSize="21dp"
android:textColor="@color/fuchsia"/>
<TextView
android:layout_width="@dimen/textview_width"
android:layout_height="@dimen/textview_height"
android:textSize="@dimen/font_size"
android:textColor="@color/kuning"
android:text="Dimens Text Yellow"/>
</LinearLayout>perhatikan text yang berwarna hijau itu merupakan implementasi penggunaan settingan string.xml ,text warna putih itu dari colors.xml dan text warna merah dari dimen.xml
package com.naskahkode.appresource;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import android.content.Context;
import android.content.res.Resources;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
Context context
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
int color = ContextCompat.getColor(context, R.color.fuchsia);
Resources res = getResources();
float fontSize = res.getDimension(R.dimen.font_size);
}}
5. Latihan Praktikum
- Pilih Start → Android Studio
- Pilih → Start a new Android Studio Project
- Pilih → Empty Activity → Next
B. Membuat Sebuah String Resource sebagai penentu id atau title Untuk setiap teks yang ingin ditampilkan di aplikasi (misalnya label sebuah Button dan teks didalam TextView), kita pertama harus mendefinisikan dulu teks tersebut di dalam berkas /res/values/strings.xml.
Setiap nilai yang ditambahkan di dalam berkas tersebut terdiri atas key (sebagai id untuk teks) dan nilai dari teks itu sendiri. Contoh, apabila kita ingin membuat sebuah Button dengan teks “Submit”, berikut ini nilai yang mesti ditambahkan ke strings.xml:
<resources>
<string name="app_name">AppResource Happiness Meter</string>
</resources>
<?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">#FFFFFFFF</color>
<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>
</resources>
<?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">16dp</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"
android:layout_marginVertical="@dimen/activity_vertical_margin"
android:layout_marginHorizontal="@dimen/activity_horizontal_margin"
android:layout_margin="@dimen/default_margin"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Siapa Nama Anda ?" />
<EditText
android:id="@+id/editTextTextPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:hint="Name" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bagaimana Perasaan Anda Hari Ini ?" />
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RadioButton
android:id="@+id/radioButton1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/green"
android:text="Bagus :)" />
<RadioButton
android:id="@+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/orange"
android:text="Kesal :(" />
<RadioButton
android:id="@+id/radioButton3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/red"
android:text="Sedih :'(" />
</RadioGroup>
</LinearLayout>perhatikan text yang berwarna hijau itu merupakan implementasi penggunaan settingan colors.xml dan text warna merah dari dimen.xml
package com.naskahkode.appresourcehappiness;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
