Skip to content

Commit

Permalink
Fix #3691: Adds Resume Lesson Tablet Portrait UI (#5175)
Browse files Browse the repository at this point in the history 
<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation
<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

Fixes #3691

Adds layout file for tablet portrait mode for resume lesson screen.

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [x] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only
<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-A11y-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing

|Before|After|
|--|--|
|<img
src="https://github.com/oppia/oppia-android/assets/84731134/00eb5bd2-eb6c-4c83-8f89-9b7f1f47290d"
width="400"/>|<img
src="https://github.com/oppia/oppia-android/assets/84731134/170808c4-0a5b-45df-b2a4-7bd312216010"
width="400"/>|
|<img
src="https://github.com/oppia/oppia-android/assets/84731134/f8c7cfd2-fff4-42e4-b1e8-c1f021a6c730"
width="400"/>|<img
src="https://github.com/oppia/oppia-android/assets/84731134/078b9960-53f4-4bb6-805d-aba62ec9f7dd"
width="400"/>|

---------

Co-authored-by: Adhiambo Peres <59600948+adhiamboperes@users.noreply.github.com>
  • Loading branch information
@theMr17 @adhiamboperes
theMr17 and adhiamboperes authored Oct 6, 2023
1 parent 7d0a594 commit 783f8db
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 0 deletions.
126 changes: 126 additions & 0 deletions app/src/main/res/layout-sw600dp-port/resume_lesson_fragment.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<data>

<import type="android.view.View" />

<variable
name="viewModel"
type="org.oppia.android.app.resumelesson.ResumeLessonViewModel" />
</data>

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/component_color_shared_screen_primary_background_color"
android:overScrollMode="never"
android:scrollbars="none">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="24dp">

<org.oppia.android.app.customview.LessonThumbnailImageView
android:id="@+id/resume_lesson_chapter_thumbnail_image_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
app:entityId="@{viewModel.chapterSummary.explorationId}"
app:entityType="@{viewModel.entityType}"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:lessonThumbnail="@{viewModel.chapterSummary.chapterThumbnail}" />

<TextView
android:id="@+id/resume_lesson_chapter_title_text_view"
style="@style/TextViewStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/resume_lesson_chapter_title_text_margin_start"
android:layout_marginTop="@dimen/resume_lesson_chapter_title_text_margin_top"
android:layout_marginEnd="@dimen/resume_lesson_chapter_title_text_margin_end"
android:layout_marginBottom="@dimen/resume_lesson_chapter_title_text_margin_bottom"
android:fontFamily="sans-serif"
android:text="@{viewModel.chapterTitle}"
android:textColor="@color/component_color_shared_primary_text_color"
android:textDirection="locale"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/resume_lesson_chapter_thumbnail_image_view" />

<TextView
android:id="@+id/resume_lesson_chapter_description_text_view"
style="@style/Body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/resume_lesson_chapter_description_text_margin_start"
android:layout_marginTop="@dimen/resume_lesson_chapter_description_text_margin_top"
android:layout_marginEnd="@dimen/resume_lesson_chapter_description_text_margin_end"
android:ellipsize="end"
android:textColor="@color/component_color_shared_secondary_1_text_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />

<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/resume_lesson_chapter_flexbox_margin_start"
android:layout_marginTop="@dimen/resume_lesson_chapter_flexbox_margin_top"
android:layout_marginEnd="@dimen/resume_lesson_chapter_flexbox_margin_end"
app:alignContent="flex_start"
app:alignItems="center"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="space_evenly"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_description_text_view">

<com.google.android.material.button.MaterialButton
android:id="@+id/resume_lesson_start_over_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/resume_lesson_start_over_button_margin"
android:background="@drawable/secondary_button_background"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:minWidth="144dp"
android:minHeight="@dimen/clickable_item_min_height"
android:text="@string/start_over_lesson_button"
android:textAllCaps="false"
android:textColor="@color/component_color_shared_secondary_button_background_trim_color"
android:textSize="14sp"
app:backgroundTint="@null"
app:icon="@drawable/ic_start_over_24dp"
app:iconGravity="textStart"
app:iconTint="@color/component_color_shared_secondary_button_background_trim_color" />

<com.google.android.material.button.MaterialButton
android:id="@+id/resume_lesson_continue_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/state_button_primary_background"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:minWidth="144dp"
android:minHeight="@dimen/clickable_item_min_height"
android:text="@string/resume_lesson_button"
android:textAllCaps="false"
android:textColor="@color/component_color_shared_secondary_4_text_color"
android:textSize="14sp"
app:backgroundTint="@null"
app:icon="@drawable/ic_arrow_right_alt_24dp"
app:iconGravity="textEnd" />
</com.google.android.flexbox.FlexboxLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</layout>
13 changes: 13 additions & 0 deletions app/src/main/res/values-sw600dp-port/dimens.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -511,4 +511,17 @@
<dimen name="profile_chooser_margin_top_profile_not_added">124dp</dimen>
<dimen name="profile_chooser_administrator_controls_margin_bottom">32dp</dimen>
<dimen name="profile_chooser_setting_icon_margin_end">64dp</dimen>

<!-- ResumeLessonFragment-->
<dimen name="resume_lesson_chapter_title_text_margin_start">72dp</dimen>
<dimen name="resume_lesson_chapter_title_text_margin_end">72dp</dimen>
<dimen name="resume_lesson_chapter_title_text_margin_top">32dp</dimen>
<dimen name="resume_lesson_chapter_title_text_margin_bottom">16dp</dimen>
<dimen name="resume_lesson_chapter_description_text_margin_start">72dp</dimen>
<dimen name="resume_lesson_chapter_description_text_margin_end">72dp</dimen>
<dimen name="resume_lesson_chapter_description_text_margin_top">16dp</dimen>
<dimen name="resume_lesson_chapter_flexbox_margin_start">72dp</dimen>
<dimen name="resume_lesson_chapter_flexbox_margin_end">72dp</dimen>
<dimen name="resume_lesson_chapter_flexbox_margin_top">32dp</dimen>
<dimen name="resume_lesson_start_over_button_margin">8dp</dimen>
</resources>
13 changes: 13 additions & 0 deletions app/src/main/res/values/dimens.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -756,4 +756,17 @@
<dimen name="survey_nps_options_margin">8dp</dimen>
<dimen name="survey_nps_hint_text_margin">16dp</dimen>
<dimen name="survey_button_corner_radius">4dp</dimen>

<!-- ResumeLessonFragment-->
<dimen name="resume_lesson_chapter_title_text_margin_start">32dp</dimen>
<dimen name="resume_lesson_chapter_title_text_margin_end">32dp</dimen>
<dimen name="resume_lesson_chapter_title_text_margin_top">32dp</dimen>
<dimen name="resume_lesson_chapter_title_text_margin_bottom">16dp</dimen>
<dimen name="resume_lesson_chapter_description_text_margin_start">32dp</dimen>
<dimen name="resume_lesson_chapter_description_text_margin_end">32dp</dimen>
<dimen name="resume_lesson_chapter_description_text_margin_top">16dp</dimen>
<dimen name="resume_lesson_chapter_flexbox_margin_start">28dp</dimen>
<dimen name="resume_lesson_chapter_flexbox_margin_end">28dp</dimen>
<dimen name="resume_lesson_chapter_flexbox_margin_top">32dp</dimen>
<dimen name="resume_lesson_start_over_button_margin">8dp</dimen>
</resources>

0 comments on commit 783f8db

Please sign in to comment.