Android Native Membuat aplikasi foodbank part 3 - Mempercantik welcome screen

Pada tutorial kali ini, kita akan mempercantik tampilan Welcome Screen. Kita langsung saja pada tutorialnya.

Langkah pertama, kita akan menambahkan icon indicator, yaitu tanda halaman yang sedang aktif :

1. Tambahkan icon titik warna grey dan warna putih

   • Klik kanan pada package res/drawable
   • Pilih New -> Vector Asset
   • Pilih icon ic_fiber_manual_record_black_24dp
   • Ganti nama menjadi ic_indicator_grey.xml kemudian ganti warnanya menjadi grey
   • Lakukan langkah yang sama dan ganti namanya menjadi ic_indicator_white.xml dan ubah warna menjadi warna putih

2. Buka file activity_welcome.xml, kemudian tambahkan kode berikut

        <LinearLayout
        android:layout_above="@id/btn_order_now"
        android:id="@+id/indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30.0dp"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal">
   
                <ImageView
                    android:id="@+id/indictor1"
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/ic_indicator_grey" />
   
                <ImageView
                    android:id="@+id/indictor2"
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/ic_indicator_grey" />
   
                <ImageView
                    android:id="@+id/indictor3"
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/ic_indicator_grey" />
            </LinearLayout>
   
        <Button
            android:layout_marginLeft="24.0dp"
            android:layout_marginRight="24.0dp"
            android:id="@+id/btn_order_now"
            android:layout_marginBottom="30.0dp"
            android:layout_alignParentBottom="true"
            android:text="Order Now"
            android:textColor="#FFFFFF"
            android:layout_width="match_parent"
            android:layout_height="40.0dp" />
   

   pada preview, harusnya tampil seperti gambar 1. Gambar 1

Mempercantik tombol ORDER NOW

untuk mempercantik tombol order now, kita membutuhkan sebuah backgound, untuk itu kita akan membuat background terleibh dahulu, caranya :

1. Klik kanan pada package res -> drawable

2. Pilih New -> Drawable resource file

3. Beri nama background_tombol

4. Buka dan ganti kodenya menjadi seperti ini

           <?xml version="1.0" encoding="utf-8"?>
           <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
               <solid android:color="#FF9800" />
               <corners android:bottomRightRadius="24dp"
                   android:bottomLeftRadius="24dp"
                   android:topRightRadius="24dp"
                   android:topLeftRadius="24dp"/>
           </shape>
   

5. Tambahkan file yang telah dibuat kedalam tombol Order Now dengan cara menambahkan atribut baru kedalamnya

           android:background="@drawable/background_tombol"
   

6. Harusnya tampilan tombol Order now sudah berubah sekarang

Membuat Logic Slider

membuat logic pada slider dihalaman welcome, caranya :

1. Buka file WelcomeActivity.java
2. Tambahkan kode berikut

       public class WelcomeActivity extends AppCompatActivity {
   
           private ViewPager viewPager;
           private ImageView[] indicators = new ImageView[3];
   
   
           private void setIndicators() {
               indicators[0] = findViewById(R.id.indictor1);
               indicators[1] = findViewById(R.id.indictor2);
               indicators[2] = findViewById(R.id.indictor3);
           }
   
           private void setIndicatorImage(int position) {
               int iconWhite = R.drawable.ic_indicator_white;
               int iconGrey = R.drawable.ic_indicator_grey;
               indicators[0].setImageResource(position == 0 ? iconWhite : iconGrey);
               indicators[1].setImageResource(position == 1 ? iconWhite : iconGrey);
               indicators[2].setImageResource(position == 2 ? iconWhite : iconGrey);
           }
   
           private void setViewPager() {
               viewPager = findViewById(R.id.viewpager);
               viewPager.setAdapter(new WelcomeAdapter(this));
               viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                   @Override
                   public void onPageScrolled(int i, float v, int i1) {
   
                   }
   
                   @Override
                   public void onPageSelected(int i) {
                       setIndicatorImage(i);
   
                   }
   
                   @Override
                   public void onPageScrollStateChanged(int i) {
   
                   }
               });
               setIndicatorImage(0);
           }
   
           @Override
           protected void onCreate(Bundle savedInstanceState) {
               super.onCreate(savedInstanceState);
               setContentView(R.layout.activity_welcome);
               setIndicators();
               setViewPager();
   
               //tombol order now
               Button orderNow = findViewById(R.id.btn_order_now);
               orderNow.setOnClickListener(new View.OnClickListener() {
                   @Override
                   public void onClick(View v) {
                       startActivity(new Intent(WelcomeActivity.this,LoginActivity.class));
                   }
               });
           }
       }
   

3. Kita akan menjelaskan maksud dari kode ini dikelas nanti.
4. Silahkan jalankan aplikasi, seharusnya sudah selesai untuk mempercantik halaman Welcome dan akan terlihat seperti gift dibawah

Mempercantik halaman login

halaman login dan register merupakan halaman yang sangat penting pada aplikasi ini, pada dasarnya tidak semua aplikasi membutuhkan halaman login dan halaman register. Caranya sebagai berikut :

1. Buka file activity_login.xml

2. Tambahkan kode berikut

        <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFB752"
            tools:context=".views.LoginActivity">
   
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
   
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="30.0dp"
                    android:src="@drawable/ic_arrow_back_black_24dp" />
   
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="30.0dp"
                    android:text="Sig In"
                    android:textColor="#FFFFFF" />
            </RelativeLayout>
   
            <LinearLayout
   
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_margin="24.0dp"
                android:orientation="vertical">
                <TextView
                    android:textSize="40.0dp"
                    android:textColor="#FFFFFF"
                    android:layout_centerHorizontal="true"
                    android:text="FoodBank"
                    android:layout_width="wrap_content"
                    android:layout_marginBottom="100.0dp"
                    android:layout_height="wrap_content" />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="40.0dp"
                    android:layout_gravity="center"
                    android:background="@drawable/background_edittext"
                    android:gravity="center"
                    android:hint="Email Address"
                    android:textColor="#FFFFFF" />
   
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="40.0dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="20.0dp"
                    android:background="@drawable/background_edittext"
                    android:gravity="center"
                    android:hint="Password"
                    android:textColor="#FFFFFF" />
                <Button
                    android:textColor="#FFFFFF"
                    android:text="SIGN IN"
                    android:background="@drawable/background_tombol"
                    android:layout_marginTop="20.0dp"
                    android:layout_width="match_parent"
                    android:layout_height="40.0dp" />
   
                <LinearLayout
                    android:layout_marginTop="10.0dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView
                        android:textColor="#000000"
                        android:text="Don't have account?"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />
                    <TextView
                        android:id="@+id/txt_register"
                        android:layout_marginLeft="10.0dp"
                        android:textColor="#FFFFFF"
                        android:text="Register"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />
                </LinearLayout>
        <TextView
            android:layout_marginTop="20.0dp"
            android:layout_marginBottom="20.0dp"
            android:text="OR"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
                <LinearLayout
                    android:layout_marginTop="10.0dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <Button
                        android:textColor="#FFFFFF"
                        android:background="@drawable/background_facebook"
                        android:text="F"
                        android:layout_width="80.0dp"
                        android:layout_height="40.0dp" />
                    <Button
                        android:textColor="#FFFFFF"
                        android:text="G+"
                        android:background="@drawable/background_google"
                        android:layout_marginRight="16.0dp"
                        android:layout_marginLeft="16.0dp"
                        android:layout_width="80.0dp"
                        android:layout_height="40.0dp" />
                    <Button
                        android:textColor="#FFFFFF"
                        android:background="@drawable/background_twitter"
                        android:text="T"
                        android:layout_width="80.0dp"
                        android:layout_height="40.0dp" />
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>
   

3. Buatlah tulisan Register dapat di klik dan arahkan fungsinya untuk membuka halaman register (Ini challenge untuk temen-temen)

4. tampilan login seharusnya seperti gambar 2

5. Untuk file background_facebook.xml , background_google.xml dan background_twitter.xml silahkan dibuat sesuai dengan yang kalian sukai.

Mempercantik halaman Register

Silahkan percantik halaman register sesuai dengan yang kalian sukai, punya saya, saya buat seperti gambar 3

Hasil Akhir dari tutorial kali ini dapat dilihat pada gif dibawah

Ada banyak hal yang belum saya sampaikan pada tulisan ini, kita bahasnya dikelas ya, jika ada yang belum faham monggo ditanyakan.

Oke sekian dari saya, maaf atas kesalahan dan ketidak sempurnaan modulnya, sampai ketemu dikelas.

Video