From d423245dfcd524ce93066eec7d31ec4e5d81a979 Mon Sep 17 00:00:00 2001
From: atuzhilov <atuzhilov@tradingview.com>
Date: Fri, 14 Feb 2025 23:09:05 +0300
Subject: [PATCH] navigation logic, alert dialogs and layout have been added

---
 app/build.gradle.kts                          |  1 +
 .../ru/otus/cookbook/ui/CategoryViewHolder.kt | 15 ++++
 .../ru/otus/cookbook/ui/CookBookAdapter.kt    | 66 +++++++++++++++
 .../ru/otus/cookbook/ui/CookbookFragment.kt   | 28 ++++++-
 .../otus/cookbook/ui/DeleteDialogFragment.kt  | 41 ++++++++++
 .../ru/otus/cookbook/ui/ItemClickListener.kt  |  5 ++
 .../ru/otus/cookbook/ui/RecipeFragment.kt     | 52 +++++++++++-
 .../ru/otus/cookbook/ui/RecipeViewHolder.kt   | 31 +++++++
 .../drawable/bg_list_item_rounded_corners.xml | 16 ++++
 app/src/main/res/drawable/circle_shape.xml    | 11 +++
 app/src/main/res/drawable/ic_arrow.xml        | 13 +++
 app/src/main/res/drawable/ic_close.xml        |  9 ++
 app/src/main/res/drawable/ic_trash.xml        |  9 ++
 app/src/main/res/layout/activity_main.xml     | 24 +++---
 app/src/main/res/layout/fragment_cookbook.xml | 38 ++++++++-
 app/src/main/res/layout/fragment_recipe.xml   | 82 ++++++++++++++++++-
 .../main/res/layout/vh_recipe_category.xml    | 24 +++++-
 app/src/main/res/layout/vh_recipe_item.xml    | 70 +++++++++++++++-
 app/src/main/res/menu/menu.xml                | 12 +++
 app/src/main/res/navigation/nav_graph.xml     | 44 ++++++++++
 app/src/main/res/values-night/themes.xml      |  6 +-
 app/src/main/res/values/dimensions.xml        |  4 +
 app/src/main/res/values/strings.xml           |  9 ++
 app/src/main/res/values/themes.xml            |  7 ++
 gradle/libs.versions.toml                     |  2 +
 25 files changed, 587 insertions(+), 32 deletions(-)
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/CategoryViewHolder.kt
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/CookBookAdapter.kt
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/DeleteDialogFragment.kt
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/ItemClickListener.kt
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/RecipeViewHolder.kt
 create mode 100644 app/src/main/res/drawable/bg_list_item_rounded_corners.xml
 create mode 100644 app/src/main/res/drawable/circle_shape.xml
 create mode 100644 app/src/main/res/drawable/ic_arrow.xml
 create mode 100644 app/src/main/res/drawable/ic_close.xml
 create mode 100644 app/src/main/res/drawable/ic_trash.xml
 create mode 100644 app/src/main/res/menu/menu.xml
 create mode 100644 app/src/main/res/navigation/nav_graph.xml
 create mode 100644 app/src/main/res/values/dimensions.xml

diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index f3207a6..38a7356 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -45,6 +45,7 @@ dependencies {
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.navigation.fragment)
     implementation(libs.androidx.navigation.ui)
+    implementation(libs.glide)
     implementation(libs.material)
     implementation(libs.androidx.activity)
     implementation(libs.androidx.constraintlayout)
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/CategoryViewHolder.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/CategoryViewHolder.kt
new file mode 100644
index 0000000..33080cc
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/CategoryViewHolder.kt
@@ -0,0 +1,15 @@
+package ru.otus.cookbook.ui
+
+import android.view.View
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import ru.otus.cookbook.R
+import ru.otus.cookbook.data.RecipeListItem
+
+class CategoryViewHolder(view: View) : RecyclerView.ViewHolder(view) {
+    private val categoryName = view.findViewById<TextView>(R.id.category_name_tv)
+
+    fun bind(item: RecipeListItem.CategoryItem) {
+        categoryName.text = item.name
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/CookBookAdapter.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/CookBookAdapter.kt
new file mode 100644
index 0000000..2d7c64a
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/CookBookAdapter.kt
@@ -0,0 +1,66 @@
+package ru.otus.cookbook.ui
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.DiffUtil
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import ru.otus.cookbook.R
+import ru.otus.cookbook.data.RecipeListItem
+
+class CookBookAdapter(private val itemClickListener: ItemClickListener) :
+    ListAdapter<RecipeListItem, RecyclerView.ViewHolder>(DiffCallback()) {
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
+        return when (viewType) {
+            ViewTypes.RECIPE.ordinal -> {
+                val view = LayoutInflater.from(parent.context)
+                    .inflate(R.layout.vh_recipe_item, parent, false)
+                RecipeViewHolder(view, itemClickListener)
+            }
+
+            ViewTypes.CATEGORY.ordinal -> {
+                val view = LayoutInflater.from(parent.context)
+                    .inflate(R.layout.vh_recipe_category, parent, false)
+                CategoryViewHolder(view)
+            }
+
+            else -> throw IllegalArgumentException("View type is not supported")
+        }
+    }
+
+    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
+        when (holder) {
+            is RecipeViewHolder -> holder.bind(getItem(position) as RecipeListItem.RecipeItem)
+            is CategoryViewHolder -> holder.bind(getItem(position) as RecipeListItem.CategoryItem)
+        }
+    }
+
+    override fun getItemViewType(position: Int): Int {
+        return when (currentList[position]) {
+            is RecipeListItem.CategoryItem -> ViewTypes.CATEGORY.ordinal
+            is RecipeListItem.RecipeItem -> ViewTypes.RECIPE.ordinal
+        }
+    }
+}
+
+enum class ViewTypes {
+    CATEGORY,
+    RECIPE
+}
+
+class DiffCallback : DiffUtil.ItemCallback<RecipeListItem>() {
+    override fun areItemsTheSame(oldItem: RecipeListItem, newItem: RecipeListItem): Boolean {
+        return when {
+            oldItem is RecipeListItem.RecipeItem && newItem is RecipeListItem.RecipeItem -> oldItem.id == newItem.id
+            oldItem is RecipeListItem.CategoryItem && newItem is RecipeListItem.CategoryItem ->
+                oldItem.name == newItem.name
+
+            else -> false
+        }
+    }
+
+    override fun areContentsTheSame(oldItem: RecipeListItem, newItem: RecipeListItem): Boolean {
+        return oldItem == newItem
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt
index efe6939..1889ba2 100644
--- a/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt
@@ -8,19 +8,23 @@ import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
+import androidx.navigation.fragment.findNavController
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import kotlinx.coroutines.launch
+import ru.otus.cookbook.R
 import ru.otus.cookbook.data.RecipeListItem
 import ru.otus.cookbook.databinding.FragmentCookbookBinding
 
-class CookbookFragment : Fragment() {
+class CookbookFragment : Fragment(), ItemClickListener {
 
     private val binding = FragmentBindingDelegate<FragmentCookbookBinding>(this)
     private val model: CookbookFragmentViewModel by viewModels { CookbookFragmentViewModel.Factory }
+    private val adapter: CookBookAdapter by lazy { CookBookAdapter(this) }
 
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
-        savedInstanceState: Bundle?
+        savedInstanceState: Bundle?,
     ): View = binding.bind(
         container,
         FragmentCookbookBinding::inflate
@@ -34,13 +38,29 @@ class CookbookFragment : Fragment() {
                 .flowWithLifecycle(viewLifecycleOwner.lifecycle)
                 .collect(::onRecipeListUpdated)
         }
+        binding.withBinding {
+            recipeListMt.setNavigationOnClickListener {
+                MaterialAlertDialogBuilder(requireContext())
+                    .setMessage(getString(R.string.close_app_message))
+                    .setPositiveButton(R.string.yes_btn) { _, _ ->
+                        requireActivity().finishAndRemoveTask()
+                    }
+                    .setNegativeButton(R.string.no_btn, null)
+                    .show()
+            }
+        }
     }
 
     private fun setupRecyclerView() = binding.withBinding {
-        // Setup RecyclerView
+        recipeListRv.adapter = adapter
     }
 
     private fun onRecipeListUpdated(recipeList: List<RecipeListItem>) {
-        // Handle recipe list
+        adapter.submitList(recipeList)
+    }
+
+    override fun itemClicked(id: Int) {
+        val action = CookbookFragmentDirections.actionCookbookFragmentToRecipeFragment(id)
+        findNavController().navigate(action)
     }
 }
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/DeleteDialogFragment.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/DeleteDialogFragment.kt
new file mode 100644
index 0000000..5a82478
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/DeleteDialogFragment.kt
@@ -0,0 +1,41 @@
+package ru.otus.cookbook.ui
+
+import android.app.Dialog
+import android.os.Bundle
+import androidx.fragment.app.DialogFragment
+import androidx.navigation.fragment.findNavController
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import ru.otus.cookbook.R
+
+class DeleteDialogFragment : DialogFragment() {
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        return MaterialAlertDialogBuilder(requireContext())
+            .setTitle(getString(R.string.delete_dialog_title))
+            .setMessage(
+                getString(
+                    R.string.delete_dialog_message,
+                    DeleteDialogFragmentArgs.fromBundle(requireArguments()).recipeTitle
+                )
+            )
+            .setPositiveButton(R.string.ok_btn) { _, _ ->
+                dismiss()
+                setConfirmationResult(true)
+            }
+            .setNegativeButton(R.string.cancel_btn) { _, _ ->
+                dismiss()
+                setConfirmationResult(false)
+            }
+            .create()
+    }
+
+    private fun setConfirmationResult(result: Boolean) {
+        findNavController().previousBackStackEntry?.savedStateHandle?.set(
+            DELETE_CONFIRMATION_RESULT, result
+        )
+    }
+
+    companion object {
+        const val DELETE_CONFIRMATION_RESULT = "result"
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/ItemClickListener.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/ItemClickListener.kt
new file mode 100644
index 0000000..89a7686
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/ItemClickListener.kt
@@ -0,0 +1,5 @@
+package ru.otus.cookbook.ui
+
+interface ItemClickListener {
+    fun itemClicked(id: Int)
+}
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt
index e4460c1..1f5e833 100644
--- a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt
@@ -6,16 +6,21 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleEventObserver
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.viewmodel.MutableCreationExtras
+import androidx.navigation.fragment.findNavController
+import com.bumptech.glide.Glide
 import kotlinx.coroutines.launch
+import ru.otus.cookbook.R
 import ru.otus.cookbook.data.Recipe
 import ru.otus.cookbook.databinding.FragmentRecipeBinding
 
 class RecipeFragment : Fragment() {
 
-    private val recipeId: Int get() = TODO("Use Safe Args to get the recipe ID: https://developer.android.com/guide/navigation/use-graph/pass-data#Safe-args")
+    private val recipeId: Int get() = RecipeFragmentArgs.fromBundle(requireArguments()).recipeId
 
     private val binding = FragmentBindingDelegate<FragmentRecipeBinding>(this)
     private val model: RecipeFragmentViewModel by viewModels(
@@ -30,7 +35,7 @@ class RecipeFragment : Fragment() {
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
-        savedInstanceState: Bundle?
+        savedInstanceState: Bundle?,
     ): View = binding.bind(
         container,
         FragmentRecipeBinding::inflate
@@ -43,6 +48,38 @@ class RecipeFragment : Fragment() {
                 .flowWithLifecycle(viewLifecycleOwner.lifecycle)
                 .collect(::displayRecipe)
         }
+        binding.withBinding {
+            detailRecipeMt.setNavigationOnClickListener {
+                findNavController().popBackStack()
+            }
+            detailRecipeMt.setOnMenuItemClickListener {
+                val action = RecipeFragmentDirections.actionRecipeFragmentToDeleteDialogFragment(getTitle())
+                findNavController().navigate(action)
+                true
+            }
+        }
+
+        val navBackStackEntry = findNavController().getBackStackEntry(R.id.recipeFragment)
+
+        val observer = LifecycleEventObserver { _, event ->
+            if (event == Lifecycle.Event.ON_RESUME &&
+                navBackStackEntry.savedStateHandle.contains(DeleteDialogFragment.DELETE_CONFIRMATION_RESULT)
+            ) {
+                if (navBackStackEntry
+                        .savedStateHandle.get<Boolean>(DeleteDialogFragment.DELETE_CONFIRMATION_RESULT) == true
+                ) {
+                    deleteRecipe()
+                    findNavController().popBackStack()
+                }
+            }
+        }
+
+        navBackStackEntry.lifecycle.addObserver(observer)
+        viewLifecycleOwner.lifecycle.addObserver(LifecycleEventObserver { _, event ->
+            if (event == Lifecycle.Event.ON_DESTROY) {
+                navBackStackEntry.lifecycle.removeObserver(observer)
+            }
+        })
     }
 
     /**
@@ -53,7 +90,16 @@ class RecipeFragment : Fragment() {
     }
 
     private fun displayRecipe(recipe: Recipe) {
-        // Display the recipe
+        binding.withBinding {
+            detailRecipeMt.title = recipe.title
+            detailRecipeTitleTv.text = recipe.title
+            detailRecipeDescriptionTv.text = recipe.description
+            detailRecipeStepsTv.text = recipe.steps.joinToString(".")
+            Glide.with(this@RecipeFragment)
+                .load(recipe.imageUrl)
+                .centerCrop()
+                .into(detailRecipeImageIv)
+        }
     }
 
     private fun deleteRecipe() {
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeViewHolder.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeViewHolder.kt
new file mode 100644
index 0000000..ee4e82f
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeViewHolder.kt
@@ -0,0 +1,31 @@
+package ru.otus.cookbook.ui
+
+import android.view.View
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.recyclerview.widget.RecyclerView
+import com.bumptech.glide.Glide
+import ru.otus.cookbook.R
+import ru.otus.cookbook.data.RecipeListItem
+
+class RecipeViewHolder(view: View, private val itemClickListener: ItemClickListener) : RecyclerView.ViewHolder(view) {
+    private val root = view.findViewById<ConstraintLayout>(R.id.recipe_item_cl)
+    private val letter = view.findViewById<TextView>(R.id.letter_tv)
+    private val title = view.findViewById<TextView>(R.id.title_tv)
+    private val description = view.findViewById<TextView>(R.id.description_tv)
+    private val image = view.findViewById<ImageView>(R.id.item_iv)
+
+    fun bind(item: RecipeListItem.RecipeItem) {
+
+        letter.text = item.title.first().toString()
+        title.text = item.title
+        description.text = item.description
+        Glide.with(root.context)
+            .load(item.imageUrl)
+            .centerCrop()
+            .circleCrop()
+            .into(image)
+        root.setOnClickListener { itemClickListener.itemClicked(item.id) }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/bg_list_item_rounded_corners.xml b/app/src/main/res/drawable/bg_list_item_rounded_corners.xml
new file mode 100644
index 0000000..07e4a16
--- /dev/null
+++ b/app/src/main/res/drawable/bg_list_item_rounded_corners.xml
@@ -0,0 +1,16 @@
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@android:color/transparent" />
+
+    <stroke
+        android:width="1dp"
+        android:color="?attr/colorOutlineVariant"
+        />
+
+    <corners
+        android:bottomLeftRadius="@dimen/standard"
+        android:bottomRightRadius="@dimen/standard"
+        android:topLeftRadius="@dimen/standard"
+        android:topRightRadius="@dimen/standard"
+        />
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/circle_shape.xml b/app/src/main/res/drawable/circle_shape.xml
new file mode 100644
index 0000000..486e905
--- /dev/null
+++ b/app/src/main/res/drawable/circle_shape.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="?attr/colorPrimaryFixed" />
+
+    <size
+        android:height="40dp"
+        android:width="40dp" />
+
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_arrow.xml b/app/src/main/res/drawable/ic_arrow.xml
new file mode 100644
index 0000000..2949b00
--- /dev/null
+++ b/app/src/main/res/drawable/ic_arrow.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <group>
+    <clip-path
+        android:pathData="M20,0L20,0A20,20 0,0 1,40 20L40,20A20,20 0,0 1,20 40L20,40A20,20 0,0 1,0 20L0,20A20,20 0,0 1,20 0z"/>
+    <path
+        android:pathData="M15.825,21L21.425,26.6L20,28L12,20L20,12L21.425,13.4L15.825,19H28V21H15.825Z"
+        android:fillColor="?attr/colorOnBackground"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/drawable/ic_close.xml b/app/src/main/res/drawable/ic_close.xml
new file mode 100644
index 0000000..b7cccc1
--- /dev/null
+++ b/app/src/main/res/drawable/ic_close.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M14.4,27L13,25.6L18.6,20L13,14.4L14.4,13L20,18.6L25.6,13L27,14.4L21.4,20L27,25.6L25.6,27L20,21.4L14.4,27Z"
+      android:fillColor="?attr/colorOnBackground"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_trash.xml b/app/src/main/res/drawable/ic_trash.xml
new file mode 100644
index 0000000..085e556
--- /dev/null
+++ b/app/src/main/res/drawable/ic_trash.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M7,21C6.45,21 5.979,20.804 5.588,20.413C5.196,20.021 5,19.55 5,19V6H4V4H9V3H15V4H20V6H19V19C19,19.55 18.804,20.021 18.413,20.413C18.021,20.804 17.55,21 17,21H7ZM17,6H7V19H17V6ZM9,17H11V8H9V17ZM13,17H15V8H13V17Z"
+      android:fillColor="?attr/colorOnBackground"/>
+</vector>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index 86a5d97..2381638 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -1,19 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<FrameLayout
+    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/main"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    tools:context=".MainActivity">
+    tools:context=".MainActivity"
+    >
 
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="Hello World!"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+    <androidx.fragment.app.FragmentContainerView
+        android:id="@+id/cookbook"
+        android:name="androidx.navigation.fragment.NavHostFragment"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:defaultNavHost="true"
+        app:navGraph="@navigation/nav_graph"
+        />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+</FrameLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_cookbook.xml b/app/src/main/res/layout/fragment_cookbook.xml
index 77d9ef6..a7acc42 100644
--- a/app/src/main/res/layout/fragment_cookbook.xml
+++ b/app/src/main/res/layout/fragment_cookbook.xml
@@ -1,6 +1,40 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<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:layout_height="match_parent"
+    >
+
+    <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/recipe_list_abl"
+        android:layout_width="match_parent"
+        android:layout_height="?attr/actionBarSize"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        >
+
+        <com.google.android.material.appbar.MaterialToolbar
+            android:id="@+id/recipe_list_mt"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:navigationIcon="@drawable/ic_close"
+            app:title="Recipe"
+            app:titleTextAppearance="@style/TextAppearance.Material3.TitleMedium"
+            />
+    </com.google.android.material.appbar.AppBarLayout>
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/recipe_list_rv"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/recipe_list_abl"
+        />
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_recipe.xml b/app/src/main/res/layout/fragment_recipe.xml
index 77d9ef6..096149d 100644
--- a/app/src/main/res/layout/fragment_recipe.xml
+++ b/app/src/main/res/layout/fragment_recipe.xml
@@ -1,6 +1,82 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.coordinatorlayout.widget.CoordinatorLayout
+    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:layout_height="match_parent"
+    >
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+    <com.google.android.material.appbar.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="?attr/actionBarSize"
+        >
+
+        <com.google.android.material.appbar.MaterialToolbar
+            android:id="@+id/detail_recipe_mt"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:menu="@menu/menu"
+            app:navigationIcon="@drawable/ic_arrow"
+            app:title="Recipe"
+            app:titleTextAppearance="@style/TextAppearance.Material3.TitleMedium"
+            app:titleTextColor="?attr/colorOnBackground"
+            />
+    </com.google.android.material.appbar.AppBarLayout>
+
+    <androidx.core.widget.NestedScrollView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
+        >
+
+        <LinearLayout
+            android:id="@+id/detail_recipe_ll"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            android:padding="16dp"
+            >
+
+            <com.google.android.material.imageview.ShapeableImageView
+                android:id="@+id/detail_recipe_image_iv"
+                android:layout_width="match_parent"
+                android:layout_height="380dp"
+                android:layout_marginBottom="16dp"
+                android:contentDescription="@string/card_item_image"
+                app:shapeAppearanceOverlay="@style/RoundedImageView"
+                />
+
+            <TextView
+                android:id="@+id/detail_recipe_title_tv"
+                style="@style/TextAppearance.Material3.TitleLarge"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="16dp"
+                android:textColor="?attr/colorPrimaryVariant"
+                tools:text="Title"
+                />
+
+            <TextView
+                android:id="@+id/detail_recipe_description_tv"
+                style="@style/TextAppearance.Material3.TitleMedium"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="16dp"
+                android:textColor="?attr/colorAccent"
+                tools:text="Description"
+                />
+
+            <TextView
+                android:id="@+id/detail_recipe_steps_tv"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:textColor="?attr/colorTertiary"
+                tools:text="Recipe steps"
+                />
+        </LinearLayout>
+
+    </androidx.core.widget.NestedScrollView>
+
+
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/vh_recipe_category.xml b/app/src/main/res/layout/vh_recipe_category.xml
index 006fd49..6207272 100644
--- a/app/src/main/res/layout/vh_recipe_category.xml
+++ b/app/src/main/res/layout/vh_recipe_category.xml
@@ -1,6 +1,22 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content">
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/recipe_category_ll"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginHorizontal="@dimen/standard"
+    android:layout_marginBottom="@dimen/standard"
+    android:orientation="horizontal"
+    >
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+    <TextView
+        android:id="@+id/category_name_tv"
+        style="@style/TextAppearance.Material3.HeadlineMedium"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textColor="?attr/colorPrimaryVariant"
+        tools:text="Category"
+        />
+
+</LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/vh_recipe_item.xml b/app/src/main/res/layout/vh_recipe_item.xml
index 006fd49..d6d616e 100644
--- a/app/src/main/res/layout/vh_recipe_item.xml
+++ b/app/src/main/res/layout/vh_recipe_item.xml
@@ -1,6 +1,70 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content">
+<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:id="@+id/recipe_item_cl"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginHorizontal="@dimen/standard"
+    android:layout_marginBottom="@dimen/standard"
+    android:background="@drawable/bg_list_item_rounded_corners"
+    >
+
+    <TextView
+        android:id="@+id/letter_tv"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_marginHorizontal="@dimen/standard"
+        android:layout_marginVertical="20dp"
+        android:background="@drawable/circle_shape"
+        android:gravity="center"
+        android:textColor="@color/black"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="A"
+        />
+
+    <TextView
+        android:id="@+id/title_tv"
+        style="@style/TextAppearance.Material3.TitleLarge"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_margin="@dimen/standard"
+        android:ellipsize="end"
+        android:maxLines="1"
+        app:layout_constraintEnd_toStartOf="@+id/item_iv"
+        app:layout_constraintStart_toEndOf="@+id/letter_tv"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="Title"
+        />
+
+    <TextView
+        android:id="@+id/description_tv"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="@dimen/standard"
+        android:layout_marginTop="4dp"
+        android:ellipsize="end"
+        android:maxLines="1"
+        app:layout_constraintEnd_toStartOf="@+id/item_iv"
+        app:layout_constraintStart_toEndOf="@+id/letter_tv"
+        app:layout_constraintTop_toBottomOf="@+id/title_tv"
+        tools:text="Description"
+        />
+
+    <ImageView
+        android:id="@+id/item_iv"
+        android:layout_width="70dp"
+        android:layout_height="70dp"
+        android:layout_marginHorizontal="10dp"
+        android:background="@drawable/circle_shape"
+        android:contentDescription="@string/card_item_image"
+        android:paddingHorizontal="1dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        />
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/menu/menu.xml b/app/src/main/res/menu/menu.xml
new file mode 100644
index 0000000..c5a0fee
--- /dev/null
+++ b/app/src/main/res/menu/menu.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<menu
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    >
+<item
+    android:id="@+id/fragment_recipe_menu"
+    android:icon="@drawable/ic_trash"
+    android:title="Title"
+    app:showAsAction="always"/>
+
+</menu>
\ No newline at end of file
diff --git a/app/src/main/res/navigation/nav_graph.xml b/app/src/main/res/navigation/nav_graph.xml
new file mode 100644
index 0000000..29b983a
--- /dev/null
+++ b/app/src/main/res/navigation/nav_graph.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<navigation
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/navigation"
+    app:startDestination="@id/cookbookFragment"
+    >
+    <fragment
+        android:id="@+id/cookbookFragment"
+        android:name="ru.otus.cookbook.ui.CookbookFragment"
+        android:label="CookbookFragment"
+        >
+        <action
+            android:id="@+id/action_cookbookFragment_to_recipeFragment"
+            app:destination="@id/recipeFragment"
+            app:enterAnim="@anim/nav_default_enter_anim"
+            app:exitAnim="@anim/nav_default_exit_anim"
+            />
+    </fragment>
+    <fragment
+        android:id="@+id/recipeFragment"
+        android:name="ru.otus.cookbook.ui.RecipeFragment"
+        android:label="RecipeFragment"
+        >
+        <argument
+            android:name="recipeId"
+            app:argType="integer"
+            />
+        <action
+            android:id="@+id/action_recipeFragment_to_deleteDialogFragment"
+            app:destination="@id/deleteDialogFragment"
+            />
+    </fragment>
+    <dialog
+        android:id="@+id/deleteDialogFragment"
+        android:name="ru.otus.cookbook.ui.DeleteDialogFragment"
+        android:label="DeleteDialogFragment"
+        >
+        <argument
+            android:name="recipeTitle"
+            app:argType="string"
+            />
+    </dialog>
+</navigation>
\ No newline at end of file
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
index d5b075a..9ab8011 100644
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@@ -1,7 +1,9 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
+<resources>
     <!-- Base application theme. -->
-    <style name="Base.Theme.Coocbook" parent="Theme.Material3.DayNight.NoActionBar">
+    <style name="Base.Theme.Cookbook" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your dark theme here. -->
         <!-- <item name="colorPrimary">@color/my_dark_primary</item> -->
+        <item name="android:statusBarColor">?android:colorBackground</item>
+        <item name="android:windowLightStatusBar">false</item>
     </style>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimensions.xml b/app/src/main/res/values/dimensions.xml
new file mode 100644
index 0000000..7d7ec24
--- /dev/null
+++ b/app/src/main/res/values/dimensions.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <dimen name="standard">16dp</dimen>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 8fce1d1..1ecbd46 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,3 +1,12 @@
 <resources>
     <string name="app_name">Cookbook</string>
+    <string name="card_item_image">Card item image</string>
+    <string name="delete_dialog_title">Delete recipe</string>
+    <string name="delete_dialog_message">Do you really want to delete %1$s recipe?</string>
+    <string name="ok_btn">OK</string>
+    <string name="cancel_btn">Cancel</string>
+    <string name="close_app_message">Are you sure to want to close the application? </string>
+    <string name="yes_btn">Yes</string>
+    <string name="no_btn">No</string>
+
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 47d6575..1178add 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -3,7 +3,14 @@
     <style name="Base.Theme.Cookbook" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your light theme here. -->
         <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
+        <item name="android:statusBarColor">?android:colorBackground</item>
+        <item name="android:windowLightStatusBar">true</item>
     </style>
 
     <style name="Theme.Cookbook" parent="Base.Theme.Cookbook" />
+
+    <style name="RoundedImageView" parent="">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">16dp</item>
+    </style>
 </resources>
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 515d8d1..ae8dff9 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,5 +1,6 @@
 [versions]
 agp = "8.7.3"
+glide = "4.16.0"
 kotlin = "2.1.0"
 coreKtx = "1.15.0"
 fragmentKtx = "1.8.5"
@@ -18,6 +19,7 @@ datastore = "1.1.1"
 
 
 [libraries]
+glide = { module = "com.github.bumptech.glide:glide", version.ref = "glide" }
 kotlin-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }
 kotlin-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-android", version.ref = "coroutines" }
 kotlin-coroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "coroutines" }