IKON DI EDITTEXT LOGIN

     Kali ini saya ingin memerikan tutorial sambungan dari tutorial sebelumnya yaitu Desain Login, disini saya hanya ingin menambahkan ikon didalam EditText pada form Login biar tambah cantik form login kita.

Sebelumnya tampilan Login seperti ini.

1. Siapkan gambar ikon dalam format PNG yang akan kita masukkan di Edittext. Tidak usah terlalu besar dalam hal ini saya membuat gambar png dengan ukuran 40px X 40px saja.

     Simpan dalam Folder File didalam Project kita.

2. Dua file png ini tidak kita masukkan kedalam Form Designer ya. Tapi kita masukkan ke Asset. 

Pilih Tab File di Kanan Bawah kemudian klik Add Files, Pilih kedua File png kita.

File sudah masuk ke Asset kita.

3. Setelah itu masukkan Library JavaObject. Pada kanan bawah pilih Tab Libraries Manager. Cari JavaObject dan Centang.

4. Buat Sub baru dengan script berikut ini

Sub ikonpengguna(EditTxt As EditText)
Dim ETxt As JavaObject = EditTxt
Dim icon As BitmapDrawable
icon.Initialize(LoadBitmap(File.DirAssets,"pengguna.png"))
ETxt.RunMethod("setCompoundDrawablesWithIntrinsicBounds",Array As Object(icon,Null,Null,Null))
End Sub

Sub ikonpassword(EditTxt As EditText)
Dim ETxt As JavaObject = EditTxt
Dim icon As BitmapDrawable
icon.Initialize(LoadBitmap(File.DirAssets,"password.png"))
ETxt.RunMethod("setCompoundDrawablesWithIntrinsicBounds",Array As Object(icon,Null,Null,Null))

End Sub

5. Terakhir kita load Sub ikonpengguna dan ikonpassword kedalam Edittext kita.
     Pada Activity_Create tambah dua script ini seperti dibawah.

ikonpengguna(EditText1)

ikonpassword(EditText2)

Ketika Kita Compile Run / F5, seperti ini tampilan pada emulator.
Ikon sudah muncul pada kedua EditText Penguna dan Password.

     Demikianlah Tutorial Kali ini. Pantau terus blog ini untuk terus belajar membuat aplikasi android dengan ringan dan mudah.

Terima Kasih. AJKL.

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

SPLASH SCREEN

     Biasanya aplikasi android ketika membuka aplikasi pertama kali akan muncul splash screen, setelah itu akan masuk ke form login terlebih dahulu, setelah login baru kita masuk ke form utama nya. Nah sekarang saya akan memberikan contoh membuat splash screen terlebih dahulu.

1. Buka aplikasi B4A anda.

2. Untuk mendesain Form kita harus masuk ke Designer tapi sebelumnya simpan terlebih dahulu project kita, berikan nama Main. kemudian pilih Designer -> Open Designer.

3. Inilah Tampilan Form Designer.

4.  Karena biasanya splash screen memiliki gambar, kita masukkan imageview kedalam form kita. Pilih Add View -> ImageView

5. Imageview tampil pada form

6. Agar imageview kita ketika tampil itu memenuhi layar kita akan buat script di script general.
     Tambahkan kode ini.
       - ImageView1.SetLeftAndRight(0,100%x)
       - ImageView1.SetTopAndBottom(0,100%y)

Atau bisa dengan mudah pada properties yang awalnya

Menjadi

7.  Jangan lupa siapkan image gambar untuk ditampilkan diSplash screen.

     Sebagai contoh gambar ini yang akan kita tampilkan pada Splash screen.

     Maka kita harus memasukkan gambar itu kedalam form kita. Pilih Add Files dan Pilih Gambar kita 

Gambar Sudah masuk dalam Default Group, setelah itu pada properties milik ImageView pada Drawable Image File pilihlah gambar kita di dropdown list nya.

8. Simpan form splash kita  File -> Save. dan beri nama main,

9. Pada Form Designer Telah Selesai Anda bisa menutup form tersebut. Mari kita pindah pada Form utama untuk melanjutkan script kita.

     Pada Process_Globals ketikan script 

        Dim Timer1 As Timer

     Kemudian pada Activity_Create ketikan script 

             Activity.LoadLayout("main")

     Timer1.Initialize("Timer1",5000)

     Timer1.Enabled = True

     Tambahkan Sub baru dengan nama Timer1_Tick

     Penjelasan : Setelah 5 detik aplikasi akan memulai atau membuka activity/form bernama Login.         Buat Form Login dengan Memilih Project -> Add New Module -> Activity Module (beri nama Login)

10. Anda Bisa Langsung compile dengan klik tombol run / F5 dan melihat nya di Emulator.

Selamat Mencoba dan Terus Pantau Blog ini untuk belajar Tutorial Selanjutnya.

Terima Kasih. AJKL 

KONFIGURASI B4A

     Setelah semua aplikasi telah diinstall sempurna, kini saat nya kita mulai coding, namun kita harus configurasi terlebih dahulu.

1. Jalankan Aplikasi B4A kalian.

2. Pilih Tools -> Configure Path.

3. Pada Tampilan Configuer Path.
     a. Browse javac.exe yang berada di Program files.
     b. Browse android.jar dimana destinasi Android-SDK kita, minimum adalah platform android-26.
     c. Dan terakhir jangan lupa Buat Folder Labraries (Biarkan Kosong Terlebih Dahulu) sebagai Additional Libraries dimana nanti disini akan kita copy kan Library Library yang akan saya berikan selama Tutorial di Blog ini.

Setelah 3 kolom telah terisi sempurna klik saja Ok.

     Demikianlah Configurasi Awal di Basic4Android sebelum kita melakukan coding.

     Pantau terus blog ini untuk mendapatkan tutorial tutorial untuk membuat aplikasi Android.

Terima Kasih. AJKL