Belajar Membuat Aplikasi Android Studi Kasus Proyek Akademi : Layouting

Codelab Layouting Proyek Academy

Setelah menyediakan asset-asset yang dibutuhkan, Anda perlu mengubah tampilan dari masing-masing Activity atau Fragment. Ubahlah satu per satu:

1. activity_course_reader.xml
   Bukalah dan ubah ConstraintLayout menjadi FrameLayout:
   

   <?xml version="1.0" encoding="utf-8"?>
   <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/frame_container"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

2. activity_detail_course.xml
   Hapus FloatingActionButton dan tambahkan NestedScrollView:
   

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <com.google.android.material.appbar.AppBarLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:theme="@style/AppTheme.AppBarOverlay">
   
           <androidx.appcompat.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:background="?attr/colorPrimary"
               app:popupTheme="@style/AppTheme.PopupOverlay" />
   
       </com.google.android.material.appbar.AppBarLayout>
   
       <androidx.core.widget.NestedScrollView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_behavior="@string/appbar_scrolling_view_behavior">
   
           <include layout="@layout/content_detail_course" />
   
       </androidx.core.widget.NestedScrollView>
   
   </androidx.coordinatorlayout.widget.CoordinatorLayout>

   Dengan mengubah kode di atas, maka akan terjadi error di kelas DetailCourseActivity. Hapuslah FloatingActionButton pada kelas tersebut, sehingga kode pada kelas DetailCourseActivity menjadi seperti ini:

   Kotlin

   class DetailCourseActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_detail_course) setSupportActionBar(toolbar) supportActionBar?.setDisplayHomeAsUpEnabled(true) } }

   Java

   public class DetailCourseActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail_course); Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } }

3. activity_home.xml
   Ubah ConstraintLayout menjadi LinearLayout dan tambahkan TabLayout dan ViewPager:
   

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".ui.home.HomeActivity">
   
       <com.google.android.material.tabs.TabLayout
           android:id="@+id/tabs"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="?attr/colorPrimary"
           app:tabTextColor="@android:color/white" />
   
       <androidx.viewpager.widget.ViewPager
           android:id="@+id/view_pager"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
   </LinearLayout>

4. content_detail_course.xml
   Ubahlah isi layout tersebut menjadi seperti ini:
   

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:descendantFocusability="blocksDescendants">
   
       <ImageView
           android:id="@+id/image_poster"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:layout_marginStart="8dp"
           android:layout_marginTop="8dp"
           android:src="@color/colorImage"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           tools:ignore="ContentDescription" />
   
       <TextView
           android:id="@+id/text_title"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginEnd="8dp"
           android:gravity="start"
           android:textColor="@color/colorAccent"
           android:textSize="18sp"
           android:textStyle="bold"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.0"
           app:layout_constraintStart_toEndOf="@+id/image_poster"
           app:layout_constraintTop_toTopOf="@+id/image_poster"
           tools:text="@string/title" />
   
       <TextView
           android:id="@+id/text_date"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginTop="8dp"
           android:layout_marginEnd="8dp"
           android:layout_marginBottom="8dp"
           android:gravity="start"
           android:textColor="@color/colorTextSecondary"
           android:textSize="12sp"
           android:textStyle="italic"
           app:layout_constraintBottom_toBottomOf="@+id/image_poster"
           app:layout_constraintEnd_toEndOf="@+id/text_title"
           app:layout_constraintHorizontal_bias="0.0"
           app:layout_constraintStart_toStartOf="@+id/text_title"
           app:layout_constraintTop_toBottomOf="@+id/text_title"
           app:layout_constraintVertical_bias="0.0"
           tools:text="@string/dateline" />
   
       <Button
           android:id="@+id/btn_start"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginTop="8dp"
           android:layout_marginEnd="8dp"
           android:background="@drawable/bg_button"
           android:text="@string/start_learn"
           android:textColor="@android:color/background_light"
           android:textSize="12sp"
           app:layout_constraintBottom_toBottomOf="@+id/image_poster"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="1.0"
           app:layout_constraintStart_toEndOf="@+id/text_date"
           app:layout_constraintTop_toBottomOf="@+id/text_title"
           app:layout_constraintVertical_bias="1.0" />
   
       <TextView
           android:id="@+id/text_desc"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginTop="16dp"
           android:layout_marginEnd="8dp"
           android:text="@string/description_module"
           android:textColor="@color/colorText"
           android:textSize="16sp"
           android:textStyle="bold"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@+id/image_poster" />
   
   
       <View
           android:id="@+id/line1"
           android:layout_width="match_parent"
           android:layout_height="0.5dp"
           android:layout_marginStart="8dp"
           android:layout_marginTop="4dp"
           android:layout_marginEnd="8dp"
           android:background="#000000"
           app:layout_constraintTop_toBottomOf="@+id/text_desc" />
   
       <TextView
           android:id="@+id/text_description"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginTop="8dp"
           android:layout_marginEnd="8dp"
           android:textColor="@color/colorText"
           android:textSize="16sp"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@+id/line1"
           tools:text="@string/description" />
   
       <TextView
           android:id="@+id/text_list_module"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginTop="16dp"
           android:layout_marginEnd="8dp"
           android:text="@string/list_module"
           android:textColor="@color/colorText"
           android:textSize="16sp"
           android:textStyle="bold"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@+id/text_description" />
   
       <View
           android:id="@+id/line2"
           android:layout_width="match_parent"
           android:layout_height="0.5dp"
           android:layout_marginStart="8dp"
           android:layout_marginTop="4dp"
           android:layout_marginEnd="8dp"
           android:background="#000000"
           app:layout_constraintTop_toBottomOf="@+id/text_list_module" />
   
       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/rv_module"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_marginStart="4dp"
           android:layout_marginTop="8dp"
           android:layout_marginEnd="4dp"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/line2"
           tools:listitem="@layout/items_module_list" />
   
       <ProgressBar
           android:id="@+id/progress_bar"
           style="?android:attr/progressBarStyle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginTop="8dp"
           android:visibility="gone"
           app:layout_constraintBottom_toBottomOf="@+id/rv_module"
           app:layout_constraintEnd_toEndOf="@+id/rv_module"
           app:layout_constraintStart_toStartOf="@+id/rv_module"
           app:layout_constraintTop_toTopOf="@+id/rv_module"
           tools:visibility="visible" />
   </androidx.constraintlayout.widget.ConstraintLayout>

   Akan ada eror di bagian tools:listitem="@layout/items_module_list", ini terjadi karena dalam proyek belum ada items_module_list. Anda bisa klik ALT + Enter, kemudian pilih Create layout resource file ‘items_module_list.xml’ dan pilih OK.
   
   Dengan itu Anda sudah membuat satu resource file baru dengan nama items_module_list.xml.
5. fragment_academy.xml
   Tambahkan RecyclerView dan ProgressBar di dalam layout tersebut:
   

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@android:color/white">
   
       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/rv_academy"
           android:layout_width="0dp"
           android:layout_height="0dp"
           app:layout_behavior="@string/appbar_scrolling_view_behavior"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           tools:listitem="@layout/items_academy">
   
       </androidx.recyclerview.widget.RecyclerView>
   
       <ProgressBar
           android:id="@+id/progress_bar"
           style="?android:attr/progressBarStyle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginTop="8dp"
           android:layout_marginEnd="8dp"
           android:layout_marginBottom="8dp"
           android:visibility="gone"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
   
   </androidx.constraintlayout.widget.ConstraintLayout>

   Akan ada eror di bagian tools:listitem="@layout/items_academy", ini terjadi karena dalam proyek belum ada items_academy. Anda bisa klik ALT + Enter, kemudian pilih Create layout resource file items_academy.xml’ dan pilih OK.
   
   Dengan itu Anda sudah membuat satu resource file baru dengan nama items_academy.xml.
6. fragment_bookmark.xml
   Tambahkan RecyclerView dan ProgressBar di dalam layout tersebut:
   

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@android:color/white">
   
       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/rv_bookmark"
           android:layout_width="0dp"
           android:layout_height="0dp"
           app:layout_behavior="@string/appbar_scrolling_view_behavior"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           tools:listitem="@layout/items_bookmark">
   
       </androidx.recyclerview.widget.RecyclerView>
   
       <ProgressBar
           android:id="@+id/progress_bar"
           style="?android:attr/progressBarStyle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:visibility="gone"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
   </androidx.constraintlayout.widget.ConstraintLayout>

   Akan ada eror di bagian tools:listitem="@layout/items_bookmark", ini terjadi karena dalam proyek belum ada items_bookmark. Anda bisa klik ALT + Enter, kemudian pilih Create layout resource file items_bookmark.xml’ dan pilih OK.
   
   Dengan itu Anda sudah membuat satu resource file baru dengan nama items_bookmark.xml.
7. fragment_module_content.xml
   Tambahkan WebView ke dalamnya:
   

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@android:color/white">
   
       <WebView
           android:id="@+id/web_view"
           android:layout_width="0dp"
           android:layout_height="0dp"
           android:layout_marginStart="8dp"
           android:layout_marginTop="8dp"
           android:layout_marginEnd="8dp"
           android:layout_marginBottom="8dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
   
       <ProgressBar
           android:id="@+id/progress_bar"
           style="?android:attr/progressBarStyle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:visibility="gone"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
   
   </androidx.constraintlayout.widget.ConstraintLayout>

8. fragment_module_list.xml
   Tambahkan RecyclerView dan ProgressBar ke dalam layout tersebut:
   

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <ProgressBar
           android:id="@+id/progress_bar"
           style="?android:attr/progressBarStyle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginTop="8dp"
           android:layout_marginEnd="8dp"
           android:layout_marginBottom="8dp"
           android:visibility="gone"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="@+id/rv_module" />
   
       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/rv_module"
           android:layout_width="0dp"
           android:layout_height="0dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           tools:listitem="@layout/items_module_list" />
   </androidx.constraintlayout.widget.ConstraintLayout>

9. items_academy.xml
   Bukalah dan tambahkan kode pada layout tersebut menjadi seperti ini:
   

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/cv_item_course"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginLeft="8dp"
       android:layout_marginRight="8dp"
       android:orientation="vertical"
       app:cardCornerRadius="4dp"
       app:cardElevation="4dp"
       app:cardMaxElevation="4dp"
       app:cardUseCompatPadding="true">
   
       <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/item_container"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
   
           <ImageView
               android:id="@+id/img_poster"
               android:layout_width="120dp"
               android:layout_height="120dp"
               android:layout_alignParentStart="true"
               android:layout_alignParentTop="true"
               android:src="@color/colorImage"
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent"
               tools:ignore="ContentDescription" />
   
           <TextView
               android:id="@+id/tv_item_title"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_marginStart="8dp"
               android:layout_marginTop="8dp"
               android:layout_marginEnd="8dp"
               android:ellipsize="end"
               android:gravity="start"
               android:textColor="@color/colorAccent"
               android:textSize="16sp"
               android:textStyle="bold"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toEndOf="@+id/img_poster"
               app:layout_constraintTop_toTopOf="parent"
               tools:text="@string/title" />
   
           <TextView
               android:id="@+id/tv_item_date"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_marginTop="2dp"
               android:gravity="start"
               android:textColor="@color/colorTextSecondary"
               android:textSize="12sp"
               android:textStyle="italic"
               app:layout_constraintEnd_toEndOf="@+id/tv_item_description"
               app:layout_constraintStart_toStartOf="@+id/tv_item_description"
               app:layout_constraintTop_toBottomOf="@+id/tv_item_description"
               tools:text="@string/dateline" />
   
           <TextView
               android:id="@+id/tv_item_description"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_marginTop="2dp"
               android:ellipsize="end"
               android:gravity="start"
               android:maxLines="1"
               android:textColor="@color/colorText"
               android:textSize="14sp"
               app:layout_constraintEnd_toEndOf="@+id/tv_item_title"
               app:layout_constraintStart_toStartOf="@+id/tv_item_title"
               app:layout_constraintTop_toBottomOf="@+id/tv_item_title"
               tools:text="@string/description" />
   
       </androidx.constraintlayout.widget.ConstraintLayout>
   </androidx.cardview.widget.CardView>

10. items_bookmark.xmlBukalah dan tambahkan kode pada layout tersebut menjadi seperti ini:
    

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/cv_item_course"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:orientation="vertical"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp"
        app:cardMaxElevation="4dp"
        app:cardUseCompatPadding="true">
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/item_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <ImageView
                android:id="@+id/img_poster"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:src="@color/colorImage"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="ContentDescription" />
    
            <TextView
                android:id="@+id/tv_item_title"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:ellipsize="end"
                android:gravity="start"
                android:textColor="@color/colorAccent"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/img_poster"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="@string/title" />
    
            <TextView
                android:id="@+id/tv_item_date"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:gravity="start"
                android:textColor="@color/colorTextSecondary"
                android:textSize="12sp"
                android:textStyle="italic"
                app:layout_constraintEnd_toEndOf="@+id/tv_item_description"
                app:layout_constraintStart_toStartOf="@+id/tv_item_description"
                app:layout_constraintTop_toBottomOf="@+id/tv_item_description"
                tools:text="@string/dateline" />
    
            <TextView
                android:id="@+id/tv_item_description"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:ellipsize="end"
                android:gravity="start"
                android:maxLines="1"
                android:textColor="@color/colorText"
                android:textSize="14sp"
                app:layout_constraintEnd_toEndOf="@+id/tv_item_title"
                app:layout_constraintStart_toStartOf="@+id/tv_item_title"
                app:layout_constraintTop_toBottomOf="@+id/tv_item_title"
                tools:text="@string/description" />
    
            <ImageButton
                android:id="@+id/img_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:background="@android:color/transparent"
                android:scaleType="fitXY"
                android:src="@drawable/ic_share_blue"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_item_date"
                app:layout_constraintVertical_bias="1.0"
                tools:ignore="ContentDescription" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>

11. items_module_list.xml
    Bukalah dan tambahkan kode pada layout tersebut menjadi seperti ini:
    

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:orientation="vertical">
    
        <TextView
            android:id="@+id/text_module_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="4dp"
            android:textColor="@color/colorText"
            tools:text="@string/example" />
    
    </LinearLayout>

12. items_module_list_custom.xml
    Lakukan duplicate layout items_module_list.xml dengan cara klik kanan, pilih copy, klik kanan kembali dan pilih paste. Ubahlah namanya menjadi items_module_list_custom.xml dan klik OK.
    
    Buka dan ubahlah kode di dalam layout tersebut menjadi seperti ini:
    

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:orientation="vertical"
        tools:ignore="UseCompoundDrawables">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="4dp"
            android:orientation="horizontal"
            tools:ignore="UseCompoundDrawables">
    
            <ImageView
                android:id="@+id/imageView"
                android:layout_width="8dp"
                android:layout_height="8dp"
                android:layout_gravity="center"
                app:srcCompat="@drawable/ic_circle_black"
                tools:ignore="ContentDescription" />
    
            <TextView
                android:id="@+id/text_module_title"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="8dp"
                android:layout_weight="2"
                android:ellipsize="end"
                android:textColor="@color/colorText"
                android:textSize="14sp"
                android:textStyle="bold"
                tools:text="@string/example" />
    
        </LinearLayout>
    </LinearLayout>

Dengan ini, semua asset layout sudah Anda persiapkan. Selanjutnya apa lagi ya? Tentu menghubungkan semua asset-asset dan komponen yang ada di layout ke Activity dan Fragment. Tetap semangat ya!

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.
     
   • 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.
     
   • 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.
     
   • Gambar RefreshKlik kanan di drawable → new → Vector Asset. Klik Clip Art, pilihlah gambar refresh dan beri nama ic_refresh_black.
     
   • Gambar Broken Image
     Klik kanan di drawable → new → Vector Asset. Klik Clip Art, pilihlah gambar broke image dan beri nama ic_broken_image_black.
     
   • 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.
     
     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:

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!

Belajar Membuat Aplikasi Android Studi Kasus Proyek Akademi : Dasar

Belajar Membuat Aplikasi Android Studi Kasus Proyek Akademi

Pada kelas ini, Anda akan berlatih bagaimana mengimplementasikan Android Jetpack yang dikemas dalam sebuah aplikasi Academy. 

Lalu bagaimana konsep, atau gambaran hasil akhir dari aplikasi proyek Academy? Seperti inilah skema yang akan dibuat:

Anda akan bermain ViewModel, LiveData, Repository, Injection sederhana, Room, Paging dan masih banyak lagi. Selain itu, Anda akan belajar konsep offline-online dalam pembuatan aplikasi. 

Untuk pembuatan proyek Academy akan dibagi sesuai dengan materi pada modul tersebut. Selain itu, Anda akan dilatih untuk melakukan pengujian setiap ada penambahan atau perubahan fitur baik dengan Unit Test atau Instrumental Test. 

Seperti ini nanti pembagiannya:

Modul 1:
1. Proyek Academy - View Model

Modul 2:
2. Proyek Academy - Repository dan Injection
3. Proyek Academy - LiveData
4. Proyek Academy - Idling Resource

Modul 3:
5. Proyek Academy - Room
6. Proyek Academy - Pagination

Tujuan

Pada Kelas Jetpack, akan ada latihan membuat Aplikasi Academy menggunakan berbagai komponen Android Jetpack yang dibagi berdasarkan materi tiap modulnya. Oleh karena itu, pada modul ini Anda akan mempersiapkan segala asset yang akan digunakan, seperti layout, gambar, warna dan resource lainnya. Ini semua akan mempermudah pembuatan Aplikasi Academy.

Codelab Persiapan Project

Anda dapat melewati codelab ini sampai "Persiapan Menghubungkan Activity dan Fragment" dengan mengunduh project starter melalui link di bawah ini:

• Proyek Academy - Starter

Anda juga dapat mengikuti langkah-langkah di bawah ini jika ingin membuat project dari awal:

1. Buat proyek baru di Android Studio dengan kriteria sebagai berikut :

   Nama Project	Academy
   Target & Minimum Target SDK	Phone and Tablet, API Level 21
   Tipe Activity	Empty Activity
   Activity Name	MainActivity

   
   
2. Selanjutnya ubah MainActivity menjadi HomeActivity dengan cara klik kanan di MainActivity → Refactor → Rename.
   
   Ubah juga layout-nya dari activity_main.xml menjadi activity_home.xml dengan cara klik kanan di activity_main → Refactor → Rename.
   
   
   
3. Selanjutnya, buka build.gradle level project dan tambahkan versi untuk library berikut:

   Kotlin

   ext { //dependencies version appCompatVersion = '1.1.0' coreVersion = '1.1.0' constraintLayoutVersion = '1.1.3' junitVersion = '4.12' espressoVersion = '3.1.0' archLifecycleVersion = '2.1.0' materialVersion = '1.0.0' recyclerViewVersion = '1.1.0' glideVersion = '4.10.0' }

   Java

   ext { //dependencies version appCompatVersion = '1.1.0' constraintLayoutVersion = '1.1.3' junitVersion = '4.12' espressoVersion = '3.1.0' archLifecycleVersion = '2.1.0' materialVersion = '1.0.0' recyclerViewVersion = '1.1.0' glideVersion = '4.10.0' }

   Versi-versi di atas kita gunakan untuk mempermudah pemeliharan library yang Anda gunakan. Setelah itu, buka build.gradle level module: app dan tambahkan library-library berikut:
   
   

   Kotlin

   dependencies { //kotlin implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation "androidx.core:core-ktx:$coreVersion" //ui implementation fileTree(dir: 'libs', include: ['*.jar']) implementation "androidx.appcompat:appcompat:$appCompatVersion" implementation "androidx.constraintlayout:constraintlayout:$constraintLayoutVersion" implementation "androidx.recyclerview:recyclerview:$recyclerViewVersion" implementation "com.google.android.material:material:$materialVersion" implementation "com.github.bumptech.glide:glide:$glideVersion" //testing testImplementation "junit:junit:$junitVersion" androidTestImplementation "junit:junit:$junitVersion" androidTestImplementation "androidx.test.espresso:espresso-core:$espressoVersion" }

   Java

   dependencies { //ui implementation fileTree(dir: 'libs', include: ['*.jar']) implementation "androidx.appcompat:appcompat:$appCompatVersion" implementation "androidx.constraintlayout:constraintlayout:$constraintLayoutVersion" implementation "androidx.recyclerview:recyclerview:$recyclerViewVersion" implementation "com.google.android.material:material:$materialVersion" implementation "com.github.bumptech.glide:glide:$glideVersion" //testing testImplementation "junit:junit:$junitVersion" androidTestImplementation "junit:junit:$junitVersion" androidTestImplementation "androidx.test.espresso:espresso-core:$espressoVersion" }

   Library-library di atas akan digunakan selama pembuatan aplikasi Academy. Jika dilihat, library di atas jadi lebih mudah dilihat dan dipelihara. Jika biasanya Anda memanggil sebuah library ke dalam proyek Android, kini Anda menuliskan beserta versinya, contohnya ketika Anda membutuhkan librarytesting seperti ini:

   testImplementation "junit:junit:4.12"
   androidTestImplementation "junit:junit:4.12"

   Jika library mengalami update, maka Anda perlu meng-update ke versi terbaru dan mengubah versi library satu-satu. Dengan memisahkan versi library, Anda akan dimudahkan ketika terjadi perubahan versi library.
   
   
4. Aktifkan Java 8 Lambda Expressions pada proyek dengan cara menambahkan kode berikut di build.gradle (module:app).

   android {
       ...
   
       compileOptions {
           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
   }

   
   
5. Aktifkan juga vectorDrawable pada proyek dengan cara menambahkan kode berikut di build.gradle (module:app).

   android {
       compileSdkVersion 29
       buildToolsVersion "29.0.2"
       defaultConfig {
           applicationId "com.dicoding.academies"
           minSdkVersion 17
           targetSdkVersion 29
           versionCode 1
           versionName "1.0"
           testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
           vectorDrawables.useSupportLibrary = true
       }

6. Setelah menambahkan library, tambahkan Activity dengan tipe Empty Activity dan berilah nama CourseReaderActivity.
   
7. Buatlah sebuah Activity lagi namun dengan tipe Basic Activity dan beri nama DetailCourseActivity. Ubah title-nya menjadi “Detail Course”.
   Kemudian tambahkan Hierarchical Parent ke kelas HomeActivity. Hierarchical Parent berfungsi untuk menentukan induk(parent) dari suatu Activity. Sehingga ketika tombol up ditekan, ia akan menuju ke parent activity-nya. Cara untuk mengaturnya yaitu dengan menambahkan kode berikut pada AndroidManifest.xml:

   ...
   <activity
       android:name=".DetailCourseActivity"
       android:label="@string/title_activity_detail_course"
       android:parentActivityName=".HomeActivity"
       android:theme="@style/AppTheme.NoActionBar">
       <meta-data
           android:name="android.support.PARENT_ACTIVITY"
           android:value=".HomeActivity" />
   </activity>
   ...

   Kemudian pada DetailCourseActivity tambahkan kode berikut untuk menampilkan tombol up berupa tanda panah di kiri atas halaman detail.

   Kotlin

   class DetailCourseActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_detail_course) setSupportActionBar(toolbar) supportActionBar?.setDisplayHomeAsUpEnabled(true) } }

   Java

   public class DetailCourseActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail_course); Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); if (getSupportActionBar() != null) { getSupportActionBar().setDisplayHomeAsUpEnabled(true); } } }

   
   
8. Setelah itu, buatlah sebuah blank fragment dan berilah nama AcademyFragment. Jangan lupa untuk hilangkan checklist di Include fragment factory method dan Include interface callbacks.
   Lakukan kembali langkah di atas untuk membuat 3 Fragment lagi. Berilah nama ketiga fragment tersebut dengan BookmarkFragment, ModuleListFragment dan ModuleContentFragment. Sehingga tampilan package-nya menjadi seperti ini.
   Agar strukturnya menjadi lebih rapi, kelompokkan kelas-kelas di atas sesuai dengan fungsinya. Buatlah sebuah package baru dengan cara klik kanan pada package utama→ new →package dan berilah nama ui. Kemudian buat lagi package di dalam package UI dengan cara klik kanan pada package ui →new →package dan berilah nama academy. Buat lagi dengan langkah yang sama sehingga kelas-kelas berikut tersusun menjadi seperti ini:Catatan:
   Jika Anda kesulitan dalam membuat package, Anda bisa menekan tombol setting pada kanan atas, unchecklistCompact Middle Packages. Sehingga tampilannya akan menjadi seperti ini:
   
9. Selanjutnya, buatlah package baru untuk menampung kelas model. Klik kanan pada package utama → new → package dan berilah nama data.
   
   Kemudian buatlah beberapa kelas Model berikut:
   • CourseEntity
     Buatlah Class baru dengan nama CourseEntity. Setelah itu, tambahkan kode berikut:

     Kotlin

     data class CourseEntity( var courseId: String, var title: String, var description: String, var deadline: String, var bookmarked: Boolean = false, var imagePath: String )

     Java

     public class CourseEntity { private String courseId; private String title; private String description; private String deadline; private boolean bookmarked = false; private String imagePath; } Setelah itu buatlah Constructor dan Getter and Setter-nya, sehingga menjadi seperti ini: public class CourseEntity { private String courseId; private String title; private String description; private String deadline; private boolean bookmarked = false; private String imagePath; public CourseEntity(String courseId, String title, String description, String deadline, Boolean bookmarked, String imagePath) { this.courseId = courseId; this.title = title; this.description = description; this.deadline = deadline; if (bookmarked != null) { this.bookmarked = bookmarked; } this.imagePath = imagePath; } public String getCourseId() { return courseId; } public void setCourseId(String mCourseId) { this.courseId = mCourseId; } public String getTitle() { return title; } public void setTitle(String mTitle) { this.title = mTitle; } public String getDescription() { return description; } public void setDescription(String mDescription) { this.description = mDescription; } public String getDeadline() { return deadline; } public void setDeadline(String mDeadline) { this.deadline = mDeadline; } public boolean isBookmarked() { return bookmarked; } public void setBookmarked(boolean mBookmarked) { this.bookmarked = mBookmarked; } public String getImagePath() { return imagePath; } public void setImagePath(String mImagePath) { this.imagePath = mImagePath; } }

   • ContentEntity
     Buat lagi lagi Class baru dengan nama ContentEntity. Setelah itu, tambahkan kode berikut:

     Kotlin

     data class ContentEntity( var content: String? )

     Java

     public class ContentEntity { private String mContent; } Setelah itu buatlah Constructor dan Getter and Setter-nya, sehingga menjadi seperti ini: public class ContentEntity { private String mContent; public ContentEntity(String content) { this.mContent = content; } public String getContent() { return mContent; } public void setContent(String mContent) { this.mContent = mContent; } }

   • ModuleEntity
     Buat sekali lagi Class baru dengan nama ModuleEntity. Setelah itu, tambahkan kode berikut:

     Kotlin

     data class ModuleEntity( var moduleId: String, var courseId: String, var title: String, var position: Int, var read: Boolean = false ){ var contentEntity: ContentEntity? = null }

     Java

     public class ModuleEntity { public ContentEntity contentEntity; private String mModuleId; private String mCourseId; private String mTitle; private Integer mPosition; private boolean mRead = false; } Setelah itu buatlah Constructor dan Getter and Setter-nya, sehingga menjadi seperti ini: public class ModuleEntity { public ContentEntity contentEntity; private String mModuleId; private String mCourseId; private String mTitle; private Integer mPosition; private boolean mRead = false; public ModuleEntity(String moduleId, String courseId, String title, Integer position, Boolean read) { this.mModuleId = moduleId; this.mCourseId = courseId; this.mTitle = title; this.mPosition = position; if (read != null) { this.mRead = read; } } public String getModuleId() { return mModuleId; } public void setModuleId(String moduleId) { this.mModuleId = moduleId; } public String getCourseId() { return mCourseId; } public void setCourseId(String courseId) { this.mCourseId = courseId; } public String getTitle() { return mTitle; } public void setTitle(String title) { this.mTitle = title; } public Integer getPosition() { return mPosition; } public void setPosition(Integer position) { this.mPosition = position; } public boolean isRead() { return mRead; } public void setRead(boolean read) { this.mRead = read; } }

10. Seluruh asset sudah Anda siapkan. Selanjutnya, buatlah package baru untuk menampung kelas pembantu seperti untuk menampung data dummy. Klik kanan pada package utama → new → package dan berilah nama utils.
    
    Kemudian buatlah kelas baru di dalamnya dan beri nama DataDummy. Setelah itu, tambahkan kode berikut:

    Kotlin

    object DataDummy { fun generateDummyCourses(): List<CourseEntity> { val courses = ArrayList<CourseEntity>() courses.add(CourseEntity("a14", "Menjadi Android Developer Expert", "Dicoding sebagai satu-satunya Google Authorized Training Partner di Indonesia telah melalui proses penyusunan kurikulum secara komprehensif. Semua modul telah diverifikasi langsung oleh Google untuk memastikan bahwa materi yang diajarkan relevan dan sesuai dengan kebutuhan industri digital saat ini. Peserta akan belajar membangun aplikasi Android dengan materi Testing, Debugging, Application, Application UX, Fundamental Application Components, Persistent Data Storage, dan Enhanced System Integration.", "100 Hari", false, "https://www.dicoding.com/images/small/academy/menjadi_android_developer_expert_logo_070119140352.jpg")) courses.add(CourseEntity("a55", "Kotlin Android Developer Expert", "Pada Google I/O 2017, Kotlin diumumkan sebagai bahasa pemrograman yang termasuk dalam bahasa kelas satu (First class) yang didukung untuk pembuatan aplikasi Android, selain Java dan C++. Kotlin adalah bahasa pemrograman yang dibuat oleh JetBrains. Google juga akan memastikan bahwa semua fitur baru di Android, framework, IDE dan keseluruhan library, akan dapat bekerja dan terintegrasi baik dengan bahasa pemrograman Kotlin serta interopable dengan fungsi-fungsi Java yang telah ada sehingga memungkinkan para engineer melakukan perubahan bagian tertentu aplikasi dari Java ke Kotlin dan sebaliknya dengan sangat mudah.", "50 Hari", false, "https://www.dicoding.com/images/small/academy/kotlin_android_developer_expert_logo_070119140227.jpg")) courses.add(CourseEntity("a47", "Menjadi Game Developer Expert", "Semua modul dalam kelas ini telah diverifikasi langsung oleh Asosiasi Game Indonesia (AGI) untuk memastikan materi yang diajarkan relevan dan sesuai dengan kebutuhan industri game saat ini. Peserta akan belajar best practice membuat game seperti Script, Sprite, UI, Gameplay, Input Method, Porting ke Android / iOS, Modul Services (Collaboration, Ads, Analytics dan Google Play Games - Update Oktober 2018), Porting ke VR - Cardboard dan Gear VR (New Mei 2018) dengan Unity 3D. Peserta juga akan belajar langsung membuat 8 game yaitu Casual (Update Agustus 2018), Pilah Sampah (New November 2018), Tower Defense (New November 2018), Arcade (Update Maret 2018), Platformer (Update Januari 2019), FPS, Multiplayer (Update Maret 2018), serta Game Interaktif dengan VR (New Mei 2018).", "75 Hari", false, "https://www.dicoding.com/images/small/academy/menjadi_game_developer_expert_logo_070119140532.jpg")) courses.add(CourseEntity("a74", "Membangun Progressive Web Apps", "Progressive Web Apps adalah aplikasi web yang memanfaatkan beragam fitur web modern sehingga dapat menyajikan pengalaman pengguna seperti aplikasi native. PWA mengubah sajian tampilan yang umumnya dibuka melalui halaman browser menjadi jendela aplikasi tersendiri. Selain itu PWA juga memungkinkan konten halaman diakses dalam mode offline, menampilkan pesan pemberitahuan, hingga akses ke hardware dari perangkat seperti halnya native app.", "50 Hari", false, "https://www.dicoding.com/images/small/academy/membangun_progressive_web_apps_logo_070119142922.jpg")) courses.add(CourseEntity("a51", "Belajar Membuat Aplikasi Android untuk Pemula", "Kelas ini didesain oleh Google Authorized Training Partner untuk developer Android di Indonesia. Peserta akan mempelajari materi dasar Android dalam 30 hari dan diarahkan untuk membuat aplikasi sederhana. Terdapat 27 modul yang juga merupakan bagian dari Kelas Menjadi Android Developer Expert. Peserta disarankan setidaknya memiliki pengetahuan tentang programming Java dan atau pemrograman berorientasi objek. Sistem pembelajaran adalah online (dapat diakses kapanpun dan darimanapun selama tersedia internet) dan kehadiran tatap muka tidak diperlukan. Tools yang diwajibkan untuk kelas belajar Android ini adalah Android Studio. Peserta harus submit satu proyek akhir yang akan direview oleh developer expert untuk mendapatkan sertifikat dari kelas ini. Bila menginginkan materi yang lebih komprehensif, silahkan mengikuti kelas Menjadi Android Developer Expert.", "30 Hari", false, "https://www.dicoding.com/images/small/academy/belajar_membuat_aplikasi_android_untuk_pemula_logo_070119140911.jpg")) return courses } fun generateDummyModules(courseId: String): List<ModuleEntity> { val modules = ArrayList<ModuleEntity>() modules.add(ModuleEntity( "{$courseId}m1", courseId, "Modul 0 : Introduction", 0)) modules.add(ModuleEntity("{$courseId}m2", courseId, "Modul 1 : Teori 1", 1, false)) modules.add(ModuleEntity("{$courseId}m3", courseId, "Latihan 1", 2, false)) modules.add(ModuleEntity("{$courseId}m4", courseId, "Bedah Kode 1", 3, false)) modules.add(ModuleEntity("{$courseId}m5", courseId, "Modul 2 : Teori 2", 4, false)) modules.add(ModuleEntity("{$courseId}m6", courseId, "Latihan 2", 5, false)) modules.add(ModuleEntity("{$courseId}m7", courseId, "Bedah Kode 2", 6, false)) return modules } }

    Java

    public class DataDummy { public static List<CourseEntity> generateDummyCourses() { ArrayList<CourseEntity> courses = new ArrayList<>(); courses.add(new CourseEntity("a14", "Menjadi Android Developer Expert", "Dicoding sebagai satu-satunya Google Authorized Training Partner di Indonesia telah melalui proses penyusunan kurikulum secara komprehensif. Semua modul telah diverifikasi langsung oleh Google untuk memastikan bahwa materi yang diajarkan relevan dan sesuai dengan kebutuhan industri digital saat ini. Peserta akan belajar membangun aplikasi Android dengan materi Testing, Debugging, Application, Application UX, Fundamental Application Components, Persistent Data Storage, dan Enhanced System Integration.", "100 Hari", null, "https://www.dicoding.com/images/small/academy/menjadi_android_developer_expert_logo_070119140352.jpg")); courses.add(new CourseEntity("a55", "Kotlin Android Developer Expert", "Pada Google I/O 2017, Kotlin diumumkan sebagai bahasa pemrograman yang termasuk dalam bahasa kelas satu (First class) yang didukung untuk pembuatan aplikasi Android, selain Java dan C++. Kotlin adalah bahasa pemrograman yang dibuat oleh JetBrains. Google juga akan memastikan bahwa semua fitur baru di Android, framework, IDE dan keseluruhan library, akan dapat bekerja dan terintegrasi baik dengan bahasa pemrograman Kotlin serta interopable dengan fungsi-fungsi Java yang telah ada sehingga memungkinkan para engineer melakukan perubahan bagian tertentu aplikasi dari Java ke Kotlin dan sebaliknya dengan sangat mudah.", "50 Hari", null, "https://www.dicoding.com/images/small/academy/kotlin_android_developer_expert_logo_070119140227.jpg")); courses.add(new CourseEntity("a47", "Menjadi Game Developer Expert", "Semua modul dalam kelas ini telah diverifikasi langsung oleh Asosiasi Game Indonesia (AGI) untuk memastikan materi yang diajarkan relevan dan sesuai dengan kebutuhan industri game saat ini. Peserta akan belajar best practice membuat game seperti Script, Sprite, UI, Gameplay, Input Method, Porting ke Android / iOS, Modul Services (Collaboration, Ads, Analytics dan Google Play Games - Update Oktober 2018), Porting ke VR - Cardboard dan Gear VR (New Mei 2018) dengan Unity 3D. Peserta juga akan belajar langsung membuat 8 game yaitu Casual (Update Agustus 2018), Pilah Sampah (New November 2018), Tower Defense (New November 2018), Arcade (Update Maret 2018), Platformer (Update Januari 2019), FPS, Multiplayer (Update Maret 2018), serta Game Interaktif dengan VR (New Mei 2018).", "75 Hari", null, "https://www.dicoding.com/images/small/academy/menjadi_game_developer_expert_logo_070119140532.jpg")); courses.add(new CourseEntity("a74", "Membangun Progressive Web Apps", "Progressive Web Apps adalah aplikasi web yang memanfaatkan beragam fitur web modern sehingga dapat menyajikan pengalaman pengguna seperti aplikasi native. PWA mengubah sajian tampilan yang umumnya dibuka melalui halaman browser menjadi jendela aplikasi tersendiri. Selain itu PWA juga memungkinkan konten halaman diakses dalam mode offline, menampilkan pesan pemberitahuan, hingga akses ke hardware dari perangkat seperti halnya native app.", "50 Hari", null, "https://www.dicoding.com/images/small/academy/membangun_progressive_web_apps_logo_070119142922.jpg")); courses.add(new CourseEntity("a51", "Belajar Membuat Aplikasi Android untuk Pemula", "Kelas ini didesain oleh Google Authorized Training Partner untuk developer Android di Indonesia. Peserta akan mempelajari materi dasar Android dalam 30 hari dan diarahkan untuk membuat aplikasi sederhana. Terdapat 27 modul yang juga merupakan bagian dari Kelas Menjadi Android Developer Expert. Peserta disarankan setidaknya memiliki pengetahuan tentang programming Java dan atau pemrograman berorientasi objek. Sistem pembelajaran adalah online (dapat diakses kapanpun dan darimanapun selama tersedia internet) dan kehadiran tatap muka tidak diperlukan. Tools yang diwajibkan untuk kelas belajar Android ini adalah Android Studio. Peserta harus submit satu proyek akhir yang akan direview oleh developer expert untuk mendapatkan sertifikat dari kelas ini. Bila menginginkan materi yang lebih komprehensif, silahkan mengikuti kelas Menjadi Android Developer Expert.", "30 Hari", null, "https://www.dicoding.com/images/small/academy/belajar_membuat_aplikasi_android_untuk_pemula_logo_070119140911.jpg")); return courses; } public static List<ModuleEntity> generateDummyModules(String courseId) { ArrayList<ModuleEntity> modules = new ArrayList<>(); modules.add(new ModuleEntity(String.format("%sm1", courseId), courseId, "Modul 0 : Introduction", 0, null)); modules.add(new ModuleEntity(String.format("%sm2", courseId), courseId, "Modul 1 : Teori 1", 1, null)); modules.add(new ModuleEntity(String.format("%sm3", courseId), courseId, "Latihan 1", 2, null)); modules.add(new ModuleEntity(String.format("%sm4", courseId), courseId, "Bedah Kode 1", 3, null)); modules.add(new ModuleEntity(String.format("%sm5", courseId), courseId, "Modul 2 : Teori 2", 4, null)); modules.add(new ModuleEntity(String.format("%sm6", courseId), courseId, "Latihan 2", 5, null)); modules.add(new ModuleEntity(String.format("%sm7", courseId), courseId, "Bedah Kode 2", 6, null)); return modules; } }

11. Anda perlu menambahkan permission di AndroidManifest.xml. Bukalah berkas tersebut dan sesuaikan seperti berikut:

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        package="com.dicoding.academies">
    
        <uses-permission android:name="android.permission.INTERNET"/>
    
        <application
            android:allowBackup="false"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme"
            tools:ignore="GoogleAppIndexingWarning">
            ...
        </application>
    
    </manifest>

12. Sehingga keseluruhan class akan menjadi seperti ini:
    

Pada modul selanjutnya Anda akan menyiapkan asset-asset yang dibutuhkan untuk proyek Academy. Semangatttt!!!

Belajar ViewModel Dengan Contoh Project Aplikasi Android

Tujuan

Pada codelab kali ini, Anda akan mempelajari bagaimana mengimplementasikan ViewModel dalam membuat aplikasi Android. Hasil dari codelab kali ini akan menjadi seperti ini:

Logika Dasar

Melakukan input → mengirim data ke ViewModel → melakukan penghitungan → mengirim data ke Activity → melakukan perubahan rotasi → data masih terjaga.

Codelab ViewModel

1. Buat proyek baru di Android Studio dengan kriteria sebagai berikut:

   Nama Project	MyViewModel
   Target & Minimum Target SDK	Phone and Tablet, Api level 21
   Tipe Activity	Empty Activity
   Activity Name	MainActivity
   Use AndroidX artifacts	True
   Language	Kotlin/Java

2. Selanjutnya tambahkan library ViewModel di build.gradle(module:App):
   

   implementation 'androidx.lifecycle:lifecycle-extensions:2.1.0'

   
   
3. Buka layout activity_main.xml, kemudian ubah kode di dalamnya menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/length" />

    <EditText
        android:id="@+id/edt_length"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:inputType="numberDecimal"
        android:lines="1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/width" />

    <EditText
        android:id="@+id/edt_width"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:inputType="numberDecimal"
        android:lines="1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/height" />

    <EditText
        android:id="@+id/edt_height"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:inputType="numberDecimal"
        android:lines="1" />

    <Button
        android:id="@+id/btn_calculate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/calculate" />

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/result"
        android:textSize="24sp"
        android:textStyle="bold" />

</LinearLayout>

Tambahkan juga resource string-nya. Tambahkan semua string yang akan digunakan di project ini. Buka berkas strings.xml dan tambahkan kode berikut ini:

<resources>
    <string name="app_name">MyViewModel</string>
    <string name="width">Lebar</string>
    <string name="result">Hasil</string>
    <string name="calculate">Hitung</string>
    <string name="height">Tinggi</string>
    <string name="length">Panjang</string>
</resources>

Selanjutnya, buat kelas baru dengan nama MainViewModel. Ubah dan tambahkan kode pada kelas tersebut menjadi seperti ini:

Kotlin

class MainViewModel : ViewModel() { var result = 0 fun calculate(width: String, height: String, length: String) { result = width.toInt() * height.toInt() * length.toInt() } }

Java

public class MainViewModel extends ViewModel { int result = 0; void calculate(String width, String height, String length) { result = Integer.parseInt(width) * Integer.parseInt(height) * Integer.parseInt(length); } }

Setelah Anda membuat kelas MainViewModel, selanjutnya Anda perlu mengubah dan menambahkan kode pada kelas MainActivity menjadi seperti berikut:

1. Kotlin

   class MainActivity : AppCompatActivity() { private lateinit var viewModel: MainViewModel override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewModel = ViewModelProvider(this)[MainViewModel::class.java] displayResult() btn_calculate.setOnClickListener { val width = edt_width.text.toString() val height = edt_height.text.toString() val length = edt_length.text.toString() when { width.isEmpty() -> { edt_width.error = "Masih kosong" } height.isEmpty() -> { edt_height.error = "Masih kosong" } length.isEmpty() -> { edt_length.error = "Masih kosong" } else -> { viewModel.calculate(width, height, length) displayResult() } } } } private fun displayResult() { tv_result.text = viewModel.result.toString() } }

   Java

   public class MainActivity extends AppCompatActivity { private EditText edtWidth, edtHeight, edtLength; private TextView tvResult; private MainViewModel viewModel; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); edtWidth = findViewById(R.id.edt_width); edtHeight = findViewById(R.id.edt_height); edtLength = findViewById(R.id.edt_length); tvResult = findViewById(R.id.tv_result); viewModel = new ViewModelProvider(this).get(MainViewModel.class); displayResult(); findViewById(R.id.btn_calculate).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String width = edtWidth.getText().toString(); String height = edtHeight.getText().toString(); String length = edtLength.getText().toString(); if (width.isEmpty()) { edtWidth.setError("Masih kosong"); } else if (height.isEmpty()) { edtHeight.setError("Masih kosong"); } else if (length.isEmpty()) { edtLength.setError("Masih kosong"); } else { viewModel.calculate(width, height, length); displayResult(); } } }); } private void displayResult() { tvResult.setText(String.valueOf(viewModel.result)); } }

2. Jalankan aplikasi yang sudah Anda buat dan lakukan perubahan rotasi dari landscape ke portrait atau sebaliknya, maka aplikasi akan mempertahankan data pada kelas MainViewModel.
   
   Dengan memanfaatkan ViewModel, Anda bisa mempertahankan data sesuai kebutuhan Anda.

Bedah Kode

Library ViewModel

Saat Anda akan menggunakan komponen ViewModel, Anda perlu menambahkan satu library berikut untuk memenuhi kebutuhan tersebut.

implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0-rc02'

Library di atas juga sudah termasuk LiveData dan Lifecycle.

MainViewModel

Anda bisa melihat kode pada kelas MainViewModel di bawah ini:

Kotlin

class MainViewModel : ViewModel() { var result = 0 fun calculate(width: String, height: String, length: String) { result = width.toInt() * height.toInt() * length.toInt() } }

Java

class MainViewModel extends ViewModel { int result = 0; void calculate(String width, String height, String length){ result = Integer.parseInt(width) * Integer.parseInt(height) * Integer.parseInt(length); } }

Dengan menambahkan turunan kelas ViewModel ke kelas MainViewModel, itu menandakan bahwa kelas tersebut menjadi kelas ViewModel. 

Segala sesuatu yang ada di kelas tersebut akan terjaga selama Activity masih dalam keadaan aktif. Pada kelas MainViewModel, nilai dari result akan selalu dipertahankan selama MainViewModel masih terikat dengan Activity.

ViewModelProvider

Lalu bagaimana cara menyambungkan kelas MainViewModel dengan MainActivity? Anda bisa lihat kode di bawah ini:

Kotlin

viewModel = ViewModelProvider(this)[MainViewModel::class.java]

Java

viewModel = new ViewModelProvider(this).get(MainViewModel.class);

Ketika Activity membutuhkan ViewModel, Anda cukup memanggil kelas ViewModelProvider dengan parameter context. Karena inisialisasi dilakukan di Activity, maka kita menggunakan this sebagai context. 

Kemudian input .get() diisi dengan kelas ViewModel mana yang akan dihubungkan dengan Activity.

Mendapatkan Value dari ViewModel

Jika pada kelas ViewModel, sudah ada metode calculate yang berfungsi untuk melakukan perkalian dari input lebar, panjang dan tinggi. Maka Anda cukup memanggil metode tersebut seperti ini:

Kotlin

viewModel.calculate(width, height, length)

Java

viewModel.calculate(width, height, length);

Untuk mendapatkan result, cukup dengan:

Kotlin

viewModel.result

Java

viewModel.result

Namun jika Anda perhatikan, setiap perubahan dari result tidak bisa secara otomatis terganti. Anda perlu memanggil metode displayResult() untuk memperbarui nilai result. 

Hal ini karena Anda belum menggunakan LiveData yang bisa otomatis memperbarui teks ketika ada perubahan data. Tenang saja, Anda akan mempelajari tentang ini di latihan selanjutnya.

Anda bisa unduh proyek di atas pada tautan berikut:
Source Code Latihan MyViewModel

ViewModel merupakan bagian kecil dari Architecture Component. Akan ada beberapa komponen lain, seperti LiveData dan Room. Komponen lain tersebut akan Anda pelajari pada materi selanjutnya.