Skip to content

Commit

Permalink
"Fix #4710 the button scaling problem in largest text, and change but…
Browse files Browse the repository at this point in the history 
…ton name" (#4987)

Fix #4710 the button scaling problem in largest text setting in the
resume fragment, and I will test on top of the comments.

The use of material button has better control for the icon inside the
button so that it can group icon and text together as responsive design
guidelines suggested. Particularly the icon gravity part that attached
the icon to the text.

## 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:

Here are the testing on my own cell phone, even the second smallest text
is too large for the screen so the buttons are wrapped in two rows. Only
the smallest text can fit.
|Screenshot 1|Screenshot 2|Screeshot 3|
|--|--|--|
|![Weixin
Image_20230606114148](https://github.com/oppia/oppia-android/assets/74568012/45a9e17f-d021-415a-860c-8c71cdada757)|![Weixin
Image_20230606114203](https://github.com/oppia/oppia-android/assets/74568012/55fe69d7-5da0-47b6-8b3a-f5c1840c1fd4)|![Weixin
Image_20230606114209](https://github.com/oppia/oppia-android/assets/74568012/a998b295-c956-4bc2-a575-e90df07ffa70)|


- Add a screenshot demonstrating UI of tablet
|Screenshot 1| Screenshot 2|
|--|--|
|![Screenshot 2023-06-05
120237](https://github.com/oppia/oppia-android/assets/74568012/1b49da46-2313-400e-a5c1-e89c54d41a42)|![Screenshot
2023-06-05
120223](https://github.com/oppia/oppia-android/assets/74568012/f0593f2f-4848-4050-9f8c-d7859a61f0fc)|

LTR
|Screenshot 1|Screenshot 2|Screeshot 3|
|--|--|--|

|![Image_20230606114738](https://github.com/oppia/oppia-android/assets/74568012/23e53655-9d3a-4f1f-a82c-a1bf7d2ca432)|![Image_20230606114706](https://github.com/oppia/oppia-android/assets/74568012/7a416ec8-bf23-4ffe-ad92-a7be013f5b99)|![Image_20230606114719](https://github.com/oppia/oppia-android/assets/74568012/70aa810a-b85d-4958-b8a2-e5d15c5a5e22)|

---------

Co-authored-by: Adhiambo Peres <59600948+adhiamboperes@users.noreply.github.com>
  • Loading branch information
@XichengSpencer @adhiamboperes
XichengSpencer and adhiamboperes authored Jun 15, 2023
1 parent bd9b658 commit 74f3968
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 77 deletions.
2 changes: 1 addition & 1 deletion app/src/main/res/drawable/secondary_button_background.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/state_previous_next_button_radius" />
<solid android:color="@color/component_color_shared_white_background_color" />
<solid android:tint="@color/component_color_shared_white_background_color" />
<stroke
android:width="2dp"
android:color="@color/component_color_shared_secondary_button_background_trim_color" />
Expand Down
59 changes: 41 additions & 18 deletions app/src/main/res/layout-land/resume_lesson_fragment.xml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
<layout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<data>
Expand Down Expand Up @@ -54,36 +55,58 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />

<androidx.constraintlayout.widget.ConstraintLayout
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginStart="28dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginEnd="28dp"
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">

<Button
<com.google.android.material.button.MaterialButton
android:id="@+id/resume_lesson_start_over_button"
style="@style/StartOverLessonButton"
android:layout_marginEnd="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/secondary_button_background"
android:gravity="center"
android:fontFamily="sans-serif-medium"
android:minWidth="144dp"
android:minHeight="@dimen/clickable_item_min_height"
android:textAllCaps="true"
android:textColor="@color/component_color_shared_secondary_button_background_trim_color"
android:textSize="14sp"
android:text="@string/start_over_lesson_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/resume_lesson_continue_button"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent" />
app:backgroundTint="@null"
app:icon="@drawable/ic_start_over_24dp"
app:iconTint="@color/component_color_shared_secondary_button_background_trim_color"
app:iconGravity="textStart" />


<Button
<com.google.android.material.button.MaterialButton
android:id="@+id/resume_lesson_continue_button"
style="@style/ContinueLessonButton"
android:layout_marginStart="12dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="144dp"
android:gravity="center"
android:background="@drawable/state_button_primary_background"
android:drawableTint="@color/component_color_shared_white_background_color"
android:fontFamily="sans-serif-medium"
android:minHeight="@dimen/clickable_item_min_height"
android:textAllCaps="true"
android:textColor="@color/component_color_shared_secondary_4_text_color"
android:textSize="14sp"
android:text="@string/resume_lesson_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/resume_lesson_start_over_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
app:iconGravity="textEnd"
app:icon="@drawable/ic_arrow_right_alt_24dp" />
</com.google.android.flexbox.FlexboxLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</layout>
56 changes: 39 additions & 17 deletions app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,36 +85,58 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />

<androidx.constraintlayout.widget.ConstraintLayout
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginStart="28dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginEnd="28dp"
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">

<Button
<com.google.android.material.button.MaterialButton
android:id="@+id/resume_lesson_start_over_button"
style="@style/StartOverLessonButton"
android:layout_marginEnd="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/secondary_button_background"
android:gravity="center"
android:fontFamily="sans-serif-medium"
android:minWidth="144dp"
android:minHeight="@dimen/clickable_item_min_height"
android:textAllCaps="true"
android:textColor="@color/component_color_shared_secondary_button_background_trim_color"
android:textSize="14sp"
android:text="@string/start_over_lesson_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/resume_lesson_continue_button"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent" />
app:backgroundTint="@null"
app:icon="@drawable/ic_start_over_24dp"
app:iconTint="@color/component_color_shared_secondary_button_background_trim_color"
app:iconGravity="textStart" />


<Button
<com.google.android.material.button.MaterialButton
android:id="@+id/resume_lesson_continue_button"
style="@style/ContinueLessonButton"
android:layout_marginStart="12dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="144dp"
android:gravity="center"
android:background="@drawable/state_button_primary_background"
android:drawableTint="@color/component_color_shared_white_background_color"
android:fontFamily="sans-serif-medium"
android:minHeight="@dimen/clickable_item_min_height"
android:textAllCaps="true"
android:textColor="@color/component_color_shared_secondary_4_text_color"
android:textSize="14sp"
android:text="@string/resume_lesson_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/resume_lesson_start_over_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
app:iconGravity="textEnd"
app:icon="@drawable/ic_arrow_right_alt_24dp" />
</com.google.android.flexbox.FlexboxLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</LinearLayout>
Expand Down
57 changes: 40 additions & 17 deletions app/src/main/res/layout/resume_lesson_fragment.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,36 +69,59 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />

<androidx.constraintlayout.widget.ConstraintLayout
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginStart="28dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginEnd="28dp"
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">

<Button
<com.google.android.material.button.MaterialButton
android:layout_margin="8dp"
android:id="@+id/resume_lesson_start_over_button"
style="@style/StartOverLessonButton"
android:layout_marginEnd="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/secondary_button_background"
android:gravity="center"
android:fontFamily="sans-serif-medium"
android:minWidth="144dp"
android:minHeight="@dimen/clickable_item_min_height"
android:textAllCaps="true"
android:textColor="@color/component_color_shared_secondary_button_background_trim_color"
android:textSize="14sp"
android:text="@string/start_over_lesson_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/resume_lesson_continue_button"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent" />
app:backgroundTint="@null"
app:icon="@drawable/ic_start_over_24dp"
app:iconTint="@color/component_color_shared_secondary_button_background_trim_color"
app:iconGravity="textStart" />


<Button
<com.google.android.material.button.MaterialButton
android:id="@+id/resume_lesson_continue_button"
style="@style/ContinueLessonButton"
android:layout_marginStart="12dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="144dp"
android:gravity="center"
android:background="@drawable/state_button_primary_background"
android:drawableTint="@color/component_color_shared_white_background_color"
android:fontFamily="sans-serif-medium"
android:minHeight="@dimen/clickable_item_min_height"
android:textAllCaps="true"
android:textColor="@color/component_color_shared_secondary_4_text_color"
android:textSize="14sp"
android:text="@string/resume_lesson_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/resume_lesson_start_over_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
app:iconGravity="textEnd"
app:icon="@drawable/ic_arrow_right_alt_24dp" />
</com.google.android.flexbox.FlexboxLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</layout>
26 changes: 2 additions & 24 deletions app/src/main/res/values/styles.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,39 +411,17 @@
</style>
<!-- Start Over Lesson Button -->
<style name="SecondaryButton" parent="TextAppearance.AppCompat.Widget.Button">
<item name="android:layout_width">144dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingEnd">12dp</item>
<item name="android:paddingStart">12dp</item>
<item name="android:minWidth">144dp</item>
<item name="android:background">@drawable/secondary_button_background</item>
<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:minWidth">144dp</item>
<item name="android:drawablePadding">4dp</item>
<item name="drawableTint">@color/component_color_shared_secondary_button_background_trim_color</item>
<item name="android:textAllCaps">true</item>
<item name="android:textColor">@color/component_color_shared_secondary_button_background_trim_color</item>
<item name="android:textSize">14sp</item>
</style>
<style name="StartOverLessonButton" parent="SecondaryButton">
<item name="drawableStartCompat">@drawable/ic_start_over_24dp</item>
</style>
<!-- Continue Lesson Button -->
<style name="ContinueLessonButton" parent="TextAppearance.AppCompat.Widget.Button">
<item name="android:layout_width">144dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:drawablePadding">4dp</item>
<item name="android:paddingEnd">12dp</item>
<item name="android:paddingStart">12dp</item>
<item name="android:minWidth">144dp</item>
<item name="android:background">@drawable/state_button_primary_background</item>
<item name="drawableEndCompat">@drawable/ic_arrow_right_alt_24dp</item>
<item name="drawableTint">@color/component_color_shared_white_background_color</item>
<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:minHeight">@dimen/clickable_item_min_height</item>
<item name="android:textAllCaps">true</item>
<item name="android:textColor">@color/component_color_shared_secondary_4_text_color</item>
<item name="android:textSize">14sp</item>
</style>

<style name="BorderlessMaterialButton" parent="Widget.AppCompat.Button.Borderless" />

Expand Down

0 comments on commit 74f3968

Please sign in to comment.