materi pertemuan 5 pemrograman mobile...
TRANSCRIPT
- 1 -
MATERI PERTEMUAN 5
PEMROGRAMAN MOBILE 1
Anggota Kelompok :
1. Fahmi Yahya (16.11.0001)
2. Adit Setiawan (16.11.0017)
3. Didit Julianto I. (16.11.0020)
4. Grisela Diki A. (16.11.0028)
5.Wasis Budiprayitno (16.11.0007)
6.Anaam Barera (16.11.0008)
7.Anggit Prakasa P. (16.11.0012)
8.Galuh Nanda P. (16.11.0013)
9.Reza Isham D. (16.11.0022)
- 2 -
1. AutoCompleteTextView AutoCompleteTextView adalah widget subclass dari EditText yang berfungsi sebagai
auto-complete. Ketika user (pengguna) mengetikan suatu huruf atau kata di EditText, maka
akan muncul pilihan menu dropdown di bawahnya ,lalu saat kita memilih kata tersebut
maka text akan otomatis muncul. Widget ini juga ibarat sebagai sugesti dari sebuah kata di
widget Android ,saat kita mengetikan atau mencari suatu kata maka akan muncul pilihan
kata dibawahnya. Jadi kita tidak perlu repot-repot lagi mengetikan secara lengkap dari
suatu kata.Widget ini umumnya selalu dipakai ketika kita membuat Aplikasi pencarian.
Cara menerapkan Widget AutoCompleteTextView
a. Pertama buka Project Android Studio Kalian, kemuadian buat new project.
b. Setelah terbuka dan siap, kemudian tambahkan widget Text view, drag dan tambahkan.
c. Buat terlebih dahulu string nama beriku ini di res/values/string.xml.
d. Buka content_main.xml dan edit coding seperti di bawah ini.
e. Tambahkan dan salin baris codingan ini dibawah MainActivity.java
- 3 -
f. Setelah itu jalankan Aplikasinya .
Source : https://www.okedroid.com/2016/02/cara-menerapkan-contoh-widget-
autocompletetextview-android.html
2. MultiAutoCompleteTextView
AutoCompleteTextView adalah widget subclass dari EditText yang berfungsi sebagai
auto-complete. Ketika user (pengguna) mengetikan suatu huruf atau kata di EditText, maka
akan muncul pilihan menu dropdown di bawahnya ,lalu saat kita memilih kata tersebut
maka text akan otomatis muncul. Widget ini juga ibarat sebagai sugesti dari sebuah kata di
widget Android ,saat kita mengetikan atau mencari suatu kata maka akan muncul pilihan
kata dibawahnya. Jadi kita tidak perlu repot-repot lagi mengetikan secara lengkap dari
suatu kata.Widget ini umumnya selalu dipakai ketika kita membuat Aplikasi pencarian.
Nah kita akan membuat pengembangan atau fitur dari AutoCompleteTextView yaitu
MultiAutoCompleteTextView. Apa bedanya ?. sebenarnyasama saja, namun disini kita
bisa menginputkan text, lebih dari satu, dan dibatasi dengan tanda koma(,) untuk setiap
input text per katanya.
Cara membuatnya sama seperti AutoCompleteTextView , Cuma ada perbedaan sedikit.
Perhatikan langkah berikut ini :
a. Pertama buka Project Android Studio Kalian, kemuadian buat new project.
b. Setelah terbuka dan siap, kemudian tambahkan widget Text view, drag dan tambahkan.
c. Buat terlebih dahulu string nama beriku ini di res/values/string.xml.
d. Karna kami membuat desainnya di content_main.xml maka Buka content_main.xml
dan edit coding seperti di bawah ini.
- 4 -
e. Tambahkan dan salin baris codingan ini dibawah MainActivity.java
f. Setelah itu jalankan Aplikasinya .
Sumber : https://www.okedroid.com/2017/03/cara-menerapkan-widget-
MultiAutoCompleteTextView-android.html
3. List View ListView adalah Salah satu komponen User Interface pada Aplikasi Android yang
berfungsi menampilkan atau memuat data, dalam tampilan list/daftar yang memungkin
kalian melihatnya bergulir secara vertikal di Aplikasi Android. ListView berguna jika kita
membuat Aplikasi Android dan ingin menampilkan atau memuat dalam suatu list misal
daftar nama,nomor hp,nama-nama binatang dll. ListView bekerja menggunakan Adapter
yang berfungsi untuk binding data ,memproses dan memformat konten (pull konten) dari
resource seperti Array atau Database ,kemudian di convert setiap item ke dalam tampilan
list/daftar.
a. Pertama-tama ,kalian bisa buat project baru atau project yang sudah ada yang ingin
diterapkan ListView di Android Studio kalian.
b. Lalu pada resource layout pada bagian Pallete, sebelah kiri kalian bisa mendrag
komponen ListView ka dalam layout.
c. Maka hasilnya akan seperti ini :
- 5 -
d. Setelah itu untuk mengisi code logicnya kalian bisa menerapkan codinganya seperti
ini:
e. Jalankan atau Run Aplikasi tersebut di HP kalian.
Sumber : https://www.okedroid.com/2015/01/belajar-cara-membuat-listview-
sederhana.html
4. Grid View GridView adalah salah satu class atau library ,yang berupa container(wadah), yang
digunakan untuk menampilkan konten View , dalam bentuk kotak-kotak. Lebih mudahnya
kalian bisa bayangkan saja ,jika ada sebuah rak lemari , (yang menjadi GridView) , yang
dimana kita dapat menyimpan buku ,kertas, barang-barang elektronik (yang menjadi
TextView ,ImageView) didalam rak lemari tersebut. Untuk penulisan codingan ,beserta
- 6 -
struktur data sebenarnya , sama halnya seperti ListView ,namun dengan cara menampilkan
dan memparsing di xml secara grid atau kotak-kotak. Pada tutorial belajar android kali ini
,kita akan mencoba membuat konten View ,seperti TextView , dan ImageView ,dalam
bentuk GridView ,atau bisa kita ingat gampangnya kotak-kotak. Kotak-kotak yang saya
maksud disini dilihat secara tatanan atau tata letaknya.
Menampilkan dalam bentuk text (TextView):
a. Pertama pastinya kalian bisa buat project baru ,atau project yang sudah ada di Android
Studio.
b. Secara default ,atau standarnya , menurut main resource (Developer.android.com). Jika
kalian ingin menampilkan data atau konten View ,secara Grid alias kotak-kotak ,kalian
bisa menerapkan code berikut :
Codenya bisa kita terapkan langsung , ke activity_main.xml
c. Kemudian isikan source kode seperti dibawah ini:
d. Penjelasannya :
Pertama-tama , kita akan buat struktur data Array dengan var atau object ,dari
namanegara lalu deklarasi oject dari class GridView. Yang dimana nilai atau valuenya
,akan kita tampilkan dalam bentuk kotak-kotak.
- 7 -
Lalu kita inisialisasi object dari gridView yang dimana kita akan parsing ke dalam id
gridView , pada layout XML.
Sama seperti ListView ,disni kita akan menggunakan Adapter, yang berfungsi untuk
binding data ,memproses dan memformat konten (pull konten) dari resource seperti
Array atau Database ,kemudian di convert setiap item ke dalam tampilan kotak-kotak.
Disini kita menggunakan class ArrayAdapter, yang sudah tersedia di library
(android.widget). Perhatikan, disini kita akan membuat Argument , berdasarkan nilai
atau value dari Parameter ,yang sudah didefinisikan pada Constructor di Class
ArrayAdapter.
Argumennya :
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this,
android.R.layout.simple_list_item_1, android.R.id.text1, namanegara);
Lalu kita menset datanya ke dalam objek
Grid.setAdapter(Adapter);
Kita ingin jika user atau pengguna , mengclick atau menghandle event salah satu
kontenView, pada GridView .sama saja saat kita menggunakan ListView ,kita bisa
menggunakan .setOnItemClickListener(new AdapterView.OnItemClickListener() ,
nah setelah salah satu objek dari gridView dapat menghandle event, kita
ingin menampilkan reaksi dari handle event tersebut ,sebagai contoh kita akan
menggunakan Toast pesan berdasarkan index atau element dari Array pada object
namanegara.
e. Lalu Kita coba Run Aplikasinya
Sumber : https://www.okedroid.com/2017/04/belajar-cara-membuat-gridview-sederhana-
android.html
- 8 -
5. Date And Time 1. Date Picker
Melanjutkan tutorial series kita tentang komponen-komponen layout basic di Android.
Bagi pemula yang ingin belajar membuat aplikasi menggunakan dengan Android
Studio, tidak ada salahnya untuk mengenal komponen DatePicker, karena ke depannya
kalian pasti akan butuh menggunakan komponen DatePicker ini. Yup sesuai namanya,
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.
2. Time Picker
TimePicker, mirip dengan DatePicker, 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.
3. Berikut Langkah membuat DatePicker dan TimePicker
a. Setelah kalian membuat project baru di Android Studio,
buka activity_main.xml dan masukkan kode berikut. Pada main layout akan berisi
sebuah Button yang ketika diklik akan memunculkan DatePicker dialog ini, dan
sebuah TextView untuk menampilkan tanggal dan waktu yang dipilih di
DatePicker. Dan TimePicker.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context=".DateAndTime">
<Button
android:id="@+id/bt_datepicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="8dp"
android:text="Show DatePicker"
app:layout_constraintBottom_toTopOf="@+id/tv_dateresult"
app:layout_constraintEnd_toStartOf="@+id/tv_dateresult"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/tv_dateresult"
app:layout_constraintTop_toTopOf="parent" />
- 9 -
<TextView
android:id="@+id/tv_dateresult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tanggal dipilih : "
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="@+id/BtnHomeDaT"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bt_datepicker"
tools:ignore="MissingConstraints" />
<Button
android:id="@+id/bt_showtimepicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="84dp"
android:text="Show TimePicker"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_dateresult" />
<TextView
android:id="@+id/tv_timeresult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="24dp"
android:text="Waktu dipilih : "
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="@+id/BtnHomeDaT"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bt_showtimepicker"
app:layout_constraintVertical_bias="0.0" />
/>
</android.support.constraint.ConstraintLayout>
b. Kemudian, kalian bisa buka file MainActivity.java dan mengisikan kode seperti di
bawah ini :
package com.example.asus.widgetview;
import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
- 10 -
import android.os.Bundle;
import android.text.format.DateFormat;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;
import android.widget.TimePicker;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Locale;
public class DateAndTime extends AppCompatActivity {
private DatePickerDialog datePickerDialog;
private SimpleDateFormat dateFormatter;
private TextView tvDateResult;
private Button btDatePicker;
private TextView tvTimeResult;
private Button btTimePicker;
private TimePickerDialog timePickerDialog;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_date_and_time);
//Kita menggunakan format tanggal dd-MM-yyyy
// jadi nanti tanggal nya akan diformat menjadi
// misalnya 01-12-2017
dateFormatter = new SimpleDateFormat("dd-MM-yyyy", Locale.US);
tvDateResult = (TextView) findViewById(R.id.tv_dateresult);
btDatePicker = (Button) findViewById(R.id.bt_datepicker);
tvTimeResult = (TextView) findViewById(R.id.tv_timeresult);
btTimePicker = (Button) findViewById(R.id.bt_showtimepicker);
btDatePicker.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
showDateDialog();
}
});
btTimePicker.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showTimeDialog();
}
});
}
private void showDateDialog(){
- 11 -
/**
* Calendar untuk mendapatkan tanggal sekarang
*/
Calendar newCalendar = Calendar.getInstance();
/**
* Initiate DatePicker dialog
*/
datePickerDialog = new DatePickerDialog(this, new
DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int
dayOfMonth) {
/**
* Method ini dipanggil saat kita selesai memilih tanggal di
DatePicker
*/
/**
* Set Calendar untuk menampung tanggal yang dipilih
*/
Calendar newDate = Calendar.getInstance();
newDate.set(year, monthOfYear, dayOfMonth);
/**
* Update TextView dengan tanggal yang kita pilih
*/
tvDateResult.setText("Tanggal dipilih :
"+dateFormatter.format(newDate.getTime()));
}
},newCalendar.get(Calendar.YEAR),
newCalendar.get(Calendar.MONTH),
newCalendar.get(Calendar.DAY_OF_MONTH));
/**
* Tampilkan DatePicker dialog
*/
datePickerDialog.show();
}
private void showTimeDialog() {
/**
* Calendar untuk mendapatkan waktu saat ini
*/
Calendar calendar = Calendar.getInstance();
/**
* Initialize TimePicker Dialog
*/
timePickerDialog = new TimePickerDialog(this, new
- 12 -
TimePickerDialog.OnTimeSetListener() {
@Override
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
/**
* Method ini dipanggil saat kita selesai memilih waktu di
DatePicker
*/
tvTimeResult.setText("Waktu dipilih = "+hourOfDay+":"+minute);
}
},
/**
* Tampilkan jam saat ini ketika TimePicker pertama kali dibuka
*/
calendar.get(Calendar.HOUR_OF_DAY),
calendar.get(Calendar.MINUTE),
/**
* Cek apakah format waktu menggunakan 24-hour format
*/
DateFormat.is24HourFormat(this));
timePickerDialog.show();
}
}
c. Pada kode di atas, ada beberapa hal yang harus diset sebelum kita menampilkan
DatePicker dialog, seperti format tanggalnya (menggunakan SimpleDateFormat),
dan tanggal yang dimunculkan ketika DatePicker pertama kali ditampilkan, kita set
tanggalnya ke tanggal saat ini menggunakan object Calendar.
d. hal yang harus diset sebelum kita menampilkan TimePicker dialog, seperti waktu
yang ingin dimunculkan ketika TimePicker pertama kali ditampilkan dan apakah
ingin menggunakan 24 hour format atau AM/PM format. Pada tutorial ini kita set
waktu di TimePicker ke waktu saat ini menggunakan object Calendar, dan hour
format nya kita sesuaikan dengan format waktu di HP Android yang digunakan.
Sumber :
https://www.twoh.co/2017/01/20/tutorial-cara-membuat-datepicker-di-android-studio/
https://www.twoh.co/2017/01/21/tutorial-cara-membuat-timepicker-di-android-studio/
6. WebView WebView adalah sebuah class di Android yang dapat menampilkan tampilan peramban
web pada aplikasi Android. Nantinya, aplikasi yang akan dibuat menghasilkan tampilan
seperti kita membuka situs web menggunakan peremban web. Bedanya pada WebView ini
- 13 -
tidak terdapat address bar, sehingga URL-nya sudah kita definisikan di dalam aplikasi
Android yang kita buat.
a. Untuk membuat aplikasi WebView, silahkan buka Android Studio dan buatlah proyek
baru dengan cara memilih Menu File -> New -> New Project. Pada proyek ini saya
berikan nama proyek MateriWebView. Untuk nama Company Domain nya saya
menganturnya seperti ini com.example.asus.widgetview
b. Kemudian pilih lokasi penyimpanan proyek yang dibuat, selanjutnya silahkan
pilih Next. Pada bagian penentuan minimum SDK, silahkan pilih sesuai yang
diinginkan.
c. Pada pilihan Activity, silahkan pilih Blank Activity kemudian pilih Next. Selanjutnya
akan muncul tampilan seperti di bawah ini. Biarkan saja tetap pada deafult-nya, untuk
menyelesaikan pembuatan proyek silahkan tekan tombol Finish.
d. Setelah itu, pilih WebView yang berada pada Palette. Kemudian klik dan seret pada
tampilan Android
e. Pada aplikasi ini, kita akan menampilkan website dari teknojurnal.com. Sehingga
ketika aplikasi dijalankan, secara otomatis akan membuka situs dari TeknoJurnal. Hal
ini membuat aplikasi yang akan dibuat membutuhkan koneksi internet. Untuk itu, kita
akan menambahkan permission pada aplikasi agar dapat mengakses internet.
f. Silahkan buka AndroidManifest.xml yang berada pada folder manifest yang ada pada
proyek yang dibuat. Kemudian tambahkan kode seperti di bawah ini.
<uses-permission android:name="android.permission.INTERNET"/>
g. Setelah itu, kita akan mendefinisikan situs web yang akan ditampilan pada class
WebView. Untuk memasukan URL nya silahkan buka MainActivity.java yang terdapat
pada folder java. Tambahkan kode seperti di bawah ini.
@Override
protected void onCreate(Bundle savedInstanceState) {
- 14 -
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_materi_web_view);
WebView view = (WebView) this.findViewById(R.id.WebView);
view.getSettings().setJavaScriptEnabled(true);
view.loadUrl("http://hirupmotekar.com/");
}
h. Aplikasi sudah bisa dijalankan, hanya saja ketika aplikasi dijalankan maka
akan redirect ke peramban web. Agar aplikasi ketika dijalankan tidak terjadi redirect,
maka perlu ditambahkan class WebViewClient pada MainActivity.java. Kodingannya
bisa dilihat di bawah ini :
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_materi_web_view);
WebView view = (WebView) this.findViewById(R.id.viewWeb);
view.getSettings().setJavaScriptEnabled(true);
view.setWebViewClient(new MyBrowser());
view.loadUrl("http://hirupmotekar.com/");
private class MyBrowser extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view,
String url) { view.loadUrl(url);
return true;
}
i. Sampai sejauh ini aplikasi sudah bisa berjalan tanpa redirect ke perambang web,
j. Output ketika sudah di run aplikasi
Sumber :
https://teknojurnal.com/cara-membuat-aplikasi-web-android/
- 15 -
7. MapView Google Map adalah sebuah peta navigasi milik google yang membantu si user (pengguna)
mencari ,melihat dan menemukan lokasi tempat tinggal dan tempat yang ingin dituju di
seluruh dunia.Google Maps bukan hanya tersedia di Web , namun juga terdapat di Aplikasi
mobile khususnya Android.Nah Google menyediakan sebuah API yang digunakan untuk
para developer Android , mengembangkan Aplikasi peta navigasi mereka yang disebut
Google Maps API
Membuat Aplikasi Peta di Android Menggunakan Android Studio
a. Pertama-tama, bukalah Android Studio dan dari menu bar di bagian atas, pilih
> File > New > New Project, lalu pilih template untuk Google Maps Activity, seperti
contoh di bawah.
b. Jika sudah, click > Next dan sebuah halaman baru akan terbuka dimana kalian bisa
memberikan nama untuk Maps Activity, layout name, dan activity title yang kalian
buat (untuk tutorial ini kita akan menggunakan nama default). Kemudian di halaman
berikutnya kalian bisa mengisi nama aplikasi kalian dan juga nama package nya. Jika
sudah selesai, kalian bisa klik Finish dan secara otomatis akan dibawa ke halaman
project kalian di Android Studio.
- 16 -
c. Untuk memasukkan API key tersebut, buka google_maps_api.xml pada
folder /res/values. Replace string YOUR_KEY_HERE dengan API key yang sudah
kalian dapatkan, seperti contoh di bawah ini :
translatable="false">AIza************0c</string>
d. Setelah itu, mari kita buka file MapsActivity.java dimana semua logic pemetaan pada
aplikasi kita tersimpan di file tersebut. Contoh kodenya seperti di bawah:
package com.example.asus.widgetview;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
public class MapsActivity extends FragmentActivity implements
OnMapReadyCallback {
private GoogleMap mMap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
// Obtain the SupportMapFragment and get notified when the map is ready to be
- 17 -
used.
SupportMapFragment mapFragment = (SupportMapFragment)
getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
/**
* Manipulates the map once available.
* This callback is triggered when the map is ready to be used.
* This is where we can add markers or lines, add listeners or move the camera. In
this case,
* we just add a marker near Sydney, Australia.
* If Google Play services is not installed on the device, the user will be prompted
to install
* it inside the SupportMapFragment. This method will only be triggered once the
user has
* installed Google Play services and returned to the app.
*/
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
// Add a marker in Sydney and move the camera
LatLng sydney = new LatLng(-34, 151);
mMap.addMarker(new
MarkerOptions().position(sydney).title("Marker in Sydney"));
mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
}
}
e. Kode tersebut cukup sederhana, tapi mari kita review bersama-sama. Pada kodingan
tersebut pertama-tama aplikasi akan membuat sebuah instance dari GoogleMap, yang
merupakan sebuat map object di aplikasi kita. Setelah itu, aplikasi akan membuat
sebuah Marker baru untuk diletakkan di atas peta. Lokasi Marker tersebut diletakkan
akan mengacu pada variable LatLng, yang berisi koordinat latitude dan longitude (-
34, 151). Yang terakhir, method moveCamera() akan dipanggil sehingga ketika kita
membuka aplikasi pertama kali, kita akan dibawa ke titik sesuai dengan koordinat
yang sudah diberikan, yaitu dalam contoh ini adalah ke Sydney.
f. Mungkin kalian akan bertanya, “Bagaimana jika saya ingin supaya peta nya menunjuk
ke lokasi saya?” Jangan khawatir, Google Maps sudah mempunyai sebuah method
untuk menghandle hal tersebut, caranya kita tinggal memodifikasi kodingannya sedikit,
dan menambahkan baris berikut :
- 18 -
mMap.setMyLocationEnabled(true);
g. Tepat di bawah method moveCamera(). Method itu akan membuat peta menampilkan
sebuat tombol “my location” kecil di bagian kanan atas peta pada layar. Kemudian
apabila kita mengklik tombol tersebut, peta secara otomatis akan bergerak ke lokasi
kita berada. Namun ingat untuk menggunakan fitur ini kalian harus mengaktifkan
Location Services pada perangkat Android kalian.
h. Hasil Output Map yang sudah dibuat
Sumber : https://www.twoh.co/2016/06/05/tutorial-membuat-aplikasi-peta-android-
menggunakan-android-studio/
8. Image View ImageView adalah salah satu Component yang berfungsi sebagai Component User
Interface (Antar Muka) yang akan menampilkan sebuah gambar baik itu format .jpg
ataupun .png. Jadi jika kalian ingin menampilkan sebuah gambar ,saat pengembangan
Aplikasi Android. Kalian bisa menggunakan Component ImageView.
cara Membuat ImageView di Android.
Nantinya Anda membuat sebuah halaman berisi gambar dan tombol button. Ketika Anda
mengklik tombol button tersebut maka gambar akan berubah. Jadi siapkan dua buah
gambar di dalam folder mipmap.
a. Tambahkan beberapa string seperti gambar dibawah ini :
- 19 -
b. Berikut file activity_main.xml
c. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context=".MateriImageView">
<ImageView
android:id="@+id/img"
android:layout_width="383dp"
android:layout_height="324dp"
android:contentDescription="@string/gambar1"
android:src="@mipmap/sedih"
app:layout_constraintBottom_toTopOf="@+id/btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/btn"
app:layout_constraintBottom_toTopOf="@+id/reset"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/img" />
<Button
android:id="@+id/reset"
android:layout_width="fill_parent"
- 20 -
android:layout_height="wrap_content"
android:text="@string/reset"
app:layout_constraintBottom_toTopOf="@+id/BtnHomeIV"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn" />
</android.support.constraint.ConstraintLayout>
d. Berikut file MainActivity.java :
package com.example.asus.widgetview;
import android.app.Fragment;
import android.content.Intent;
import android.media.Image;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
public class MateriImageView extends AppCompatActivity {
Button btn, reset;
ImageView img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_materi_image_view);
//coding membuat image view sederhana
getSupportActionBar().setTitle("Contoh ImageView ");
Button btn = (Button) findViewById(R.id.btn);
Button reset = (Button) findViewById(R.id.reset);
final ImageView img = (ImageView) findViewById(R.id.img);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
img.setImageResource(R.mipmap.senang);
}
});
reset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
img.setImageResource(R.mipmap.sedih);
- 21 -
}
});
}
}
e. Berikut adalah hasilnya
Sumber :
https://codefordroid.blogspot.co.id/2017/02/mengenal-imageview-component-
android.html
https://www.dumetschool.com/blog/Membuat-ImageView-di-Android
9. Spinner Spinner adalah salah satu view yang cukup sering kita lihat penggunaannya di hampir
semua aplikasi Android. Spinner berbentuk list dropdown berisi item-item yang bisa kita
pilih. Spinner biasa digunakan untuk memudahkan pengguna memilih salah satu value dari
sebuah list/array yang disajikan dengan cepat.
Cara Membuat Spinner di Android dengan Android Studio :
Perlu diketahui, ada dua cara untuk membuat Spinner di Android berdasarkan sumber data
yang ingin ditampilkan. Yang pertama, data array disimpan pada file resource xmldalam
bentuk string-array. Cara ini berguna jika value list pada Spinner bersifat statis/tidak sering
diubah-ubah. Sedangkan cara kedua membuat Spinner di Android adalah dengan cara data
array disimpan langsung pada file Java, dalam bentuk String array ataupun String
ArrayList. Cara kedua ini berguna jika data yang hendak kita sajikan bersifat dinamis atau
dapat berubah-ubah. Misal kita harus fetch array dari server terlebih dahulu sebelum
menampilkannya pada Spinner. Kedua cara ini akan saya bahas satu persatu.
1. Membuat Spinner dengan data string-array di XML
- 22 -
a. Kita akan membahas cara pertama terlebih dahulu, yaitu membuat Spinner dengan
data list-nya disimpan di file XML sebagai string-array. Pertama-tama, seperti
biasa kita akan membuat project baru di Android Studio terlebih dahulu.
b. Setelah itu, kita buka file strings.xml pada folder res/values, dan kita masukkan
string-array sebagai berikut :
c. Langkah selanjutnya, pada layout activity_main.xml kita tambahkan sebuah
Spinner view dan sebuah tombol, hingga menjadi seperti di bawah ini :
<Spinner
android:id="@+id/sp_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:entries="@array/german_familienname"
android:padding="20dp"
app:layout_constraintBottom_toTopOf="@+id/bt_check"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"></Spinner>
<Button
android:id="@+id/bt_check"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Submit"
app:layout_constraintBottom_toTopOf="@+id/sp_name_2"
- 23 -
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/sp_name" />
d. Kemudian, bagaimana cara mengambil value yang terpilih pada Spinner? Caranya
sangat gampang, kita akan buka file MainActivity.java dan melakukan logic
codingnya di sana. Jadi flow nya adalah kita memilih value yang ada pada Spinner
tersebut, kemudian ketika Button diklik, maka akan memunculkan nama value
yang kita pilih.
Berikut adalah contoh codingannya pada MainActivity.java.
public class MateriSpinner extends AppCompatActivity {
private Spinner spNamen;
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_materi_spinner);
//Membuat Spinner dengan data string-array di XML
spNamen = (Spinner) findViewById(R.id.sp_name);
Button btSpinner = (Button) findViewById(R.id.bt_check);
btSpinner.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MateriSpinner.this, "Selected "+
spNamen.getSelectedItem().toString(),
Toast.LENGTH_SHORT).show();
}
});
e. Yup, hanya seperti itu saja :). Karena Spinner tersebut sudah terisi list dari XML,
maka saat kita melakukan klik Button, kita cukup memanggil
method getSelectedItem() yang otomatis akan mengambil item mana yang sedang
dipilih pengguna dan mengubahnya ke String dengan method toString().
2. Membuat Spinner dengan data dinamis berupa String Array/ArrayList
a. Jika menggunakan cara yang kedua, kita tidak perlu menambahkan string-
array pada xml resource, karena data list untuk Spinner akan kita dapatkan dari
Activity nya langsung berupa Array/ArrayList. Namun sebagai gantinya, kita
akan menggunakan SpinnerAdapter, yang berfungsi untuk mengolah data array
string tersebut supaya bisa ditampilkan di Spinner.
b. Pertama-tama, mari kita tambahkan satu lagi Spinner view
pada activity_main.xml :
<Spinner
android:id="@+id/sp_name_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
- 24 -
android:layout_marginTop="8dp"
android:padding="20dp"
app:layout_constraintBottom_toTopOf="@+id/BtnHomeSPINNER"
app:layout_constraintTop_toBottomOf="@+id/bt_check"
app:layout_constraintVertical_bias="0.091"
tools:layout_editor_absoluteX="0dp"></Spinner>
c. Perlu diperhatikan, Spinner di atas tidak mempunyai
atribut android:entries karena kita tidak menggunakan atribut itu untuk
memasukkan data di Spinner, berbeda seperti di cara pertama.
d. Adapun main codingannya pada file MainActivity.java adalah seperti berikut :
private String[] germanFeminine = {
"Karin",
"Ingrid", "Helga",
"Renate",
"Elke",
"Ursula",
"Erika",
"Christa",
"Gisela",
"Monika"
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_materi_spinner);
//Membuat Spinner dengan data string-array di XML
Spinner spNamen2 = (Spinner) findViewById(R.id.sp_name_2);
// inisialiasi Array Adapter dengan memasukkan string array di atas
final ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item,germanFeminine);
// mengeset Array Adapter tersebut ke Spinner
spNamen2.setAdapter(adapter);
spNamen2.setOnItemSelectedListener(new
AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> adapterView,
View view, int i, long l) {
// memunculkan toast + value Spinner yang dipilih (diambil dari adapter)
Toast.makeText(MateriSpinner.this, "Selected "+
adapter.getItem(i), Toast.LENGTH_SHORT).show();
}
@Override
- 25 -
public void onNothingSelected(AdapterView<?> adapterView) {
}
});
e. Jika kita lihat pada codingan di atas, hal yang baru adalah adanya String[] array
yang berisi data yang nantinya akan kita gunakan di Spinner. Dan jangan lupa untuk
memasukkan array String tersebut ke dalam Spinner, kita harus menggunakan
ArrayAdapter. Setelah itu kita akan mengeset OnItemSelectedListener() pada
Spinner. Supaya kita dapat memonitor state Spinner saat user selesai memilih
sebuah item pada Spinner. Dalam kasus ini akan memunculkan sebuah Toast yang
berisi value item Spinner yang dipilih.
f. Outputan setelah dirun :
Sumber :
https://www.twoh.co/2016/08/16/tutorial-membuat-spinner-di-android-studio/