- Beranda
- Komunitas
- Tech
- Programmer Forum
TUTORIAL PEMROGRAMAN ANDROID ECLIPSE PART 2 (DESAIN GRAFIS TAMPILAN ANDROID)
TS
niko.aita.pea2
TUTORIAL PEMROGRAMAN ANDROID ECLIPSE PART 2 (DESAIN GRAFIS TAMPILAN ANDROID)
Spoiler for TUTORIAL PART 2 DESAIN INTERFACE LEBIH SMOOTH:
membuat userinterface android lebih smooth
Bismillah
saya kali ini akan melanjutkan pokok bahasan sebelumnya yaitu tentang pemrograman pada android untuk pemula atau yg sedang ingin belajar memahami pemrograman android
silahkan disimak
langkah pertama yaitu siapkan deain yang akan kita buat.
sebagai contoh berikut ini yang akan saya buat
langkah pertama yaitu kita membuat new project di ADT
buka folder adt pilih eclipse, kemudian pilih workspace yg dimana fungsinya menyimpan file project yang akan kita buat
kemudian akan muncul sebagai berikut
kita namai dulu project yg akan kita buat seperti pada contoh yang saya buat. kemudian, setelah itu silahkan klik next, next saja sampai muncul menu untuk memilih logo.
sebelumnya, sebaiknya anda membuat atau pun mendonload kalau ingin praktis dengan catatan file bertipe .PNG jikalau tidak ingin logo yang anda buat tidak ingin keluar background nya
seperti pada contoh berikut saya buat dari corel draw x5 yang bertipe .PNG akan jadi seperti ini
setelah memilih pada browse kemudian klik next saja terus sampai finish
maka setelah itu akan muncul tampilan berikut ini
untuk meng edit tampilan pada android kita bisa klik pada menu yang telah saya buat lingkaran
1.klik folder RES
kemudian klik folder LAYOUT
2.main_activity merupakan file yg kita gunakan untuk mengedit tampilan pada android.
kemudian klik seperti pada gambar berikut yang telah saya lingkari pada lingkaran nomor 1
kemudian inputkan
2.berfungsi untuk susunan menu yang ingin anda buat baik itu untuk menginput atau memberikan judul
saya pilih LINEARLAYOUT dan lingkaran no.4 supaya susunan nya berbaris mendatar ke bawah
3. gravity : center supaya form input, judul ,atau pun tombol bisa rata tengah semua
5.android:background="@drawable/background" merupakan fungsi dimana untuk menginputkan background yang kita buat.
pada drawable/background merupakan file gambar yang saya panggil dimana saya buat sebelumnya untuk menaruh file gambar tersebut kita harus taruh di folder
workspace => folder project anda => res => drawable-xhdpi
seperti berikut ini
setelah menaruh gambar pada file tsb. kemudian, pada adt kita klik kanan,pada folder kemudian pilih refresh. seperti pada gambar berikut
setelah klik refresh maka file2 gambar tsb akan masuk
selanjutnya kita akan memasuki proses menginputkan desain yang akan kita buat
inputkan saja script berikut ini
<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:background="@drawable/background"
android
rientation="vertical"
android:gravity="center"
android
adding="35dp"
androidaddingBottom="@dimen/activity_vertical_margin"
androidaddingLeft="@dimen/activity_horizontal_margin"
androidaddingRight="@dimen/activity_horizontal_margin"
androidaddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/login1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="welcommee"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#fff"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="@+id/login2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
androidaddingBottom="20dp"
android:text="login first"
android:textSize="20sp"
android:textColor="#fff"
/>
<EditText
android:id="@+id/InpNama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:textColor="#ffff"
android:inputType="textPersonName"
android:layout_marginTop="20dp"
/>
<EditText
android:id="@+id/InpPswd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword"
android:textColor="#ffff"
android:layout_marginTop="20dp"
/>
<ImageButton
android:id="@+id/Buttonlogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:background="#0000"
android:gravity="center"
android:src="@drawable/login_button" />
<ImageButton
android:id="@+id/ButtonReset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#0000"
android:gravity="center"
android:src="@drawable/reset_button" />
</LinearLayout>
maka akan menghasilkan interface seperti berikut ini
untuk detail tentang coding nya akan saya jelaskan melalui gambar berikut ini
gambar 1.1:
1. merupakan text view (jenis tampilan nama / judul menu)
2. android text digunakan untuk menginputkan outputan judul
3.text colour : warna text (#FFF untuk warna putih)
4.ukuran text dengan satuan (sp) untuk penulisan nya
gambar 1.2:
1. merupakan edit text (fungsinya untuk membuat sebuah form inputan)
2. id pada edit text sangatlah penting karena nanti id tsb akan dipanggil melalui sebuah fungsi pada file.java
3.layout_marginTop berfungsi untuk mengatur jarak dari atas nya supaya antara edit dan textview tidak jadi satu berhimpitan maupun menempel
http://1.bp.blogspot.com/-DY2fQlgkCA...U/s1600/kg.JPG
gambar 1.3:
1. imageButton merupakan tombol yang kita desain sendiri sesuai gambar yang telah kita buat sebelum nya
seperti contoh berikut
dimana file harus bertipe .png
2. id pada image button sangatlah penting karena nanti id tsb akan dipanggil melalui sebuah fungsi pada file.java
3.layout_marginTop berfungsi untuk mengatur jarak dari atas nya supaya antara edit dan tombol tidak jadi satu berhimpitan maupun menempel
4. android:background saya buat "#0000" supaya latar belakang nya dari tombol hilang atau transparan
jikalau tidak di inputkan maka akan mengeluarkan background dengan sendirinya baik itu berwarna hitam/putih
5. gravity : center supaya form input, judul ,atau pun tombol bisa rata tengah semua
selain cara tsb anda juga bisa melakukan drag & drop saja dari menu graphical layout, pallete
ada sedikit tambahan dari saya
mengenai menu tampilan tsb setelah kita save
bisa kita rubah dengan menghilangkan title bar seperti berikut ini
dengan mengetikan script
pada folder
seperti gambar berikut
cukup sekian dari saya apabila ada salah-salah kata dari saya mohon dimaafkan
semoga bisa bermanfaat dan dapat membantu anda semua yang ingin belajar mengenai android
terimakasih
Bismillah
saya kali ini akan melanjutkan pokok bahasan sebelumnya yaitu tentang pemrograman pada android untuk pemula atau yg sedang ingin belajar memahami pemrograman android
silahkan disimak
langkah pertama yaitu siapkan deain yang akan kita buat.
sebagai contoh berikut ini yang akan saya buat
Spoiler for 1:
langkah pertama yaitu kita membuat new project di ADT
buka folder adt pilih eclipse, kemudian pilih workspace yg dimana fungsinya menyimpan file project yang akan kita buat
Spoiler for 2:
kemudian akan muncul sebagai berikut
Spoiler for 3:
kita namai dulu project yg akan kita buat seperti pada contoh yang saya buat. kemudian, setelah itu silahkan klik next, next saja sampai muncul menu untuk memilih logo.
sebelumnya, sebaiknya anda membuat atau pun mendonload kalau ingin praktis dengan catatan file bertipe .PNG jikalau tidak ingin logo yang anda buat tidak ingin keluar background nya
seperti pada contoh berikut saya buat dari corel draw x5 yang bertipe .PNG akan jadi seperti ini
Spoiler for 4:
setelah memilih pada browse kemudian klik next saja terus sampai finish
maka setelah itu akan muncul tampilan berikut ini
Spoiler for 5:
untuk meng edit tampilan pada android kita bisa klik pada menu yang telah saya buat lingkaran
1.klik folder RES
kemudian klik folder LAYOUT
2.main_activity merupakan file yg kita gunakan untuk mengedit tampilan pada android.
kemudian klik seperti pada gambar berikut yang telah saya lingkari pada lingkaran nomor 1
Spoiler for 6:
kemudian inputkan
2.berfungsi untuk susunan menu yang ingin anda buat baik itu untuk menginput atau memberikan judul
saya pilih LINEARLAYOUT dan lingkaran no.4 supaya susunan nya berbaris mendatar ke bawah
3. gravity : center supaya form input, judul ,atau pun tombol bisa rata tengah semua
5.android:background="@drawable/background" merupakan fungsi dimana untuk menginputkan background yang kita buat.
pada drawable/background merupakan file gambar yang saya panggil dimana saya buat sebelumnya untuk menaruh file gambar tersebut kita harus taruh di folder
workspace => folder project anda => res => drawable-xhdpi
seperti berikut ini
Spoiler for 7:
setelah menaruh gambar pada file tsb. kemudian, pada adt kita klik kanan,pada folder kemudian pilih refresh. seperti pada gambar berikut
Spoiler for 8:
setelah klik refresh maka file2 gambar tsb akan masuk
Spoiler for 9:
selanjutnya kita akan memasuki proses menginputkan desain yang akan kita buat
inputkan saja script berikut ini
Spoiler for script:
<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:background="@drawable/background"
android
rientation="vertical"android:gravity="center"
android
adding="35dp"android
addingBottom="@dimen/activity_vertical_margin"android
addingLeft="@dimen/activity_horizontal_margin"android
addingRight="@dimen/activity_horizontal_margin"android
addingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" >
<TextView
android:id="@+id/login1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="welcommee"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#fff"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="@+id/login2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android
addingBottom="20dp"android:text="login first"
android:textSize="20sp"
android:textColor="#fff"
/>
<EditText
android:id="@+id/InpNama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:textColor="#ffff"
android:inputType="textPersonName"
android:layout_marginTop="20dp"
/>
<EditText
android:id="@+id/InpPswd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword"
android:textColor="#ffff"
android:layout_marginTop="20dp"
/>
<ImageButton
android:id="@+id/Buttonlogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:background="#0000"
android:gravity="center"
android:src="@drawable/login_button" />
<ImageButton
android:id="@+id/ButtonReset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#0000"
android:gravity="center"
android:src="@drawable/reset_button" />
</LinearLayout>
maka akan menghasilkan interface seperti berikut ini
Spoiler for 10:
untuk detail tentang coding nya akan saya jelaskan melalui gambar berikut ini
Spoiler for gambar+penjelasan:
gambar 1.1:
1. merupakan text view (jenis tampilan nama / judul menu)
2. android text digunakan untuk menginputkan outputan judul
3.text colour : warna text (#FFF untuk warna putih)
4.ukuran text dengan satuan (sp) untuk penulisan nya
gambar 1.2:
1. merupakan edit text (fungsinya untuk membuat sebuah form inputan)
2. id pada edit text sangatlah penting karena nanti id tsb akan dipanggil melalui sebuah fungsi pada file.java
3.layout_marginTop berfungsi untuk mengatur jarak dari atas nya supaya antara edit dan textview tidak jadi satu berhimpitan maupun menempel
http://1.bp.blogspot.com/-DY2fQlgkCA...U/s1600/kg.JPG
gambar 1.3:
1. imageButton merupakan tombol yang kita desain sendiri sesuai gambar yang telah kita buat sebelum nya
seperti contoh berikut
dimana file harus bertipe .png
2. id pada image button sangatlah penting karena nanti id tsb akan dipanggil melalui sebuah fungsi pada file.java
3.layout_marginTop berfungsi untuk mengatur jarak dari atas nya supaya antara edit dan tombol tidak jadi satu berhimpitan maupun menempel
4. android:background saya buat "#0000" supaya latar belakang nya dari tombol hilang atau transparan
jikalau tidak di inputkan maka akan mengeluarkan background dengan sendirinya baik itu berwarna hitam/putih
5. gravity : center supaya form input, judul ,atau pun tombol bisa rata tengah semua
selain cara tsb anda juga bisa melakukan drag & drop saja dari menu graphical layout, pallete
ada sedikit tambahan dari saya
mengenai menu tampilan tsb setelah kita save
bisa kita rubah dengan menghilangkan title bar seperti berikut ini
Spoiler for hilng title:
dengan mengetikan script
pada folder
seperti gambar berikut
Spoiler for gmbr hasil:
cukup sekian dari saya apabila ada salah-salah kata dari saya mohon dimaafkan
semoga bisa bermanfaat dan dapat membantu anda semua yang ingin belajar mengenai android
terimakasih
semua tutorial ane jadiin satu di index berikut ini
Spoiler for KUMPULAN TUTORIAL PEMROGRAMAN MOBILE ANDROID:
Diubah oleh niko.aita.pea2 19-05-2014 08:52
nona212 memberi reputasi
1
9.5K
38
Komentar yang asik ya
Urutan
Terbaru
Terlama
Komentar yang asik ya
Komunitas Pilihan