MATERI PERTEMUAN 5 PEMROGRAMAN MOBILE...

- 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" />

https://www.twoh.co/mudengdroid-belajar-android-bersama-twohs-engineering/basic-belajar-membuat-aplikasi-android-untuk-pemula-di-android-studio/

https://www.twoh.co/2017/01/20/tutorial-cara-membuat-datepicker-di-android-studio/

- 9 -

<TextView

android:id="@+id/tv_dateresult"



android:text="Tanggal 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_datepicker"

tools:ignore="MissingConstraints" />

<Button

android:id="@+id/bt_showtimepicker"




android:text="Show TimePicker"



app:layout_constraintTop_toBottomOf="@+id/tv_dateresult" />

<TextView

android:id="@+id/tv_timeresult"





android:text="Waktu dipilih : "

android:textSize="24sp"

app:layout_constraintBottom_toTopOf="@+id/BtnHomeDaT"



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


https://www.twoh.co/2017/01/21/tutorial-cara-membuat-timepicker-di-android-studio/

- 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


https://developer.android.com/sdk/index.html

http://teknojurnal.com/

- 14 -


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



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/

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.

http://www.twoh.co/2012/08/penamaan-package-aplikasi-yang-disarankan-untuk-aplikasi-android-buatan-indonesia/

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


import android.support.v4.app.FragmentActivity;


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



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 :

https://www.twoh.co/2016/06/05/tutorial-membuat-aplikasi-peta-android-menggunakan-android-studio/

https://www.twoh.co/2016/06/05/tutorial-membuat-aplikasi-peta-android-menggunakan-android-studio/

http://www.dumetschool.com/blog/Membuat-ImageView-di-Android

- 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_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_constraintTop_toTopOf="parent" />

<Button

android:id="@+id/btn"

android:layout_width="fill_parent"


android:text="@string/btn"

app:layout_constraintBottom_toTopOf="@+id/reset"




app:layout_constraintTop_toBottomOf="@+id/img" />

<Button

android:id="@+id/reset"

android:layout_width="fill_parent"

- 20 -


android:text="@string/reset"

app:layout_constraintBottom_toTopOf="@+id/BtnHomeIV"




app:layout_constraintTop_toBottomOf="@+id/btn" />

</android.support.constraint.ConstraintLayout>

d. Berikut file MainActivity.java :


import android.app.Fragment;

import android.content.Intent;

import android.media.Image;

import android.support.v7.app.AppCompatActivity;


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



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


img.setImageResource(R.mipmap.senang);

}

});

reset.setOnClickListener(new View.OnClickListener() {

@Override


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

https://codefordroid.blogspot.co.id/2017/02/mengenal-imageview-component-android.html

https://codefordroid.blogspot.co.id/2017/02/mengenal-imageview-component-android.html

https://www.dumetschool.com/blog/Membuat-ImageView-di-Android

- 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_marginEnd="16dp"

android:layout_marginLeft="16dp"

android:layout_marginRight="16dp"

android:layout_marginStart="16dp"


android:entries="@array/german_familienname"

android:padding="20dp"

app:layout_constraintBottom_toTopOf="@+id/bt_check"




app:layout_constraintTop_toTopOf="parent"></Spinner>

<Button

android:id="@+id/bt_check"




android:text="Submit"

app:layout_constraintBottom_toTopOf="@+id/sp_name_2"

http://www.twoh.co/2014/12/tutorial-membuat-aplikasi-android-menggunakan-android-studio/

- 23 -




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



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"




- 24 -


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



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/

https://www.twoh.co/2016/08/16/tutorial-membuat-spinner-di-android-studio/

MATERI PERTEMUAN 5 PEMROGRAMAN MOBILE...

Documents

Transcript of MATERI PERTEMUAN 5 PEMROGRAMAN MOBILE...