✨ implement category layout

android/app/src/main/java/net/pengcook/android/presentation/category/Category.kt

@@ -0,0 +1,7 @@
+package net.pengcook.android.presentation.category
+
+data class Category(
+    val id: Long,
+    val title: String,
+    val imageUrl: String,
+)

android/app/src/main/java/net/pengcook/android/presentation/category/CategoryAdapter.kt

@@ -0,0 +1,46 @@
+package net.pengcook.android.presentation.category
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.DiffUtil
+import androidx.recyclerview.widget.ListAdapter
+import net.pengcook.android.databinding.ItemCategoryBinding
+
+class CategoryAdapter(
+    private val categoryEventListener: CategoryEventListener,
+) : ListAdapter<Category, CategoryViewHolder>(diffUtil) {
+    override fun onCreateViewHolder(
+        parent: ViewGroup,
+        viewType: Int,
+    ): CategoryViewHolder {
+        val layoutInflater = LayoutInflater.from(parent.context)
+        val binding = ItemCategoryBinding.inflate(layoutInflater, parent, false)
+        return CategoryViewHolder(binding, categoryEventListener)
+    }
+
+    override fun onBindViewHolder(
+        holder: CategoryViewHolder,
+        position: Int,
+    ) {
+        holder.bind(getItem(position))
+    }
+
+    companion object {
+        private val diffUtil =
+            object : DiffUtil.ItemCallback<Category>() {
+                override fun areItemsTheSame(
+                    oldItem: Category,
+                    newItem: Category,
+                ): Boolean {
+                    return oldItem.id == newItem.id
+                }
+
+                override fun areContentsTheSame(
+                    oldItem: Category,
+                    newItem: Category,
+                ): Boolean {
+                    return oldItem == newItem
+                }
+            }
+    }
+}

android/app/src/main/java/net/pengcook/android/presentation/category/CategoryEventListener.kt

@@ -0,0 +1,5 @@
+package net.pengcook.android.presentation.category
+
+interface CategoryEventListener {
+    fun onNavigateToRecipesByCategory(categoryId: Long)
+}

android/app/src/main/java/net/pengcook/android/presentation/category/CategoryFragment.kt

@@ -0,0 +1,53 @@
+package net.pengcook.android.presentation.category
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.viewModels
+import net.pengcook.android.R
+import net.pengcook.android.databinding.FragmentCategoryBinding
+import net.pengcook.android.presentation.core.style.GridSpacingItemDecoration
+
+class CategoryFragment : Fragment() {
+    private var _binding: FragmentCategoryBinding? = null
+    private val binding: FragmentCategoryBinding
+        get() = _binding!!
+    private val viewModel: CategoryViewModel by viewModels()
+    private val adapter: CategoryAdapter by lazy { CategoryAdapter(viewModel) }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ): View {
+        _binding = FragmentCategoryBinding.inflate(inflater, container, false)
+        return binding.root
+    }
+
+    override fun onViewCreated(
+        view: View,
+        savedInstanceState: Bundle?,
+    ) {
+        super.onViewCreated(view, savedInstanceState)
+        binding.adapter = adapter
+        val categories =
+            List(17) { id ->
+                Category(
+                    id.toLong(),
+                    "category ${id + 1}",
+                    "https://www.alphafoodie.com/wp-content/uploads/2021/06/Authentic-Kimchi-1-of-1-2.jpeg",
+                )
+            }
+        adapter.submitList(categories)
+
+        val spacingInPixels = resources.getDimensionPixelSize(R.dimen.item_spacing_category)
+        binding.rvCategory.addItemDecoration(GridSpacingItemDecoration(3, spacingInPixels, false))
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        _binding = null
+    }
+}

android/app/src/main/java/net/pengcook/android/presentation/category/CategoryViewHolder.kt

@@ -0,0 +1,17 @@
+package net.pengcook.android.presentation.category
+
+import androidx.recyclerview.widget.RecyclerView
+import net.pengcook.android.databinding.ItemCategoryBinding
+
+class CategoryViewHolder(
+    private val binding: ItemCategoryBinding,
+    categoryEventListener: CategoryEventListener,
+) : RecyclerView.ViewHolder(binding.root) {
+    init {
+        binding.categoryEventListener = categoryEventListener
+    }
+
+    fun bind(category: Category) {
+        binding.category = category
+    }
+}

android/app/src/main/java/net/pengcook/android/presentation/category/CategoryViewModel.kt

@@ -0,0 +1,8 @@
+package net.pengcook.android.presentation.category
+
+import androidx.lifecycle.ViewModel
+
+class CategoryViewModel : ViewModel(), CategoryEventListener {
+    override fun onNavigateToRecipesByCategory(categoryId: Long) {
+    }
+}

android/app/src/main/java/net/pengcook/android/presentation/core/style/GridSpacingItemDecoration.kt

@@ -0,0 +1,38 @@
+package net.pengcook.android.presentation.core.style
+
+import android.graphics.Rect
+import android.view.View
+import androidx.recyclerview.widget.RecyclerView
+
+class GridSpacingItemDecoration(
+    private val spanCount: Int,
+    private val spacing: Int,
+    private val includeEdge: Boolean,
+) : RecyclerView.ItemDecoration() {
+    override fun getItemOffsets(
+        outRect: Rect,
+        view: View,
+        parent: RecyclerView,
+        state: RecyclerView.State,
+    ) {
+        val position = parent.getChildAdapterPosition(view)
+        val column = position % spanCount
+
+        if (includeEdge) {
+            outRect.left = spacing - column * spacing / spanCount
+            outRect.right = (column + 1) * spacing / spanCount
+
+            if (position < spanCount) {
+                outRect.top = spacing
+            }
+            outRect.bottom = spacing / 2
+        } else {
+            outRect.left = column * spacing / spanCount
+            outRect.right = spacing - (column + 1) * spacing / spanCount
+            if (position >= spanCount) {
+                outRect.top = spacing
+            }
+            outRect.bottom = spacing
+        }
+    }
+}

android/app/src/main/res/drawable/bg_radius_default.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@android:color/transparent"/>
+    <corners android:radius="16dp"/>
+</shape>

android/app/src/main/res/drawable/bg_radius_filled.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/gray_300"/>
+    <corners android:radius="16dp"/>
+    <stroke android:color="@color/gray" android:width="1dp" />
+</shape>

android/app/src/main/res/layout/fragment_category.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout 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"
+    xmlns:bind="http://schemas.android.com/apk/res-auto">
+
+    <data>
+        <variable
+            name="adapter"
+            type="net.pengcook.android.presentation.category.CategoryAdapter" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        tools:context=".category.CategoryFragment">
+
+        <include
+            android:id="@+id/abl_category"
+            layout="@layout/item_appbar_default"
+            android:layout_width="match_parent"
+            android:layout_height="?attr/actionBarSize"
+            bind:title="@{@string/category_appbar}"/>
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/rv_category"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            android:adapter="@{adapter}"
+            app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
+            app:layout_behavior="@string/appbar_scrolling_view_behavior"
+            app:spanCount="3"
+            tools:listitem="@layout/item_category"
+            app:layout_constraintTop_toBottomOf="@id/abl_category"
+            app:layout_constraintBottom_toBottomOf="parent"
+            tools:itemCount="6"
+            android:layout_marginHorizontal="12dp"/>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

android/app/src/main/res/layout/fragment_sign_up.xml

@@ -43,7 +43,7 @@
                     android:layout_height="120dp"
                     android:layout_gravity="center"
                     android:layout_marginHorizontal="20dp"
-                    android:background="@drawable/bg_radius"
+                    android:background="@drawable/bg_radius_outlined"
                     app:layout_constraintDimensionRatio="H,1:1"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"

android/app/src/main/res/layout/item_category.xml

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout 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">
+
+    <data>
+
+        <variable
+            name="category"
+            type="net.pengcook.android.presentation.category.Category" />
+
+        <variable
+            name="categoryEventListener"
+            type="net.pengcook.android.presentation.category.CategoryEventListener" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:onClick="@{() -> categoryEventListener.onNavigateToRecipesByCategory(category.id)}">
+
+        <ImageView
+            android:id="@+id/iv_category"
+            android:layout_width="120dp"
+            android:layout_height="0dp"
+            android:background="@drawable/bg_radius_filled"
+            android:clipToOutline="true"
+            android:layout_margin="8dp"
+            android:scaleType="centerCrop"
+            app:imageUrl="@{category.imageUrl}"
+            app:layout_constraintDimensionRatio="1:1"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:src="@drawable/ic_launcher_background" />
+
+        <TextView
+            android:id="@+id/tv_category"
+            style="@style/Body.B2"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="16dp"
+            android:gravity="center"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/iv_category"
+            android:text="@{category.title}"
+            tools:text="Category"
+            app:layout_constraintBottom_toBottomOf="parent"/>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

android/app/src/main/res/layout/item_spinner.xml

@@ -12,7 +12,7 @@
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@drawable/bg_radius">
+        android:background="@drawable/bg_radius_outlined">
 
         <Spinner
             android:id="@+id/sp_default"

android/app/src/main/res/layout/item_textfield.xml

@@ -23,7 +23,7 @@
             style="@style/Body.B2"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:background="@drawable/bg_radius"
+            android:background="@drawable/bg_radius_outlined"
             android:hint="@{hintContent}"
             android:importantForAutofill="no"
             android:inputType="text"

android/app/src/main/res/navigation/nav_graph.xml

@@ -21,7 +21,7 @@
         android:id="@+id/onboardingFragment"
         android:name="net.pengcook.android.presentation.onboarding.OnboardingFragment"
         android:label="fragment_onboarding"
-        tools:layout="@layout/fragment_onboarding" >
+        tools:layout="@layout/fragment_onboarding">
         <action
             android:id="@+id/action_onboardingFragment_to_signUpFragment"
             app:destination="@id/signUpFragment" />
@@ -31,17 +31,23 @@
         android:id="@+id/signUpFragment"
         android:name="net.pengcook.android.presentation.signup.SignUpFragment"
         android:label="fragment_sign_up"
-        tools:layout="@layout/fragment_sign_up" >
+        tools:layout="@layout/fragment_sign_up">
         <action
             android:id="@+id/action_signUpFragment_to_homeFragment"
             app:destination="@id/homeFragment"
             app:popUpTo="@id/onboardingFragment"
-            app:popUpToInclusive="true"/>
+            app:popUpToInclusive="true" />
         <action
             android:id="@+id/action_signUpFragment_to_onboardingFragment"
             app:destination="@id/onboardingFragment"
             app:popUpTo="@id/onboardingFragment"
-            app:popUpToInclusive="false"/>
+            app:popUpToInclusive="false" />
     </fragment>
 
+    <fragment
+        android:id="@+id/categoryFragment"
+        android:name="net.pengcook.android.presentation.category.CategoryFragment"
+        android:label="fragment_category"
+        tools:layout="@layout/item_category" />
+
 </navigation>

android/app/src/main/res/values/buttons.xml

@@ -20,7 +20,7 @@
         <item name="android:textColor">@color/black_100</item>
         <item name="android:fontFamily">@font/notosans_bold</item>
         <item name="android:textSize">18sp</item>
-        <item name="android:background">@drawable/bg_radius</item>
+        <item name="android:background">@drawable/bg_radius_outlined</item>
         <item name="android:gravity">center</item>
     </style>
 </resources>

android/app/src/main/res/values/dimens.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <dimen name="text_margin">16dp</dimen>
-</resources>
+    <dimen name="item_spacing_category">8dp</dimen>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -23,4 +23,6 @@
     <string name="signup_country_title">Country</string>
     <string name="signup_button_next">Next</string>
 
+    <string name="category_appbar">Category</string>
+
 </resources>