Skip to content

Commit

Permalink
Complete onboarding language UI portrait light mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@adhiamboperes
adhiamboperes committed Dec 19, 2023
1 parent 4345801 commit 3f28f81
Show file tree
Hide file tree
Showing 12 changed files with 466 additions and 198 deletions.
6 changes: 3 additions & 3 deletions app/src/main/java/org/oppia/android/app/customview/OppiaCurveBackgroundView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@ class OppiaCurveBackgroundView @JvmOverloads constructor(
val controlPoint1X = width * 0.4f
val controlPoint1Y = 0f

val controlPoint2X = width * 0.6f
val controlPoint2Y = height * 0.16f
val controlPoint2X = width * 0.5f
val controlPoint2Y = height * 0.15f

val controlPoint3X = width * 1f
val controlPoint3X = width * 1.2f
val controlPoint3Y = height * 0.1f

path.reset()
Expand Down
30 changes: 22 additions & 8 deletions app/src/main/res/drawable/dropdown_background.xml
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/survey_shared_corner_radius" />
<solid android:color="@color/component_color_shared_white_background_color" />
<stroke
android:width="1dp"
android:color="@color/component_color_shared_white_background_color" />
</shape>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/component_color_onboarding_language_shadow_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>
134 changes: 134 additions & 0 deletions app/src/main/res/drawable/img_onboarding_language_background.xml
View file

Large diffs are not rendered by default.

130 changes: 0 additions & 130 deletions app/src/main/res/drawable/img_otter.xml
View file

This file was deleted.

135 changes: 135 additions & 0 deletions app/src/main/res/drawable/img_tablet_portrait_onboarding_language_background.xml
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/src/main/res/drawable/rounded_primary_button_grey_shadow_color.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</shape>
</item>

<item android:right="1dp" android:bottom="4dp" android:left="1dp">
<item android:right="1dp" android:bottom="3dp" android:left="1dp">
<shape android:shape="rectangle">
<solid android:color="@color/component_color_shared_secondary_button_background_trim_color" />
<corners android:radius="@dimen/survey_shared_corner_radius" />
Expand Down
134 changes: 134 additions & 0 deletions app/src/main/res/layout-sw600dp/onboarding_app_language_selection_fragment.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<?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_language_shared_white_color">

<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/onboarding_language_center_guide"
app:layout_constraintTop_toTopOf="parent">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:srcCompat="@drawable/img_tablet_portrait_onboarding_language_background" />
</FrameLayout>

<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.2" />

<TextView
android:id="@+id/onboarding_language_title"
style="@style/OnboardingLanguageHeaderStyle"
android:text="Welcome to Oppia"
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_center_guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.65" />

<TextView
android:id="@+id/onboarding_language_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/onboarding_language_explanation_text_margin"
android:background="@color/color_def_transparent"
android:fontFamily="sans-serif"
android:text="@string/onboarding_language_activity_select_label"
android:textColor="@color/component_color_onboarding_language_green_text_color"
android:textSize="@dimen/onboarding_language_subtitle_text_size"
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_marginTop="@dimen/onboarding_language_dropdown_margin"
android:background="@drawable/dropdown_background"
android:elevation="@dimen/onboarding_language_dropdown_elevation"
android:padding="@dimen/onboarding_language_dropdown_padding"
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:contentDescription="@string/onboarding_dropdown_language_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_alignStart="@id/onboarding_language_dropdown_icon"
android:layout_marginStart="32dp"
android:background="@drawable/transparent_background"
android:textAlignment="center"
android:textColor="@color/component_color_shared_primary_text_color"
android:textSize="@dimen/onboarding_language_message_text_size"
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:contentDescription="@string/onboarding_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_explanation"
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_lets_go_button_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@id/onboarding_language_explanation"
app:layout_constraintStart_toStartOf="@id/onboarding_language_explanation" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
68 changes: 21 additions & 47 deletions ...ayout/app_language_selection_fragment.xml → ...rding_app_language_selection_fragment.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,20 @@
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_def_oppia_green">
android:background="@color/component_color_onboarding_language_shared_white_color">

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/img_onboarding_language_background"
app:layout_constraintTop_toTopOf="parent" />

<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"
Expand All @@ -32,50 +45,12 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/onboarding_language_subtitle" />

<ImageView
android:id="@+id/onboarding_language_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="Otter with glasses"
android:elevation="4dp"
android:src="@drawable/img_otter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/onboarding_language_image_guide" />

<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.15" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/onboarding_language_title_guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.45" />

<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.4" />

<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.6" />

<org.oppia.android.app.customview.OppiaCurveBackgroundView
android:id="@+id/onboarding_language_background"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/onboarding_language_title_guide" />
app:layout_constraintGuide_percent="0.55" />

<TextView
android:id="@+id/onboarding_language_label"
Expand All @@ -91,7 +66,7 @@
android:layout_height="wrap_content"
android:layout_margin="@dimen/onboarding_language_text_margin"
android:background="@drawable/dropdown_background"
android:elevation="8dp"
android:elevation="@dimen/onboarding_language_dropdown_elevation"
android:padding="@dimen/onboarding_language_dropdown_padding"
app:layout_constraintEnd_toEndOf="@id/onboarding_language_label"
app:layout_constraintStart_toStartOf="@id/onboarding_language_label"
Expand All @@ -101,8 +76,8 @@
android:id="@+id/onboarding_language_dropdown_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="Dropdown language icon"
android:src="@drawable/ic_language_icon_black_24dp" />
android:contentDescription="@string/onboarding_dropdown_language_icon_description"
app:srcCompat="@drawable/ic_language_icon_black_24dp" />

<Spinner
android:id="@+id/onboarding_language_dropdown"
Expand All @@ -121,8 +96,8 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:contentDescription="Dropdown arror icon"
android:src="@drawable/ic_arrow_drop_down_black_24dp" />
android:contentDescription="@string/onboarding_dropdown_arrow_icon_description"
app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />
</RelativeLayout>

<TextView
Expand All @@ -141,7 +116,6 @@
android:text="@string/onboarding_language_lets_go_button_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/onboarding_language_explanation" />
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
3 changes: 2 additions & 1 deletion app/src/main/res/values/component_colors.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,7 @@
<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>
<!-- Onboarding App Language Activity -->
<color name="component_color_onboarding_language_white_text_color">@color/color_palette_white_text_color</color>
<color name="component_color_onboarding_language_shared_white_color">@color/color_palette_white_text_color</color>
<color name="component_color_onboarding_language_green_text_color">@color/color_palette_primary_color</color>
<color name="component_color_onboarding_language_shadow_color">@color/color_palette_button_shadow_color</color>
</resources>
8 changes: 6 additions & 2 deletions app/src/main/res/values/dimens.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -778,13 +778,17 @@
<dimen name="audio_fragment_progress_indicator_track_thickness">3dp</dimen>

<!-- Onboarding App Language -->
<dimen name="onboarding_language_button_margin">12dp</dimen>
<dimen name="onboarding_language_button_margin">16dp</dimen>
<dimen name="onboarding_language_title_margin">28dp</dimen>
<dimen name="onboarding_language_subtitle_margin">20dp</dimen>
<dimen name="onboarding_language_text_margin">28dp</dimen>
<dimen name="onboarding_language_text_margin">24dp</dimen>
<dimen name="onboarding_language_explanation_text_margin">16dp</dimen>
<dimen name="onboarding_language_title_text_size">32sp</dimen>
<dimen name="onboarding_language_subtitle_text_size">24sp</dimen>
<dimen name="onboarding_language_message_text_size">16sp</dimen>
<dimen name="onboarding_language_dropdown_elevation">8dp</dimen>
<dimen name="onboarding_language_dropdown_padding">8dp</dimen>
<dimen name="onboarding_language_dropdown_margin">32dp</dimen>
<dimen name="onboarding_language_dropdown_margin_top">20dp</dimen>
<dimen name="onboarding_shared_corner_radius">4dp</dimen>
</resources>
2 changes: 2 additions & 0 deletions app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -637,6 +637,8 @@
<string name="onboarding_language_activity_select_label">Select a language to start</string>
<string name="onboarding_language_explanation">You can change your language selection anytime in the app settings</string>
<string name="onboarding_language_lets_go_button_text">Let\'s go!</string>
<string name="onboarding_dropdown_arrow_icon_description">Dropdown arrow icon</string>
<string name="onboarding_dropdown_language_icon_description">Dropdown language icon</string>
<string-array name="onboarding_language_activity_languages">
<item>English</item>
</string-array>
Expand Down
12 changes: 6 additions & 6 deletions app/src/main/res/values/styles.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -640,15 +640,15 @@
<style name="OnboardingLanguageHeaderStyle" 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_language_white_text_color</item>
<item name="android:textColor">@color/component_color_onboarding_language_shared_white_color</item>
<item name="android:textSize">@dimen/onboarding_language_title_text_size</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_language_white_text_color</item>
<item name="android:textColor">@color/component_color_onboarding_language_shared_white_color</item>
<item name="android:layout_marginTop">@dimen/onboarding_language_subtitle_margin</item>
<item name="android:textSize">@dimen/onboarding_language_subtitle_text_size</item>
<item name="android:fontFamily">sans-serif</item>
Expand All @@ -658,7 +658,7 @@
<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_language_white_text_color</item>
<item name="android:textColor">@color/component_color_onboarding_language_shared_white_color</item>
<item name="android:layout_marginTop">@dimen/onboarding_language_explanation_text_margin</item>
<item name="android:textSize">@dimen/onboarding_language_message_text_size</item>
<item name="android:fontFamily">sans-serif</item>
Expand All @@ -668,11 +668,11 @@
<style name="OnboardingLanguageLetsGoButton" parent="TextAppearance.AppCompat.Widget.Button">
<item name="android:minWidth">@dimen/clickable_item_min_width</item>
<item name="android:layout_margin">@dimen/onboarding_language_button_margin</item>
<item name="android:background">@drawable/rounded_button_white_outline_color</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_language_white_text_color</item>
<item name="android:textColor">@color/component_color_onboarding_language_shared_white_color</item>
<item name="android:textSize">@dimen/onboarding_language_message_text_size</item>
</style>

Expand All @@ -686,7 +686,7 @@
</style>

<style name="OnboardingLanguageExplanationStyle" parent="TextViewCenterHorizontal">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/component_color_onboarding_language_green_text_color</item>
<item name="android:layout_margin">@dimen/onboarding_language_text_margin</item>
Expand Down

0 comments on commit 3f28f81

Please sign in to comment.