hirup motekarhirupmotekar.com/.../uploads/2018/05/pemrograman-mobile-1-… · web viewtugas...
TRANSCRIPT
TUGAS
PEMROGRAMAN MOBILE 1
Disusun Oleh Kelompok 5 dengan anggota :
Charir Maulana Achsan 16.11.0217
Bagus Anjas P16.11.0221
Mustofa Bayu Rahmat 16.11.0245
Esa Rizki Anandrian16.11.0248
Danang Aldy Kurniawan16.11.0267
Tri Wahyono 16.11.0284
Sarif Hidayatulloh16.11.0286
Muchamad Arief Sidik16.11.0296
Adent Bima Prasetya 16.11.0301
Dhimas Galih Prasetyo16.11.0308
Eva Faiza 16.11.0317
Ikhsan Setiawan16.11.0344
STMIK AMIKOM PURWOKERTO
2017/2018
1. AUTOCOMPLETETEXTVIEW
Tampilan teks yang dapat diedit yang menunjukkan saran penyelesaian secara otomatis saat pengguna sedang mengetik. Daftar saran ditampilkan dalam menu drop down. Drop down dapat dihentikan kapan saja dengan menekan tombol kembali atau, jika tidak ada item yang dipilih dalam drop down, dengan menekan tombol enter / dpad center.
Cara membuat autocompletetextview di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. Buka file activity_main.xml kalian, disini kita akan menambahkan widget AutoCompleteTextView dan TextView untuk menampilkan outputnya.
<?xml version="1.0" encoding="utf-8"?>
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:orientation="vertical"
android:background="#FFF5F5F5"
tools:context="android.cianjur.developer.net.basicandroid.MainActivity">
android:id="@+id/search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Cari Seusatu ....." />
android:id="@+id/output"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:text="Output Data :"
android:textSize="15sp"
android:textStyle="bold" />
View :
c. Selanjutnya buka file MainActivity.java, pada source code berikut ini, kita akan menggunakan sebuah Array untuk menyimpan item, lalu item tersebut akan ditampilakn pada widge AutoCompleteTextView saat user minimal mengetik 2 huruf.
package android.cianjur.developer.net.basicandroid;
/*
Dibuat Oleh WILDAN M ATHOILLAH
*/
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements TextWatcher {
private TextView Output;
private AutoCompleteTextView Pencarian;
//Daftar Item Menggunakan Array
private String[] listItem = {"Laptop", "Komputer", "Televisi", "Android", "Pensil", "Tas",
"Helm", "Sendal", "Buku", "Gelas", "Penggaris", "Masker", "Mainan",
"Celana", "Baju", "Topi", "Jaket", "Sepeda", "Mobil", "Sepatu",
"Flashdisk", "Hardisk", "Bantal", "Kasur", "Meja", "Kursi", "Kamera",
"Kulkas", "Foto", "Jas", "Jaket", "Spidol", "Makanan", "Minuman"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Output = findViewById(R.id.output);
Pencarian = findViewById(R.id.search);
//Membuat Listener untuk menangani kejadian pada AutoCompleteTextView
Pencarian.addTextChangedListener(this);
//Membuat Adapter untuk mengatur bagaimana Item/Konten itu tampil
Pencarian.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_expandable_list_item_1, listItem));
}
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
//Method ini dipanggil sebelum edittext selesai diubah
Toast.makeText(getApplicationContext(),"Text Belum Diubah", Toast.LENGTH_SHORT).show();
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
//Method ini dipanggil saat text pada edittext sedang diubah
Output.setText("Data Output : "+Pencarian.getText());
}
@Override
public void afterTextChanged(Editable editable) {
//Method ini dipanggil setelah edittext selesai diubah
Toast.makeText(getApplicationContext(),"Text Selesai Diubah", Toast.LENGTH_SHORT).show();
}
}
Tampilan sebagai berikut :
2. MULTIAUTOCOMPLETETEXTVIEW
Tampilan teks yang dapat diedit, memperluas AutoCompleteTextView, yang dapat menunjukkan saran penyelesaian untuk substring teks tempat pengguna mengetik alih-alih untuk semua hal.
Cara membuat multiautocompletetextview di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. “Drag and Drop” dari komponen yang tersedia atau langsung menuliskan script XML. Untuk script XML dapat dituliskan seperti berikut.
01
02
xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"
03
android:layout_height="match_parent"android:paddingLeft="@dimen/activity_horizontal_margin"
04
android:paddingRight="@dimen/activity_horizontal_margin"
05
android:paddingTop="@dimen/activity_vertical_margin"
06
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
07
08
09
android:id="@+id/mact1"
10
android:layout_width="wrap_content"
11
android:layout_height="wrap_content"
12
android:layout_alignParentLeft="true"
13
android:layout_alignParentRight="true"
14
android:layout_alignParentTop="true"
15
android:ems="10"
16
android:hint="Isikan Kota di Indonesia" >
17
18
19
20
android:id="@+id/textView1"
21
android:layout_width="wrap_content"
22
android:layout_height="wrap_content"
23
android:layout_alignParentLeft="true"
24
android:layout_below="@+id/mact1"
25
android:layout_marginLeft="14dp"
26
android:text="Inputkan lebih dari satu kota" />
27
28
c. Bukalah MainActivity.java lalu edit seperti berikut ini
01
package com.androidnajwa.multiautocomplete;
02
03
import android.app.Activity;
04
import android.os.Bundle;
05
import android.widget.ArrayAdapter;
06
import android.widget.MultiAutoCompleteTextView;
07
08
public class MainActivity extends Activity {
09
MultiAutoCompleteTextView mact;
10
ArrayAdapter adapter;
11
String[] item = {"Aceh","Pekanbaru","Palembang","Pekalongan"};
12
@Override
13
protected void onCreate(Bundle savedInstanceState) {
14
super.onCreate(savedInstanceState);
15
setContentView(R.layout.activity_main);
16
mact = (MultiAutoCompleteTextView) findViewById(R.id.mact1);
17
//membuat adapter untuk menampilkan list item
18
adapter = new ArrayAdapter(this,
19
android.R.layout.simple_list_item_1,
20
item);oi
21
//menerapkan adapter pada objek mact
22
mact.setAdapter(adapter);
23
//membuat karakter pembatas antar kota
24
mact.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
25
}
26
}
d. memasukkan 2 kota yaitu "Pekanbaru", maka kota Pekanbaru akan otomatis masuk kedalam daftar kemudian dilanjutkan dengan memasukkan nama Aceh, Dimulai awalan "ac" Sehingga nanti nya akan muncul 2 kota yaitu "Pekanbaru dan Aceh" secara bersamaan. seperti gambar berikut ini.
AUTOCOMPLETE VS MULTICOMPLETE
Satu perbedaan paling penting antara MultiAutoCompleteTextView dan AutoCompleteTextView adalah bahwa AutoCompleteTextView dapat menyimpan atau memilih hanya nilai tunggal pada satu waktu tetapi MultiAutoCompleteTextView dapat menyimpan beberapa nilai kata string pada satu waktu. Semua nilai ini dipisahkan oleh koma (,).
3. LISTVIEW
Listview adalah kelompok tampilan yang menampilkan daftar item yang dapat digulir. Item daftar secara otomatis dimasukkan ke daftar dengan menggunakan Adapter yang menarik materi dari sumber seperti larik atau kueri database dan mengonversi setiap hasil item menjadi sebuah tampilan yang dimasukkan ke dalam daftar.
Cara membuat listview di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. buka file activity_main.xml kalian, untuk membuat ListView, masukan kode xml berikut ini/ Atau kalian bisa langsung mendrag/drop widget tersebut yang berada didalam Pellete
<?xml version="1.0" encoding="utf-8"?>
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:layout_margin="8dp"
tools:context="android.cianjur.developer.net.basicandroid.MainActivity">
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
c. buka file MainActivity.java pada project kalian, lalu masukan source code berikut ini beserta penjelasannya:
package android.cianjur.developer.net.basicandroid;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.Collections;
public class MainActivity extends AppCompatActivity {
//Data-Data yang Akan dimasukan Pada ListView
private String[] mahasiswa = {"Wildan","Taufan","Adibil;","Hari","Adam",
"Hermawan","Indra","Widi","Anisa","Hani"};
//ArrayList digunakan Untuk menampung Data mahasiswa
private ArrayList data;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = findViewById(R.id.list);
data = new ArrayList<>();
getData();
ArrayAdapter adapter = new ArrayAdapter<>(this, R.layout.support_simple_spinner_dropdown_item, data);
listView.setAdapter(adapter);
}
private void getData(){
//Memasukan Semua Data mahasiswa kedalam ArrayList
Collections.addAll(data, mahasiswa);
}
}
Penjelasan:
Pada program tersebut, kita membuat sebuah variable Array, yaitu mahasiswa, data-data pada variable tersebut yang akan kita tampilkan pada ListView, lalu data tersebut akan kita masukan kedalam ArrayList.
Pada method getData, kita memasukan semua data mahasiswa kedalam ArrayList, menggunakan fungsi Collection.addAll().
ArrayAdapter digunakan untuk mengatur, bagaimana item pada ListView akan tampil, didalam adapter, kita memasukan data ArrayList, selanjutnya kita memanggil adapter pada ListView dengan menggunakan fungsi setAdapter().
Tampilam program disamping:
4. GRIDVIEW
GridView adalah salah satu container, yang digunakan untuk menampilkan konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti sebuah rak lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisan coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang ditampilkan secara Grid atau Kotak-kotak.
ATRIBUT GRIDVIEW
· android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.
· android:gravity : Menentukan gravitasi di dalam setiap sel.
· android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.
· android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada.
· android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.
· android:numColumns : Menentukan berapa kolom yang akan ditampilkan.
Cara membuat gridview di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. Buka file activity_main.xml kalian, disini kita akan mengatur layout untuk tampilan GridView pada activity kita.
<?xml version="1.0" encoding="utf-8"?>
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF5F5F5"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"
tools:context="android.cianjur.developer.net.basicandroid.MainActivity">
Penjelasan pada atribut-atribut yang digunakan diatas:
android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.
android:gravity : Menentukan gravitasi di dalam setiap sel.
android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.
android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada.
android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.
android:numColumns : Menentukan berapa kolom yang akan ditampilkan
c. Selanjutnya buka file MainActiviy.java, pada layout tersebut kita akan menampilkan gambar/image, jadi saya sarankan kalian sudah menyiapkan gambarnya terlebih dahulu, gambar tersebut kalian simpan didalam dir drawable.
d. Masukan source code berikut ini:
package android.cianjur.developer.net.basicandroid;
/*
Dibuat Oleh WILDAN M ATHOILLAH
*/
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
//Deklarasi Variable GridView
protected GridView TampilanGrid;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setTitle("Image Gallery");
TampilanGrid = findViewById(R.id.gridview);
//Mengset/Menerapkan adapter pada GridView
TampilanGrid.setAdapter(new ImageAdapter(this));
//Membuat Listener untuk menangani kejadian saat salah satu item di klik
TampilanGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView parent, View v, int position, long id) {
Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();
}
});
}
}
//Digunakan Untuk Mengatur Konten yang Akan Ditampilkan
class ImageAdapter extends BaseAdapter {
//List Konten Gambar yang akan ditampilkan pada GridView
private int[] gambar = {R.drawable.kucing1, R.drawable.kucing2, R.drawable.kucing3,
R.drawable.kucing4, R.drawable.kucing5, R.drawable.kucing6,
R.drawable.kucing7, R.drawable.kucing8, R.drawable.kucing9,
R.drawable.kucing10, R.drawable.kucing11, R.drawable.kucing12,
R.drawable.kucing13, R.drawable.kucing14, R.drawable.kucing15,
R.drawable.kucing16, R.drawable.kucing17, R.drawable.kucing18,
R.drawable.kucing19, R.drawable.kucing20};
private Context mContext;
//Membuat Contructor, dengan parameter Context, Untuk menghubungkan Adapter dengan GridView
ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
//Menghitung Jumlah/Panjang dari Daftar Konten
return gambar.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
//Membuat ImageView baru untuk setiap item yang direferensikan oleh Adaptor
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
//Jika tidak di daur ulang
if (convertView == null) {
//Menginisialisasi beberapa atribut
imageView = new ImageView(mContext);
//Mengatur Panjang dan Lebar pada ImageView
imageView.setLayoutParams(new GridView.LayoutParams(120, 120));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
//Mengatur Padding
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
//Mengset Image dari Resource/Sumber berdasarkan posisinya
imageView.setImageResource(gambar[position]);
return imageView;
}
}
Tampilan sebagai berikut :
5. DATE AND TIME (PICKERS)
Android menyediakan kontrol bagi pengguna untuk memilih waktu atau memilih tanggal sebagai dialog yang siap digunakan. Setiap pemilih menyediakan kontrol untuk memilih setiap bagian waktu (jam, menit, AM / PM) atau tanggal (bulan, hari, tahun).
Cara membuat date and time di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. membuat tampilan dengan menggunakan TextView dan Button untuk menampilkan kalendar serta menampilkan tanggal yang sudah dipilih pada TextView. Silahkan buka file activity_main.xml yang terletak pada direktori res/layout/activity_main.xml. Pada layout ini, kita akan menambahkan TextView dan Button. Silahkan tambahkan kodingan seperti di bawah ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?xml version="1.0" encoding="utf-8"?>
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="oc.startup.ra.appdate.MainActivity">
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="70dp"
android:onClick="setDate"
android:text="@string/date_button" />
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:text="@string/date_label"
android:textAppearance="?android:attr/textAppearanceMedium" />
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button1"
android:layout_marginTop="66dp"
android:layout_toLeftOf="@+id/button1"
android:text="@string/date_view"
android:textAppearance="?android:attr/textAppearanceMedium" />
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/button1"
android:layout_below="@+id/textView2"
android:layout_marginTop="72dp"
android:text="@string/date_selected"
android:textAppearance="?android:attr/textAppearanceMedium" />
c. Selanjutnya untuk melengkapi attribut dari android:text, silahkan buka direktori res/values/strings.xml pada proyek aplikasi yang sedang dibuat. Ini akan menampilkan pesan teks pada TextView. Silahkan tambahkan kodingan seperti di bawah ini.
1
2
3
4
Tekan tombol untuk mengatur tanggal
Atur Tanggal
Tanggal :
d. Selanjutnya kita akan menambahkan kodingan java pada MainActivity.java. Hal ini bertujuan untuk memberikan aksi ketika tombol “Atur Tanggal” ditekan. Silahkan tambahkan kodingan di bawah ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.DatePicker;
import android.widget.TextView;
import android.widget.Toast;
import java.util.Calendar;
public class MainActivity extends AppCompatActivity {
private DatePicker datePicker;
private Calendar calendar;
private TextView dateView;
private int year, month, day;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
dateView = (TextView) findViewById(R.id.textView3);
calendar = Calendar.getInstance();
year = calendar.get(Calendar.YEAR);
month = calendar.get(Calendar.MONTH);
day = calendar.get(Calendar.DAY_OF_MONTH);
showDate(year, month + 1, day);
}
@SuppressWarnings("deprecation")
public void setDate(View view) {
showDialog(999);
//akan menampilkan teks ketika kalendar muncul setelah menekan tombol
Toast.makeText(getApplicationContext(), "Pilih Tangal", Toast.LENGTH_SHORT)
.show();
}
@Override
protected Dialog onCreateDialog(int id) {
// TODO Auto-generated method stub
if (id == 999) {
return new DatePickerDialog(this, myDateListener, year, month, day);
}
return null;
}
private DatePickerDialog.OnDateSetListener myDateListener = new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker arg0, int arg1, int arg2, int arg3) {
// TODO Auto-generated method stub
// arg1 = year
// arg2 = month
// arg3 = day
showDate(arg1, arg2+1, arg3);
}
};
private void showDate(int year, int month, int day) {
dateView.setText(new StringBuilder().append(day).append("/")
.append(month).append("/").append(year));
}
}
silahkan jalankan aplikasi Android yang sudah dibuat menggunakan emulator atau langsung diinstal pada perangkat Android.
6. MAPVIEW
Sebuah View yang menampilkan peta (dengan data yang diperoleh dari layanan Google Maps). Saat fokus, ia akan menangkap penekanan tombol dan menyentuh gerakan untuk memindahkan peta.
Cara membuat mapview di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. Pada opsi "Add an Activity to mobile" pilih "Google maps activity", lalu klik next.
c. Buka google_maps_api.xml pada package res/value, di google_maps_api.xml terdapat alamat untuk mengaktifkan Maps API, disini alamatnya adalah
Copy alamat tersebut lalu buka dalam browser, bila perlu daftarkan akun gmail untuk konfigurasi API.
d. Setelah halama google API terbuka, pilih "Tidak" untuk opsi dapatkan email, dan pilih "Ya" untuk opsi setuju dengan Syarat dan ketentuan, lalu klik setuju dan lanjutkan.
e. Setelah halaman "API diaktifkan" terbuka, klik buat kunci API.
f. Setelah terbuka halaman "Kredensial" lalu muncul kotak dialog "Kunci API Dibuat" copy kode API key yang ada didalam box "Kunci API anda”
g. Buka kembali google_maps_api.xml pada package res/value di Android Studio, lalu masukan kode API key diantara dan menggantikan text YOUR_KEY_HERE, Hingga menjadi
h. Manifest
Buka AndroidManifest.xml pada package manifests.
Masukan Permission yang diperlukan antara lain ACCESS_NETWORK_STATE Untuk memeriksa apakah perangkat terhubung ke suatu jaringan atau tidak, INTERNET Untuk memeriksa apakah perangkat terhubung ke Internet atau tidak, ACCESS_COARSE_LOCATION Untuk memperkirakan lokasi pengguna menggunakan WiFi atau sinyal mobile, ACCESS_FINE_LOCATION Untuk memperkirakan lokasi terkini pengguna, OpenGL ES V2 Dibutuhkan untuk Google Maps V2 sehingga AndroidManifest.xml menjadi :
?xml version="1.0" encoding="utf-8"?>
package="com.example.root.peta">
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
android:name="com.google.android.geo.API_KEY"
android:value="@string/google_maps_key" />
android:name=".MapsActivity"
android:label="@string/title_activity_maps">
i. build.gradle(Module:app)
Buka build.gradle(Module:app) pada Gradle Scripts
Masukan compile com.google.android.gms:play-services:9.8.0 sebelum testCompile 'junit:junit:4.12 Hingga menjadi
j. maps.java
Buka MapsActivity.java pada package java, tidak perlu mengubah script tersebut namun pastikan MapsActivity.java terlihat seperti berikut
package com.example.root.peta;
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 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));
}
}
k. Untuk uji coba aplikasi yang telah dibuat gunakan perangkat android yang terhubung ke android studio dan memiliki koneksi internet serta aktifkan akses lokasi pada pengaturan perangkat android. Jika uji coba berhasil maka akan muncul gambar seperti di bawah ini:
7. WEBVIEW
Tampilan yang menampilkan halaman web. class ini adalah dasar di mana Anda dapat menggulung browser web Anda sendiri atau hanya menampilkan beberapa konten online dalam Aktivitas Anda.
Cara membuat webview di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. Silahkan buka AndroidManifest.xml yang berada pada folder manifest yang ada pada proyek yang dibuat. Kemudian tambahkan kode seperti di bawah ini.
c. 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.
12
3
4
5
6
7
8
9
10
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//tambahkan kode di bawah ini
view = (WebView) this.findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true);
view.loadUrl("http://teknojurnal.com");
d. 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import android.webkit.WebView; // memasukan class WebView
import android.webkit.WebViewClient; //memasukan class WebViewClient
public class MainActivity extends ActionBarActivity {
private WebView view; //membuat variabel view agar bisa akses method
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = (WebView) this.findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true);
view.setWebViewClient(new MyBrowser());
view.loadUrl("http://teknojurnal.com");
}
private class MyBrowser extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
e. Sampai sejauh ini aplikasi sudah bisa berjalan tanpa redirect ke perambang web, hanya saja ketika penggguna menekan tombol back pada ponsel Android mereka maka aplikasi akan tertutup padahal harusnya balik lagi ke halaman sebelumnya. Untuk membuat kondisi balik lagi ke halaman sebelumnya maka perlu ditambahkan kodingan seperti di bawah ini:
public boolean onKeyDown(int keyCode, KeyEvent event) {
//ketika disentuh tombol back
if ((keyCode == KeyEvent.KEYCODE_BACK) && view.canGoBack()) {
view.goBack(); //method goback(),untuk kembali ke halaman sebelumnya
return true;
}
// Jika tidak ada halaman yang pernah dibuka
// maka akan keluar dari activity (tutup aplikasi)
return super.onKeyDown(keyCode, event);
}
f. Silahkan jalankan aplikasi yang sudah dibuat pada emulator Android Studio atau langsung dijalankan pada ponsel Android.
8. IMAGE VIEW
Menampilkan sumber daya gambar, misalnya Bitmap atau sumber daya Drawable. ImageView juga biasa digunakan untuk mengaplikasikan tint ke gambar dan menangani penskalaan gambar
Cara membuat imageview di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. Buka activity_image_circle.xml lalu tambahan 2 komponen imageview. Untuk kodenya adalah sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?xml version="1.0" encoding="utf-8"?>
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:padding="16dp"
tools:context="com.farizdotid.tutorialfarizdotid.ImageCircleActivity">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar dari internet"
android:layout_gravity="center"
android:textSize="20sp"
android:fontFamily="sans-serif-condensed"/>
android:id="@+id/ivInternet"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginTop="16dp"
android:layout_gravity="center"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Gambar dari lokal"
android:layout_gravity="center"
android:textSize="20sp"
android:fontFamily="sans-serif-condensed"/>
android:id="@+id/ivLokal"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginTop="16dp"
android:layout_gravity="center"/>
c. Buka androidmanifest.xml lalu tambahkan permission Internet. Karena untuk kebutuhan mengambil gambar dari internet ini kita memerlukan koneksi internet. Untuk kodenya seperti ini :
d. Buka gradle app devandro lalu tambahkan library Glide tersebut. Untuk kodenya adalah sebagai berikut :
1
2
implementation 'com.github.bumptech.glide:glide:4.2.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'
e. Untuk full code gradle app kurang lebih begini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
apply plugin: 'com.android.application'
android {
compileSdkVersion 26
buildToolsVersion "26.0.2"
defaultConfig {
applicationId "com.farizdotid.tutorialfarizdotid"
minSdkVersion 16
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
androidTestImplementation('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation 'com.android.support:design:26.1.0'
implementation 'com.android.support:support-vector-drawable:26.1.0'
implementation 'com.android.support:support-v4:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'
implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.jakewharton:butterknife:8.8.1'
implementation 'com.github.bumptech.glide:glide:4.2.0'
testImplementation 'junit:junit:4.12'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'
}
f. Setelah sudah menambahkan library Glide kedalam project android devandro, maka sekarang devandro buka ImageCircleActivity.java lalu init component yang sudah kita buat tadi.
@BindView(R.id.ivInternet)
ImageView ivInternet;
@BindView(R.id.ivLokal)
ImageView ivLokal;
String mUrlPicture = "https://regmedia.co.uk/2015/07/30/android_logo.jpg?x=442&y=293&crop=1";
g. Didalam onCreate buat kode seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
ButterKnife.bind(this);
// Fungsi untuk mengambil gambar dari internet
Glide.with(this)
.load(mUrlPicture)
.apply(RequestOptions.circleCropTransform())
.into(ivInternet);
// Fungsi untuk mengambil gambar dari drawable
Glide.with(this)
.load(R.drawable.icon_android)
.apply(RequestOptions.circleCropTransform())
.into(ivLokal);
h. Untuk full source code yang ada didalam ImageCircleActivity.java sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public class ImageCircleActivity extends AppCompatActivity {
@BindView(R.id.ivInternet)
ImageView ivInternet;
@BindView(R.id.ivLokal)
ImageView ivLokal;
String mUrlPicture = "https://regmedia.co.uk/2015/07/30/android_logo.jpg?x=442&y=293&crop=1";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_circle);
ButterKnife.bind(this);
// Fungsi untuk mengambil gambar dari internet
Glide.with(this)
.load(mUrlPicture)
.apply(RequestOptions.circleCropTransform())
.into(ivInternet);
// Fungsi untuk mengambil gambar dari drawable
Glide.with(this)
.load(R.drawable.icon_android)
.apply(RequestOptions.circleCropTransform())
.into(ivLokal);
}
}
Tampilan:
9. SPINNER
Spinner menyediakan cara cepat untuk memilih salah satu dari sekumpulan nilai. Dalam status default, spinner menampilkan nilai yang dipilihnya saat ini. Menyentuh spinner akan menampilkan menu tarik-turun bersama semua nilai lain yang tersedia, yang memungkinkan pengguna memilih salah satunya.
Cara membuat spinner di android studio
a. Buka aplikasi Android Studio kalian, Buat Project Baru.
b. kita tambahkan satu Spinner pada activity_home.xml :
acivity_home.xml
<?xml version="1.0" encoding="utf-8"?>
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="com.androidtutorial.com.spinner.Home">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/spinner"/>
Home.java
package com.androidtutorial.com.spinner;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import java.util.ArrayList;
import java.util.List;
public class Home extends AppCompatActivity {
public Spinner sp;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
sp = (Spinner)findViewById(R.id.spinner);
//Untuk membuat List Kota atau bisa menggunakan String[] List item = new ArrayList<>();
item.add("Bandung");
item.add("Jakarta");
item.add("Medan");
item.add("Padang");
//Untuk membuat adapter list kota ArrayAdapter adapter = new ArrayAdapter(Home.this,android.R.layout.simple_spinner_dropdown_item,
item);
//Untuk menentukan model adapter nya adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
//Menerapkan adapter pada spinner sp.setAdapter(adapter);
}
}
tampilan sebagai berikut :
REFERENSI
https://www.wildantechnoart.net/2018/01/belajar-membuat-autocompletetextview-di-android-studio.html
http://androidnajwa.blogspot.co.id/2015/08/tutorial-cara-membuat-multi-auto.html
https://www.wildantechnoart.net/2017/12/belajar-cara-membuat-listview-pada-android-studio.html
https://teknojurnal.com/membuat-aplikasi-date-picker-menggunakan-android-studio/
https://www.codepolitan.com/menampilkan-peta-dengan-google-maps-api-pada-android-studio-58b3951fbe5bb
https://teknojurnal.com/cara-membuat-aplikasi-web-android/
https://farizdotid.com/cara-membuat-imageview-bulat-circle-di-android-studio/
http://androidtutorial25.blogspot.co.id/2017/10/cara-membuat-spinner-di-android-studio.html