From 6232af2295e6284d13f8ce9f3f127b2478ef3901 Mon Sep 17 00:00:00 2001
From: Kirill Kamakin <k.kamakin@protonmail.ch>
Date: Sun, 28 Nov 2021 16:03:40 +0300
Subject: [PATCH] Improve recipe info screen UI

---
 .../main/res/layout/fragment_recipe_info.xml  | 110 ++++++++++++------
 .../res/layout/view_holder_ingredient.xml     |   1 -
 .../res/layout/view_holder_instruction.xml    |  51 ++++----
 3 files changed, 106 insertions(+), 56 deletions(-)

diff --git a/app/src/main/res/layout/fragment_recipe_info.xml b/app/src/main/res/layout/fragment_recipe_info.xml
index 2cf9084..780695f 100644
--- a/app/src/main/res/layout/fragment_recipe_info.xml
+++ b/app/src/main/res/layout/fragment_recipe_info.xml
@@ -10,85 +10,127 @@
 		android:layout_width="match_parent"
 		android:layout_height="wrap_content">
 
+		<androidx.constraintlayout.widget.Guideline
+			android:id="@+id/end_guide"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:orientation="vertical"
+			app:layout_constraintBottom_toBottomOf="parent"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintGuide_end="4dp"
+			app:layout_constraintTop_toTopOf="parent"
+			app:layout_constraintVertical_chainStyle="packed" />
+
+		<androidx.constraintlayout.widget.Guideline
+			android:id="@+id/start_guide"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:orientation="vertical"
+			app:layout_constraintBottom_toBottomOf="parent"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintGuide_begin="4dp"
+			app:layout_constraintTop_toTopOf="parent" />
+
 		<com.google.android.material.imageview.ShapeableImageView
 			android:id="@+id/image"
 			android:scaleType="centerCrop"
 			android:layout_width="0dp"
 			app:shapeAppearance="@style/ShapeAppearance.AllCornersRounded"
 			android:layout_height="@dimen/fragment_recipe_info_image_height"
-			android:layout_marginBottom="@dimen/margin_small"
 			android:contentDescription="@string/content_description_fragment_recipe_info_image"
 			app:layout_constraintEnd_toEndOf="parent"
 			app:layout_constraintStart_toStartOf="parent"
 			app:layout_constraintTop_toTopOf="parent"
+			app:layout_constraintBottom_toTopOf="@+id/title"
 			tools:srcCompat="@drawable/placeholder_recipe" />
 
 		<TextView
 			android:id="@+id/title"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
-			android:layout_margin="@dimen/margin_small"
+			android:layout_marginHorizontal="8dp"
+			android:layout_marginTop="7dp"
 			android:textAppearance="?textAppearanceHeadline6"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintBottom_toTopOf="@+id/description"
+			app:layout_constraintEnd_toStartOf="@+id/end_guide"
+			app:layout_constraintStart_toEndOf="@+id/start_guide"
 			app:layout_constraintTop_toBottomOf="@+id/image"
 			tools:text="Best-Ever Beef Stew" />
 
 		<TextView
 			android:id="@+id/description"
 			android:layout_width="0dp"
+			android:layout_marginHorizontal="8dp"
 			android:layout_height="wrap_content"
-			android:layout_margin="@dimen/margin_small"
+			android:layout_marginTop="6dp"
 			android:textAppearance="?textAppearanceBody2"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintBottom_toTopOf="@+id/ingredients_holder"
+			app:layout_constraintEnd_toStartOf="@+id/end_guide"
+			app:layout_constraintStart_toEndOf="@+id/start_guide"
 			app:layout_constraintTop_toBottomOf="@+id/title"
 			tools:text="Stay warm all winter with this classic Beef Stew made with red wine and beef stock from Delish.com." />
 
-		<TextView
-			android:id="@+id/ingredients_header"
+		<com.google.android.material.card.MaterialCardView
+			android:id="@+id/ingredients_holder"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
-			android:layout_margin="@dimen/margin_small"
-			android:text="@string/fragment_recipe_info_ingredients_header"
-			android:textAppearance="?textAppearanceHeadline6"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@+id/description" />
+			android:layout_marginHorizontal="8dp"
+			android:layout_marginTop="11dp"
+			android:layout_marginBottom="20dp"
+			app:cardCornerRadius="@dimen/rounded_corner_size_default"
+			app:cardElevation="10dp"
+			app:layout_constraintBottom_toTopOf="@+id/instructions_header"
+			app:layout_constraintEnd_toStartOf="@+id/end_guide"
+			app:layout_constraintStart_toEndOf="@+id/start_guide"
+			app:layout_constraintTop_toBottomOf="@+id/description">
 
-		<androidx.recyclerview.widget.RecyclerView
-			android:id="@+id/ingredients_list"
-			android:layout_width="0dp"
-			android:layout_height="wrap_content"
-			android:layout_margin="@dimen/margin_small"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@+id/ingredients_header"
-			app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
-			tools:itemCount="3"
-			tools:listitem="@layout/view_holder_ingredient" />
+			<LinearLayout
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:orientation="vertical">
+
+				<TextView
+					android:id="@+id/ingredients_header"
+					android:layout_width="match_parent"
+					android:layout_height="wrap_content"
+					android:layout_marginHorizontal="17dp"
+					android:layout_marginTop="16dp"
+					android:text="@string/fragment_recipe_info_ingredients_header"
+					android:textAppearance="?textAppearanceHeadline6" />
+
+				<androidx.recyclerview.widget.RecyclerView
+					android:id="@+id/ingredients_list"
+					android:layout_width="match_parent"
+					android:layout_height="wrap_content"
+					android:layout_marginHorizontal="10dp"
+					app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+					tools:itemCount="3"
+					tools:listitem="@layout/view_holder_ingredient" />
+			</LinearLayout>
+		</com.google.android.material.card.MaterialCardView>
 
 		<TextView
 			android:id="@+id/instructions_header"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
-			android:layout_margin="@dimen/margin_small"
+			android:layout_marginStart="35dp"
+			android:layout_marginEnd="8dp"
 			android:text="@string/fragment_recipe_info_instructions_header"
 			android:textAppearance="?textAppearanceHeadline6"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
-			app:layout_constraintTop_toBottomOf="@+id/ingredients_list" />
+			app:layout_constraintBottom_toTopOf="@+id/instructions_list"
+			app:layout_constraintEnd_toStartOf="@+id/end_guide"
+			app:layout_constraintStart_toEndOf="@+id/start_guide"
+			app:layout_constraintTop_toBottomOf="@+id/ingredients_holder" />
 
 		<androidx.recyclerview.widget.RecyclerView
 			android:id="@+id/instructions_list"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
-			android:layout_margin="@dimen/margin_small"
-			app:layout_constraintEnd_toEndOf="parent"
-			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintBottom_toBottomOf="parent"
+			app:layout_constraintEnd_toStartOf="@+id/end_guide"
 			app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
 			app:layout_constraintTop_toBottomOf="@+id/instructions_header"
-			android:paddingBottom="@dimen/bottom_padding_instructions_list_fragment_recipe_info"
+			app:layout_constraintStart_toEndOf="@+id/start_guide"
 			tools:itemCount="2"
 			tools:listitem="@layout/view_holder_instruction" />
 	</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/view_holder_ingredient.xml b/app/src/main/res/layout/view_holder_ingredient.xml
index 4b98619..04af9b3 100644
--- a/app/src/main/res/layout/view_holder_ingredient.xml
+++ b/app/src/main/res/layout/view_holder_ingredient.xml
@@ -9,7 +9,6 @@
 		android:id="@+id/checkBox"
 		android:layout_width="0dp"
 		android:layout_height="wrap_content"
-		android:layout_margin="@dimen/margin_small"
 		app:layout_constraintEnd_toEndOf="parent"
 		app:layout_constraintStart_toStartOf="parent"
 		app:layout_constraintTop_toTopOf="parent"
diff --git a/app/src/main/res/layout/view_holder_instruction.xml b/app/src/main/res/layout/view_holder_instruction.xml
index c83507d..676aaba 100644
--- a/app/src/main/res/layout/view_holder_instruction.xml
+++ b/app/src/main/res/layout/view_holder_instruction.xml
@@ -1,30 +1,39 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<com.google.android.material.card.MaterialCardView 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_margin="8dp"
+	app:cardCornerRadius="@dimen/rounded_corner_size_default"
+	app:cardElevation="10dp"
 	android:layout_height="wrap_content">
 
-	<TextView
-		android:id="@+id/step"
-		android:layout_width="0dp"
+	<androidx.constraintlayout.widget.ConstraintLayout
+		android:layout_width="match_parent"
 		android:layout_height="wrap_content"
-		android:layout_margin="@dimen/margin_small"
-		android:textAppearance="?textAppearanceHeadline6"
-		app:layout_constraintEnd_toEndOf="parent"
-		app:layout_constraintStart_toStartOf="parent"
-		app:layout_constraintTop_toTopOf="parent"
-		tools:text="Step: 1" />
+		android:paddingHorizontal="18dp"
+		android:paddingVertical="12dp">
 
-	<TextView
-		android:id="@+id/instruction"
-		android:layout_width="0dp"
-		android:layout_height="wrap_content"
-		android:layout_margin="@dimen/margin_small"
-		android:textAppearance="?textAppearanceBody2"
-		app:layout_constraintEnd_toEndOf="parent"
-		app:layout_constraintStart_toStartOf="parent"
-		app:layout_constraintTop_toBottomOf="@+id/step"
-		tools:text="In a large dutch oven or heavy-bottomed pot over medium heat, heat oil. Add beef and cook until seared on all sides, 10 minutes, working in batches if necessary. Transfer beef to a plate." />
+		<TextView
+			android:id="@+id/step"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:textAppearance="?textAppearanceHeadline6"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toTopOf="parent"
+			tools:text="Step: 1" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+		<TextView
+			android:id="@+id/instruction"
+			android:layout_width="0dp"
+			android:layout_height="wrap_content"
+			android:layout_marginTop="12dp"
+			android:textAppearance="?textAppearanceBody2"
+			app:layout_constraintEnd_toEndOf="parent"
+			app:layout_constraintStart_toStartOf="parent"
+			app:layout_constraintTop_toBottomOf="@+id/step"
+			tools:text="In a large dutch oven or heavy-bottomed pot over medium heat, heat oil. Add beef and cook until seared on all sides, 10 minutes, working in batches if necessary. Transfer beef to a plate." />
+
+	</androidx.constraintlayout.widget.ConstraintLayout>
+</com.google.android.material.card.MaterialCardView>