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.

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:
<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.
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:
<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
Untuk memasukan file gambar kedalamnya anda bisa copy paste seperti biasa atau langsung drag file kedalam folder drawable. Kemudian pilih opsi Copy files.
*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:
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:
Sampai disini panduan kali ini, semoga bertemu lagi di artikel selanjutnya.

Terima Kasih...

Postingan populer dari blog ini

STRUKTUR NAVIGASI PADA WEBSITE

-
Gambar
Menurut Prihatna (2005:51) “Struktur navigasi adalah struktur atau alur suatu program yang merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan website”. Menentukan struktur navigasi merupakan halaman yang sebaiknya dilakukan sebelum membuat suatu website. Ada empat macam bentuk dasar dari struktur navigasi yang biasa digunakan dalam proses pembuatan website, yaitu: 1. Struktur Navigasi Linier Navigasi Linier Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut, yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya. (Prihatna, 2005:55) 2. Struktur Navigasi Non-Linier Navigasi Non-Linier Struktur navigasi Non-linier merupakan pengembangan dari struktur...
Baca selengkapnya

REVIEW JURNAL PENELITIAN KUALITATIF

-
Gambar
Judul Jurnal ADAPTASI SEKOLAH TERHADAP KEBIJAKAN PENDIDIKAN INKLUSIF Metode Penelitian Penelitian ini berangkat dari paradigma post-positivistik dengan pendekatan kualitatif, dan metode studi kasus. Pendekatan dan metode tersebut dipilih dengan pertimbangan, bahwa ia lebih membuka peluang untuk mendapatkan informasi yang mendalam tentang respon sekolah terhadap kebijakan inklusif studi kasus di kota Padang. Metode Pengumpulan Data Dalam melakukan pengumpulan data. Pertama dilakukan observasi. Langkah ini digunakan untuk mendapatan data tentang kebijakan-kebijakan yang dikeluarkan oleh pemerintah kota Padang terkait dengan pelaksanaan pendidikan Inklusi. Kedua, peneliti melakukan studi dokumentasi. Teknik ini dipakai dengan maksud untuk mendapatkan data tentang dokumen-dokumen dan persyaratan legalitas formal yang telah dihasilkan dalam rangka melaksanakan pendidikan inklusi. Selain itu, juga akan dilihat tugas/kewenangan pemerintah, sekolah, guru, orang tua dan masyarakat dalam mensuks...
Baca selengkapnya

MENGENAL TENTANG WEB

-
Gambar
1. World Wide Web (www) Menurut Yuhefizar (2008:159) "World Wide Web sering disingkat dengan www atau web adalah suatu metode untuk menampilkan informasi di internet, baik berupa teks, gambar, suara maupun video yang interaktif dan mempunyai kelebihan menghubungkan (link) satu dokumen dengan dokumen lainnya (hypertext) yang dapat diakses melalui sebuah browser". 2. Website Menurut Hidayat (2010:2) "Website atau situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait, yang masing-masing dihubungkan dengan jaringan-jaringan halaman". 3. Web Page (Halaman Web) Menurut Gunawan (2010:2) "Web page adalah dokumen yang ditulis dengan fotmat HTML (Hyper Text Markup Language) , yang hampir selalu bisa diakses melalui HTTP , yaitu protokol ya...
Baca selengkapnya