PMO18-TI16S-P5-Pengenalan Widget View-Calvin Hartono

KELOMPOK 3

 

Calvin Hartono (16.11.0100)

Fadila Aktar Ziyadi (16.11.0079)

Muhammad Yunus (16.11.0076)

Rayhan Shaquelle Oriwardanu S. (16.11.0090)

Mei Indiani (16.11.0097)

Muhammad Fahrul Rozy. (16.11.0107)

Moch Mugni Labib (16.11.0123)

Wahyu Suseno. (16.11.0132)

M.I.Zulkifli Nurul ‘Ilmi(16.11.0134)

Bachtiar Andi Winata. (16.11.0135)

Fadil(16.11.0136)

 

KELAS TI 16 S

———————————————————————————————————————

PERTEMUAN 5

MATERI YANG AKAN DIBAHAS:

Pengenalan Widget View

  • AutoComplete TextView
  • MultiAutoCompleteTextView
  • Listview
  • GridView
  • Date and Time
  • MapView and Webview
  • ImageView
  • Spinner

 

 

 

Pada dasarnya widget memiliki fungsi sebagai antarmuka untuk berinteraksi dengan pengguna. memberikan suatu proses dari aksi yang dilakukan seperti menekan tombol, memilih menu, dan sebagainya. Widget dalam android seperti TextView, EditText, Button, RadioButton, dan sebagainya.

 

 

Cara Membuat Widget di Android Studio

Terdapat 2 cara yaitu:

  1. Drag and Drop
  2. Mengedit Source Code dengan XML

 

 

 

AutoComplete TextView

 

Pada tutorial Android Studio kali ini, kita akan mempelajarai bagaimana cara mengcreate AutocompleteTextView pada sebuah aplikasi Android.
Pada saat kita mengetikkan sesuatu hanya beberapa karakter, akan muncul beberapa rekomendasi kalimat lengkap yang menjadi tujuan kita, itulah yang dikatakan AutocompleteText.
Dalam pembuatan AutocompleteTextView kali ini, kita akan mencoba beberapa alternatif cara pembuatannya.

Cara Pertama

  1. Create sebuah project
    Berinama My Autocomplete pada Application name. Kemudian pada Target Android Device centang Phone and Tablet, kemudian set Minimum SDK : API 10 : Android 2.3.3 (Gingerbread). Lalu pilih Blank Activity, dan biarkan default untuk Activity Name : MainActivity.

 

  1. Buka file values/strings.xml
    Dalam file xml, kita akan memberikan item-item untuk nama bulan. Kode lengkap untuk file strings.xml adalah sebagai berikut :

 

 

<resources>

<string name=”app_name”>My Autocomplete</string>

<string name=”action_settings”>Settings</string>

<string-array name=”daftar_bulan”>

<item>Januari</item>

<item>Februari</item>

<item>Maret</item>

<item>April</item>

<item>Mei</item>

<item>Juni</item>

<item>Juli</item>

<item>Agustus</item>

<item>September</item>

<item>Oktober</item>

<item>November</item>

<item>Desember</item>

</string-array>

</resources>

 

 

 

  1. Buka file res/layout/content_main.xml
    Dalam file ini kita akan menambahkan AutocompleteTextView. Berikut ini kode lengkap untuk file content_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:app=”http://schemas.android.com/apk/res-auto”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:paddingBottom=”@dimen/activity_vertical_margin”

android:paddingLeft=”@dimen/activity_horizontal_margin”

android:paddingRight=”@dimen/activity_horizontal_margin”

android:paddingTop=”@dimen/activity_vertical_margin”

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

tools:context=”com.ilmudetil_blogspot.myautocomplete.MainActivity”

tools:showIn=”@layout/activity_main”>

 

<AutoCompleteTextView

android:id=”@+id/autocompleteView”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:hint=”Cari Bulan…” />

</RelativeLayout>

 

  1. Buka file MainActivity.java
    Copy paste koding berikut dalam file MainActivity.java anda :

package com.ilmudetil_blogspot.myautocomplete;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.ArrayAdapter;

import android.widget.AutoCompleteTextView;

import java.util.Arrays;

import java.util.List;

 

 

public class MainActivity extends AppCompatActivity {

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

 

int layoutItemId = android.R.layout.simple_dropdown_item_1line;

String[] namaBln = getResources().getStringArray(R.array.daftar_bulan);

List<String> dftBulan = Arrays.asList(namaBln);

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, layoutItemId, dftBulan);

 

AutoCompleteTextView autocompleteView = (AutoCompleteTextView) findViewById(R.id.autocompleteView);

autocompleteView.setAdapter(adapter);

 

}

}

 

 

Cara Kedua

  1. Create sebuah project
    Berinama My AutocompleteText pada Application name. Kemudian pada Target Android Device centang Phone and Tablet, kemudian set Minimum SDK : API 10 : Android 2.3.3 (Gingerbread). Lalu pilih Blank Activity, dan biarkan default untuk Activity Name : MainActivity.2. Buka file res/layout/content_main.xml
    Koding pada file content_main.xml dalam project ini sama seperti pada percobaan pertama :

<?xml version=”1.0″ encoding=”utf-8″?>

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:app=”http://schemas.android.com/apk/res-auto”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:paddingBottom=”@dimen/activity_vertical_margin”

android:paddingLeft=”@dimen/activity_horizontal_margin”

android:paddingRight=”@dimen/activity_horizontal_margin”

android:paddingTop=”@dimen/activity_vertical_margin”

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

tools:context=”com.ilmudetil_blogspot.myautocompletetext.MainActivity”

tools:showIn=”@layout/activity_main”>

 

<AutoCompleteTextView

android:id=”@+id/autocompleteView”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:hint=”Cari Bulan…” />

</RelativeLayout>

  1. Buka file MainActivity.java
    Pada file ini, kita akan mendefinisikan nama-nama bulan ke dalam tipe data String dalam bentuk Array. Kemudian kita akan memberikan pada karakter berapa dilakukan proses autocomplete, jika kita gunakan syntax setTreshold(1), maka proses autocomplete dimulai dari karakter pertama. Koding lengkap untuk MainActivity.java adalah sebagai berikut :

package com.ilmudetil_blogspot.myautocompletetext;

 

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.widget.ArrayAdapter;

import android.widget.AutoCompleteTextView;

import android.graphics.Color;

public class MainActivity extends AppCompatActivity {

String[] Bulan = {“Januari”, “Februari”, “Maret”,”April”,”Mei”,”Juni”,”Juli”,”Agustus”,”September”,”Oktober”,”Nopember”,”Desember”};

 

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

 

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.select_dialog_item, Bulan);

AutoCompleteTextView actv = (AutoCompleteTextView) findViewById(R.id.autocompleteView);

actv.setThreshold(1);//akan dibaca dari karakter pertama

actv.setAdapter(adapter);

actv.setTextColor(Color.RED);

}

}

MultiAutoComplete TextView Android

AutoComplete TextView 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 dibawahnya, 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 dibawahnya. Jadi kita tidak perlu repot-repot lagi megetikan secara lengkap dari suatu kata. Widget ini umumnya selalu dipakai ketika kita membuat Aplikasi pencarian.

 

  1. Pertama buat project baru, atau yang sudah ada di Android Studio
  2. Pada bagiann layout (res/layout/activity_main.xml). pada tab Design, sebenarnya untuk membuat widget  Kalian hanya perlu drag pada bagian pallete lalu drag ke bagian layer atau screen Aplikasi, begitu juga dengan widget lainya.

Drag widget dari pallete

Kodingan :

 

<?xml version=”1.0″ encoding=”utf-8″?>

<RelativeLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:id=”@+id/activity_main”

android:paddingLeft=”@dimen/activity_horizontal_margin”

android:paddingRight=”@dimen/activity_horizontal_margin”

android:paddingTop=”@dimen/activity_vertical_margin”

android:paddingBottom=”@dimen/activity_vertical_margin”

>

 

 

<MultiAutoCompleteTextView

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:completionThreshold=”1″

android:id=”@+id/multiAutoCompleteTextView1″/>

 

<TextView

android:text=”Input text : Java,C,PHP,Python,Visual Basic\n

,Java script,Action Script ”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_marginLeft=”11dp”

android:layout_marginStart=”11dp”

android:layout_marginTop=”41dp”

android:id=”@+id/textView”

android:layout_below=”@+id/multiAutoCompleteTextView1″

android:layout_alignParentLeft=”true”

android:layout_alignParentStart=”true”/>

 

 

</RelativeLayout>

 

  1. Pada bagian java (app/java/namapackage/MainActivity.java). kita akanmembuat method setTokenizer(new MultiAutoComleteTextView.CommaTokenizer());

Dari object MultiAutoComleteTextView untuk membatasi tiap inputan text dengan comma(,).

 

MainActivity.java

package com.okedroid.contohaplikasi;

 

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.widget.ArrayAdapter;

import android.widget.MultiAutoCompleteTextView;

/*

Fathurrahman (okedroid.com)

 */

public class MainActivity extends AppCompatActivity {

 

    MultiAutoCompleteTextView multiAutoCompleteTextView;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

 

 

        String [] bahasapemrograman = {“Java”,”C”,”PHP”,”Python”,”Visual Basic”

                                        ,”Java script”,”Action Script”};

          //membuat data text yang berupa daftar bahasa pemrograman

 

 

        multiAutoCompleteTextView = (MultiAutoCompleteTextView)findViewById(R.id.multiAutoCompleteTextView1);

        //inisialisasi object dari MultiAutoCompleteTextView

 

        ArrayAdapter adapter = new ArrayAdapter(this,R.layout.support_simple_spinner_dropdown_item,bahasapemrograman);

        //membuat adapter untuk menghubungkan data atau nilai dari object bahasapemrograman

        multiAutoCompleteTextView.setAdapter(adapter);

        //menset nilai adapter di object multiAutoCompleteTextView

 

        multiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());

        //method untuk membatasi tiap text dengan comma (,)

 

 

    }

 

 

}

ListView

ListView merupakan tampilan yang menampilkan data dalam bentuk daftar. Data tersusun dan bisa di-scroll atau digulir dari atas kebawah dan sebaliknya.

Data yang ditampilkan pada ListView dapat dihasilkan dari database atau dari array yang sudah ditentukan. Pada tulisan kali ini data yang tampil pada ListView dihasilkan dari array yang bersifat statik sehingga data ditulis di dalam kodingannya.

Untuk memulainya, silahkan buatlah proyek baru pada Android Studio. Berikan nama proyek sesuai dengan keinginan. Pada tulisan ini, saya memberikan minimum SDK Ice Cream Sandwich (ICS) dan memilih Empty Activity. Setelah membuat proyek, silahkan tambahkan ListView dengan cara click and drag seperti gambar di bawah ini.

Data yang tampil pada ListView dimasukkan oleh Adapter yang memanggil data atau konten dari sumber data yaitu Array atau database. Pada tulisan kali ini akan menggunakan Array Adapter karena data yang ditampilkan sumbernya dari Array.

Sekarang, buatlah file XML baru pada direktori res/layout proyek yang dibuat dan berikan nama activity_listview.xml. Ini bertujuan untuk memberikan style pada data yang akan ditampilkan. Kemudian berikan TextView pada file tersebut seperti sintak di bawah ini.

<?xml version=”1.0″ encoding=”utf-8″?>

<TextView xmlns:android=”http://schemas.android.com/apk/res/android”

android:id=”@+id/label”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:padding=”10dip”

android:textSize=”18dip”

android:textStyle=”bold” >

</TextView>

Setelah itu, sekarang kita akan memodifikasi MainActivity.java yang terletak pada direktori app/java/MainActivity.java. Silahkan tambahkan sintak seperti di bawah ini.

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

//data dalam bentuk array

String[] listArray={“ASP”,”C#”,”C++”,”HTML5″,”Javascript”,”Java”,”Objective-C”,”Perl”,”PHP”,”Python”,”Swift”,};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ArrayAdapter adapter = new ArrayAdapter(this,R.layout.activity_listview,listArray);

ListView listview =(ListView) findViewById(R.id.listView);

listview.setAdapter(adapter);

}

}

Silahkan ubah data dalam Array sesuai keinginan. Pada contoh ini data yang ditampilan adalah daftar dari bahasa pemrograman yang cukup populer. Silahkan lihat sintak dibawah ini.

String[] listArray={“ASP”,”C#”,”C++”,”HTML5″,”Javascript”,”Java”,”Objective-C”,”Perl”,”PHP”,”Python”,”Swift”};

Pada contoh ini kita akan menampilkan sebuah array string pda ListView, inisialisasi ArrayAdapter baru menggunakan konstruktor seperti di bawah ini.

 

ArrayAdapter adapter = new ArrayAdapter(this,R.layout.activity_listview,listArray);

Setelah adapter dibuat, selanjutnya kita akan memanggil adapter dengan setAdapter() pada objek ListView seperti sintak di bawah ini.

1 ListView listview =(ListView) findViewById(R.id.listView);

2 listview.setAdapter(adapter);

Kemudian jalankan proyek yang sudah dibuat pada emulator Android atau langsung di debug pada ponsel Android.

Date and Time

Android menyediakan kontrol bagi pengguna untuk memilih waktu atau memilih tanggal sebagai dialog siap pakai. Setiap pemetik menyediakan kontrol untuk memilih setiap bagian dari waktu (jam, menit, AM / PM) atau tanggal (bulan, hari, tahun). Menggunakan pemetik ini membantu memastikan bahwa pengguna Anda dapat memilih waktu atau tanggal yang valid, diformat dengan benar, dan disesuaikan dengan lokasi pengguna.

Sebaiknya Anda menggunakan DialogFragment untuk meng-host setiap waktu atau pemetik tanggal. DialogFragment mengelola siklus dialog untuk Anda dan memungkinkan Anda menampilkan pemetik dalam konfigurasi tata letak yang berbeda, seperti pada dialog dasar pada handset atau sebagai bagian tertanam dari tata letak pada layar besar.

Meskipun DialogFragment pertama kali ditambahkan ke platform di Android 3.0 (tingkat API 11), jika aplikasi Anda mendukung versi Android yang lebih tua dari 3,0-bahkan serendah Android 1.6-Anda dapat menggunakan kelas DialogFragment yang tersedia di perpustakaan pendukung untuk kompatibilitas ke belakang.

 

Buat project baru di Android Studio File New Project. Kemudian pilih Empty Activity dan melanjutkannya hingga selesai.

 

Tampilan untuk menampilkan Date Time Picker.
activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:orientation=”vertical”

android:padding=”16dp”>

<EditText

android:id=”@+id/txt_tgl”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:clickable=”true”

android:editable=”false”

android:focusable=”false”

android:hint=”Tanggal” />

<EditText

android:id=”@+id/txt_jam”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:clickable=”true”

android:editable=”false”

android:focusable=”false”

android:hint=”Jam” />

<Button

android:id=”@+id/btn_get_datetime”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:text=”Get Date Time” />

</LinearLayout>

Buka MainActivity.java dan tambahkan coding seperti dibawah ini untuk menampilkan dialog date time picker.
MainActivity.java

package com.dedykuncoro.datetimepicker;

 

import android.app.DatePickerDialog;

import android.app.TimePickerDialog;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.DatePicker;

import android.widget.EditText;

import android.widget.TimePicker;

import android.widget.Toast;

 

import java.text.SimpleDateFormat;

import java.util.Calendar;

import java.util.Locale;

 

public class MainActivity extends AppCompatActivity {

 

Calendar myCalendar;

DatePickerDialog.OnDateSetListener date;

EditText txt_tgl, txt_jam;

Button btn_get_datetime;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

 

txt_tgl = (EditText) findViewById(R.id.txt_tgl);

txt_jam = (EditText) findViewById(R.id.txt_jam);

btn_get_datetime = (Button) findViewById(R.id.btn_get_datetime);

 

myCalendar = Calendar.getInstance();

date = new DatePickerDialog.OnDateSetListener() {

@Override

public void onDateSet(DatePicker view, int year, int monthOfYear,

int dayOfMonth) {

// TODO Auto-generated method stub

myCalendar.set(Calendar.YEAR, year);

myCalendar.set(Calendar.MONTH, monthOfYear);

myCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);

updateLabel();

}

};

 

txt_tgl.setOnClickListener(new View.OnClickListener() {

 

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

new DatePickerDialog(MainActivity.this, date, myCalendar

.get(Calendar.YEAR), myCalendar.get(Calendar.MONTH),

myCalendar.get(Calendar.DAY_OF_MONTH)).show();

}

});

 

txt_jam.setOnClickListener(new View.OnClickListener() {

 

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Calendar mcurrentTime = Calendar.getInstance();

int hour = mcurrentTime.get(Calendar.HOUR_OF_DAY);

int minute = mcurrentTime.get(Calendar.MINUTE);

TimePickerDialog mTimePicker;

mTimePicker = new TimePickerDialog(MainActivity.this, new TimePickerDialog.OnTimeSetListener() {

 

@Override

public void onTimeSet(TimePicker timePicker, int selectedHour, int selectedMinute) {

txt_jam.setText(selectedHour + “:” + selectedMinute);

}

}, hour, minute, true);//Yes 24 hour time

mTimePicker.setTitle(“Select Time”);

mTimePicker.show();

 

}

});

 

btn_get_datetime.setOnClickListener(new View.OnClickListener() {

 

@Override

public void onClick(View view) {

Toast.makeText(MainActivity.this,

“Tanggal : ” + txt_tgl.getText().toString() + “\n” +

“Jam : ” + txt_jam.getText().toString()

, Toast.LENGTH_SHORT

).show();

}

});

}

 

private void updateLabel() {

String myFormat = “yyyy-MM-dd”;

SimpleDateFormat sdf = new SimpleDateFormat(myFormat, Locale.US);

txt_tgl.setText(sdf.format(myCalendar.getTime()));

}

 

}

 

 

 

Maps View  & WebView

Kali ini kita akan belajar tentang bagaimana cara menampilkan Android Maps pada Android menggunakan WebView, pada dasarnya hal ini sama seperti waktu kita menampilkan Google Maps pada HTML, kita hanya perlu membuat sebuah file HTML dengan Google Maps script di dalamnya dan kemudian menampilkan laman HTML tersebut.

WebView
– kelebihan : bisa mengatasi fragmentasi, mengatasi proksi
– kekurangan : kalian harus coding dua kali, coding Java untuk aplikasi Android, dan coding HTML + Javascripts untuk web-nya dan tampilan kadang tidak sesuai yang diinginkan

MapView
– kelebihan : tidak perlu repot2 mengatur HTML dan Java, cara resmi yang dianjurkan, dapat dimodifikasi
– kekurangan: tidak bisa mengakses peta di lingkungan berproksi

 

The HTML

Pertama-tama, buatlah file bernama maps.html dan letakkan pada folder assets di proyek Android anda. Dan kemudian isikan dengan kode berikut :

 

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>

<title>Insert title here</title>

 

<script type=”text/javascript”

src=”http://maps.googleapis.com/maps/api/js?sensor=false”>

</script>

<script type=”text/javascript”>

function initialize() {

 

var myOptions = {

center: new google.maps.LatLng(35.683183, 139.732435),

zoom: 16,

mapTypeId: google.maps.MapTypeId.HYBRID

};

var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

 

var image = ‘university.png’;

 

var myLatLng = new google.maps.LatLng(35.683183, 139.732435);

var marker = new google.maps.Marker({

position: myLatLng,

map: map,

icon: image

});

 

var infowindow = new google.maps.InfoWindow({

content: “I’m coming! Sophia University!!”

});

 

google.maps.event.addListener(marker, ‘click’, function() {

infowindow.open(map,marker);

});

}

</script>

 

</head>

<body onload=”initialize()”>

<div  id=”map_canvas” style=”width:300px; height:600px”></div>

</body>

</html>

Untuk icon marker “university.png” bisa didownload di sini. Halaman HTML tersebut digunakan untuk menampung scripts yang berfungsi untuk menampilkan Google Maps, yang nantinya akan kita tampilkan lewat WebView. Selanjutnya,

 

WebView Layout

WebView layout ini, bisa dibilang sederhana. Fungsi dari layout WebView adalah untuk menampilkan HTML pada aplikasi android, webview juga bisa digunakan untuk browsing. Masuk ke res/layout/ dan pastekan kode berikut di main.xml.

 

<?xml  version=”1.0″  encoding=”utf-8″?>

<LinearLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:orientation=”vertical”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

>

<WebView

android:id=”@+id/web_view”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:layout_weight=”1.0″

/>

</LinearLayout>

 

WebView inilah yang berfungsi menjadi perantara antara HTML dan aplikasi Android kita.

 

 

 

Main Activity

Kemudian pada Main class Android, kita definisikan aktivitas sebagai berikut,
MapWebView

import android.app.Activity;

import android.os.Bundle;

import android.webkit.WebChromeClient;

import android.webkit.WebView;

public class MapWebViewActivity extends Activity {

/** Called when the activity is first created. */

private WebView webView;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

//Mengeset webView sebagai layout utama

webView = (WebView) findViewById(R.id.web_view);

//memanggil method openBrowser #youdontsay

openBrowser();

}

//karena ada method static yang diakses oleh method non-static (openBrowser)

@SuppressWarnings(“static-access”)

private void openBrowser()

{

//memanggil URL, /// berguna untuk menandakan bahwa file yang diakses

//sedangkan android_asset merefers ke folder assets yang ada di

//proyek androidmu

String url = “file:///android_asset/maps.html”;

//Menginstantiasi webchrome client baru, buat gaya-gayaan aja B)

WebChromeClient wcc = new WebChromeClient();

webView.setWebChromeClient(wcc);

//mengaktifkan javascript, kalo nggak aktif… TRY IT!

webView.getSettings().setJavaScriptEnabled(true);

//mengaktifkan built in zoom controls

webView.getSettings().setBuiltInZoomControls(true);

//bagian ini akan dijelaskan

webView.enablePlatformNotifications();

//meload URL

webView.loadUrl(url);

}

}

 

Pada barisan kode di atas, maaf kalo terlihat berantakan, soalnya saya males njelasin terpisah, jadi saya jelaskan sekalian di comment. Oke, di bagian ini :

webView.enablePlatformNotifications();

statics method enablePlatformNotifications() berfungsi untuk untuk mengaplikasikan setting-an yang telah diatur pada emulator, termasuk setting-an proksi. Jadi apabila kalian berada di lingkungan yang dilindungi oleh proksi, webview ini masih bisa mengakses internet, asal settingan proksinya telah diatur terlebih dahulu.

Kemudian, dokumentasi Android sendiri sudah mengkategorikan method enabledPlatformNotifications() sebagai method yang deprecated/obsolete. Sehingga sekarang notifications ter-enabled secara default. Namun, sebagai catatan, walapun begitu saya mencoba untuk menghilangkan penggunaan method ini dan menjalankannya di lingkungan ber-proksi, hasilnya aplikasi tidak menampilkan apa-apa.

Jika kalian mempunyai koneksi bebas hambatan, maka method tersebut tidak usah digunakan dalam kode.

Android Manifest

Terakhir, sekarang seperti biasa kita akan mengatur permission dan lain-lainnya pada file AndroidManifest.xml. Tambahkan dua baris kode berikut ini tepat sebelum tag.

 

<uses-permission android:name=”android.permission.INTERNET”/>

<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE”/>

 

Image View

ImageView adalah komponen dasar android yang tugasnya menampilkan gambar. Gambar di komponen imageview bisa diambil dari Assets atau dari Drawable.

Tutorial Image View
Dalam tutorial ini, kita akan membuat aplikasi sederhana yang mendemokan cara memakai ImageView. Aplikasinya adalah aplikasi yang terdiri dari 1 ImageView dan 2 buah tombol. Aplikasi ini membutuhkan 3 gambar yang saya beri nama kaoro.jpg, kenshin.jpg diletakan di folder drawable. File ketiga bernama sano.jpg berada di folder assets.

 

Pertama kali dibuka, maka akan muncul gambar Kaoro.jpg. Ini adalah gambar default. Setting kaoro langsung ditempel di file XML

Menampilkan image Lewat XML

source code

<ImageView

android:id=”@+id/imageView1″

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:layout_alignParentLeft=”true”

android:src=”@drawable/kaoro” />

Gambar yang bisa dipanggil lewat XML adalah gambar yang ada di folder drawable.

menampilkan image lewat Button Java

Nah, disini kita butuh dua fungsi yaitu getImageFromAssets() dan getImageFromDrawable(). Dari nama fungsi itu sudah cukup jelas fungsinya kan?

source code

// getImageFromassets

public void getImageFromAssets() {

try {

// get input stream

InputStream ims = getAssets().open(“sano.jpg”);

// load image as Drawable

 

Drawable d = Drawable.createFromStream(ims, null);

// set image to ImageView

imgview.setImageDrawable(d);

}

catch (IOException ex) {

return;

}

}

Kode getImageFromDrawable()

source code

//getimageFromDrawable

public void getImageFromDrawable(){

Resources res = getResources();

Drawable drawable = res.getDrawable(R.drawable.kenshin);

imgview.setImageDrawable(drawable);

}

Spinner

Spinner adalah salah satu widget yang berfungsi sebagai komponen User Interface (Antar Muka), yang dapat menampilkan daftar item dropdown. Jadi untuk menampilkan suatu daftar pilihan, kita harus mengklik item berbentuk widget Spinner telebih dahulu.

Mencoba menerapkan Widget Spinner Android :

  1. Pertama kita akan membuat widget Spinner dan TextView yang kita masukan ke file layout activity_main.xml.

 

Copykan baris kode berikut file activity_main.xml.

 

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:orientation=”vertical”

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=”.MainActivity”>

 

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_marginBottom=”20dp”

android:text=”Contoh Spinner Android”

android:textSize=”24sp” />

 

<Spinner

android:id=”@+id/spinner”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:backgroundTint=”#d11f08″

android:entries=”@array/android_layout_arrays”

android:padding=”5dp” />

 

<TextView

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:gravity=”center|bottom”

android:text=”okedroid.com”

android:textColor=”#2ecc71″

android:textSize=”29sp” />

 

</LinearLayout>

 

 

 

 

 

 

 

 

 

 

 

 

  1. Kedua kita buat sebuah file java MainActivity.java

 

Copykan baris kode berikut file MainActivity.java

package com.okedroid.myapplication;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.AdapterView;

import android.widget.Spinner;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private Spinner spinner1;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

spinner1 = (Spinner) findViewById(R.id.spinner);

spinner1.setOnItemSelectedListener(new CustomOnItemSelectedListener());

}

public class CustomOnItemSelectedListener implements AdapterView.OnItemSelectedListener {

String firstItem = String.valueOf(spinner1.getSelectedItem());

public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {

if (firstItem.equals(String.valueOf(spinner1.getSelectedItem()))) {

// ToDo when first item is selected

} else {

Toast.makeText(parent.getContext(),

“Kamu memilih : ” + parent.getItemAtPosition(pos).toString(),

Toast.LENGTH_LONG).show();

}

}

@Override

public void onNothingSelected(AdapterView<?> arg) {

}

}

  1. Ketiga kita buat sebuah file resource yaituxml

Copykan baris kode berikut file resource string.xml

resources>

<string name=”app_name”>Contoh Spinner </string>

<string-array name=”android_layout_arrays”>

<item>Pilih Bahasa</item>

<item>Indonesia</item>

<item>English</item>

<item>Jepang</item>

<item>Germany</item>

<item>Belanda</item>

<item>Spanyol</item>

</string-array>

</resources>

Link PPT :Materi 5 PMO