[ANDROID] Cara Mudah Membuat Aplikasi Login dengan View Linear Layout
Kamis, 26 Januari 2012 by ewepaksa
top custom html 2:selamat Assalamualaikum :selamat Agan-gan semua, perkenankan cardinal dalam kesempatan ini membagi ilmu cardinal yang sedikit tentang pemrograman android. Pada kesempatan kali ini yang akan kita bahas adalah membuat tampilan/layout untuk schedule login dengan beberapa jenis analyse layout, dan yang akan kita gunakan kali ini adalah LinierLayout. InsyaAllah jika ada kesempatan maka arrange ini akan menjadi awal bagi arrange selanjutnya yang berisi contoh bagaimana membangun aplikasi robot sederhana dari Login sampai berkomunikasi dengan computer melalui WebService. Mari kita mulai aja ya.. Untuk bicara mudahnya, dalam membangun aplikasi robot kita perlu memikirkan dua aspek: 1. Aspek View / Tampilan. 2. Aspek Process. Aspek analyse di dalam robot pada umumnya dikontrol melalui enter berekstensi XML di direktori "res/layout". Nah untuk membuat aplikasi pertama mari kita menuju folder tersebut dan buat enter baru bernama Login.xml . Langkah pertama sudah dilampaui, hehe. Penjelasan dengan gambar tentang Liniear Layout: Quote: Spoiler for LinearLayout: 
Tampilan Login yang akan kita buat Quote: Spoiler for login: [
Untuk membuat Tampilan seperti yang diatas yang kita perlukan hanyalah mengetikkan beberapa kode di dalam enter login.xml. Dan kode tersebut adalah sebagai berikut: Quote: Spoiler for login.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:text="Username" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_marginLeft="15dp"/> <EditText android:id="@+id/username_edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <TextView android:text="Password" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp"/> <EditText android:id="@+id/password_edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp"/> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="right"> <Button android:id="@+id/login_button" android:text="Login" android:layout_width="100dp" android:layout_height="wrap_content" android:paddingRight="20dp" android:layout_marginTop="20dp"/> <Button android:id="@+id/cancel_button" android:text="Cancel" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_marginRight="20dp"/> </LinearLayout> </LinearLayout> Untuk tampilan diatas kita menggunakan jenis analyse LiniearLayout. Bagaimana sih maksudnya analyse LiniearLayout itu? Mudahnya adalah seperti ini: LinearLayout berarti menampilkan Layout kita secara linier, baik itu linier flat ataupun vertikal. Jadi, apa sih maksud dari kode login.xml diatas. Penjelasannya adalah sebagai berikut: Quote: Quote: 1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > </LinearLayout> Dengan attach LinearLayout diatas berarti kita mendefinisikan tampilan kita untuk menggunakan analyse Liniear Layout. Di antar attach "<LinearLayout> </LinearLayout>" inilah kita mendefinisikan komponen yang akan kita tampilkan di dalam layout kita. Dalam hal ini kita menampilkan 2 TextView yang bernama Username dan Password, 2 EditText yang memiliki id username_edittext dan password_edittext, 2 Button yang memiliki nama Login dengan id:login_button dan Cancel dengan id cancel_button. Quote: 2. Kita mendefinisikan komponen yang akan ditampilkan di dalam analyse LinearLayout diatas. Untuk setiap komponen kita juga harus mendefinisikan concept komponen tersebut. Ane kasih contoh ya. <EditText android:id="@+id/username_edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> Untuk komponen EditText diatas kita telah mendefinisikan berbagai attributnya, mulai dari id sampai marginnya. Mungkin untuk yang pertama kali dalam pemrograman robot pasti bertanya apakah itu android:layout_width="fill_parent" dan android:layout_height="wrap_content"? - android:layout_width="fill_parent", kita mendefinisikan editText kita untuk memiliki tampilan lebar yang memenuhi layar. - android:layout_height="wrap_content", ita mendefinisikan editText kita untuk memiliki tampilan tinggi yang membungkus tinggi dari factor yang dikandungnya. Tapi kenapa pada tampilan diatas tampilannya lebarnya tidak penuh ya? hhe itu karena kita telah meletakkan edge mitt dan correct di dalam concept EditText, android:layout_marginLeft="10dp", android:layout_marginRight="10dp". Kemudian langkah terakhir untuk menjalankan aplikasi sederhana kita ini, kita juga harus membuat enter dengan nama LoginActivity.java (nama filenya terserah gan) yang kita letakkan di folder "src/[nama collection kita]/" Spoiler for LoginActivity.java: package aplikasi.login.android; import android.app.Activity; import android.os.Bundle; public collection LoginActivity extends Activity{ public vacuum onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.login); //dalam baris kode ini kita men ordered tampilan kita dengan layout yang telah kita buat yaitu login.xml } } Untuk menjalankan aplikasi diatas cardinal asumsukan agan-agan udah punya Editor Eclipse + ADT plugin + Android SDK yang sudah terinstall ya. Ok gan, gitu aja distribution dari saya, semoga bermanfaat dan insyaAllah jika ada kesempatan akan saya teruskan untuk jenis tampilan selanjutnya yaitu RelativeLayout. :) Quote: Sayyid Quthbâ€"Problem dalam memahami petunjuk dan inspirasi al-Qur’an bukanlah soal memahami makna kalimat dan ungkapannya, bukan pula tafsir sebagaimana biasa diperbincangkan. Namun masalahnya adalah kesiapan jiwa dengan menghadirkan perasaan, indra dan pengalaman, persis seperti perasaan, indra dan pengalaman yang menyertai turunnya al-Qur’an dan menyertai kehidupan umat Islam; persis seperti jiwa yang menerima al-Qur’an di medan jihad: warfare melawan nafsu, warfare melawan manusia, warfare melawan syahwat, dan warfare melawan musuh, yang menuntut kerja keras dan pengorbanan, dipenuhi harap dan cemas.. bottom custom html 1
Suchmaschine
Tampilan Login yang akan kita buat Quote: Spoiler for login: [ Untuk membuat Tampilan seperti yang diatas yang kita perlukan hanyalah mengetikkan beberapa kode di dalam enter login.xml. Dan kode tersebut adalah sebagai berikut: Quote: Spoiler for login.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:text="Username" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_marginLeft="15dp"/> <EditText android:id="@+id/username_edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <TextView android:text="Password" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp"/> <EditText android:id="@+id/password_edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp"/> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="right"> <Button android:id="@+id/login_button" android:text="Login" android:layout_width="100dp" android:layout_height="wrap_content" android:paddingRight="20dp" android:layout_marginTop="20dp"/> <Button android:id="@+id/cancel_button" android:text="Cancel" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_marginRight="20dp"/> </LinearLayout> </LinearLayout> Untuk tampilan diatas kita menggunakan jenis analyse LiniearLayout. Bagaimana sih maksudnya analyse LiniearLayout itu? Mudahnya adalah seperti ini: LinearLayout berarti menampilkan Layout kita secara linier, baik itu linier flat ataupun vertikal. Jadi, apa sih maksud dari kode login.xml diatas. Penjelasannya adalah sebagai berikut: Quote: Quote: 1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > </LinearLayout> Dengan attach LinearLayout diatas berarti kita mendefinisikan tampilan kita untuk menggunakan analyse Liniear Layout. Di antar attach "<LinearLayout> </LinearLayout>" inilah kita mendefinisikan komponen yang akan kita tampilkan di dalam layout kita. Dalam hal ini kita menampilkan 2 TextView yang bernama Username dan Password, 2 EditText yang memiliki id username_edittext dan password_edittext, 2 Button yang memiliki nama Login dengan id:login_button dan Cancel dengan id cancel_button. Quote: 2. Kita mendefinisikan komponen yang akan ditampilkan di dalam analyse LinearLayout diatas. Untuk setiap komponen kita juga harus mendefinisikan concept komponen tersebut. Ane kasih contoh ya. <EditText android:id="@+id/username_edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> Untuk komponen EditText diatas kita telah mendefinisikan berbagai attributnya, mulai dari id sampai marginnya. Mungkin untuk yang pertama kali dalam pemrograman robot pasti bertanya apakah itu android:layout_width="fill_parent" dan android:layout_height="wrap_content"? - android:layout_width="fill_parent", kita mendefinisikan editText kita untuk memiliki tampilan lebar yang memenuhi layar. - android:layout_height="wrap_content", ita mendefinisikan editText kita untuk memiliki tampilan tinggi yang membungkus tinggi dari factor yang dikandungnya. Tapi kenapa pada tampilan diatas tampilannya lebarnya tidak penuh ya? hhe itu karena kita telah meletakkan edge mitt dan correct di dalam concept EditText, android:layout_marginLeft="10dp", android:layout_marginRight="10dp". Kemudian langkah terakhir untuk menjalankan aplikasi sederhana kita ini, kita juga harus membuat enter dengan nama LoginActivity.java (nama filenya terserah gan) yang kita letakkan di folder "src/[nama collection kita]/" Spoiler for LoginActivity.java: package aplikasi.login.android; import android.app.Activity; import android.os.Bundle; public collection LoginActivity extends Activity{ public vacuum onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.login); //dalam baris kode ini kita men ordered tampilan kita dengan layout yang telah kita buat yaitu login.xml } } Untuk menjalankan aplikasi diatas cardinal asumsukan agan-agan udah punya Editor Eclipse + ADT plugin + Android SDK yang sudah terinstall ya. Ok gan, gitu aja distribution dari saya, semoga bermanfaat dan insyaAllah jika ada kesempatan akan saya teruskan untuk jenis tampilan selanjutnya yaitu RelativeLayout. :) Quote: Sayyid Quthbâ€"Problem dalam memahami petunjuk dan inspirasi al-Qur’an bukanlah soal memahami makna kalimat dan ungkapannya, bukan pula tafsir sebagaimana biasa diperbincangkan. Namun masalahnya adalah kesiapan jiwa dengan menghadirkan perasaan, indra dan pengalaman, persis seperti perasaan, indra dan pengalaman yang menyertai turunnya al-Qur’an dan menyertai kehidupan umat Islam; persis seperti jiwa yang menerima al-Qur’an di medan jihad: warfare melawan nafsu, warfare melawan manusia, warfare melawan syahwat, dan warfare melawan musuh, yang menuntut kerja keras dan pengorbanan, dipenuhi harap dan cemas.. bottom custom html 1Suchmaschine
Posting Komentar