loading... DESAIN LOGIN

     Kali ini kita akan belajar membuat tampilan Login.

1. Langsung saja buka aplikasi B4A anda.

     Ketikan pada Activity_Create

     Activity.LoadLayout("login")

2. Berhubung kita hanya akan membuat desain saja, langsung kita buka Designer -> open Designer (Jangan lupa disimpan dulu)

3. Kita atur seperti pada tutorial splash screen.

        a. Add View -> ImageView

        b. Add Files -> login.png

        c. Rubah Horizontal dan Vertical Anchor ImageView

Pada Drawable ImageView -> Image File pilih dropdown login.png

Kemudian Simpan

4. Ketika kita Compile dan dijalankan pada Emulator Klik Run / F5.

     Inilah tampilan pada emulator, hanya saja saya tidak suka terdapat Tittle Activity diatas, untuk menghilangkan nya. 

     Edit pada Activity Attributes #IncludeTittle menjadi False yang awal True.

Maka sudah tidak ada Title diatas.

5. Selanjutnya kita akan masukkan 2 EditText dan 1 Button pada form login kita.

Jika sudah maka tampilan pada emulator seperti ini.

6. Selanjutnya kita akan atur tinggi dan lebar edittext dan button serta posisi nya.

     Pada Script General ketikkan script berikut

     EditText1.Height = 50

     EditText2.Height = 50

     Button1.Height = 50

     EditText1.SetLeftAndRight(10%x,90%x)

     EditText2.SetLeftAndRight(10%x,90%x)

     Button1.SetLeftAndRight(10%x,90%x)

     EditText1.SetTopAndBottom(60%y,60%y+EditText1.Height)

     EditText2.SetTopAndBottom(70%y,70%y+EditText2.Height)

     Button1.SetTopAndBottom(80%y,80%y+Button1.Height)

Pada emulator akan tampak seperti ini.

7. Selanjutnya kita akan membuat Hint pada EditText dan merubah tipe EditText2 menjadi Password

     Properties pada EditText1 

     Properties ada EditText2

 

     Properties ada Button1

Pada emulator akan tampak seperti ini

8. TAmpilan Edittext dan button saya rasa kurang memikat, saya ingin Edittext dan button memiliki sudut yang bundar dan berbentuk flat.

Ketikkan Script berikut pada Globals dan Activity_Create

Sub Globals

Dim EditText1 As EditText

Dim EditText2 As EditText

Dim Button1 As Button

End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("login")

Dim cdText As ColorDrawable

cdText.Initialize2(Colors.ARGB(200,255,255,255),40dip,1,Colors.Black)

EditText1.Background = cdText

EditText2.Background = cdText

Dim cdButton As ColorDrawable

cdButton.Initialize2(Colors.ARGB(150,60,64,184),40dip,1,Colors.White) 

Button1.Background = cdButton

End Sub

Pada emulator akan tampak seperti ini

     Demikianlah tutorial kali ini, untuk mendesain form login, pantau terus Blog ini dan nantikan Tutorial selanjutnya.

Terima Kasih. AJKL