36
TUGAS PEMROGRAMAN MOBILE 1 Disusun Oleh Kelompok 5 dengan anggota : Charir Maulana Achsan 16.11.0217 Bagus Anjas P 16.11.0221 Mustofa Bayu Rahmat 16.11.0245 Esa Rizki Anandrian 16.11.0248 Danang Aldy Kurniawan 16.11.0267 Tri Wahyono 16.11.0284 Sarif Hidayatulloh 16.11.0286 Muchamad Arief Sidik 16.11.0296 Adent Bima Prasetya 16.11.0301 Dhimas Galih Prasetyo 16.11.0308 Eva Faiza 16.11.0317 Ikhsan Setiawan 16.11.0344

Hirup Motekarhirupmotekar.com/.../uploads/2018/05/PEMROGRAMAN-MOBILE-1-… · Web viewTUGAS PEMROGRAMAN MOBILE 1 Disusun Oleh Kelompok 5 dengan anggota : Charir Maulana Achsan 16.11.0217

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

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