Teknik Informatika 3A 2014
Aplikasi Android create by rival 1
Nama : Rival Fahlefy
NIM : 9912201093
Kelas : 3A
Tugas 1
MEMBUAT APLIKASI CUACA DI ANDROID
Banyak aplikasi cuaca di Google Play yang sudah terkenal dan banyak yang
menggunakan untuk mengetahui keadaan cuaca, namun alangkah lebih baik jika kita bisa
membangun aplikasi cuaca kita sendiri ???
Nah, di dalam tutorial ini, saya akan menunjukkan bagaimana cara Membuat Aplikasi
Cuaca yang sederhana. Aplikasi ini memiliki antarmuka pengguna yang sederhana dan
menampilkan kondisi cuaca saat ini. Oke,, Mari kita mulai.
1. PERSIAPAN
Sebelum memulai, periksa terlebih dahulu komputer anda dan harus memiliki hal – hal
berikut :
Eclipse ADT Bundel : dapat didownload di website Android Developer.
OpenWeatherMap API Key : dapat dengan mendaftar di website OpenWeatherMap.
Icon : saya sarankan untuk men-download font icon cuaca yang dibuat oleh Erik
Flowers. Silahkan download di link TTF, karena file tersebut akan mengatur font untuk
membuat berbagai icon tergantung pada kondisi cuaca.
2. MEMBUAT PROYEK BARU
Saya beri nama aplikasi ini SimpleWeather, dengan nama unik paket yaitu
com.example.simpleweather, dengan set minimum SDK yang diperlukan untuk Android
saya pilih Android 4.0, dan menetapkan target SDK yaitu Android 4.4, sedangkan untuk
compile saya mengguanakan Android 4.0.3 dengan tema Holo Light. Disini saya
menggunakan HP sebagai Emulator yaitu Android 4.0.4.
Teknik Informatika 3A 2014
Aplikasi Android create by rival 2
Untuk Icon pada tampilan di Android saya menggunakan Icon Weather.png yang saya
download di Internet yang telah saya simpan di eclipse\image.
Untuk Create Activity pilih Blank Activity seperti ditunjukkan gambar di bawah ini.
Saya beri nama Activity ini WeatherActivity, dengan layout activity yaitu
activity_weather.xml sebagai tempat pengaturan Tata Letak Activity seperti gambar berikut :
Teknik Informatika 3A 2014
Aplikasi Android create by rival 3
3. TAMBAHKAN CUSTOM FONT
Copy weathericons-biasa-webfont.ttf yang sudah di download tadi ke direktori
proyek yaitu di Folder assets/fonts dan rename menjadi weather.ttf seperti gambar berikut :
4. EDIT MANIFEST
Karena Aplikasi ini membutuhkan akses Internet untuk menjalankannya maka harus di
tambahkan android.permission.INTERNET.
<uses-permission android:name="android.permission.INTERNET"/>
Untuk menjaga tutorial ini sederhana, saya hanya mendukung modus Potret. Maka
tambahkan activity di Manifest seperti berikut :
<activity android:name="com.example.simpleweather.WeatherActivity" android:label="@string/app_name" android:screenOrientation="portrait" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
Teknik Informatika 3A 2014
Aplikasi Android create by rival 4
5. EDIT ACTIVITY LAYOUT
Tidak banyak yang berubah pada activity_weather.xml. Karena sudah memiliki
FrameLayout. Cukup dengan menambahkan properti untuk mengubah warna background
saja, saya tambahkan #FF9900 untuk warna Orange.
<FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FF9900" tools:context="com.example.simpleweather.WeatherActivity" tools:ignore="MergeRootFrame" />
6. EDIT FRAGMENT LAYOUT
Untuk mengedit fragment_weather.xml terlebih dahulu buat Activity Baru dengan
nama FragmentWeather. Kemudian tambahkan 5 Tag TextView untuk menampilkan
informasi berikut :
Kota dan Negara
Suhu saat ini
Icon untuk menampilkan kondisi cuaca saat ini
Timestamp memberitahu pengguna ketika informasi cuaca terakhir diperbarui
Informasi lebih lanjut tentang cuaca saat ini, seperti deskripsi dan kelembaban
Saya menggunakan RelativeLayout untuk mengatur pandangan teks, dan textSize
untuk menyesuaikan dengan perangkat yang akan digunakan.
<RelativeLayout 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: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="com.example.simpleweather.WeatherActivity$PlaceholderFragment">
<TextView android:id="@+id/city_field" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/updated_field" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/city_field" android:layout_centerHorizontal="true" android:textAppearance="?android:attr/textAppearanceMedium" android:textSize="13sp" /> <TextView android:id="@+id/weather_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:textAppearance="?android:attr/textAppearanceLarge" android:textSize="70sp" />
Teknik Informatika 3A 2014
Aplikasi Android create by rival 5
<TextView android:id="@+id/current_temperature_field" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:textAppearance="?android:attr/textAppearanceLarge" android:textSize="40sp" /> <TextView android:id="@+id/details_field" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/weather_icon" android:layout_centerHorizontal="true" android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
7. EDIT STRINGS.XML
File ini berisi string yang digunakan dalam aplikasi ini serta kode karakter Unicode
yang akan digunakan untuk membuat icon cuaca. Aplikasi ini mampu menampilkan 8
(delapan) jenis kondisi cuaca. Untuk itu tambahkan pada values/strings.xml seperti berikut :
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Simple Weather</string> <string name="change_city">Change city</string> <!-- Put your own APP ID here --> <string name="open_weather_maps_app_id">11111</string> <string name="weather_sunny"></string> <string name="weather_clear_night"></string> <string name="weather_foggy"></string> <string name="weather_cloudy"></string> <string name="weather_rainy"></string> <string name="weather_snowy"></string> <string name="weather_thunder"></string> <string name="weather_drizzle"></string> <string name="place_not_found">Sorry, no weather data found.</string> </resources>
8. TAMBAHKAN MENU ITEM
Agar pengguna dapat memilih kota cuaca yang mereka ingin lihat maka edit dan
tambahkan item pada menu/weather.xml seperti berikut :
<menu 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" tools:context="com.example.simpleweather.WeatherActivity" > <item android:id="@+id/change_city" android:orderInCategory="1" android:showAsAction="never" android:title="@string/change_city"/> </menu>
Nah, Sekarang semua file XML siap dipakai, selanjutnya saya akan memulai pada
query OpenWeatherMap API untuk mengambil data cuaca.
Teknik Informatika 3A 2014
Aplikasi Android create by rival 6
9. MENGAMBIL DATA OPENWEATHERMAP
Saya bisa mendapatkan rincian cuaca saat ini pada kota manapun dengan format JSON
pada OpenWeatherMap API.
Sebagai contoh, untuk mendapatkan informasi cuaca saat ini untuk daerah Banyuwangi,
yaitu menggunakan sistem metrik, saya mengirimkan sebuah permintaan ke alamat berikut :
http://api.openweathermap.org/data/2.5/weather?q=Banyuwangi&units=metric
Setelah itu buat kelas Java baru dan diberi nama RemoteFetch.java. Kelas ini yang
bertanggung jawab untuk pengambilan data cuaca dari OpenWeatherMap API dengan
menambahkan alamat tadi ke dalam kelas RemoteFetch.java.
Saya menggunakan HttpURLConnection untuk membuat permintaan.
OpenWeatherMap API yang ditentukan dalam metode setRequestProperty.
Kemudian saya juga menggunakan BufferedReader untuk membaca respon API ke
StringBuffer. Ketika sudah memiliki respon yang lengkap, maka dapat berubah menjadi
sebuah objek yaitu JSONObject. Maka Kelas RemoteFetch.java akan seperti berikut :
package com.example.simpleweather; import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import org.json.JSONObject; import android.content.Context; import android.support.v4.app.FragmentActivity; public class RemoteFetch { private static final String OPEN_WEATHER_MAP_API = "http://api.openweathermap.org/data/2.5/weather?q=Banyuwangi&units=metric"; public static JSONObject getJSON(Context context, String city){ try { URL url = new URL(String.format(OPEN_WEATHER_MAP_API, city)); HttpURLConnection connection = (HttpURLConnection)url.openConnection(); connection.addRequestProperty("x-api-key", context.getString(R.string.open_weather_maps_app_id)); BufferedReader reader = new BufferedReader( new InputStreamReader(connection.getInputStream())); StringBuffer json = new StringBuffer(1024); String tmp=""; while((tmp=reader.readLine())!=null) json.append(tmp).append("\n"); reader.close(); JSONObject data = new JSONObject(json.toString());
// This value will be 404 if the request was not
// successful
if(data.getInt("cod") != 200){ return null; } return data; }catch(Exception e){ return null; } } }
Teknik Informatika 3A 2014
Aplikasi Android create by rival 7
10. SIMPAN KOTA SEBAGAI PREFERENSI
Aplikasi ini hanya menempilkan cuaca pada kota yang dituju dengan
OpenWeatherMap API yang telah disimpan di RemoteFetch.java, jika ingin melihat cuaca
kota lain maka dapat mengubah OpenWeatherMap API.
Untuk mempermudah hal tersebut maka ditambah kelas Java baru yaitu
CityPreference.java. Untuk menyimpan dan mengambil nama kota yang diinginkan, dengan
membuat dua metode yaitu setCity dan getCity. Agar lebih sempurna tambahkan Objek
SharedPreferences dan inisialisasikn dalam konstruktor. Isikan Kelas CityPreference.java
seperti berikut :
package com.example.simpleweather; import android.app.Activity; import android.content.SharedPreferences; public class CityPreference { SharedPreferences prefs; public CityPreference(Activity activity){ prefs = activity.getPreferences(Activity.MODE_PRIVATE); }
// Banyuwangi sebagai kota target
String getCity(){ return prefs.getString("city", "Banyuwangi, ID"); }
void setCity(String city){
prefs.edit().putString("city", city).commit(); } }
11. MEMBUAT FRAGMENT
Membuat kelas Java baru dan beri nama WeatherFragment.java. Fragment ini
menggunakan fragment_weather.xml sebagai tata letak. Dengan menyatakan lima
TextView objek dan menginisialisasikan ke dalam metode onCreateView. Dan menyatakan
objek Typeface baru yang bernama weatherFont. Karena Objek TypeFace yang akan
mengarah ke font web yang telah didownload dan disimpan di dalam folder assets\fonts di
atas.
Disini saya akan membuat menggunakan Thread untuk mengambil data dari
OpenWeatherMap API. Saya tidak dapat memperbarui antarmuka pengguna dari backgroud
tersebut. Oleh karena itu saya memerlukan objek Handler, yang saya telah inisialisasi dalam
konstruktor pada kelas WeatherFragment.java seperti berikut:
package com.example.simpleweather; import java.text.DateFormat;
public class WeatherFragment extends Fragment { Typeface weatherFont; TextView cityField; TextView updatedField; TextView detailsField; TextView currentTemperatureField; TextView weatherIcon; Handler handler; public WeatherFragment(){ handler = new Handler(); }
Teknik Informatika 3A 2014
Aplikasi Android create by rival 8
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_weather, container, false); cityField = (TextView)rootView.findViewById(R.id.city_field); updatedField = (TextView)rootView.findViewById(R.id.updated_field); detailsField = (TextView)rootView.findViewById(R.id.details_field); currentTemperatureField = (TextView)rootView.findViewById(R.id.current_temperature_field); weatherIcon = (TextView)rootView.findViewById(R.id.weather_icon); weatherIcon.setTypeface(weatherFont);
return rootView; }
Kemudian inisialisasikan objek weatherFont dengan memanggil createFromAsset
pada kelas Typeface. Saya juga memanggil metode updateWeatherData di onCreate, seperti
berikut :
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); weatherFont = Typeface.createFromAsset(getActivity().getAssets(),
"fonts/weather.ttf"); updateWeatherData(new CityPreference(getActivity()).getCity()); }
Pada updateWeatherData, saya mulai buat thread baru dan memanggil getJSON di
kelas RemoteFetch. Hanya Thread yang dapat memperbarui antarmuka pengguna pada
aplikasi Android ini. Maka dari itu saya menggunakan metode handler's post seperti berikut:
private void updateWeatherData(final String city){ new Thread(){ public void run(){ final JSONObject json = RemoteFetch.getJSON(getActivity(), city); if(json == null){ handler.post(new Runnable(){ public void run(){ Toast.makeText(getActivity(), getActivity().getString(R.string.place_not_found), Toast.LENGTH_LONG).show(); } }); } else { handler.post(new Runnable(){ public void run(){ renderWeather(json); } }); }} }.start(); }
Pada metode renderWeather menggunakan data JSON untuk memperbarui objek
TextView. Weather akan merespon bahwa JSON adalah data array. Dalam tutorial ini, saya
hanya menggunakan elemen pertama dari array yaitu data cuaca, seperti berikut :
private void renderWeather(JSONObject json){ try { cityField.setText(json.getString("name").toUpperCase(Locale.US) +
Teknik Informatika 3A 2014
Aplikasi Android create by rival 9
", " + json.getJSONObject("sys").getString("country")); JSONObject details = json.getJSONArray("weather").getJSONObject(0);
JSONObject main = json.getJSONObject("main"); detailsField.setText( details.getString("description").toUpperCase(Locale.US) + "\n" + "Humidity: " + main.getString("humidity") + "%" + "\n" + "Pressure: " + main.getString("pressure") + "hPa"); currentTemperatureField.setText( String.format("%.2f", main.getDouble("temp"))+ " ℃"); DateFormat df = DateFormat.getDateTimeInstance(); String updatedOn = df.format(new Date(json.getLong("dt")*1000)); updatedField.setText("Last update: " + updatedOn); setWeatherIcon(details.getInt("id"), json.getJSONObject("sys").getLong("sunrise") * 1000, json.getJSONObject("sys").getLong("sunset") * 1000); }catch(Exception e){
Log.e("SimpleWeather", "One or more fields not found in the JSON data");
} }
Pada akhir metode renderWeather, saya memanggil setWeatherIcon dengan id cuaca
saat ini serta waktu matahari terbit dan terbenam. Dengan cara menetapkan icon cuaca yang
sedikit rumit, karena OpenWeatherMap API mendukung kondisi cuaca menggunakan font
web. Untungnya, id cuaca mengikuti pola yang ada, yang dapat dibaca lebih lanjut di website
OpenWeatherMap. Berikut bagaimana peta untuk icon id cuaca :
Kode cuaca di range 200 yaitu petir, maka digunakan R.string.weather_thunder
Kode cuaca di range 300 yaitu hujan gerimis, maka digunakan R.string.weather_drizzle
Kode cuaca di range 500 yaitu hujan, maka digunakan R.string.weather_rain.
dan seterusnya ...
Maka tambahkan metode setWeatherIcon seperti berikut :
private void setWeatherIcon(int actualId, long sunrise, long sunset){ int id = actualId / 100; String icon = ""; if(actualId == 800){ long currentTime = new Date().getTime(); if(currentTime>=sunrise && currentTime<sunset) { icon = getActivity().getString(R.string.weather_sunny); } else { icon = getActivity().getString(R.string.weather_clear_night); } } else { switch(id) { case 2 : icon = getActivity().getString(R.string.weather_thunder); break; case 3 : icon = getActivity().getString(R.string.weather_drizzle); break; case 7 : icon = getActivity().getString(R.string.weather_foggy); break; case 8 : icon = getActivity().getString(R.string.weather_cloudy); break; case 6 : icon = getActivity().getString(R.string.weather_snowy); break; case 5 : icon = getActivity().getString(R.string.weather_rainy); break; } } weatherIcon.setText(icon); }
Teknik Informatika 3A 2014
Aplikasi Android create by rival 10
Terakhir, tambahkan metode changeCity untuk memperbarui kota seperti berikut :
public void changeCity(String city){ updateWeatherData(city); } }
Jika terjadi error, maka tekan Ctrl+Shift+O atau cek import yang tersedia, sesuaikan dengan
yang di bawah ini :
import java.text.DateFormat; import java.util.Date; import java.util.Locale; import org.json.JSONObject; import android.app.Fragment; import android.graphics.Typeface; import android.os.Bundle; import android.os.Handler; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import android.widget.Toast;
12. EDIT ACTIVITY
Selama mengatur proyek, Eclipse diisi kelas java bernama WeatherActivity.java, ubah
metode onCreate seperti berikut :
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_weather); if (savedInstanceState == null) { getFragmentManager().beginTransaction() .add(R.id.container, new WeatherFragment()) .commit(); } }
Selanjutnya edit metode onOptionsItemSelected untuk memanggil metode
showInputDialog.
Tambahkan metode showInputDialog, saya menggunakan AlertDialog.Builder untuk
membuat sebuah Dialog untuk memasukkan nama kota. Informasi ini diteruskan ke metode
changeCity, yang menyimpan nama kota menggunakan kelas CityPreference, serta
tamabahkan onClick, maka tampilan metode – metode akan seperti berikut:
@Override public boolean onOptionsItemSelected(MenuItem item) { if(item.getItemId() == R.id.change_city){ showInputDialog(); } return false; } private void showInputDialog(){ AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("Change city"); final EditText input = new EditText(this); input.setInputType(InputType.TYPE_CLASS_TEXT); builder.setView(input); builder.setPositiveButton("Go", new DialogInterface.OnClickListener() {
Teknik Informatika 3A 2014
Aplikasi Android create by rival 11
@Override public void onClick(DialogInterface dialog, int which) { changeCity(input.getText().toString()); } }); builder.show(); } public void changeCity(String city){ WeatherFragment wf = (WeatherFragment)getFragmentManager()
.findFragmentById(R.id.container); wf.changeCity(city); new CityPreference(this).setCity(city); } }
Jika terjadi error maka coba cek import yang ada, coba tambahkan import berikut :
import android.app.AlertDialog; import android.content.DialogInterface; import android.os.Bundle; import android.text.InputType; import android.view.Menu; import android.view.MenuItem; import android.widget.EditText;
Aplikasi cuaca sudah siap. Untuk pengujian silahkan run di Emulator atau langsung
coba di perangkat Android, maka hasilnya akan seperti berikut :
Siang Malam
Teknik Informatika 3A 2014
Aplikasi Android create by rival 12
Tugas 2
MEMBANGUN APLIKASI QUIZ INTERAKTIF
Aplikasi Quiz Interaktif ini memberikan pertanyaan dengan 4 jawaban yang
diimplementasikan sebagai ImageButtons, yaitu Benar dan Salah serta terdapat versi
aplikasinya.
1. MULAI
Sebelum memulai, desain terlebih dahulu Background dan ButtonImage di Adobe
Illustrator pada tutorial "How to Create a Pub Chalkboard UI in Adobe Illustrator".
Setelah membuat desain buat sebuah proyek Android dengan nama Aplikasi Quiz
dengan pengaturan seperti biasa kemudian hapus TextView Hello World yang ada di
res/layout/activity_main.xml. Disini saya masih menggunakan Android versi 4.0.4 sebagai
Emulator.
2. RELATIFLAYOUT
Pada activity_main.xml terdapat RelativeLayout sebagai tata letak untuk mengatur
elemen dalam aplikasi, biasanya RelativeLayout seperti berikut :
<RelativeLayout 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:background="@drawable/background" tools:context="com.example.aplikasiquiz.MainActivity" >
</RelativeLayout>
3. MERANCANG BACKGROUND IMAGE
Untuk mempercantik aplikasi ini maka copy background yang telah didesain ke folder
res yaitu folder :
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
Tambahkan background image ke RelativeLayout menggunakan perintah
android:background seperti berikut :
android:background="@drawable/background"
Maka Emulator akan terlihat seperti berikut :
Teknik Informatika 3A 2014
Aplikasi Android create by rival 13
4. MEMBUAT IMAGE BUTTON
Untuk membuat ImageButton tambahkan Button yang sudah di desain ke folder res lagi,
seperti menambahkan background di atas yaitu gambar Button yang diperlukan untuk
Aplikasi sebagai ButtonImage, sehingga tampilan proyek akan sepert berikut :
Teknik Informatika 3A 2014
Aplikasi Android create by rival 14
ImageButtons dibuat menggunakan tag ImageButton diikuti oleh attribut tinggi dan
lebar, serta beberapa atribut pelengkapnya. Agar ImageButton dapat dikenali oleh Eclipse
maka digunakan perintah android:src.
Tambahkan ImageButton di activity_main.xml seperti berikut :
<ImageButton android:id="@+id/imageButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:src="@drawable/button2003" /> <ImageButton android:id="@+id/imageButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imageButton1" android:layout_centerHorizontal="true" android:src="@drawable/button2004" /> <ImageButton android:id="@+id/imageButton3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imageButton2" android:layout_centerHorizontal="true" android:src="@drawable/button2005" /> <ImageButton android:id="@+id/imageButton4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imageButton3" android:layout_centerHorizontal="true" android:src="@drawable/button2006" />
Maka tampilan akan seperti berikut :
Teknik Informatika 3A 2014
Aplikasi Android create by rival 15
Agar tidak terjadi kesalahan pada ImageButton maka tambahkan ContentDescription
pada masing – masing ImageButton yaitu :
android:contentDescription="@string/button2003" android:contentDescription="@string/button2004" android:contentDescription="@string/button2005" android:contentDescription="@string/button2006"
5. MERANCANG APLIKASI
Untuk menentukan beberapa sumber baru, maka dapat didefinisikan dalam file String
yang berada di folder res/values/strings.xml.
Tambahkan String berikut:
<string name="name">Text to display</string>
Tambahkan String untuk ContentDescription setiap ImageButton:
<string name="button2003">Answer 2003</string> <string name="button2004">Answer 2004</string> <string name="button2005">Answer 2005</string> <string name="button2006">Answer 2006</string>
6. MEMBUAT TEKS
Agar Aplikasi ini terus berkembang, maka ditambahlah sebuah versi yaitu Versi 1.0.
Yang bertujuan untuk memberitahukan Versi Aplikasi ini.
Tambahkan String berikut di file strings.xml untuk menentukan nomor versi saat ini:
<string name="Version">Version 1.0</string>
Tambahkan TextView pada activity_main.xml yaitu @string/Version. Untuk mengatur
text pada Versi dapat digunakan hal – hal berikut ini:
android: textcolor – untuk mengatur warna teks,
android: textSize – untuk mengatur ukuran teks,
android: textStyle – untuk mengatur miring atau tebal teks.
Berikut TextView yang digunakan pada aplikasi:
<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_marginLeft="26dp" android:paddingBottom="5dp" android:text="@string/Version" android:textColor="#f7f9f6" android:textSize="13dp"
android:textStyle="italic" />
Maka tampilan akan seperti dibawah ini :
Teknik Informatika 3A 2014
Aplikasi Android create by rival 16
Agar tampilan huruf lebih bagus dan mencegah terjadinya error, maka tambahkan Style
di dalam folder res/values/styles.xml seperti berikut :
<resources> <style name="VersionFont"> <item name="android:textColor">#f7f9f6</item> <item name="android:textSize">13dp</item> <item name="android:textStyle">italic</item> </style> </resources>
Setelah itu tambahkan VersionFont pada TextView untuk versi aplikasi yang terdapat
pada res/layout/activity_main.xml:
style="@style/VersionFont"
7. MEMBUAT APLIKASI INTERAKTIF
Agar dapat memilih jawaban benar atau salah dengan cara klik tombol maka di
tambahkan android:onClick untuk setiap ButtonImage, copy satu per satu dan tambahkan
ke file activity_main.xml seperti berikut:
android:onClick="onClick2003"
android:onClick="onClick2004"
android:onClick="onClick2005"
android:onClick="onClick2006"
Sekarang tambahkan metode onClick untuk memberitahu pertanyaan yang benar dan
salah, tambahkan onClick untuk semua ButtonImage yang terdapat di folder
src/com.example.aplikasiquiz/MainActivity.java seperti berikut:
Teknik Informatika 3A 2014
Aplikasi Android create by rival 17
public void onClick2003 (View view) { Toast.makeText(this, "Wrong! Try again",
Toast.LENGTH_SHORT).show(); } public void onClick2004 (View view) { Toast.makeText(this, "Wrong! Try again",
Toast.LENGTH_SHORT).show(); } public void onClick2005 (View view) { Toast.makeText(this, "Yess! Well done :)",
Toast.LENGTH_SHORT).show(); } public void onClick2006 (View view) { Toast.makeText(this, "Wrong! Try again",
Toast.LENGTH_SHORT).show(); } Aplikasi selesai, jalankan menggunakan Emulator. Maka tampilannya akan seperti
berikut :
Benar Salah
Top Related