How To Make Cool Design Using Material Color Design For Login Page Android Apps

         



          Setelah beberapa lama fakum nulis blogger, kini saya kembali lagi dengan tutorial simple dan mudah untuk dipraktikan. Untuk para penggemar android, khususnya bagi yang mulai haus akan ilmu pemograman Android, pasti gak asing lagi sama kata "Material Design" , apa arti dari material design.

    Material Design itu adalah aturan,theme atau standarisasi design yang di publikasikan oleh google sendiri dan sekarang menjadi panutan para programmer android. Material Design menegaskan design yang simple dengan warna kontras dan tata letak layout yang seperti kertas. Material Design juga menggunakan warna - warna tertentu.





       Untuk mendapatkan Code Hex Color Material Design, bisa langsung akses web berikut Ini :

1. https://material.google.com/style/color.html#color-color-palette

2. https://www.materialui.co/colors


    Setelah Agan dan Kakak Cantik mempelajari material design, kita bisa memulai untuk membuat design login android menggunakan material design.

Step pertama :

        Anda harus membuka android studio dan membuat new android project dengan nama "logindesign ", disini saya memberikan kebebasan untuk menamai file sesuai keinginan kamu,

Step Kedua  :

        Untuk mengatur ukuran margin dalam komponen design pada android, kamu tambahkan code di bawah ini dan masukan dalam file dimens.xml dalam folder res.

res/dimens.xml





Step ke tiga :

       Tambahkan kode color pada file colors.xml di folder res. seperti di bawah ini :




Step ke empat :

       - Buatlah file box_login_line.xml dalam folder drawable untuk membuat shape kotak yang ada

         di  luar area input box pada gambar design login.

       - Add code berikut pada box_login_line.xml

  code untuk box_login_line.xml :





Step kelima :

            Untuk membuat shape transparant pada EditText pada design login, kamu membuat satu lagi file bernama textbox_login_shadow.xml pada folder drawable, lalu masukan barisan code di bawah ini pada  textbox_login_shadow.xml :




Step ke enam :

         untuk mendesign tataletak seperti di gambar halaman login di atas,kamu koding code di bawah ini pada file content_main.xml di folder layout.





Step ke tujuh :

        kemudian buatlah activity_main.xml pada folder layout juga seperti code berikut ini.

 Step ke delapan :

           Kamu tinggal memanggil activity_main.xml pada MainActivity.java, cara nya seperti ini :



Step ke sembilan :

               Karena semua kode sudah di koding dalam project, agan tinggal running aja projectnya dan akan terlihat persis seperti gambar login app.




Kalo agan masih bingung dan udah coba tapi ko beda,tenang eneng bakal kasih source kok...

mari download source design login material design aplikasi android gan,,, tinggal click aja text download source berwarna biru di bawah...tenang gak hoax ko gan ..



Share this

Related Posts

Previous
Next Post »

1 komentar:

komentar