From 7c11bcdba0df1ff532a4d2bb283ee66577c290dc Mon Sep 17 00:00:00 2001
From: Adhiambo Peres <59600948+adhiamboperes@users.noreply.github.com>
Date: Wed, 27 Mar 2024 18:56:27 +0300
Subject: [PATCH] Create app language selection UI

---
 .../app/onboarding/OnboardingFragment.kt      |  16 +-
 .../OnboardingFragmentPresenter.kt            |  40 ++++
 .../main/res/drawable/dropdown_background.xml |  23 +++
 ...arding_app_language_selection_fragment.xml | 139 ++++++++++++++
 ...arding_app_language_selection_fragment.xml | 171 +++++++++++++++++
 ...arding_app_language_selection_fragment.xml | 173 ++++++++++++++++++
 ...arding_app_language_selection_fragment.xml | 150 +++++++++++++++
 .../main/res/values-night/color_palette.xml   |   3 +
 app/src/main/res/values/color_palette.xml     |   3 +
 app/src/main/res/values/component_colors.xml  |   4 +
 app/src/main/res/values/dimens.xml            |  36 ++++
 app/src/main/res/values/strings.xml           |  12 ++
 app/src/main/res/values/styles.xml            |  64 +++++++
 13 files changed, 833 insertions(+), 1 deletion(-)
 create mode 100644 app/src/main/java/org/oppia/android/app/onboardingv2/OnboardingFragmentPresenter.kt
 create mode 100644 app/src/main/res/drawable/dropdown_background.xml
 create mode 100644 app/src/main/res/layout-land/onboarding_app_language_selection_fragment.xml
 create mode 100644 app/src/main/res/layout-sw600dp-land/onboarding_app_language_selection_fragment.xml
 create mode 100644 app/src/main/res/layout-sw600dp-port/onboarding_app_language_selection_fragment.xml
 create mode 100644 app/src/main/res/layout/onboarding_app_language_selection_fragment.xml

diff --git a/app/src/main/java/org/oppia/android/app/onboarding/OnboardingFragment.kt b/app/src/main/java/org/oppia/android/app/onboarding/OnboardingFragment.kt
index 081abae41ee..26949323a18 100644
--- a/app/src/main/java/org/oppia/android/app/onboarding/OnboardingFragment.kt
+++ b/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)
+    }
   }
 }
diff --git a/app/src/main/java/org/oppia/android/app/onboardingv2/OnboardingFragmentPresenter.kt b/app/src/main/java/org/oppia/android/app/onboardingv2/OnboardingFragmentPresenter.kt
new file mode 100644
index 00000000000..caa845c047b
--- /dev/null
+++ b/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 javax.inject.Inject
+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
+
+/** 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
+  }
+}
diff --git a/app/src/main/res/drawable/dropdown_background.xml b/app/src/main/res/drawable/dropdown_background.xml
new file mode 100644
index 00000000000..3eca06cfe8c
--- /dev/null
+++ b/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>
diff --git a/app/src/main/res/layout-land/onboarding_app_language_selection_fragment.xml b/app/src/main/res/layout-land/onboarding_app_language_selection_fragment.xml
new file mode 100644
index 00000000000..f33dbad10d1
--- /dev/null
+++ b/app/src/main/res/layout-land/onboarding_app_language_selection_fragment.xml
@@ -0,0 +1,139 @@
+<?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="140dp"
+      android:layout_marginEnd="@dimen/onboarding_shared_margin_3xl"
+      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="match_parent"
+      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_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="match_parent"
+      android:layout_height="wrap_content"
+      android:text="@string/onboarding_language_activity_button_text"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent" />
+  </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/app/src/main/res/layout-sw600dp-land/onboarding_app_language_selection_fragment.xml b/app/src/main/res/layout-sw600dp-land/onboarding_app_language_selection_fragment.xml
new file mode 100644
index 00000000000..df7ccc2de4d
--- /dev/null
+++ b/app/src/main/res/layout-sw600dp-land/onboarding_app_language_selection_fragment.xml
@@ -0,0 +1,171 @@
+<?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">
+
+    <androidx.constraintlayout.widget.Guideline
+      android:id="@+id/onboarding_language_header_guide"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:orientation="horizontal"
+      app:layout_constraintGuide_percent="0.10" />
+
+    <TextView
+      android:id="@+id/onboarding_language_title"
+      style="@style/OnboardingHeaderStyle"
+      android:text="@string/onboarding_language_activity_title"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="@id/onboarding_language_header_guide" />
+
+    <TextView
+      android:id="@+id/onboarding_language_subtitle"
+      style="@style/OnboardingLanguageSubtitleStyle"
+      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:text="@string/onboarding_language_activity_text"
+      android:textSize="@dimen/onboarding_shared_text_size_medium_large"
+      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_image_guide"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:orientation="horizontal"
+      app:layout_constraintGuide_percent="0.35" />
+
+    <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.50" />
+
+    <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="wrap_content"
+      android:layout_height="wrap_content"
+      android:contentDescription="@string/onboarding_otter_content_description"
+      android:scaleType="centerCrop"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_image_guide"
+      app:srcCompat="@drawable/otter" />
+
+    <TextView
+      android:id="@+id/onboarding_language_label"
+      style="@style/OnboardingLanguageLabelStyle"
+      android:layout_marginTop="@dimen/onboarding_shared_margin_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_app_language_image"
+      app:layout_constraintVertical_chainStyle="packed" />
+
+    <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_marginTop="@dimen/onboarding_shared_margin_medium_small"
+      android:layout_marginEnd="@dimen/onboarding_shared_margin_5xl"
+      android:layout_marginBottom="@dimen/onboarding_shared_margin_5xl"
+      android:background="@drawable/dropdown_background"
+      android:elevation="@dimen/onboarding_shared_elevation"
+      android:padding="@dimen/onboarding_shared_padding_small"
+      app:layout_constraintBottom_toTopOf="@id/onboarding_language_explanation"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_label"
+      app:layout_constraintWidth_percent="0.3">
+
+      <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"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginBottom="@dimen/onboarding_shared_margin_2xl"
+      android:fontFamily="sans-serif-medium"
+      android:gravity="center"
+      android:text="@string/onboarding_language_activity_explanation_text"
+      android:textColor="@color/component_color_onboarding_shared_green_color"
+      android:textSize="@dimen/onboarding_shared_text_size_medium_large"
+      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"
+      android:layout_width="0dp"
+      android:layout_height="wrap_content"
+      android:layout_marginBottom="@dimen/onboarding_shared_margin_2xl"
+      android:background="@drawable/rounded_primary_button_grey_shadow_color"
+      android:fontFamily="sans-serif-medium"
+      android:gravity="center"
+      android:paddingBottom="@dimen/onboarding_shared_padding_small"
+      android:text="@string/onboarding_language_activity_button_text"
+      android:textAllCaps="false"
+      android:textColor="@color/component_color_onboarding_shared_white_color"
+      android:textSize="@dimen/onboarding_shared_text_size_medium_large"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintEnd_toEndOf="@id/onboarding_language_explanation"
+      app:layout_constraintStart_toStartOf="@id/onboarding_language_explanation"
+      app:layout_constraintWidth_percent="0.4" />
+  </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/app/src/main/res/layout-sw600dp-port/onboarding_app_language_selection_fragment.xml b/app/src/main/res/layout-sw600dp-port/onboarding_app_language_selection_fragment.xml
new file mode 100644
index 00000000000..a6d31bafe2c
--- /dev/null
+++ b/app/src/main/res/layout-sw600dp-port/onboarding_app_language_selection_fragment.xml
@@ -0,0 +1,173 @@
+<?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">
+
+    <androidx.constraintlayout.widget.Guideline
+      android:id="@+id/onboarding_language_header_guide"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:orientation="horizontal"
+      app:layout_constraintGuide_percent="0.20" />
+
+    <TextView
+      android:id="@+id/onboarding_language_title"
+      style="@style/OnboardingHeaderStyle"
+      android:text="@string/onboarding_language_activity_title"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="@id/onboarding_language_header_guide" />
+
+    <TextView
+      android:id="@+id/onboarding_language_subtitle"
+      style="@style/OnboardingLanguageSubtitleStyle"
+      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:text="@string/onboarding_language_activity_text"
+      android:textSize="@dimen/onboarding_shared_text_size_medium_large"
+      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_image_guide"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:orientation="horizontal"
+      app:layout_constraintGuide_percent="0.41" />
+
+    <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.50" />
+
+    <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="wrap_content"
+      android:layout_height="wrap_content"
+      android:contentDescription="@string/onboarding_otter_content_description"
+      android:scaleType="centerCrop"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_image_guide"
+      app:srcCompat="@drawable/otter" />
+
+    <TextView
+      android:id="@+id/onboarding_language_label"
+      style="@style/OnboardingLanguageLabelStyle"
+      android:layout_marginTop="@dimen/onboarding_shared_margin_small"
+      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_app_language_image"
+      app:layout_constraintVertical_chainStyle="packed" />
+
+    <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_marginTop="@dimen/onboarding_shared_margin_medium_small"
+      android:layout_marginEnd="@dimen/onboarding_shared_margin_5xl"
+      android:background="@drawable/dropdown_background"
+      android:elevation="@dimen/onboarding_shared_elevation"
+      app:layout_constraintWidth_percent="0.4"
+      android:padding="@dimen/onboarding_shared_padding_small"
+      app:layout_constraintBottom_toTopOf="@id/onboarding_language_explanation"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_label">
+
+      <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"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_marginTop="@dimen/onboarding_shared_margin_medium_large"
+      android:layout_marginBottom="@dimen/onboarding_shared_margin_5xl"
+      android:fontFamily="sans-serif-medium"
+      android:gravity="center"
+      android:text="@string/onboarding_language_activity_explanation_text"
+      android:textColor="@color/component_color_onboarding_shared_green_color"
+      android:textSize="@dimen/onboarding_shared_text_size_medium_large"
+      app:layout_constraintBottom_toTopOf="@id/onboarding_language_lets_go_button"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_dropdown_background" />
+
+    <Button
+      android:id="@+id/onboarding_language_lets_go_button"
+      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_2xl"
+      android:background="@drawable/rounded_primary_button_grey_shadow_color"
+      android:fontFamily="sans-serif-medium"
+      android:minHeight="@dimen/clickable_item_min_height"
+      android:text="@string/onboarding_language_activity_button_text"
+      android:textAllCaps="false"
+      android:textColor="@color/component_color_onboarding_shared_white_color"
+      android:textSize="@dimen/onboarding_shared_text_size_medium_large"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintWidth_percent="0.6"
+      app:layout_constraintStart_toStartOf="parent" />
+  </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/app/src/main/res/layout/onboarding_app_language_selection_fragment.xml b/app/src/main/res/layout/onboarding_app_language_selection_fragment.xml
new file mode 100644
index 00000000000..3bd95a7617b
--- /dev/null
+++ b/app/src/main/res/layout/onboarding_app_language_selection_fragment.xml
@@ -0,0 +1,150 @@
+<?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">
+
+    <androidx.constraintlayout.widget.Guideline
+      android:id="@+id/onboarding_language_header_guide"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:orientation="horizontal"
+      app:layout_constraintGuide_percent="0.10" />
+
+    <TextView
+      android:id="@+id/onboarding_language_title"
+      style="@style/OnboardingHeaderStyle"
+      android:text="@string/onboarding_language_activity_title"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="@id/onboarding_language_header_guide" />
+
+    <TextView
+      android:id="@+id/onboarding_language_subtitle"
+      style="@style/OnboardingLanguageSubtitleStyle"
+      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: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_image_guide"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:orientation="horizontal"
+      app:layout_constraintGuide_percent="0.40" />
+
+    <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.50" />
+
+    <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="148dp"
+      android:contentDescription="@string/onboarding_otter_content_description"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="@id/onboarding_language_image_guide"
+      app:srcCompat="@drawable/otter" />
+
+    <TextView
+      android:id="@+id/onboarding_language_label"
+      style="@style/OnboardingLanguageLabelStyle"
+      android:text="@string/onboarding_language_activity_select_label"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_app_language_image" />
+
+    <RelativeLayout
+      android:id="@+id/onboarding_language_dropdown_background"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_marginStart="@dimen/onboarding_shared_margin_4xl"
+      android:layout_marginTop="@dimen/onboarding_shared_margin_medium_small"
+      android:layout_marginEnd="@dimen/onboarding_shared_margin_4xl"
+      android:layout_marginBottom="@dimen/onboarding_shared_margin_large"
+      android:background="@drawable/dropdown_background"
+      android:elevation="@dimen/onboarding_shared_elevation"
+      android:padding="@dimen/onboarding_shared_padding_small"
+      app:layout_constraintEnd_toEndOf="@id/onboarding_language_label"
+      app:layout_constraintStart_toStartOf="@id/onboarding_language_label"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_label">
+
+      <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:text="@string/onboarding_language_activity_explanation_text"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toBottomOf="@id/onboarding_language_dropdown_background" />
+
+    <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="parent"
+      app:layout_constraintStart_toStartOf="parent" />
+  </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
index 36917970d4f..0cb9194b633 100644
--- a/app/src/main/res/values-night/color_palette.xml
+++ b/app/src/main/res/values-night/color_palette.xml
@@ -228,4 +228,7 @@
   <color name="color_palette_edit_text_inactive_color">@color/color_def_black_87</color>
   <color name="color_palette_edit_text_active_color">@color/color_def_white</color>
   <color name="color_palette_button_shadow_color">@color/color_def_black_25</color>
+  <!-- ON-BOARDING -->
+  <color name="color_palette_onboarding_primary_color">@color/color_def_dark_green</color>
+  <color name="color_palette_onboarding_primary_text_color">@color/color_def_accessible_grey</color>
 </resources>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index f5202bb9365..36cf4fa64ef 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -268,4 +268,7 @@
   <color name="color_palette_edit_text_inactive_color">@color/color_def_black_87</color>
   <color name="color_palette_edit_text_active_color">@color/color_def_black_87</color>
   <color name="color_palette_button_shadow_color">@color/color_def_black_25</color>
+  <!-- ON-BOARDING -->
+  <color name="color_palette_onboarding_primary_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_onboarding_primary_text_color">@color/color_def_accessible_grey</color>
 </resources>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index 35df91176ed..688327d2d67 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -304,4 +304,8 @@
   <color name="component_color_begin_survey_button_text_color">@color/color_palette_button_text_color</color>
   <color name="component_color_survey_edit_text_unselected_color">@color/color_palette_edit_text_unselected_color</color>
   <color name="component_color_button_shadow_color">@color/color_palette_button_shadow_color</color>
+  <color name="component_color_onboarding_shared_white_color">@color/color_palette_white_text_color</color>
+  <color name="component_color_onboarding_shared_green_color">@color/color_palette_onboarding_primary_color</color>
+  <color name="component_color_onboarding_shared_text_color">@color/color_palette_onboarding_primary_text_color</color>
+
 </resources>
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 65e5ca43e22..606fa577e39 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -773,4 +773,40 @@
   <dimen name="audio_fragment_margin">28dp</dimen>
   <dimen name="audio_fragment_progress_indicator_size">20dp</dimen>
   <dimen name="audio_fragment_progress_indicator_track_thickness">3dp</dimen>
+
+  <!-- Clickable Item Min width -->
+  <dimen name="clickable_item_min_width">144dp</dimen>
+
+  <!-- Onboarding V2 -->
+  <dimen name="onboarding_shared_corner_radius">4dp</dimen>
+  <dimen name="onboarding_shared_elevation">8dp</dimen>
+  <dimen name="onboarding_profile_picture_stroke_width">4dp</dimen>
+  <dimen name="onboarding_profile_picture_padding">2dp</dimen>
+
+  <dimen name="onboarding_shared_margin_x_small">4dp</dimen>
+  <dimen name="onboarding_shared_margin_small">8dp</dimen>
+  <dimen name="onboarding_shared_margin_medium_small">12dp</dimen>
+  <dimen name="onboarding_shared_margin_medium">16dp</dimen>
+  <dimen name="onboarding_shared_margin_medium_large">20dp</dimen>
+  <dimen name="onboarding_shared_margin_large">24dp</dimen>
+  <dimen name="onboarding_shared_margin_xl">28dp</dimen>
+  <dimen name="onboarding_shared_margin_2xl">32dp</dimen>
+  <dimen name="onboarding_shared_margin_3xl">36dp</dimen>
+  <dimen name="onboarding_shared_margin_4xl">48dp</dimen>
+  <dimen name="onboarding_shared_margin_5xl">52dp</dimen>
+
+  <dimen name="onboarding_shared_text_size_small">12sp</dimen>
+  <dimen name="onboarding_shared_text_size_medium_small">14sp</dimen>
+  <dimen name="onboarding_shared_text_size_medium">16sp</dimen>
+  <dimen name="onboarding_shared_text_size_medium_large">18sp</dimen>
+  <dimen name="onboarding_shared_text_size_large">20sp</dimen>
+  <dimen name="onboarding_shared_text_size_xl">24sp</dimen>
+  <dimen name="onboarding_shared_text_size_2xl">28sp</dimen>
+  <dimen name="onboarding_shared_text_size_3xl">32sp</dimen>
+
+  <dimen name="onboarding_shared_padding_small">4dp</dimen>
+  <dimen name="onboarding_shared_padding_medium_small">8dp</dimen>
+  <dimen name="onboarding_shared_padding_medium">12dp</dimen>
+  <dimen name="onboarding_shared_padding_medium_large">16dp</dimen>
+  <dimen name="onboarding_shared_padding_large">20dp</dimen>
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 9a46247bf65..504e23c798b 100755
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -635,4 +635,16 @@
   <string name="lock_icon_content_description">Lock Icon</string>
   <string name="download_status_image_content_description">Download Status</string>
   <string name="font_scale_html_content_text">html Content</string>
+  <!-- Onboarding App Language Activity -->
+  <string name="onboarding_language_activity_title">Welcome to %s!</string>
+  <string name="onboarding_language_activity_subtitle">Learn math for free, anytime!</string>
+  <string name="onboarding_language_activity_text">Made for students aged 7 to 14</string>
+  <string name="onboarding_language_activity_select_label">Select a language to start</string>
+  <string name="onboarding_language_activity_explanation_text">You can change your language selection anytime in the app settings</string>
+  <string name="onboarding_language_activity_button_text">Let\'s go!</string>
+
+  <!-- Onboarding Shared Strings -->
+  <string name="onboarding_language_dropdown_arrow_icon_description">Dropdown arrow icon</string>
+  <string name="onboarding_language_dropdown_icon_description">Dropdown language icon</string>
+  <string name="onboarding_otter_content_description">Cute otter wearing glasses.</string>
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 815ceccc4b7..d0edabebada 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -636,4 +636,68 @@
   <style name="AdminPinToolbarTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
     <item name="android:textSize">20sp</item>
   </style>
+
+  <style name="OnboardingHeaderStyle" parent="TextViewCenterHorizontal">
+    <item name="android:layout_width">wrap_content</item>
+    <item name="android:layout_height">wrap_content</item>
+    <item name="android:textColor">@color/component_color_onboarding_shared_white_color</item>
+    <item name="android:textSize">@dimen/onboarding_shared_text_size_3xl</item>
+    <item name="android:fontFamily">sans-serif-medium</item>
+  </style>
+
+  <style name="OnboardingLanguageSubtitleStyle" parent="TextViewCenterHorizontal">
+    <item name="android:layout_width">match_parent</item>
+    <item name="android:layout_height">wrap_content</item>
+    <item name="android:textColor">@color/component_color_onboarding_shared_white_color</item>
+    <item name="android:layout_marginTop">@dimen/onboarding_shared_margin_medium</item>
+    <item name="android:textSize">@dimen/onboarding_shared_text_size_medium_large</item>
+    <item name="android:fontFamily">sans-serif</item>
+  </style>
+
+  <style name="OnboardingLanguageMessageStyle" parent="TextViewCenterHorizontal">
+    <item name="android:layout_width">match_parent</item>
+    <item name="android:layout_height">wrap_content</item>
+    <item name="android:textColor">@color/component_color_onboarding_shared_white_color</item>
+    <item name="android:layout_marginTop">@dimen/onboarding_shared_margin_medium</item>
+    <item name="android:textSize">@dimen/onboarding_shared_text_size_small</item>
+    <item name="android:fontFamily">sans-serif</item>
+  </style>
+
+  <style name="OnboardingLanguageLetsGoButton" parent="TextAppearance.AppCompat.Widget.Button">
+    <item name="android:minWidth">@dimen/clickable_item_min_width</item>
+    <item name="android:layout_marginTop">@dimen/onboarding_shared_margin_medium</item>
+    <item name="android:layout_marginStart">@dimen/onboarding_shared_margin_4xl</item>
+    <item name="android:layout_marginEnd">@dimen/onboarding_shared_margin_4xl</item>
+    <item name="android:layout_marginBottom">@dimen/onboarding_shared_margin_medium_small</item>
+    <item name="android:background">@drawable/rounded_primary_button_grey_shadow_color</item>
+    <item name="android:fontFamily">sans-serif-medium</item>
+    <item name="android:minHeight">@dimen/clickable_item_min_height</item>
+    <item name="android:textAllCaps">false</item>
+    <item name="android:textColor">@color/component_color_onboarding_shared_white_color</item>
+    <item name="android:textSize">@dimen/onboarding_shared_text_size_medium</item>
+  </style>
+
+  <style name="OnboardingLanguageLabelStyle" parent="TextViewCenterHorizontal">
+    <item name="android:layout_width">wrap_content</item>
+    <item name="android:layout_height">wrap_content</item>
+    <item name="android:layout_marginTop">@dimen/onboarding_shared_margin_medium_small</item>
+    <item name="android:layout_marginBottom">@dimen/onboarding_shared_margin_medium_small</item>
+    <item name="android:layout_marginStart">@dimen/onboarding_shared_margin_large</item>
+    <item name="android:layout_marginEnd">@dimen/onboarding_shared_margin_large</item>
+    <item name="android:textColor">@color/component_color_onboarding_shared_green_color</item>
+    <item name="android:textSize">@dimen/onboarding_shared_text_size_large</item>
+    <item name="android:fontFamily">sans-serif-medium</item>
+  </style>
+
+  <style name="OnboardingLanguageExplanationStyle" parent="TextViewCenterHorizontal">
+    <item name="android:layout_width">match_parent</item>
+    <item name="android:layout_height">wrap_content</item>
+    <item name="android:textColor">@color/component_color_onboarding_shared_green_color</item>
+    <item name="android:layout_marginTop">@dimen/onboarding_shared_margin_small</item>
+    <item name="android:layout_marginBottom">@dimen/onboarding_shared_margin_large</item>
+    <item name="android:layout_marginStart">@dimen/onboarding_shared_margin_4xl</item>
+    <item name="android:layout_marginEnd">@dimen/onboarding_shared_margin_4xl</item>
+    <item name="android:textSize">@dimen/onboarding_shared_text_size_medium_small</item>
+    <item name="android:fontFamily">sans-serif</item>
+  </style>
 </resources>