EDIT LAYOUT ANDROID DENGAN ECLIPSE
Pada part 2 kali ini, setelah selesai membuat project, tahap selanjutnya adalah proses editing tampilan aplikasi yang akan keluar nantinya. Jika anda belum mengikuti tutorial part 1 anda bisa menuju link berikut.
Untuk melihat tampilan aplikasi, anda bisa membuka file activity_main.xml yang terletak di folder res > layout. Berikut contoh tampilan default.
Untuk melihat tampilan aplikasi, anda bisa membuka file activity_main.xml yang terletak di folder res > layout. Berikut contoh tampilan default.
EDIT DAN MENAMBAHKAN TEXT
Semua text pada android disimpan pada strings.xml yang terletak di folder res > values. Untuk merubah text pada android, anda bisa merubah nilai string-nya. Contoh disini saya akan merubah text "Hello world!" menjadi "Welcome to My World".
Buka strings.xml, ubah:
Secara otomatis akan membuat text dengan id textView2.
Untuk memperbesar ukuran font gunakan android:textSize="Xsp" dengan X sebagai nilai dan sp sebagai satuannya. Contoh isi nilai textView2 di strings.xml:
<string name="hello_world">Hello world!</string>menjadi:
<string name="hello_world">Welcome to My World</string>Anda juga bisa menambahkan string dengan pola yang sama. Berikut hasil akhir isi dari strings.xml milik saya yang akan digunakan untuk tahapan selanjutnya:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">BAMIONIC</string>
<string name="hello_world">Welcome to My World</string>
<string name="font_1">Font Normal dan Tebal</string>
<string name="font_2">Font Serif dan Miring</string>
<string name="font_3">Font Monospace Tebal dan Miring</string>
<string name="button1">Tampilkan TOAST</string>
<string name="action_settings">Settings</string>
</resources>
Untuk menambahkan text ke dalam aplikasi anda bisa menggunakan TextView Palette dengan menggeser dan menaruhnya ke dalam layout.
Untuk memperbesar ukuran font gunakan android:textSize="Xsp" dengan X sebagai nilai dan sp sebagai satuannya. Contoh isi nilai textView2 di strings.xml:
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:textSize="30sp"
android:textStyle="bold"
android:text="@string/font_1" />
Hasil:
Untuk merubah font anda bisa menggunakan android:fontFamily="value". Contoh dari value yang tersedia yaitu Serif dan Monospace.
Untuk mengubah efek text gunakan android:textStyle="value". Value disini bisa berupa bold untuk cetak tebal dan italic untuk cetak miring, bisa juga keduanya bold|italic untuk cetak tebal dan miring.
Mari kita buat 2 textView lagi dengan font dan efek yang berbeda. Contoh:
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:textSize="30sp"
android:textStyle="italic"
android:fontFamily="serif"
android:text="@string/font_2" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:textSize="30sp"
android:textStyle="bold|italic"
android:gravity="center"
android:fontFamily="monospace"
android:text="@string/font_3" />
Hasil:
Anda juga bisa merubah warna text dengan menggunakan android:textColor="#hex". #hex adalah nilai hexadesimal dari sebuah warna. Anda bisa menuju link berikut untuk memilih warna dan melihat nilai hexa-nya dan salin nilai pada #hex. Contoh merubah warna dari 3 text yang telah kita buat sebelumnya:
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="@string/font_1"
android:textColor="#35EB3F"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:fontFamily="serif"
android:text="@string/font_2"
android:textColor="#EFCF1B"
android:textSize="30sp"
android:textStyle="italic" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:fontFamily="monospace"
android:gravity="center"
android:text="@string/font_3"
android:textColor="#3371ED"
android:textSize="30sp"
android:textStyle="bold|italic" />
Hasil:
MEMASUKAN GAMBAR
Tahapan selanjutnya yaitu memberi atau memasukan gambar kedalam project dan menampilkannya di layout aplikasi.
Pertama buat folder khusus gambar dengan nama drawable di dalam folder res dengan cara:
- Klik kanan pada folder res
- Arahkan ke New dan klik Folder
- Beri nama folder drawable
- Kemudian klik Finish
*Nama file tidak boleh mengandung spasi
Contoh:
Untuk menampilkan gambar kedalam layout gunakan ImageView yang ada di Palette. Drag ImageView ke dalam layout kemudian pilih nama file gambar yang ingin ditampilkan. Klik OK dan gambar anda akan muncul di layout.
Hasil:
MEMBUAT BUTTON UNTUK MENAMPILKAN TOAST
Toast memberikan masukan singkat tentang operasi dalam pop-up kecil. Pop-up ini hanya memenuhi ruang yang diperlukan untuk pesan dan aktivitas saat ini tetap terlihat dan interaktif. Toast menghilang otomatis setelah waktu tunggu.
Buat button terlebih dahulu dengan drag Button dari Palette ke dalam layout. Kemudian edit button di activity_main.xml menjadi:
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="@string/button1" />
Ingat id button yang akan digunakan disini (dalam hal ini id yang digunakan button1), nantinya akan menjadi faktor untuk coding selanjutnya.
Hasil:
Sekarang buka main_activity.java yang terletak di src > nama_paket. Isikan dengan coding berikut:
Anda bisa jalankan aplikasi di emulator dengan cara klik kanan pada project kemudian Run As > 1 Android Application
Maka hasilnya akan seperti ini:
Sampai disini panduan kali ini, semoga bertemu lagi di artikel selanjutnya.
Terima Kasih...
Hasil:
package com.bamcorp.bamionic;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button tombol = (Button) findViewById(R.id.button1);
tombol.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Contoh TOAST Pop Up",Toast.LENGTH_LONG).show();
}
});
}
@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);
}
}
Sesuaikan "package com.bamcorp.bamionic;" dengan nama paket milik anda.Anda bisa jalankan aplikasi di emulator dengan cara klik kanan pada project kemudian Run As > 1 Android Application
Maka hasilnya akan seperti ini:
Terima Kasih...
