[Design/#4] 온보딩 질문 화면 UI 구현

app/build.gradle

@@ -99,4 +99,7 @@ dependencies {
     def hilt_version = "2.42"
     implementation "com.google.dagger:hilt-android:$hilt_version"
     kapt "com.google.dagger:hilt-android-compiler:$hilt_version"
+
+    //viewpager2
+    implementation "androidx.viewpager2:viewpager2:1.0.0"
 }

app/src/main/AndroidManifest.xml

@@ -36,6 +36,14 @@
             android:exported="false"
             android:screenOrientation="portrait"
             android:windowSoftInputMode="adjustResize" />
+        <activity
+            android:name=".presentation.onboarding.QuestActivity"
+            android:exported="false"
+            android:screenOrientation="portrait" />
+        <activity
+            android:name=".presentation.onboarding.NotifyTimeActivity"
+            android:exported="false"
+            android:screenOrientation="portrait" />
     </application>
 
 </manifest>

app/src/main/java/com/sopt/umbba_android/MainActivity.kt

@@ -3,12 +3,12 @@ package com.sopt.umbba_android
 import android.content.Intent
 import androidx.appcompat.app.AppCompatActivity
 import android.os.Bundle
-import com.sopt.umbba_android.presentation.onboarding.InviteCodeActivity
+import com.sopt.umbba_android.presentation.onboarding.NotifyTimeActivity
 
 class MainActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_main)
-        startActivity(Intent(this, InviteCodeActivity::class.java))
+        startActivity(Intent(this, NotifyTimeActivity::class.java))
     }
 }

app/src/main/java/com/sopt/umbba_android/presentation/onboarding/NotifyTimeActivity.kt

@@ -0,0 +1,22 @@
+package com.sopt.umbba_android.presentation.onboarding
+
+import android.content.Intent
+import android.os.Bundle
+import com.sopt.umbba_android.R
+import com.sopt.umbba_android.databinding.ActivityNotifyTimeBinding
+import com.sopt.umbba_android.util.binding.BindingActivity
+
+class NotifyTimeActivity : BindingActivity<ActivityNotifyTimeBinding>(R.layout.activity_notify_time) {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setClickButton()
+    }
+
+    private fun setClickButton() {
+        with(binding) {
+            btnGoPast.setOnClickListener {
+                startActivity(Intent(this@NotifyTimeActivity, QuestActivity::class.java))
+            }
+        }
+    }
+}

app/src/main/java/com/sopt/umbba_android/presentation/onboarding/QuestActivity.kt

@@ -0,0 +1,20 @@
+package com.sopt.umbba_android.presentation.onboarding
+
+import android.os.Bundle
+import com.sopt.umbba_android.R
+import androidx.fragment.app.Fragment
+import com.sopt.umbba_android.databinding.ActivityQuestBinding
+import com.sopt.umbba_android.util.binding.BindingActivity
+
+class QuestActivity : BindingActivity<ActivityQuestBinding>(R.layout.activity_quest) {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        changeFragment(QuestSubFragment())
+    }
+
+    private fun changeFragment(fragment: Fragment) {
+        supportFragmentManager.beginTransaction()
+            .add(R.id.fragment_question, fragment)
+            .commit()
+    }
+}

app/src/main/java/com/sopt/umbba_android/presentation/onboarding/QuestSubFragment.kt

@@ -0,0 +1,21 @@
+package com.sopt.umbba_android.presentation.onboarding
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import com.sopt.umbba_android.R
+import com.sopt.umbba_android.databinding.FragmentQuestOneBinding
+import com.sopt.umbba_android.util.binding.BindingFragment
+
+class QuestSubFragment : BindingFragment<FragmentQuestOneBinding>(R.layout.fragment_quest_one) {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        return super.onCreateView(inflater, container, savedInstanceState)
+    }
+}

app/src/main/res/color/sel_choice_chip_stroke.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/grey_btn_checked_solid" android:state_checked="true" />
-    <item android:color="@color/grey_btn_stroke"/>
+    <item android:color="@color/grey_btn_solid"/>
 </selector>

app/src/main/res/color/sel_quest_choice_chip_text.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/white" android:state_checked="true" />
+    <item android:color="@color/black"/>
+</selector>

app/src/main/res/drawable/progress_bar_quest.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:id="@android:id/background">
+        <shape>
+            <corners android:radius="18dp" />
+            <solid android:color="@color/grey_D2D2D2" />
+        </shape>
+    </item>
+
+    <item android:id="@android:id/progress"
+        android:top="1dp"
+        android:bottom="1dp"
+        android:left="1dp"
+        android:right="1dp">
+
+        <scale android:scaleWidth="100%">
+            <shape>
+                <corners android:radius="18dp"/>
+                <solid android:color="@color/grey_666666"/>
+            </shape>
+        </scale>
+    </item>
+</layer-list>

app/src/main/res/drawable/sel_quest_btn_answer.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_checked="false">
+        <shape android:shape="rectangle">
+            <corners android:radius="50dp" />
+            <stroke android:width="1dp" android:color="@color/grey_CFCFCF" />
+            <solid android:color="@color/grey_EAEAEA" />
+        </shape>
+    </item>
+    <item android:state_checked="true">
+        <shape android:shape="rectangle">
+            <corners android:radius="50dp" />
+            <stroke android:color="@color/grey_CFCFCF" android:width="1dp"/>
+            <solid android:color="@color/grey_747474"/>
+        </shape>
+    </item>
+</selector>

app/src/main/res/drawable/sel_quest_btn_text_answer.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_checked="true" android:color="@color/white">
+    </item>
+    <item android:state_checked="false" android:color="@color/black">
+    </item>
+</selector>

app/src/main/res/drawable/shape_g300_fill_r50_rect.xml

@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <corners android:radius="50dp" />

app/src/main/res/drawable/shape_grey_stroke_r8_rect.xml → app/src/main/res/drawable/shape_gd4d4_stroke_r8_rect.xml

@@ -2,5 +2,7 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <corners android:radius="8dp" />
-    <stroke android:color="@color/grey_stroke" android:width="1dp" />
+    <stroke
+        android:width="1dp"
+        android:color="@color/grey_D4D4D4" />
 </shape>

app/src/main/res/layout/activity_input_info.xml

@@ -55,7 +55,7 @@
                     android:id="@+id/cl_name"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:background="@drawable/shape_grey_stroke_r8_rect"
+                    android:background="@drawable/shape_gd4d4_stroke_r8_rect"
                     app:layout_constraintTop_toTopOf="parent">
 
                     <TextView
@@ -102,7 +102,7 @@
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginTop="12dp"
-                    android:background="@drawable/shape_grey_stroke_r8_rect"
+                    android:background="@drawable/shape_gd4d4_stroke_r8_rect"
                     app:layout_constraintTop_toBottomOf="@id/cl_name">
 
                     <TextView
@@ -156,7 +156,7 @@
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginTop="12dp"
-                    android:background="@drawable/shape_grey_stroke_r8_rect"
+                    android:background="@drawable/shape_gd4d4_stroke_r8_rect"
                     app:layout_constraintTop_toBottomOf="@id/cl_sex">
 
                     <TextView
@@ -207,9 +207,9 @@
             android:layout_height="60dp"
             android:layout_marginHorizontal="24dp"
             android:layout_marginVertical="24dp"
-            android:background="@drawable/sel_invite_code_btn_next"
+            android:background="@drawable/sel_btn_next"
             android:enabled="false"
-            android:text="@string/invite_code_next"
+            android:text="@string/btn_next"
             android:textColor="@color/white"
             android:textSize="16sp"
             app:layout_constraintBottom_toBottomOf="parent"

app/src/main/res/layout/activity_invite_code.xml

@@ -22,14 +22,13 @@
 
         <TextView
             android:id="@+id/tv_title"
+            style="@style/AndroidHead1SemiBold24"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginStart="24dp"
-            android:layout_marginTop="18dp"
+            android:layout_marginStart="28dp"
+            android:layout_marginTop="12dp"
             android:text="@string/invite_code_title"
             android:textColor="@color/black"
-            android:textSize="24sp"
-            android:textStyle="bold"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/layout_appbar" />
 
@@ -49,6 +48,7 @@
 
             <com.google.android.material.textfield.TextInputEditText
                 android:id="@+id/et_code"
+                style="@style/AndroidBody2Regular16"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:hint="@string/invite_code_hint"
@@ -59,15 +59,14 @@
 
         <androidx.appcompat.widget.AppCompatButton
             android:id="@+id/btn_next"
+            style="@style/NextButtonStyle"
             android:layout_width="match_parent"
             android:layout_height="60dp"
+            android:enabled="true"
+            android:text="@string/btn_next"
             android:layout_marginHorizontal="24dp"
             android:layout_marginVertical="24dp"
-            android:background="@drawable/sel_invite_code_btn_next"
-            android:enabled="false"
-            android:text="@string/invite_code_next"
-            android:textColor="@color/white"
-            android:textSize="16sp"
             app:layout_constraintBottom_toBottomOf="parent" />
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>

app/src/main/res/layout/activity_notify_time.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <data>
+
+        <variable
+            name="titleText"
+            type="String" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <include
+            android:id="@+id/layout_appbar"
+            layout="@layout/basic_appbar" />
+
+        <TextView
+            android:id="@+id/tv_title"
+            style="@style/AndroidHead1SemiBold24"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="24dp"
+            android:layout_marginTop="18dp"
+            android:text="@string/go_past_title"
+            android:textColor="@color/black"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/layout_appbar" />
+
+        <androidx.appcompat.widget.AppCompatButton
+            android:id="@+id/btn_go_past"
+            android:layout_width="match_parent"
+            android:layout_height="60dp"
+            android:layout_margin="24dp"
+            android:background="@drawable/shape_black_fill_r50_rect"
+            android:text="@string/go_past"
+            android:textColor="@color/white"
+            android:textSize="16sp"
+            android:textStyle="bold"
+            app:layout_constraintBottom_toBottomOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

app/src/main/res/layout/activity_quest.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <data>
+
+        <variable
+            name="titleText"
+            type="String" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <include
+            android:id="@+id/layout_appbar"
+            layout="@layout/basic_appbar" />
+
+        <TextView
+            android:id="@+id/tv_title"
+            style="@style/AndroidHead1SemiBold24"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="24dp"
+            android:layout_marginTop="12dp"
+            android:text="@string/quest_activity_title"
+            android:textColor="@color/black"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/layout_appbar" />
+
+        <ProgressBar
+            android:id="@+id/progress_bar"
+            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
+            android:layout_width="match_parent"
+            android:layout_height="5dp"
+            android:layout_marginHorizontal="24dp"
+            android:layout_marginTop="12dp"
+            android:progressDrawable="@drawable/progress_bar_quest"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/tv_title" />
+
+        <FrameLayout
+            android:id="@+id/fragment_question"
+            android:layout_width="match_parent"
+            android:layout_height="335dp"
+            android:layout_marginHorizontal="24dp"
+            android:layout_marginTop="24dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <androidx.appcompat.widget.AppCompatButton
+            android:layout_width="match_parent"
+            android:layout_height="60dp"
+            android:layout_margin="24dp"
+            android:background="@drawable/sel_btn_next"
+            android:enabled="false"
+            android:text="@string/btn_next"
+            android:textColor="@color/white"
+            android:textSize="16sp"
+            app:layout_constraintBottom_toBottomOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</layout>