Multiple Screen Simple [4]



Post kali ini akan membahas tentang Project Simple Multiple Screen. Project ini cukup sederhana bagi pemula saat mendalami Multiple Screen. Secara singkat Multiple Screen ialah kondisi dimana sebuah aplikasi menampilkan lebih dari satu tampilan. Misalkan saat kita menekan tombol sign-in pada suatu aplikasi, pada saat username/email dan password benar maka layar berubah/dibawa kehalaman selanjutnya. Nah begitu seterusnya tergantung fungsi suatu aplikasi. Oke selanjutnya mari ke project:


  • Membuat Layout menggunakan jenis LinearLayout; gunakan pengaturan standard. 
  • Membuat TextView digunakan untuk menampilkan informasi. Berikut ialah elementnya 
  • 
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/are_you_ready"
            android:textSize="20sp" />
    
  • Membuat EditText, fungsi ini digunakan untuk input data user. Berikut ialah elementnya  
  • 
    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Ketik 'Yes'"
            android:id="@+id/yes12"
            android:textSize="20sp"/>
    
  • Penjelasan mengapa ada fungsi android:id="@+id/yes12". Hal iini berarti nama dari elemen EditText ini ialah yes12. Mengapa perlu ditambahkan id? Hal ini penting sekali untuk memberi identifikasi difile java dimana disini ialah MainActivity.java. Button digunakan untuk melakukan input dengan menggunakan fungsi "tekan". Berikut ialah elementnya 
  • 
    <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Ketik 'Yes'"
            android:id="@+id/yes12"
            android:textSize="20sp"/>
    
  • Penjelasan mengenai android:id@+id/yes12 merupakan identitas dari EditText tersebut. Hal ini diperlukan untuk memberi identitas pada input difile Java atau diproject ini MainActivity.java, misalkan untuk project yang akan datang sebagai username/password. Setelah diinputkan pasti pada layar preview akan muncul tampilan seperti gambar dibawah ini(Jika error lakukanlah identifikasi). :

  • Setelah itu jika kita menambah kan text pada kolom dan klik Next Page button maka tidak akan ada reaksi apapun.Mengapa demikian?  Dalam arti kita belum memberi perintah apapun pada button. Nah sekarang kita akan mengedit file Java yaitu MainActivity.java. Buka saja karena biasanya berada di-tab sebelah dari activity_main.xml.

  • Oke lakukan input seperti kode diatas ini. (Untuk penjelasan mengenai fungsi dari berbagai code source java akan disampaikan pada artikel yang akan datang). Intinya code tersebut yang bersifat publik akan dapat menerima semua kelas dan atribut. Juga akan memerintah kan akan menampilkan tampilan selanjutnya apabila terjadi inputan dalam button.
  • Oke setelah selesai input sorce code biarkan akan terjadi  Main2activity.class berwarna merah hal itu wajar karena belum ada class Main2activity.class. Maka dari itu mari kita tambahkan class Main2activity.class ikuti langkah-langkah selanjutnya.
  • Selanjutnya kita akan membuat new activity dengan cara seperti gambar berikut:

  • Inputkan Activity Name, Layout Name dan Package name sesuai dengan default saja.

  • Oke sekarang kita mempunyai file yang ditampilkan diwindow kerja seperti gambar diatas . Kita mempunyai 2 buah file activity main berekstensi xml dan 2 buah file MainActivity.java.
  • Nah langkah selanjutnya kita akan memberikan nama kelas yang akan dituju didalam file MainActivity.java. Mohon perhatikan baik-baik.

  • Oke gambar diatas menunjukan bahwa file Main2Activity.java (kotak hijau) memiliki nama kelas Main2Activity (kotak kuning), dimana nama ialah hal penting yang harus ada pada setiap file java.

  • Selanjutnya check/inputkan nama kelas file Main2Activity.java yaitu Main2Activity didalam file MainActivity seperti gambar diatas.
  • Sampai disini seharusnya project sederhana ini bisa jalan Ya pada saat kita klik Button "NextPage" maka tab/tampilan selanjutnya akan muncul persis seperti apa yang diperintahkan difile MainActivity.java. Jika ada error lakukan identifikasi dahulu atau cari google atau komentar dibawah.



  • Oke diatas merupakan gambar tampilan dari nextPage dimana nextPage diisikan oleh project sebelumnya sehingga terlihat menarik. Caranya? Masukkan kode project artikel sebelumnya ke file activity_main2.xml diproject ini. 
Oke sekian Terima Kasih. See you on next project and next challange!!
Previous
Next Post »
Thanks for your comment