Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG]: TopicActivity Has Dark Mode Inconsistencies in Large Screens #5119

Closed
adhiamboperes opened this issue Aug 6, 2023 · 7 comments · Fixed by #5128
Closed

[BUG]: TopicActivity Has Dark Mode Inconsistencies in Large Screens #5119

adhiamboperes opened this issue Aug 6, 2023 · 7 comments · Fixed by #5128
Assignees
@ShubhadeepKarmakar
Labels
bug End user-perceivable behaviors which are not desirable. good first issue This item is good for new contributors to make their pull request. Impact: Low Low perceived user impact (e.g. edge cases). Work: Low Solution is clear and broken into good-first-issue-sized chunks.

Comments

@adhiamboperes
Copy link
Collaborator

adhiamboperes commented Aug 6, 2023 •
edited
Loading

Describe the bug

In large screen devices/tablets, the Topic screen shows an incorrect color for both Topic and Revision tabs.

Screenshot_1690497871

Screenshot_1690497898

Screenshot_1690497901

Steps To Reproduce

  1. Install Oppia on a real tablet or emulator such as a Nexus 9 device.
  2. On a profile home screen, click on any topic.
  3. On the topic list screen, see that the viewpager color is not Oppia green.
  4. Switch to the Revision tab and observe the same outcome.

Expected Behavior

The color should be consistent with the toolbar color above it, as seen in small screen layouts in the screenshot below:

Screenshot_1691302060

Screenshots/Videos

No response

What device/emulator are you using?

Nexus 9 emulator

Which Android version is your device/emulator running?

Android 10

Which version of the Oppia Android app are you using?

Developer build

Additional Context

No response
@adhiamboperes adhiamboperes added good first issue This item is good for new contributors to make their pull request. Impact: Low Low perceived user impact (e.g. edge cases). bug End user-perceivable behaviors which are not desirable. Work: Low Solution is clear and broken into good-first-issue-sized chunks. labels Aug 6, 2023
@MohitGupta121
Copy link
Member

@adhiamboperes if it's urgent can I make PR?

@adhiamboperes
Copy link
Collaborator Author

adhiamboperes commented Aug 6, 2023 •
edited
Loading

Hi @MohitGupta121, the impact here is low, let's keep this as a good first issue for new contributors.

@ShubhadeepKarmakar
Copy link
Collaborator

Hey, @adhiamboperes can you assign it to me?

@adhiamboperes
Copy link
Collaborator Author

Hey, @adhiamboperes can you assign it to me?

Sure, do you have an idea of how to go about it? Please describe it here. In case you need some help, we have a section on our wiki about working with dark mode, but feel free to ask questions.

@ShubhadeepKarmakar
Copy link
Collaborator

I think this is not a color_palette.xml or night/color_palette.xml related issue.

If you're working with a tab layout and want to differentiate the appearance of the tabs from the overall background, you should use app:tabBackground. If you want to set the background for an entire view or layout, you should use android:background.
And thats the issue.

After changing the attribute app:tabBackground to android:background the problem will be solved.
doneeee

Would I make a PR @adhiamboperes?

@adhiamboperes
Copy link
Collaborator Author

I think this is not a color_palette.xml or night/color_palette.xml related issue.

If you're working with a tab layout and want to differentiate the appearance of the tabs from the overall background, you should use app:tabBackground. If you want to set the background for an entire view or layout, you should use android:background. And thats the issue.

After changing the attribute app:tabBackground to android:background the problem will be solved. doneeee

Would I make a PR @adhiamboperes?

Okay, but does this fix the issue for landscape, tablet and small screens as well?

@ShubhadeepKarmakar
Copy link
Collaborator

ShubhadeepKarmakar commented Aug 9, 2023 via email

@ShubhadeepKarmakar ShubhadeepKarmakar mentioned this issue Aug 9, 2023
Merged
6 tasks
adhiamboperes added a commit that referenced this issue Aug 10, 2023
@ShubhadeepKarmakar @adhiamboperes
Fix #5119 TopicActivity Has Dark Mode Inconsistencies in Large Screens (
b97ad8a 
#5128)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation
  - Fixes #5119 
tabBackground(TabLayout) is not enough for large screens, that's why I
give the background to the parent i.e. background of AppBarLayout.
- AppBarLayout
  - ToolBar
  - TabLayouyt
## 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

### Before:

![image](https://user-images.githubusercontent.com/59600948/258624288-4d9248a7-c17b-4d4b-b35e-a7b9126d3367.png)


### After:
Tablet in Portrait, Dark Mode

![darkmode](https://github.com/oppia/oppia-android/assets/99060332/521aba11-8f63-4488-896c-09b53d76ae26)

Tablet in Landscape, Dark Mode

![tablet_in_landscape_dark_mode](https://github.com/oppia/oppia-android/assets/99060332/b257aeaa-0b53-4573-9950-ddbd043f3141)

Tablet in Portrait, Light Mode

![tablet_in_portrait_light_mode](https://github.com/oppia/oppia-android/assets/99060332/a87939bd-98c2-49b3-b0d4-406a5b85847e)

Tablet in Landscape, Light Mode

![tablet_in_landscape_light_mode](https://github.com/oppia/oppia-android/assets/99060332/d1c46906-dd00-4148-ad73-8b90d7bd7754)

Phone in Portrait, Dark Mode

![pipdm](https://github.com/oppia/oppia-android/assets/99060332/4b54e908-f18d-4c47-82f2-5ca7bf7d19f2)


Phone in Landscape, Dark Mode

![pildm](https://github.com/oppia/oppia-android/assets/99060332/1689804f-1c1d-4d2b-99b2-6609d45a417c)


Phone in Portrait, Light Mode

![phone_in_portrait_light_mode](https://github.com/oppia/oppia-android/assets/99060332/174ca81c-6a8d-4734-99a7-d4220345d472)

Phone in Landscape, Light Mode

![pillm](https://github.com/oppia/oppia-android/assets/99060332/59599cf1-2907-4996-b152-0a7b26bfb496)

Co-authored-by: Adhiambo Peres <59600948+adhiamboperes@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ShubhadeepKarmakar ShubhadeepKarmakar

Labels
bug End user-perceivable behaviors which are not desirable. good first issue This item is good for new contributors to make their pull request. Impact: Low Low perceived user impact (e.g. edge cases). Work: Low Solution is clear and broken into good-first-issue-sized chunks.
Projects
[Team] Core Learner and Mastery flows & UI Frontend - Android
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix #5119 TopicActivity Has Dark Mode Inconsistencies in Large Screens
3 participants
@adhiamboperes @MohitGupta121 @ShubhadeepKarmakar