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.

A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek

B. Menambahkan time picker  , dan button dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 
C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script 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">

<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>
D. Kemudian tambahkkan fungsi untuk menampilkan hasil inputannya pada file MainActivity.java sehingga codingan seperti dibawah ini 
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();
}
}

E.  Tampilan desain projek
 
F. Hasil output setelah di run project


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.


A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek


B. Menambahkan date picker  , dan button dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 
C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script 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">

<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>
D. Kemudian tambahkkan fungsi untuk menampilkan hasil inputannya pada file MainActivity.java sehingga codingan seperti dibawah ini 
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();
}
}


E.  Tampilan desain projek
 


F. Hasil output setelah di run project
 

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.


A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek



B. Menambahkan listview  , dan button dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 
C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script 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/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>
D. Kemudian tambahkkan fungsi untuk menampilkan hasil inputannya pada file MainActivity.java sehingga codingan seperti dibawah ini 
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));
}
}


E.  Tampilan desain projek
 



F. Hasil output setelah di run project

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.


A.    Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek



 

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>


C. Mendefinisikan Color Resource sebagai penentu warna Selain string resource seperti contoh di atas, kita juga dapat membuat color resource di dalam berkas /res/values/colors.xml.   sebagai berikut:
 
<?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>

D. Mendefinisikan Dimension Resource sebagai penentu ukuran Saat menentukan ukuran kita menggunakan beberapa unit misalnya 16dp untuk ukuran margin dan 12sp untuk ukuran font. Dimensi ini mesti kita definisikan di berkas dimens.xml dengan cara: 
 
Buka struktur folder project android pilih res/values lalu klik kanan pada folder values dan pilih NewValues resource file dengan nama dimen.xml ,  dimana codenya sebagai berikut:

 

<?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>

 

E. Mereferensikan App Resource ke tampilan kini kita akan menggunakan asset yang sebelumnya sudah dibuat . dengan menambahkan  text view , dan Button  dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 
 
F. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script 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">

<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
G. Kemudian tambahkkan fungsi untuk menggunakan settingan file resource diatas pada file MainActivity.java sehingga codingan seperti dibawah ini 
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);
}}


H.  Tampilan desain projek
 


F. Hasil output setelah di run project



5. Latihan Praktikum

A.    Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek




 

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>


C. Mendefinisikan Color Resource sebagai penentu warna Selain string resource seperti contoh di atas, kita juga dapat membuat color resource di dalam berkas /res/values/colors.xml.   sebagai berikut:
 
<?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>

D. Mendefinisikan Dimension Resource sebagai penentu ukuran Buka struktur folder project android pilih res/values lalu klik kanan pada folder values dan pilih NewValues resource file dengan nama dimen.xml ,  dimana codenya sebagai berikut:

 

<?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>

 

E. Mereferensikan App Resource ke tampilan kini kita akan menggunakan asset yang sebelumnya sudah dibuat . dengan menambahkan  text view , dan Button  dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 
 
F. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan script 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"
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
G. Kemudian tambahkkan fungsi untuk menggunakan settingan file resource diatas pada file MainActivity.java sehingga codingan seperti dibawah ini 
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);
}
}


H.  Tampilan desain projek
 



F. Hasil output setelah di run project