Lecture Notes 15.09.2014

Lecture Notes 15.09.2014
LinearLayout
1. Hapus layout pada file xml
2. Drag drop LinearLayout (Vertical)
3. Drag drop button 3x
4. Lihat code di layout xml, jelaskan ttg id
5. Buat strings.xml dari folder values: Name: click_me dan Value: Click Me!
6. Tambahkan @string/click_me di code layout xml untuk semua button
7. Dari GUI Properties ubah orientation ke horizontal
8. Lihat layout xml dan undo lagi orientation ke vertical
9. Drag drop LinearLayout (Horizontal) dibawah button
10. Drag drop 3 button ke LinearLayout (Horizontal)
11. Copy LinearLayout yang sudah center_horizontal dan untuk LinearLayout lain dibawahnya
12. Ikuti <!—step pertama -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_margin="10dp" > <!—STEP PERTAMA dan jalankan emulator -->
<!-- pertama set 10dp dan run emulator, terus ke 30dp cek emulator dan kembalikan lagi ke 10 dp --> <!—STEP KEDUA -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" > <!—STEP KETIGA to center things on the screen -->
<Button
android:id="@+id/Button04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/click_me" />
<Button
android:id="@+id/Button05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/click_me" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/click_me" />
<Button
android:id="@+id/Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/click_me" />
<Button
android:id="@+id/Button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/click_me" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/click_me" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/click_me" />
</LinearLayout>
</LinearLayout>
RelativeLayout
1.
2.
3.
4.
Jelaskan tentang @dimen, ctrl + click @dimen yang ada
Drag drop text field, jangan khawatir letaknya dimana
Drag drop button
Ikutin step xml di bawah
<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="id.ac.unsyiah.relativelayout.MainActivity" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1" <!— STEP KETIGA, cek GUI -->
android:text="Nama" /> //STEP KEDELAPAN
<EditText
android:id="@+id/editText1"
android:layout_width="fill_parent" <-- STEP KEEMPAT, cek GUI -->
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1" <!— STEP KELIMA -->
android:layout_toLeftOf="@+id/button1" //STEP KEENAM
android:layout_toRightOf="@+id/textView1" //STEP KETUJUH, cek GUI
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" <!— STEP PERTAMA, cek GUI -->
android:layout_alignParentRight="true" <!— STEP KEDUA, cek GUI -->
android:layout_marginTop="50dp" <!-- terakhir aja -->
android:text="OK" /> STEP KESEMBILAN, tes di emulator
</RelativeLayout>
LayoutCode
1. Berikan id pada linear layout
2. Ke MainActivity.java
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="10dp"
android:orientation="vertical"
android:id="@+id/layout"> STEP PERTAMA hanya nambah ini aja
</LinearLayout>
package id.ac.unsyiah.layoutcode;
import
import
import
import
import
import
android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.widget.Button;
android.widget.LinearLayout;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//LinearLayout layout = findViewById(R.id.layout); //STEP PERTAMA
//shortcut casting = ctrl + 1
LinearLayout layout = (LinearLayout) findViewById(R.id.layout); SETELAH CASTING
Button tombol = new Button(this); //STEP KEDUA
tombol.setText(R.string.click_me); //STEP KETIGA
layout.addView(tombol); //STEP KEEMPAT dan jalankan emulator
/*for (int i = 0; i < 3; i++) { //STEP KELIMA, copy paste button, jalankan emulator
Button tombol = new Button(this);
tombol.setText(R.string.click_me);
}
}*/
layout.addView(tombol);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
GambarDemo
1. Jalankan dulu program yang sudah ada kemudian Import project GambarDemo.zip
2. Lihat folder values strings.xml, sudah di add dua string
3. Lihat folder drawable-xhdpi, sudah di add gambar lab_terpadu.jpg
4. Lihat file layout xml
5. Ctrl+click @dimens
6. Drag drop Large Text, lihat code xml
7. Ctrl+click textAppearance
8. Drag drop ImageView dari Images & Media, pilih lab_terpadu
9. Drag dop TextView normal dari Form Widgets
10. Lihat layout xml
11. Ubah android:text pada tag TextView yang BESAR ke @string/jif
12. Ubah android:text TextView yang kecil ke @string/keterangan
13. Lihat GUI
14. Tambahkan android:layout_marginBottom="20dp" untuk TextView yang BESAR dibawah
TextAppearance
15. Copy paste marginBottom di atas dan paste ke ImageView
16. Lihat GUI
17. Tambahkan android:layout_marginLeft="30dp" dan android:layout_marginRight="30dp"
untuk TextView terakhir
18. Jalankan emulator
LogCat
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Cara menampilkan LogCat pada eclipse, Show View LogCat
Jalankan emulator
Lihat logcat, penjelasan kolom tag AndroidRuntme, dalvikvm dll
Kalau ada fatal error bisa dilihat di logcat
Buka ActivityMain.java
Crash karena posisi index tidak ada di array list get(0)
Buka dan view logcat
Lihat error yang warna merah
Jangan lupa clear logcat sebelum run emulator
Hover semua "MainActivity", right click -> refactor -> Extract Constant
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//
//
ArrayList<String> values = new ArrayList<String>(); //STEP PERTAMA
String value = values.get(0);
}
Log.d("MainActivity", "Activity start!"); //STEP KEDUA
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
Log.d("MainActivity", "Option Menu start!"); //STEP KETIGA
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
ToastDemo
1. Di MainActivity:
Toast pesan = Toast.makeText(this, "Activity started!", Toast.LENGTH_LONG);
pesan.show();
2. Jalankan Emulator
3. Toast muncul secara otomatis
4. Untuk melihat pesan toast lagi, click tombol back dan ke App list, pilih nama aplikasi
5. Toast juga bisa digunakan untuk user event, misalnya apa yang terjadi jika user click tombol tertentu
6. Click setting, belum muncul apa2
7. Didalam method onOptionsItemSelected tambahkan statement toast berikut:
Toast.makeText(this, "Menu Selected!", Toast.LENGTH_LONG).show();
BreakpointDemo
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
Jelaskan tentang loop di MainActivity
Jalankan emulator
Kembali ke eclipse dan pilih LogCat
Clear LogCat sebelum menjalankan program
Pilih setting option dan lihat LogCat
Buat breakpoint pada baris Log.d("MainActivity", msg2); dengan cara double click
Harus dalam mode breakpoint
Buka jendala emulator dan editor secara bersamaan
Pilih Run->Debug atau click debug pada toolbar
Pilih setting
Jelaskan tentang prespective debug .... Variables, Breakpoints, Expression
Hover cursor di breakpoint
Click step over (F6), hover lagi cursor Log.d
Atau bisa menggunakan Watch view, caranya click block variabel msg, click kanan dan pilih Watch. Dan akan
terbuka Expression view
Click tombol resume (F8), akan terlihat iterasi 3
Kalau breakpoint sudah selesai, bisa dihilangkan dengan double click breakpoint yang ada disebelah line number
ATAU ke breakpoint view, check breakpoint dan dan click tombol X remove button
Click variabel view untuk melihat variabel scoupe
Untuk melihat apa yang terjadi line by line ketika program di eksekusi
NewActivityDemo
1. Buka layout xml, sudah ditambahkan sebuah button
2. Jalankan emulator
3. Ke eclipse dan buat kelas activity baru
4. Click kanan package dan pilih New->Class
5. Set nama kelas DetailActivity, semua kelas activity harus extends kelas android Activity
6. Pada super class click browse, ketik Activity, pilih kelas Activity
7. Harus register kelas activity tersebut pada file Manifest
8. Buka file AndroidManifest.xml
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
Perhatikan bahwah kelas main activity sudah didaftar pada manifest
Ketik <activity /> karena tidak ada child element, boleh diakhir dengan empty tag slash
Ketik name ctrl+click android:name
Boleh pake .DetailActivity karena berada pada package utama atau hanya memiliki sebuah package. Tapi kalau
diluar package utama harus ditulis dengan diawali nama package dan dilanjutkan dengan nama kelas.
Buat layout untuk activity baru caranya:
Click kanan folder layout->New->Android XML File
Karena di click kanan pada folder layout maka eclipse otomatis membaca pada Resource Type sebagai layout
Nama file layout harus diawali dengan huruf kecil
Click GUI
Drag drop text view
Set properti pada file xml
Ubah android:text ke Activity Kedua
Tambah textSize=”20sp”
Pada tag linear layout tambahkan gravitiy=”center_horizontal” dan paddingTop=”20dp”
Sekarang hubungkan kelas DetailActivity dengan layout yang telah dibuat
Buka kelas DetailActivity
Ketik oncreate lalu ctrl+space
Ketik dibawah super.onCreate(savedInstanceState):
setcon ctrl+space dan akan muncul setContentView(R.layout.activity_detail)
Ke layout xml activity_main
Tambahkan pada tag Button di bawah android:text:
android:onClick=”gotoActivity” dan tutup file layout xml
Jalankan emulator, coba click tombol, belum bisa karena belum dibuat Intent unt menghubungkan ke activity
kedua
Pada kelas MainActivity buat method baru
Hapus method onOptionsItemSelected
Ketik method berikut:
public void gotoActivity(View v){
Intent intent = new Intent(this, DetailActivity.class);
startActivity(intent);
}
Jalankan emulator
Jika tombol back ditekan makan view activity baru akan dihapus dari memory
Sambungan untuk demo method finish() atau tombol back pada menu icon
33. Pada kelas DetailActivity ketik method berikut:
getActionBar().setDisplayHomeAsUpEnabled(true);
34. Kalau error, ubah ke API 11 atau honeycomb pada file manifest
35. Jalankan emulator dan coba click launcher button, harusnya tidak bisa
36. Click home button pada emulator untuk menutup aplikasi
37. Buat method berikut:
setop ctrl+space
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
finish();
}
//item.getItemId akan mengembalikan id yang kita pilih dan akan dibandingkan dengan id.home
// id diatas di-generate oleh framework Android
return super.onOptionsItemSelected(item);
}
38. Cara ini sering dilakukan pada aplikasi terbaru terutama aplikasi yang telah menggunakan Android 4. Juga sering
ditemui pada aplikasi android di Google play atau Amazon store
Tugas harus di archive. Tunjukkan cara archive project menggunakan eclipse.