CARA MEMBUAT MOCKUP DENGAN ANDROID STUDIO

Gambar dibawah ini merupakan hasil dari project yang akan dipraktekkan, untuk itu silahkan pahami terlebih dahulu bagaimana sistem kerja dari project yang akan dibuat.

        

 

Terdapat 3 layout pada project ini, yang diberi nama:

1.      Menu utama  = terdapat 1 label dan 2 button (materi, dan profil)

2.      Materi             = terdapat 1 label dan 1 button (home)

3.      Profil                = terdapat 1 label dan 1 button (home)

Ketika project dijalankan, maka layout yang akan pertama kali ditampilkan adalah menu utama. Jika button yang diberi nama materi digunakan maka akan berpindah pada layout materi, dan jika button yang diberi nama profil digunakan maka akan berpindah pada layout profil. Didalam kedua layout (materi, dan profil) terdapat sebuah button yang diberi nama home, dan jika digunakan maka akan berpindah pada layout  menu utama.

Silahkan buka android studio, dan buatlah sebuah project dengan nama “belajar_berpindah_layout”, dan berikut ini adalah beberapa file yang dibutuhkan:

1.      Manifest: AndroidManifest.xml

2.      Java/com.example..: MainActivity.java, materi.java, profil.java

3.      Res/layout: activity_main.xml, materi.xml, profil.xml

Dapat dilihat pada gambar berikut ini: 

Berikut ini isi kode program dari file AndroidManifest.xml:

Penjelasan:

AndroidManifest.xml digunakan untuk membaca file activity java, oleh karena itu dalam pembuatan project ini ditambahkan kode program dengan berisikan informasi mengenai activity yang terdapat pada project (MainActivity, materi, dan profil).

Berikut ini isi kode program dari file MainActivity.java:

Penjelasan:

MainActivity.java adalah file yang memberikan fungsi pada layout activity_main.xml, yang didalamnya telah terdapat button yang akan digunakan untuk berpindah ke layout lainnya, dengan mengarahkannya ke java class dari activity yang berkaitan (materi, dan profil), melalui kode program yang ditulis dalam activity ini.

Berikut ini isi kode program dari file activity_main.xml:

.

Penjelasan:

Activity_main.xml adalah file yang menampilkan layout dari menu utama, yang didalamnya terdapat 1 label, dan 2 button (materi, dan profil).

Berikut ini isi kode program dari file materi.java:

Penjelasan:

materi.java adalah file yang memberikan fungsi pada layout materi.xml, yang didalamnya telah terdapat button yang akan digunakan untuk berpindah ke layout lainnya, dengan mengarahkannya ke java class dari activity yang berkaitan (menu utama), melalui kode program yang ditulis dalam activity ini.

Berikut ini isi kode program dari file materi.xml:

Penjelasan:

materi.xml adalah file yang menampilkan layout dari materi, yang didalamnya terdapat 1 label, dan 1 button (home).

Berikut ini isi kode program dari file profil.java:

Penjelasan:

profil.java adalah file yang memberikan fungsi pada layout profil.xml, yang didalamnya telah terdapat button yang akan digunakan untuk berpindah ke layout lainnya, dengan mengarahkannya ke java class dari activity yang berkaitan (menu utama), melalui kode program yang ditulis dalam activity ini.

Berikut ini isi kode program dari file profil.xml:

Penjelasan:
profil.xml adalah file yang menampilkan layout dari profil, yang didalamnya terdapat 1 label, dan 1 button (home).

Jalankan project dan sesuaikan hasilnya dengan tujuan yang ingin dicapai dari bahan ini, selamat mencoba dan semoga berhasil. 

Berikut ini, artikel yang telah dirubah menjadi video dan diharap dapat membantu anda dalam memahami artikel ini:

Mari Belajar Teknologi Informasi