[Tutorial Aide 3] Menggunakan App UI Designer Aide di Tablet / Smartphone Android

Ini adalah tutorial ketiga yang saya tulis tentang aide. Pada tutorial ketiga ini saya memberikan informasi cara menggunakan app ui designer aide. Dengan menggunakan app ui designer, kita hanya melakukan sedikit coding karena sudah digenerate dari aplikasi tersebut. Bila menggunakan Netbeans / Eclipse kita mengenal fungsi drag and drop komponen swing, maka app ui designer di aide juga hampir mirip cara penggunaannya. App ui designer adalah aplikasi berbayar jika ingin menggunakan fungsi generate codenya. Saat artikel ini ditulis harga app ui designer di play store sekitar 40.000 rupiah.

image

Ok, langsung saja saya mulai tutorialnya. Pertama buat project androidnya, cara membuat project android ada di tutorial aide 2. Seperti ini tampilan workbenchnya. Klik icon kotak untuk membuka app ui designer aide

image

Seperti ini tampilan app ui designer aide

image

Agar lebih jelas kita delete dulu layout dan komponen yang sudah ada. Klik pada Linear Layoutnya dan pilih Delete

image

Jadi seperti ini tampilan formnya. Selanjutnya klik pada bagian tengah form

image

Selanjutnya pilih Add dan Layout

image

Sebagai contohnya pilih Linear Layout (Vertical)

image

image

Klik ditengah form tersebut dan pilih Add inside…

image

Contohnya kita tambahkan komponen button. Selanjutnya pilih Widget

image

Kemudian pilih button

image

Button akan tampil disebelah kiri atas.

image

Agar button tersebut tampil ditengah,  klik tengah form atau pada Linear Layout kemudian pilih Gravity

image

Selanjutnya pilih Center

image

Button tampil ditengah form

image

Jika background form ingin berwarna, klik pada tengah form dan pilih background warnanya

image

Seperti ini hasilnya

image

File XML hasil generatenya dapat kita copy, paste, dan share jika menggunakan versi berbayar. Selain itu file XML tersebut dapat kita gunakan di eclipse.

image

Selamat mencoba dan semoga bermanfaat🙂

Untuk pertanyaan, saran dan kritik, silahkan ditulis di kolom komentar

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s