Fix Part of #4938: Introduce New App Language Selection Screen for onboarding

app/BUILD.bazel

@@ -409,9 +409,9 @@ VIEWS_WITH_RESOURCE_IMPORTS = [
     "src/main/java/org/oppia/android/app/customview/ChapterNotStartedContainerConstraintLayout.kt",
     "src/main/java/org/oppia/android/app/customview/ContinueButtonView.kt",
     "src/main/java/org/oppia/android/app/customview/LessonThumbnailImageView.kt",
+    "src/main/java/org/oppia/android/app/customview/OppiaCurveBackgroundView.kt",
     "src/main/java/org/oppia/android/app/customview/PromotedStoryCardView.kt",
     "src/main/java/org/oppia/android/app/customview/SegmentedCircularProgressView.kt",
-    "src/main/java/org/oppia/android/app/customview/SurveyOnboardingBackgroundView.kt",
     "src/main/java/org/oppia/android/app/customview/VerticalDashedLineView.kt",
     "src/main/java/org/oppia/android/app/survey/SurveyMultipleChoiceOptionView.kt",
     "src/main/java/org/oppia/android/app/survey/SurveyNpsItemOptionView.kt",

app/src/main/java/org/oppia/android/app/customview/SurveyOnboardingBackgroundView.kt → app/src/main/java/org/oppia/android/app/customview/OppiaCurveBackgroundView.kt

@@ -1,13 +1,13 @@
 package org.oppia.android.app.customview
 
 import android.content.Context
+import android.content.res.TypedArray
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.Path
 import android.util.AttributeSet
 import android.view.View
-import androidx.core.content.ContextCompat
 import androidx.core.view.ViewCompat
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
@@ -18,33 +18,38 @@ import org.oppia.android.app.view.ViewComponentImpl
 import javax.inject.Inject
 
 /**
- * CustomView to add a background to [SurveyWelcomeDialogFragment] and [SurveyOutroDialogFragment].
- * Without chaptersFinished and totalChapters values this custom-view cannot be created.
+ * CustomView to add a background to views that require a bezier curve background.
  *
  * Reference: // https://proandroiddev.com/how-i-drew-custom-shapes-in-bottom-bar-c4539d86afd7 and
  * // https://ciechanow.ski/drawing-bezier-curves/
  */
-class SurveyOnboardingBackgroundView : View {
-  @Inject
-  lateinit var resourceHandler: AppLanguageResourceHandler
+class OppiaCurveBackgroundView @JvmOverloads constructor(
+  context: Context,
+  attrs: AttributeSet? = null,
+  defStyleAttr: Int = 0
+) : View(context, attrs, defStyleAttr) {
+  /**
+   * Used to retrieve the layout direction that should be used to mirror the direction of the
+   * curve based on locale.
+   */
+  @Inject lateinit var resourceHandler: AppLanguageResourceHandler
 
   private val isRtl by lazy {
     resourceHandler.getLayoutDirection() == ViewCompat.LAYOUT_DIRECTION_RTL
   }
 
+  private var customBackgroundColor = Color.WHITE // Default color
+
   private lateinit var paint: Paint
   private lateinit var path: Path
   private var strokeWidth = 2f
 
-  constructor(context: Context) : super(context)
-  constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
-  constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
-    context,
-    attrs,
-    defStyleAttr
-  )
-
   init {
+    val typedArray: TypedArray =
+      context.obtainStyledAttributes(attrs, R.styleable.OppiaCurveBackgroundView)
+    customBackgroundColor =
+      typedArray.getColor(R.styleable.OppiaCurveBackgroundView_customBackgroundColor, Color.WHITE)
+    typedArray.recycle()
     setupCurvePaint()
   }
 
@@ -61,10 +66,10 @@ class SurveyOnboardingBackgroundView : View {
     val width = this.width.toFloat()
     val height = this.height.toFloat()
 
-    val controlPoint1X = width * 0.5f
+    val controlPoint1X = width * 0.55f
     val controlPoint1Y = 0f
 
-    val controlPoint2X = width * 0.5f
+    val controlPoint2X = width * 0.52f
     val controlPoint2Y = height * 0.2f
 
     val controlPoint3X = width * 1f
@@ -91,11 +96,8 @@ class SurveyOnboardingBackgroundView : View {
     paint = Paint(Paint.ANTI_ALIAS_FLAG)
     paint.apply {
       style = Paint.Style.FILL_AND_STROKE
-      strokeWidth = [email protected]
-      color = ContextCompat.getColor(
-        context,
-        R.color.component_color_survey_popup_background_color
-      )
+      strokeWidth = [email protected]
+      color = customBackgroundColor
     }
     setBackgroundColor(Color.TRANSPARENT)
   }

app/src/main/java/org/oppia/android/app/onboarding/OnboardingFragment.kt

@@ -7,13 +7,23 @@ import android.view.View
 import android.view.ViewGroup
 import org.oppia.android.app.fragment.FragmentComponentImpl
 import org.oppia.android.app.fragment.InjectableFragment
+import org.oppia.android.util.platformparameter.EnableOnboardingFlowV2
+import org.oppia.android.util.platformparameter.PlatformParameterValue
 import javax.inject.Inject
+import org.oppia.android.app.onboardingv2.OnboardingFragmentPresenter as OnboardingFragmentPresenterV2
 
 /** Fragment that contains an onboarding flow of the app. */
 class OnboardingFragment : InjectableFragment() {
   @Inject
   lateinit var onboardingFragmentPresenter: OnboardingFragmentPresenter
 
+  @Inject
+  lateinit var onboardingFragmentPresenterV2: OnboardingFragmentPresenterV2
+
+  @Inject
+  @field:EnableOnboardingFlowV2
+  lateinit var enableOnboardingFlowV2: PlatformParameterValue<Boolean>
+
   override fun onAttach(context: Context) {
     super.onAttach(context)
     (fragmentComponent as FragmentComponentImpl).inject(this)
@@ -24,6 +34,10 @@ class OnboardingFragment : InjectableFragment() {
     container: ViewGroup?,
     savedInstanceState: Bundle?
   ): View? {
-    return onboardingFragmentPresenter.handleCreateView(inflater, container)
+    return if (enableOnboardingFlowV2.value) {
+      onboardingFragmentPresenterV2.handleCreateView(inflater, container)
+    } else {
+      onboardingFragmentPresenter.handleCreateView(inflater, container)
+    }
   }
 }

app/src/main/java/org/oppia/android/app/onboardingv2/OnboardingFragmentPresenter.kt

@@ -0,0 +1,40 @@
+package org.oppia.android.app.onboardingv2
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import org.oppia.android.R
+import org.oppia.android.app.fragment.FragmentScope
+import org.oppia.android.app.translation.AppLanguageResourceHandler
+import org.oppia.android.databinding.OnboardingAppLanguageSelectionFragmentBinding
+import javax.inject.Inject
+
+/** The presenter for [OnboardingFragment] V2. */
+@FragmentScope
+class OnboardingFragmentPresenter @Inject constructor(
+  private val fragment: Fragment,
+  private val appLanguageResourceHandler: AppLanguageResourceHandler
+) {
+  private lateinit var binding: OnboardingAppLanguageSelectionFragmentBinding
+
+  /** Handle creation and binding of the [OnboardingFragment] V2 layout. */
+  fun handleCreateView(inflater: LayoutInflater, container: ViewGroup?): View {
+    binding = OnboardingAppLanguageSelectionFragmentBinding.inflate(
+      inflater,
+      container,
+      /* attachToRoot= */ false
+    )
+
+    binding.let {
+      it.lifecycleOwner = fragment
+    }
+
+    binding.onboardingLanguageTitle.text = appLanguageResourceHandler.getStringInLocaleWithWrapping(
+      R.string.onboarding_language_activity_title,
+      appLanguageResourceHandler.getStringInLocale(R.string.app_name)
+    )
+
+    return binding.root
+  }
+}

app/src/main/java/org/oppia/android/app/view/ViewComponentImpl.kt

@@ -6,9 +6,9 @@ import dagger.Subcomponent
 import org.oppia.android.app.customview.ChapterNotStartedContainerConstraintLayout
 import org.oppia.android.app.customview.ContinueButtonView
 import org.oppia.android.app.customview.LessonThumbnailImageView
+import org.oppia.android.app.customview.OppiaCurveBackgroundView
 import org.oppia.android.app.customview.PromotedStoryCardView
 import org.oppia.android.app.customview.SegmentedCircularProgressView
-import org.oppia.android.app.customview.SurveyOnboardingBackgroundView
 import org.oppia.android.app.home.promotedlist.ComingSoonTopicsListView
 import org.oppia.android.app.home.promotedlist.PromotedStoryListView
 import org.oppia.android.app.player.state.DragDropSortInteractionView
@@ -42,7 +42,7 @@ interface ViewComponentImpl : ViewComponent {
   fun inject(promotedStoryCardView: PromotedStoryCardView)
   fun inject(promotedStoryListView: PromotedStoryListView)
   fun inject(segmentedCircularProgressView: SegmentedCircularProgressView)
-  fun inject(surveyOnboardingBackgroundView: SurveyOnboardingBackgroundView)
+  fun inject(oppiaCurveBackgroundView: OppiaCurveBackgroundView)
   fun inject(surveyMultipleChoiceOptionView: SurveyMultipleChoiceOptionView)
   fun inject(surveyNpsItemOptionView: SurveyNpsItemOptionView)
 }

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

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item>
+    <shape android:shape="rectangle">
+      <solid android:color="@color/component_color_shared_white_background_color" />
+      <corners
+        android:bottomLeftRadius="@dimen/onboarding_shared_corner_radius"
+        android:bottomRightRadius="@dimen/onboarding_shared_corner_radius" />
+    </shape>
+  </item>
+  <item
+    android:bottom="2dp"
+    android:left="1dp"
+    android:right="2dp"
+    android:top="0dp">
+    <shape android:shape="rectangle">
+      <solid android:color="@color/component_color_shared_white_background_color" />
+      <corners
+        android:bottomLeftRadius="@dimen/onboarding_shared_corner_radius"
+        android:bottomRightRadius="@dimen/onboarding_shared_corner_radius" />
+    </shape>
+  </item>
+</layer-list>

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

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:tint="#000000"
+  android:viewportWidth="24.0"
+  android:viewportHeight="24.0">
+  <path
+    android:fillColor="#000000"
+    android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM18.92,8h-2.95c-0.32,-1.25 -0.78,-2.45 -1.38,-3.56 1.84,0.63 3.37,1.91 4.33,3.56zM12,4.04c0.83,1.2 1.48,2.53 1.91,3.96h-3.82c0.43,-1.43 1.08,-2.76 1.91,-3.96zM4.26,14C4.1,13.36 4,12.69 4,12s0.1,-1.36 0.26,-2h3.38c-0.08,0.66 -0.14,1.32 -0.14,2 0,0.68 0.06,1.34 0.14,2L4.26,14zM5.08,16h2.95c0.32,1.25 0.78,2.45 1.38,3.56 -1.84,-0.63 -3.37,-1.9 -4.33,-3.56zM8.03,8L5.08,8c0.96,-1.66 2.49,-2.93 4.33,-3.56C8.81,5.55 8.35,6.75 8.03,8zM12,19.96c-0.83,-1.2 -1.48,-2.53 -1.91,-3.96h3.82c-0.43,1.43 -1.08,2.76 -1.91,3.96zM14.34,14L9.66,14c-0.09,-0.66 -0.16,-1.32 -0.16,-2 0,-0.68 0.07,-1.35 0.16,-2h4.68c0.09,0.65 0.16,1.32 0.16,2 0,0.68 -0.07,1.34 -0.16,2zM14.59,19.56c0.6,-1.11 1.06,-2.31 1.38,-3.56h2.95c-0.96,1.65 -2.49,2.93 -4.33,3.56zM16.36,14c0.08,-0.66 0.14,-1.32 0.14,-2 0,-0.68 -0.06,-1.34 -0.14,-2h3.38c0.16,0.64 0.26,1.31 0.26,2s-0.1,1.36 -0.26,2h-3.38z" />
+</vector>

app/src/main/res/layout-land/onboarding_app_language_selection_fragment.xml

@@ -0,0 +1,144 @@
+<?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">
+
+  <androidx.constraintlayout.widget.ConstraintLayout
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/component_color_onboarding_shared_green_color">
+
+    <TextView
+      android:id="@+id/onboarding_language_title"
+      style="@style/OnboardingHeaderStyle"
+      android:layout_marginTop="@dimen/onboarding_shared_margin_medium_large"
+      android:text="@string/onboarding_language_activity_title"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+      android:id="@+id/onboarding_language_subtitle"
+      style="@style/OnboardingLanguageSubtitleStyle"
+      android:layout_marginTop="@dimen/onboarding_shared_margin_small"
+      android:text="@string/onboarding_language_activity_subtitle"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_title" />
+
+    <TextView
+      android:id="@+id/onboarding_language_text"
+      style="@style/OnboardingLanguageMessageStyle"
+      android:layout_marginTop="@dimen/onboarding_shared_margin_medium_small"
+      android:text="@string/onboarding_language_activity_text"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_subtitle" />
+
+    <androidx.constraintlayout.widget.Guideline
+      android:id="@+id/onboarding_language_center_guide"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:orientation="horizontal"
+      app:layout_constraintGuide_percent="0.40" />
+
+    <org.oppia.android.app.customview.OppiaCurveBackgroundView
+      android:id="@+id/onboarding_app_language_background"
+      android:layout_width="match_parent"
+      android:layout_height="0dp"
+      app:customBackgroundColor="@color/component_color_onboarding_shared_white_color"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintTop_toTopOf="@id/onboarding_language_center_guide" />
+
+    <ImageView
+      android:id="@+id/onboarding_app_language_image"
+      android:layout_width="132dp"
+      android:layout_height="138dp"
+      android:layout_marginEnd="@dimen/onboarding_shared_margin_2xl"
+      android:contentDescription="@string/onboarding_otter_content_description"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_title"
+      app:srcCompat="@drawable/otter" />
+
+    <TextView
+      android:id="@+id/onboarding_language_label"
+      style="@style/OnboardingLanguageLabelStyle"
+      android:layout_marginTop="@dimen/onboarding_shared_margin_medium_large"
+      android:text="@string/onboarding_language_activity_select_label"
+      app:layout_constraintBottom_toTopOf="@id/onboarding_language_dropdown_background"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_center_guide" />
+
+    <RelativeLayout
+      android:id="@+id/onboarding_language_dropdown_background"
+      android:layout_width="0dp"
+      android:layout_height="wrap_content"
+      android:layout_marginStart="@dimen/onboarding_shared_margin_5xl"
+      android:layout_marginEnd="@dimen/onboarding_shared_margin_5xl"
+      android:layout_marginBottom="@dimen/onboarding_shared_margin_small"
+      android:background="@drawable/dropdown_background"
+      android:elevation="@dimen/onboarding_shared_elevation"
+      android:padding="@dimen/onboarding_shared_padding_small"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_label"
+      app:layout_constraintWidth_percent="0.30"
+      app:layout_constraintBottom_toTopOf="@id/onboarding_language_explanation">
+
+      <ImageView
+        android:id="@+id/onboarding_language_dropdown_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/onboarding_shared_margin_small"
+        android:layout_marginTop="@dimen/onboarding_shared_margin_x_small"
+        android:layout_marginEnd="@dimen/onboarding_shared_margin_small"
+        android:layout_marginBottom="@dimen/onboarding_shared_margin_x_small"
+        android:contentDescription="@string/onboarding_language_dropdown_icon_description"
+        app:srcCompat="@drawable/ic_language_icon_black_24dp" />
+
+      <Spinner
+        android:id="@+id/onboarding_language_dropdown"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignParentStart="true"
+        android:layout_marginStart="@dimen/onboarding_shared_margin_2xl"
+        android:layout_toStartOf="@id/onboarding_language_dropdown_arrow"
+        android:background="@drawable/transparent_background"
+        android:textColor="@color/component_color_onboarding_shared_text_color"
+        tools:listheader="English" />
+
+      <ImageView
+        android:id="@+id/onboarding_language_dropdown_arrow"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignParentEnd="true"
+        android:layout_marginStart="@dimen/onboarding_shared_margin_small"
+        android:layout_marginTop="@dimen/onboarding_shared_margin_x_small"
+        android:layout_marginEnd="@dimen/onboarding_shared_margin_small"
+        android:layout_marginBottom="@dimen/onboarding_shared_margin_x_small"
+        android:contentDescription="@string/onboarding_language_dropdown_arrow_icon_description"
+        app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />
+    </RelativeLayout>
+
+    <TextView
+      android:id="@+id/onboarding_language_explanation"
+      style="@style/OnboardingLanguageExplanationStyle"
+      android:layout_marginBottom="@dimen/onboarding_shared_margin_medium_small"
+      android:text="@string/onboarding_language_activity_explanation_text"
+      app:layout_constraintBottom_toTopOf="@id/onboarding_language_lets_go_button"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent" />
+
+    <Button
+      android:id="@+id/onboarding_language_lets_go_button"
+      style="@style/OnboardingLanguageLetsGoButton"
+      android:layout_width="0dp"
+      android:layout_height="wrap_content"
+      android:text="@string/onboarding_language_activity_button_text"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintEnd_toEndOf="@id/onboarding_language_explanation"
+      app:layout_constraintWidth_percent="0.40"
+      app:layout_constraintStart_toStartOf="@id/onboarding_language_explanation" />
+  </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

app/src/main/res/layout-land/survey_welcome_dialog_fragment.xml

@@ -22,10 +22,11 @@
       android:orientation="horizontal"
       app:layout_constraintGuide_percent="0.10" />
 
-    <org.oppia.android.app.customview.SurveyOnboardingBackgroundView
+    <org.oppia.android.app.customview.OppiaCurveBackgroundView
       android:id="@+id/survey_onboarding_background"
       android:layout_width="match_parent"
       android:layout_height="0dp"
+      app:customBackgroundColor="@color/component_color_survey_popup_background_color"
       app:layout_constraintTop_toBottomOf="@id/survey_onboarding_title_guide" />
 
     <androidx.constraintlayout.widget.Guideline