From 21c68588b3cde0e7c668c2bc22c7e462b022e63b Mon Sep 17 00:00:00 2001
From: iamwhoiam0 <gamzatgasanov2337@mail.ru>
Date: Sat, 5 Jul 2025 15:20:01 +0300
Subject: [PATCH] done

---
 app/build.gradle.kts                          |  3 +
 app/src/main/AndroidManifest.xml              |  2 +
 .../ru/otus/cookbook/ui/CookbookFragment.kt   | 22 +++++-
 .../cookbook/ui/DeleteRecipeDialogFragment.kt | 45 +++++++++++
 .../cookbook/ui/RecipeCategoryViewHolder.kt   |  7 ++
 .../ru/otus/cookbook/ui/RecipeDiffCallback.kt | 21 +++++
 .../ru/otus/cookbook/ui/RecipeFragment.kt     | 59 +++++++++++++-
 .../otus/cookbook/ui/RecipeItemViewHolder.kt  |  7 ++
 .../ru/otus/cookbook/ui/RecipesAdapter.kt     | 67 ++++++++++++++++
 app/src/main/res/drawable/arrow_back.xml      |  9 +++
 app/src/main/res/drawable/background.xml      |  9 +++
 app/src/main/res/drawable/background_item.xml | 25 ++++++
 app/src/main/res/drawable/close.xml           |  9 +++
 .../main/res/drawable/shape_image_view.xml    |  6 ++
 .../res/drawable/shape_image_view_recipe.xml  |  5 ++
 app/src/main/res/drawable/trash_icon.xml      |  9 +++
 app/src/main/res/layout/activity_main.xml     | 22 +++---
 app/src/main/res/layout/fragment_cookbook.xml | 27 ++++++-
 app/src/main/res/layout/fragment_recipe.xml   | 76 ++++++++++++++++++-
 .../main/res/layout/vh_recipe_category.xml    | 26 ++++++-
 app/src/main/res/layout/vh_recipe_item.xml    | 73 +++++++++++++++++-
 app/src/main/res/navigation/nav_graph.xml     | 41 ++++++++++
 app/src/main/res/values/colors.xml            |  7 ++
 app/src/main/res/values/strings.xml           |  7 ++
 app/src/main/res/values/themes.xml            |  7 ++
 gradle/libs.versions.toml                     |  6 +-
 26 files changed, 570 insertions(+), 27 deletions(-)
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/DeleteRecipeDialogFragment.kt
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/RecipeCategoryViewHolder.kt
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/RecipeDiffCallback.kt
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/RecipeItemViewHolder.kt
 create mode 100644 app/src/main/kotlin/ru/otus/cookbook/ui/RecipesAdapter.kt
 create mode 100644 app/src/main/res/drawable/arrow_back.xml
 create mode 100644 app/src/main/res/drawable/background.xml
 create mode 100644 app/src/main/res/drawable/background_item.xml
 create mode 100644 app/src/main/res/drawable/close.xml
 create mode 100644 app/src/main/res/drawable/shape_image_view.xml
 create mode 100644 app/src/main/res/drawable/shape_image_view_recipe.xml
 create mode 100644 app/src/main/res/drawable/trash_icon.xml
 create mode 100644 app/src/main/res/navigation/nav_graph.xml

diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index f3207a6..3def694 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -48,6 +48,9 @@ dependencies {
     implementation(libs.material)
     implementation(libs.androidx.activity)
     implementation(libs.androidx.constraintlayout)
+    implementation(libs.androidx.recyclerview)
+    implementation(libs.glide)
+    annotationProcessor(libs.compiler)
     testImplementation(libs.junit)
     testImplementation(libs.kotlin.coroutines.test)
 }
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 063f4d1..431aadd 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -2,6 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET"/>
+
     <application
         android:allowBackup="true"
         android:name=".App"
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..969da09 100644
--- a/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/CookbookFragment.kt
@@ -1,13 +1,16 @@
 package ru.otus.cookbook.ui
 
 import android.os.Bundle
+import android.util.Log
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.appcompat.app.AppCompatActivity
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
+import androidx.navigation.fragment.findNavController
 import kotlinx.coroutines.launch
 import ru.otus.cookbook.data.RecipeListItem
 import ru.otus.cookbook.databinding.FragmentCookbookBinding
@@ -16,6 +19,7 @@ class CookbookFragment : Fragment() {
 
     private val binding = FragmentBindingDelegate<FragmentCookbookBinding>(this)
     private val model: CookbookFragmentViewModel by viewModels { CookbookFragmentViewModel.Factory }
+    private val adapter = RecipesAdapter { launchRecipeFragment(it) }
 
     override fun onCreateView(
         inflater: LayoutInflater,
@@ -28,6 +32,7 @@ class CookbookFragment : Fragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
+        setupAppBar()
         setupRecyclerView()
         viewLifecycleOwner.lifecycleScope.launch {
             model.recipeList
@@ -36,11 +41,24 @@ class CookbookFragment : Fragment() {
         }
     }
 
+    private fun setupAppBar() {
+        binding.withBinding {
+            (activity as? AppCompatActivity)?.setSupportActionBar(toolbar)
+            (activity as? AppCompatActivity)?.supportActionBar?.setDisplayHomeAsUpEnabled(true)
+            toolbar.setNavigationOnClickListener {
+                findNavController().navigateUp()
+            }
+        }
+    }
+    private fun launchRecipeFragment(recipeId: Int) {
+        findNavController().navigate(CookbookFragmentDirections.actionCookbookFragmentToRecipeFragment(recipeId))
+    }
+
     private fun setupRecyclerView() = binding.withBinding {
-        // Setup RecyclerView
+        recyclerViewCategory.adapter = adapter
     }
 
     private fun onRecipeListUpdated(recipeList: List<RecipeListItem>) {
-        // Handle recipe list
+        adapter.submitList(recipeList)
     }
 }
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/DeleteRecipeDialogFragment.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/DeleteRecipeDialogFragment.kt
new file mode 100644
index 0000000..f137f83
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/DeleteRecipeDialogFragment.kt
@@ -0,0 +1,45 @@
+package ru.otus.cookbook.ui
+
+import android.app.AlertDialog
+import android.app.Dialog
+import android.os.Bundle
+import androidx.fragment.app.DialogFragment
+import androidx.navigation.fragment.findNavController
+import androidx.navigation.fragment.navArgs
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import com.google.android.material.dialog.MaterialDialogs
+import ru.otus.cookbook.R
+import kotlin.getValue
+
+class DeleteRecipeDialogFragment: DialogFragment() {
+
+    private val args by navArgs<DeleteRecipeDialogFragmentArgs>()
+
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        val recipeTitle = args.recipeTitle
+        return MaterialAlertDialogBuilder(requireContext())
+            .setTitle(getString(R.string.delete))
+            .setMessage(getString(R.string.are_you_sure_want_to_delete, recipeTitle))
+            .setPositiveButton(getString(R.string.ok)) { _, _ ->
+                dismiss()
+                setResult(true)
+            }
+            .setNegativeButton(getString(R.string.cancel)) { _, _ ->
+                dismiss()
+                setResult(false)
+            }
+            .create()
+    }
+
+    private fun setResult(result: Boolean) {
+        val navController = findNavController()
+        navController.previousBackStackEntry?.savedStateHandle?.set(
+            DIALOG_RESULT_KEY,
+            result
+        )
+    }
+
+    companion object {
+        const val DIALOG_RESULT_KEY = "delete"
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeCategoryViewHolder.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeCategoryViewHolder.kt
new file mode 100644
index 0000000..7ff9269
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeCategoryViewHolder.kt
@@ -0,0 +1,7 @@
+package ru.otus.cookbook.ui
+
+import androidx.recyclerview.widget.RecyclerView.ViewHolder
+import ru.otus.cookbook.databinding.VhRecipeCategoryBinding
+
+class RecipeCategoryViewHolder(val binding: VhRecipeCategoryBinding): ViewHolder(binding.root) {
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeDiffCallback.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeDiffCallback.kt
new file mode 100644
index 0000000..f280ec2
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeDiffCallback.kt
@@ -0,0 +1,21 @@
+package ru.otus.cookbook.ui
+
+import androidx.recyclerview.widget.DiffUtil
+import ru.otus.cookbook.data.RecipeListItem
+
+class RecipeDiffCallback: DiffUtil.ItemCallback<RecipeListItem>() {
+    override fun areItemsTheSame(oldItem: RecipeListItem, newItem: RecipeListItem): Boolean {
+        return when{
+            oldItem is RecipeListItem.CategoryItem && newItem is RecipeListItem.CategoryItem ->
+                oldItem.name == newItem.name
+            oldItem is RecipeListItem.RecipeItem && newItem is RecipeListItem.RecipeItem ->
+                oldItem.id == newItem.id
+            else -> false
+        }
+    }
+
+    override fun areContentsTheSame(oldItem: RecipeListItem, newItem: RecipeListItem): Boolean {
+        return oldItem == newItem
+    }
+
+}
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..c699895 100644
--- a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeFragment.kt
@@ -1,21 +1,29 @@
 package ru.otus.cookbook.ui
 
 import android.os.Bundle
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.appcompat.app.AppCompatActivity
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.viewmodel.MutableCreationExtras
+import androidx.navigation.fragment.findNavController
+import androidx.navigation.fragment.navArgs
+import com.bumptech.glide.Glide
 import kotlinx.coroutines.launch
 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 args by navArgs<RecipeFragmentArgs>()
+    private val recipeId: Int get() = args.recipeId
 
     private val binding = FragmentBindingDelegate<FragmentRecipeBinding>(this)
     private val model: RecipeFragmentViewModel by viewModels(
@@ -38,6 +46,14 @@ class RecipeFragment : Fragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
+
+        binding.withBinding {
+            (activity as? AppCompatActivity)?.setSupportActionBar(toolbar)
+            (activity as? AppCompatActivity)?.supportActionBar?.setDisplayHomeAsUpEnabled(true)
+        }
+        setupAppBar()
+        observeDeleteResult()
+
         viewLifecycleOwner.lifecycleScope.launch {
             model.recipe
                 .flowWithLifecycle(viewLifecycleOwner.lifecycle)
@@ -45,6 +61,21 @@ class RecipeFragment : Fragment() {
         }
     }
 
+    private fun observeDeleteResult() {
+        val navController = findNavController()
+        navController.currentBackStackEntry
+            ?.savedStateHandle
+            ?.getLiveData<Boolean>(DeleteRecipeDialogFragment.DIALOG_RESULT_KEY)
+            ?.observe(viewLifecycleOwner) { result ->
+                if (result) {
+                    deleteRecipe()
+                    Handler(Looper.getMainLooper()).post {
+                        navController.navigateUp()
+                    }
+                }
+            }
+    }
+
     /**
      * Use to get recipe title and pass to confirmation dialog
      */
@@ -54,8 +85,32 @@ class RecipeFragment : Fragment() {
 
     private fun displayRecipe(recipe: Recipe) {
         // Display the recipe
+        binding.withBinding {
+            textViewTitle.text = recipe.title
+            textViewDescription.text = recipe.description
+            textViewRecipe.text = recipe.steps.mapIndexed { index, step ->  "${index + 1}. $step"}
+                .joinToString("\n")
+            Glide.with(root)
+                .load(recipe.imageUrl)
+                .centerCrop()
+                .into(imageViewRecipe)
+        }
+    }
+    private fun setupAppBar() {
+        binding.withBinding {
+            (activity as? AppCompatActivity)?.supportActionBar?.title = getTitle()
+            toolbar.setNavigationOnClickListener {
+                findNavController().navigateUp()
+            }
+            imageViewDelete.setOnClickListener {
+                findNavController().navigate(
+                    RecipeFragmentDirections.actionRecipeFragmentToDeleteRecipeDialogFragment(
+                        getTitle()
+                    )
+                )
+            }
+        }
     }
-
     private fun deleteRecipe() {
         model.delete()
     }
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeItemViewHolder.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeItemViewHolder.kt
new file mode 100644
index 0000000..3b71edf
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipeItemViewHolder.kt
@@ -0,0 +1,7 @@
+package ru.otus.cookbook.ui
+
+import androidx.recyclerview.widget.RecyclerView
+import ru.otus.cookbook.databinding.VhRecipeItemBinding
+
+class RecipeItemViewHolder(val binding: VhRecipeItemBinding): RecyclerView.ViewHolder(binding.root) {
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/ru/otus/cookbook/ui/RecipesAdapter.kt b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipesAdapter.kt
new file mode 100644
index 0000000..ee17236
--- /dev/null
+++ b/app/src/main/kotlin/ru/otus/cookbook/ui/RecipesAdapter.kt
@@ -0,0 +1,67 @@
+package ru.otus.cookbook.ui
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.resource.bitmap.RoundedCorners
+import com.bumptech.glide.request.RequestOptions
+import ru.otus.cookbook.data.RecipeListItem
+import ru.otus.cookbook.databinding.VhRecipeCategoryBinding
+import ru.otus.cookbook.databinding.VhRecipeItemBinding
+
+class RecipesAdapter(val onRecipeClick: (Int) -> Unit):ListAdapter<RecipeListItem, RecyclerView.ViewHolder>(RecipeDiffCallback()) {
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
+        val inflater = LayoutInflater.from(parent.context)
+
+        return when(viewType){
+            VIEW_TYPE_CATEGORY -> {
+                val binding = VhRecipeCategoryBinding.inflate(inflater, parent, false)
+                RecipeCategoryViewHolder(binding)
+            }
+            VIEW_TYPE_RECIPE -> {
+                val binding = VhRecipeItemBinding.inflate(inflater, parent, false)
+                RecipeItemViewHolder(binding)
+            }
+            else -> throw RuntimeException("RuntimeException")
+        }
+    }
+
+    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
+        val item = getItem(position)
+        when(holder){
+            is RecipeCategoryViewHolder -> {
+                val category = item as RecipeListItem.CategoryItem
+                holder.binding.textViewCategory.text = category.category.name
+            }
+            is RecipeItemViewHolder -> {
+                val recipeItem = item as RecipeListItem.RecipeItem
+                with(holder){
+                    binding.textBackground.text = recipeItem.title.first().toString()
+                    binding.title.text = recipeItem.title
+                    binding.description.text = recipeItem.description
+                    Glide.with(binding.root.context)
+                        .load(recipeItem.imageUrl)
+                        .centerCrop()
+                        .into(binding.imageViewRecipe)
+                    binding.root.setOnClickListener { onRecipeClick(item.id) }
+                }
+            }
+        }
+    }
+
+    override fun getItemViewType(position: Int): Int {
+        return when (getItem(position)) {
+            is RecipeListItem.CategoryItem -> VIEW_TYPE_CATEGORY
+            is RecipeListItem.RecipeItem -> VIEW_TYPE_RECIPE
+        }
+    }
+
+    companion object{
+        private const val VIEW_TYPE_CATEGORY = 1
+        private const val VIEW_TYPE_RECIPE = 2
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/arrow_back.xml b/app/src/main/res/drawable/arrow_back.xml
new file mode 100644
index 0000000..9241934
--- /dev/null
+++ b/app/src/main/res/drawable/arrow_back.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M3.825,9L9.425,14.6L8,16L0,8L8,0L9.425,1.4L3.825,7H16V9H3.825Z"
+      android:fillColor="#1D1B20"/>
+</vector>
diff --git a/app/src/main/res/drawable/background.xml b/app/src/main/res/drawable/background.xml
new file mode 100644
index 0000000..dbe7fd6
--- /dev/null
+++ b/app/src/main/res/drawable/background.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="M20,20m-20,0a20,20 0,1 1,40 0a20,20 0,1 1,-40 0"
+      android:fillColor="#EADDFF"/>
+</vector>
diff --git a/app/src/main/res/drawable/background_item.xml b/app/src/main/res/drawable/background_item.xml
new file mode 100644
index 0000000..e391d08
--- /dev/null
+++ b/app/src/main/res/drawable/background_item.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="true">
+        <ripple android:color="#20000000">
+            <item>
+                <shape android:shape="rectangle">
+                    <solid android:color="#FEF7FF"/>
+                    <corners android:radius="12dp" />
+                    <stroke
+                        android:width="1dp"
+                        android:color="#CAC4D0" />
+                </shape>
+            </item>
+        </ripple>
+    </item>
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="#FEF7FF"/>
+            <corners android:radius="12dp" />
+            <stroke
+                android:width="1dp"
+                android:color="#CAC4D0" />
+        </shape>
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/close.xml b/app/src/main/res/drawable/close.xml
new file mode 100644
index 0000000..84f6e03
--- /dev/null
+++ b/app/src/main/res/drawable/close.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14dp"
+    android:height="14dp"
+    android:viewportWidth="14"
+    android:viewportHeight="14">
+  <path
+      android:pathData="M1.4,14L0,12.6L5.6,7L0,1.4L1.4,0L7,5.6L12.6,0L14,1.4L8.4,7L14,12.6L12.6,14L7,8.4L1.4,14Z"
+      android:fillColor="#1D1B20"/>
+</vector>
diff --git a/app/src/main/res/drawable/shape_image_view.xml b/app/src/main/res/drawable/shape_image_view.xml
new file mode 100644
index 0000000..57581db
--- /dev/null
+++ b/app/src/main/res/drawable/shape_image_view.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">
+    <corners android:bottomRightRadius="10dp"
+        android:topRightRadius="10dp"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/shape_image_view_recipe.xml b/app/src/main/res/drawable/shape_image_view_recipe.xml
new file mode 100644
index 0000000..a01f3a8
--- /dev/null
+++ b/app/src/main/res/drawable/shape_image_view_recipe.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="20dp"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/trash_icon.xml b/app/src/main/res/drawable/trash_icon.xml
new file mode 100644
index 0000000..a74d7a1
--- /dev/null
+++ b/app/src/main/res/drawable/trash_icon.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="18dp"
+    android:viewportWidth="16"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M3,18C2.45,18 1.979,17.804 1.587,17.413C1.196,17.021 1,16.55 1,16V3H0V1H5V0H11V1H16V3H15V16C15,16.55 14.804,17.021 14.413,17.413C14.021,17.804 13.55,18 13,18H3ZM13,3H3V16H13V3ZM5,14H7V5H5V14ZM9,14H11V5H9V14Z"
+      android:fillColor="#49454F"/>
+</vector>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index 86a5d97..e0f0333 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -1,19 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<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:id="@+id/main"
+    android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     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.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+    <androidx.fragment.app.FragmentContainerView
+        android:id="@+id/main_container"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:name="androidx.navigation.fragment.NavHostFragment"
+        app:navGraph="@navigation/nav_graph"
+        app:defaultNavHost="true"/>
+</LinearLayout>
\ 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..f729f7c 100644
--- a/app/src/main/res/layout/fragment_cookbook.xml
+++ b/app/src/main/res/layout/fragment_cookbook.xml
@@ -1,6 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:orientation="vertical"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+    <com.google.android.material.appbar.MaterialToolbar
+        style="@style/AppToolbarStyle"
+        android:id="@+id/toolbar"
+        app:navigationIcon="@drawable/close"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        />
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:fillViewport="true"
+        android:id="@+id/recyclerViewCategory"
+        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+        android:orientation="vertical"
+        tools:listitem="@layout/vh_recipe_category"/>
+
+</LinearLayout>
\ 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..5226005 100644
--- a/app/src/main/res/layout/fragment_recipe.xml
+++ b/app/src/main/res/layout/fragment_recipe.xml
@@ -1,6 +1,76 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="wrap_content"
+    android:fillViewport="true"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+    <LinearLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:orientation="vertical">
+
+    <com.google.android.material.appbar.MaterialToolbar
+        style="@style/AppToolbarStyle"
+        android:id="@+id/toolbar"
+        app:navigationIcon="@drawable/arrow_back"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" >
+
+        <ImageView
+            android:id="@+id/imageViewDelete"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="end"
+            android:layout_marginHorizontal="14dp"
+            android:contentDescription="Icon"
+            android:src="@drawable/trash_icon"
+            android:adjustViewBounds="true"
+            android:scaleType="centerCrop" />
+
+    </com.google.android.material.appbar.MaterialToolbar>
+
+    <ImageView
+        android:id="@+id/imageViewRecipe"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        tools:src="@tools:sample/avatars"
+        android:adjustViewBounds="true"
+        android:layout_gravity="center"
+        android:background="@drawable/shape_image_view_recipe"
+        android:clipToOutline="true"
+        android:layout_margin="14dp"/>
+
+    <TextView
+        android:id="@+id/textViewTitle"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textColor="@color/purple"
+        android:textSize="25sp"
+        tools:text="Cod"
+        android:paddingHorizontal="14dp"/>
+
+    <TextView
+        android:id="@+id/textViewDescription"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textColor="@color/gray_dark"
+        android:textSize="19sp"
+        tools:text="Roasted in breadcrumbs"
+        android:paddingHorizontal="14dp"
+        android:paddingVertical="10dp"/>
+
+    <TextView
+        android:id="@+id/textViewRecipe"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textColor="@color/brown"
+        android:textSize="19sp"
+        tools:text="Lorem ipsum Quisque blandit dolor vel ullamcorper fringilla. Etiam ut ultricies nibh. Maecenas sit amet ipsum at felis convallis luctus. Praesent at urna ac massa eleifend iaculis. Donec at venenatis metus. Donec malesuada sapien eget neque finibus, vel aliquam mi lacinia. Mauris a sem elementum, pretium diam nec, luctus neque. Praesent lacinia imperdiet erat, eget feugiat mi feugiat ut. Proin iaculis, massa eu lacinia tempor, dui lacus pellentesque dui, ut dapibus tellus purus at augue. Nam sagittis lobortis justo vel porta. Proin vel vulputate quam. Vivamus at vestibulum est. Phasellus a arcu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam elit mauris, pharetra vitae libero sit amet, efficitur rhoncus mauris."
+        android:paddingHorizontal="14dp"/>
+
+    </LinearLayout>
+
+    </ScrollView>
\ 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..4222265 100644
--- a/app/src/main/res/layout/vh_recipe_category.xml
+++ b/app/src/main/res/layout/vh_recipe_category.xml
@@ -1,6 +1,28 @@
 <?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">
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    xmlns:tools="http://schemas.android.com/tools">
+
+
+    <TextView
+        android:id="@+id/textViewCategory"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textColor="#6750A4"
+        android:textSize="24sp"
+        android:layout_marginTop="20dp"
+        android:layout_marginStart="16dp"
+        app:layout_constraintTop_toTopOf="parent"
+        android:text="Fish"/>
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toBottomOf="@id/textViewCategory"
+        android:orientation="vertical"
+        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+        tools:listitem="@layout/vh_recipe_item"/>
 
 </androidx.constraintlayout.widget.ConstraintLayout>
\ 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..4d1e128 100644
--- a/app/src/main/res/layout/vh_recipe_item.xml
+++ b/app/src/main/res/layout/vh_recipe_item.xml
@@ -1,6 +1,75 @@
 <?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">
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:cardCornerRadius="10dp"
+    android:background="@drawable/background_item"
+    android:layout_marginTop="12dp"
+    android:layout_marginHorizontal="16dp"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
+    <ImageView
+        android:id="@+id/icon_background"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/background"
+        android:layout_marginStart="16dp"
+        android:layout_marginVertical="20dp"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"/>
+
+    <TextView
+        android:id="@+id/text_background"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="C"
+        android:textSize="16sp"
+        android:textColor="#4F378A"
+        app:layout_constraintStart_toStartOf="@id/icon_background"
+        app:layout_constraintEnd_toEndOf="@id/icon_background"
+        app:layout_constraintTop_toTopOf="@id/icon_background"
+        app:layout_constraintBottom_toBottomOf="@id/icon_background"/>
+
+    <TextView
+        android:id="@+id/title"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:text="Cod"
+        android:textColor="#1D1B20"
+        android:textSize="16dp"
+        android:textStyle="bold"
+        android:layout_marginTop="16dp"
+        android:layout_marginStart="16dp"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintStart_toEndOf="@id/icon_background"
+
+        />
+
+    <TextView
+        android:id="@+id/description"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:text="Roasted in breadcrumbs"
+        android:textColor="#1D1B20"
+        android:layout_marginTop="4dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginBottom="16dp"
+        app:layout_constraintStart_toStartOf="@id/title"
+        app:layout_constraintTop_toBottomOf="@id/title"
+        app:layout_constraintEnd_toStartOf="@id/imageViewRecipe"
+        app:layout_constraintBottom_toBottomOf="parent"
+        />
+    <ImageView
+        android:id="@+id/imageViewRecipe"
+        android:layout_width="90dp"
+        android:layout_height="90dp"
+        android:background="@drawable/shape_image_view"
+        android:adjustViewBounds="true"
+        android:clipToOutline="true"
+        tools:src="@tools:sample/avatars"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"/>
 </androidx.constraintlayout.widget.ConstraintLayout>
\ 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..fb928e2
--- /dev/null
+++ b/app/src/main/res/navigation/nav_graph.xml
@@ -0,0 +1,41 @@
+<?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/nav_graph"
+    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="@android:anim/fade_in"
+            app:exitAnim="@android:anim/fade_out"
+            app:popEnterAnim="@android:anim/fade_in"
+            app:popExitAnim="@android:anim/fade_out"/>
+    </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_deleteRecipeDialogFragment"
+            app:destination="@id/deleteRecipeDialogFragment" />
+    </fragment>
+    <dialog
+        android:id="@+id/deleteRecipeDialogFragment"
+        android:name="ru.otus.cookbook.ui.DeleteRecipeDialogFragment"
+        android:label="DeleteRecipeDialogFragment" >
+        <action
+            android:id="@+id/action_deleteRecipeDialogFragment_to_recipeFragment2"
+            app:destination="@id/recipeFragment" />
+        <argument
+            android:name="recipeTitle"
+            app:argType="string" />
+    </dialog>
+</navigation>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index c8524cd..4b988ba 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -2,4 +2,11 @@
 <resources>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="purple">#65558F</color>
+    <color name="oval">#EADDFF</color>
+    <color name="text_inside_oval">#4F378A</color>
+    <color name="border_gray">#CAC4D0</color>
+    <color name="gray_dark">#625B71</color>
+    <color name="brown">#7D5260</color>
+    <color name="background_toolbar">#EFDAE5</color>
 </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..441c38f 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,3 +1,10 @@
 <resources>
     <string name="app_name">Cookbook</string>
+    <!-- TODO: Remove or change this placeholder text -->
+    <string name="hello_blank_fragment">Hello blank fragment</string>
+
+    <string name="delete">Delete</string>
+    <string name="are_you_sure_want_to_delete">Are you sure want to delete %1$s?</string>
+    <string name="ok">ОК</string>
+    <string name="cancel">Cancel</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..427c7eb 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -5,5 +5,12 @@
         <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
     </style>
 
+    <style name="AppToolbarStyle" parent="Widget.Material3.Toolbar">
+        <item name="titleTextColor">@color/black</item>
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">?attr/actionBarSize</item>
+        <item name="android:background">@color/background_toolbar</item>
+    </style>
+
     <style name="Theme.Cookbook" parent="Base.Theme.Cookbook" />
 </resources>
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 515d8d1..8e237b2 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"
@@ -15,9 +16,11 @@ junitVersion = "1.2.1"
 espressoCore = "3.6.1"
 serialization = "1.7.3"
 datastore = "1.1.1"
-
+recyclerview = "1.4.0"
 
 [libraries]
+compiler = { module = "com.github.bumptech.glide:compiler", version.ref = "glide" }
+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" }
@@ -37,6 +40,7 @@ androidx-activity = { group = "androidx.activity", name = "activity", version.re
 androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout", version.ref = "constraintlayout" }
 androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
+androidx-recyclerview = {group = "androidx.recyclerview", name = "recyclerview", version.ref = "recyclerview"}
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }