From 0c82aaca24d5ba80ff4ffc36459f89489fa5cc91 Mon Sep 17 00:00:00 2001
From: Gimun Kim <101035437+kmkim2689@users.noreply.github.com>
Date: Thu, 25 Jul 2024 13:06:33 +0900
Subject: [PATCH] :lipstick: implement layout components for search screen

---
 .../src/main/res/drawable/ic_search_24.xml    |  7 +++
 .../main/res/layout/item_appbar_search.xml    | 62 +++++++++++++++++++
 .../src/main/res/layout/item_search_bar.xml   | 48 ++++++++++++++
 .../src/main/res/layout/item_search_image.xml | 29 +++++++++
 android/app/src/main/res/values/strings.xml   |  3 +
 5 files changed, 149 insertions(+)
 create mode 100644 android/app/src/main/res/drawable/ic_search_24.xml
 create mode 100644 android/app/src/main/res/layout/item_appbar_search.xml
 create mode 100644 android/app/src/main/res/layout/item_search_bar.xml
 create mode 100644 android/app/src/main/res/layout/item_search_image.xml

diff --git a/android/app/src/main/res/drawable/ic_search_24.xml b/android/app/src/main/res/drawable/ic_search_24.xml
new file mode 100644
index 00000000..cfb8c6f3
--- /dev/null
+++ b/android/app/src/main/res/drawable/ic_search_24.xml
@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="20" android:viewportWidth="20" android:width="24dp">
+      
+    <path android:fillColor="#00000000" android:pathData="M15.417,9.167C15.417,12.619 12.618,15.417 9.167,15.417C5.715,15.417 2.917,12.619 2.917,9.167C2.917,5.715 5.715,2.917 9.167,2.917C12.618,2.917 15.417,5.715 15.417,9.167Z" android:strokeColor="#111111" android:strokeWidth="1.25"/>
+      
+    <path android:fillColor="#00000000" android:pathData="M17.083,17.083L13.75,13.75" android:strokeColor="#111111" android:strokeLineCap="round" android:strokeWidth="1.25"/>
+    
+</vector>
diff --git a/android/app/src/main/res/layout/item_appbar_search.xml b/android/app/src/main/res/layout/item_appbar_search.xml
new file mode 100644
index 00000000..ea1bf643
--- /dev/null
+++ b/android/app/src/main/res/layout/item_appbar_search.xml
@@ -0,0 +1,62 @@
+<?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="title"
+            type="String" />
+
+        <variable
+            name="searchKeyword"
+            type="String" />
+    </data>
+
+    <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/abl_default"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@color/white">
+
+        <com.google.android.material.appbar.CollapsingToolbarLayout
+            android:id="@+id/tb_default"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:fitsSystemWindows="false"
+            app:layout_anchor="@+id/abl_default"
+            app:layout_scrollFlags="scroll|snap">
+
+            <androidx.appcompat.widget.Toolbar
+                android:id="@+id/toolbar"
+                android:layout_width="match_parent"
+                android:layout_height="48dp"
+                android:background="@color/white"
+                app:layout_collapseMode="parallax" />
+
+            <TextView
+                android:id="@+id/tv_title"
+                style="@style/Headline.H2"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical"
+                android:layout_marginHorizontal="16dp"
+                android:layout_marginTop="4dp"
+                android:text="@string/search_appbar" />
+
+        </com.google.android.material.appbar.CollapsingToolbarLayout>
+
+        <include
+            layout="@layout/item_search_bar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="8dp"
+            android:layout_marginVertical="8dp"
+            app:hint="@{@string/search_searchbar_hint}"
+            app:content="@={searchKeyword}"
+            app:layout_collapseMode="parallax" />
+
+    </com.google.android.material.appbar.AppBarLayout>
+
+</layout>
diff --git a/android/app/src/main/res/layout/item_search_bar.xml b/android/app/src/main/res/layout/item_search_bar.xml
new file mode 100644
index 00000000..de472a6c
--- /dev/null
+++ b/android/app/src/main/res/layout/item_search_bar.xml
@@ -0,0 +1,48 @@
+<?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">
+
+    <data>
+
+        <variable
+            name="content"
+            type="String" />
+
+        <variable
+            name="hint"
+            type="String" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@drawable/bg_radius_outlined"
+        android:padding="12dp">
+
+        <ImageView
+            android:id="@+id/iv_search"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:src="@drawable/ic_search_24"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <EditText
+            android:id="@+id/et_search"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:text="@={content}"
+            android:hint="@{hint}"
+            android:imeOptions="actionSearch"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@id/iv_search"
+            app:layout_constraintTop_toTopOf="parent"
+            android:background="@android:color/transparent"
+            android:inputType="text"
+            style="@style/Body.B1"
+            android:layout_marginStart="12dp"
+            android:maxLines="1"/>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/android/app/src/main/res/layout/item_search_image.xml b/android/app/src/main/res/layout/item_search_image.xml
new file mode 100644
index 00000000..d7b76c83
--- /dev/null
+++ b/android/app/src/main/res/layout/item_search_image.xml
@@ -0,0 +1,29 @@
+<?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">
+
+    <data>
+        <variable
+            name="imageUrl"
+            type="String" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:padding="1dp">
+
+        <ImageView
+            android:id="@+id/iv_search_result"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            android:background="@color/gray"
+            app:layout_constraintDimensionRatio="H,1:1"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:imageUrl="@{imageUrl}"
+            android:scaleType="centerCrop"/>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml
index 8d55e6cf..44a7b400 100644
--- a/android/app/src/main/res/values/strings.xml
+++ b/android/app/src/main/res/values/strings.xml
@@ -25,4 +25,7 @@
 
     <string name="category_appbar">Category</string>
 
+    <string name="search_appbar">Search</string>
+    <string name="search_searchbar_hint">Search</string>
+
 </resources>