Belajar Membuat Aplikasi Android Studi Kasus Proyek Akademi : Persiapan Asset


Codelab Persiapan Asset

Pada modul ini, Anda akan menyiapkan asset-asset yang digunakan di proyek Academy seperti gambar, warna, menu dan teks.

  1. Kita akan menyiapkan asset-asset yang akan digunakan selama proses pembuatan proyek Academy. Bukalah res/values/colors.xml, ubah dan tambahkan warna-warna berikut:
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <color name="colorPrimary">#3B526B</color>
    <color name="colorPrimaryDark">#FF2F3F51</color>
    <color name="colorAccent">#FF5584</color>
    <color name="colorImage">#13C5C6</color>
    <color name="colorText">#3E3E3E</color>
    <color name="colorTextSecondary">#6D767E</color>
    <color name="colorTextTertiary">#EFEFEF</color>
    <color name="colorAccentSecondary">#FF8FAF</color>

    </resources>
  2. Bukalah res/values/strings.xml, ubah dan tambahkan beberapa string berikut:
    <resources>
    <string name="app_name">Proyek Academies</string>
    <string name="title">Title</string>
    <string name="description">Description</string>
    <string name="dateline">Dateline</string>
    <string name="description_module">Deskripsi Modul</string>
    <string name="example">Example</string>
    <string name="start_learn">Mulai Belajar</string>
    <string name="list_module">Daftar Modul</string>
    <string name="home">Home</string>
    <string name="bookmark">Bookmark</string>
    <string name="menu_bookmark">bookmark</string>
    <string name="next">Next</string>
    <string name="previous">Previous</string>
    <string name="last_seen">Terakhir dilihat</string>
    <string name="message_undo">Batalkan menghapus item sebelumnya?</string>
    <string name="message_ok">OK</string>

    <string name="deadline_date">Deadline %s</string>
    <string name="share_text">Segera daftar kelas %s di dicoding.com</string>
    </resources>

  3. Kemudian tambahkan beberapa gambar berikut:
    • Gambar Bookmarked
      Klik kanan di drawable → new → Vector Asset. Klik Clip Art, pilihlah gambar bookmark, ubah warnanya menjadi putih atau masukkan #FFFFFF dan beri nama ic_bookmarked_white.
      GA-xRd4HK-DJrrIdBnxGVOf69BzQS664M77rh6MaYnOJieEu-hodUuTCEASlbXKX1rJgM_wdGgtezAIhCZ9ESrXNypufxN3fPuZlU7Twyqj5em4uglgiHJI_C1bpDfBT-WKB8cAj
    • Gambar Bookmark
      Klik kanan di drawable → new → Vector Asset. Klik Clip Art, pilihlah gambar bookmark border, ubah warnanya menjadi putih atau masukkan #FFFFFF dan beri nama ic_bookmark_white.
      S5vkOzLN9R9sfcWQ3uPSOG5k-xeHWCoBcUGHBa950wwPv_BuvNO6uVzGuat2MjPJj8vGbgYbd--c2jkyEeC28uWj9rL8drnUyHTMKOrO90JL_ssoPa5wL0eOmozckGH0IBa9s355
    • Gambar Bookmark Selector
      Klik kanan di drawable → new → Drawable resource file dan beri nama ic_bookmark_selector. Bukalah berkas tersebut dan ubah kodenya jadi seperti ini:
      <?xml version="1.0" encoding="utf-8"?>
      <selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_mediumAnimTime">
      <item android:drawable="@drawable/ic_bookmarked_white" android:state_selected="true" />
      <item android:drawable="@drawable/ic_bookmark_white" />

      </selector>
    • Gambar Circle
      Klik kanan di drawable → new → Vector Asset. Klik Clip Art, pilihlah gambar brightness1, ubah warnanya menjadi hitam atau masukkan #000000 dan beri nama ic_circle_black.
      IouTaTRijPecyrLw1j_5wvFgJBHd_XmSAnZ0ngClm3z1fot0zM0hN_XB0oKXdyl2VoQ6STnenWSq4FNg3Rg7vk2AUJhPxkUP75V4xKmqVCODmFHIUgpJ8ZGrAkjSwyCnNgQZ_Mdo
    • Gambar RefreshKlik kanan di drawable → new → Vector Asset. Klik Clip Art, pilihlah gambar refresh dan beri nama ic_refresh_black.
      kvCDZZeLwy1imzm_0bzCgozUGwl7BzAPoDp4U6I9F2lNFRQaMAtbMrL21H9YIEZVyZgpsm8oyYJrqYqhc3WwXk_z2ibAe0IUK0ZpV7QDH1PVl_Co7W2_Vu_OxJpPagRKAC81rWoU
    • Gambar Broken Image
      Klik kanan di drawable → new → Vector Asset. Klik Clip Art, pilihlah gambar broke image dan beri nama ic_broken_image_black.
      TkIItcLYJ9of3q3NyxiUm05cv6rD33GZvOsHCXedKozVwt8bPgqnY7uZScCDZPvgPf4QXAUJrCkJwXX8d9Xs5VOrBhpH_mSdbj3uYHy5hF5mHsADo6fMBd9AP4jf9HNtR2C-ZTwV
    • Gambar LoadingKlik kanan di drawable → new → Drawable resource file dan beri nama ic_loading. Bukalah berkas tersebut dan ubah kodenya jadi seperti ini:
      <?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item
      android:bottom="-1dp"
      android:drawable="@color/colorTextTertiary"
      android:left="1dp"
      android:right="1dp"
      android:top="1dp" />


      <item
      android:bottom="10dp"
      android:drawable="@drawable/ic_broken_image_black"
      android:left="10dp"
      android:right="10dp"
      android:top="10dp" />
      </layer-list>
    • Gambar LoadingKlik kanan di drawable → new → Drawable resource file dan beri nama ic_error. Bukalah berkas tersebut dan ubah kodenya jadi seperti ini:
      <?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item
      android:bottom="0dp"
      android:drawable="@color/colorTextTertiary"
      android:left="0dp"
      android:right="0dp"
      android:top="0dp" />


      <item
      android:bottom="10dp"
      android:drawable="@drawable/ic_broken_image_black"
      android:left="10dp"
      android:right="10dp"
      android:top="10dp" />
      </layer-list>
    • Gambar Share
      Klik kanan di drawable → new → Vector Asset. Klik Clip Art, pilihlah gambar share dan beri nama ic_share_blue.
      9wQ-STiRRUd1gbwbfUaA64SagvR4Ch2In2JdqAiSIK8VOAAqTtQxXbW1nL_JkoKENH1AOgg16c7B2sBCg6hI8Nj3vjcnwFeQ7X-pKCCG1qnnYMHVzebGHM0ni0dOAivywR8yJNdF
      Kemudian bukalah berkas tersebut dan ubah warnanya menjadi biru. Dari:
      android:tint="#FFFFFF"
      menjadi:
      android:tint="@color/colorPrimary"
    • Background ButtonKlik kanan di drawable → new → Drawable resource file dan beri nama bg_button. Bukalah berkas tersebut dan ubah kodenya jadi seperti ini:
      <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:state_pressed="true">
      <shape>
      <solid android:color="@color/colorAccent" />
      <corners android:radius="6dp" />
      <padding android:left="4dp" android:right="4dp" />
      </shape>
      </item>
      <item>
      <shape>
      <solid android:color="@color/colorAccent" />
      <corners android:radius="8dp" />
      <padding android:left="4dp" android:right="4dp" />
      </shape>
      </item>
      </selector>
    • Background Button Disable
      Klik kanan di drawable → new → Drawable resource file dan beri nama bg_button_disable. Bukalah file tersebut dan ubah kodenya jadi seperti ini:
      <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:state_pressed="true">
      <shape>
      <solid android:color="@color/colorAccentSecondary" />
      <corners android:radius="6dp" />
      <padding android:left="4dp" android:right="4dp" />
      </shape>
      </item>
      <item>
      <shape>
      <solid android:color="@color/colorAccentSecondary" />
      <corners android:radius="8dp" />
      <padding android:left="4dp" android:right="4dp" />
      </shape>
      </item>
      </selector>

      Setelah membuat asset gambar tersebut, maka seperti ini file drawable yang ada di proyek Academy:20200114171941c265ddc9670d7a1043d62f419626c482.png

Bagaimana? Dengan ini Anda sudah menyiapkan asset-asset yang digunakan untuk proyek Academy. Sudah siap untuk ke tahap selanjutnya? Modul selanjutnya akan lebih seru lagi, tetap semangat!

Komentar