Fix UI for profile chooser screen in add-view #2116

rt4914 · 2020-11-16T06:47:29Z

profile_chooser_add_view.xml needs to be updated so that the UI looks similar to mocks.

Mocks

https://xd.adobe.com/view/ee9e607b-dbd6-4372-48dc-b687d32af3da-98af/grid/
https://xd.adobe.com/view/e8aa4198-3940-47f9-514a-f41cc54457f6-9e9b/grid
https://xd.adobe.com/view/d405de00-a871-4f0f-73a0-f8acef30349b-a234/screen/33741ea7-89da-4e5d-b2a4-9872f6db48b4/
https://xd.adobe.com/view/d405de00-a871-4f0f-73a0-f8acef30349b-a234/screen/6fb19f15-699a-40aa-8392-cdfc6d7bf8c5/

https://github.com/oppia/oppia-android/wiki/Working-on-UI

Current Screenshot

Device:

Nexus-9 Emulator
API 29

The text was updated successfully, but these errors were encountered:

ShridharGoel · 2020-11-17T08:41:54Z

I would like to work on this.

ShridharGoel · 2020-11-22T17:25:21Z

This is how the screens look currently:

Since it looks in accordance with the designs, may I know what needs to be changed?

rt4914 · 2020-11-23T13:11:23Z

This is how the screens look currently:

Since it looks in accordance with the designs, may I know what needs to be changed?

@ShridharGoel If you run it on latest develop and Nexus & tablet. You will see following UI. Where the Add Profile is not aligned.

ShridharGoel · 2020-11-23T17:42:56Z

@rt4914 Yes, the issue is replicable on the latest commits. Thanks.

adhiamboperes · 2023-03-13T18:57:41Z

Unassigning @ArchitJain1201 due to inactivity

aayushimathur6 · 2023-04-15T09:53:17Z

@adhiamboperes as per the expected issue, when I m reproducing it mine is coming a bit aligned. PTAL

adhiamboperes · 2023-04-17T17:10:39Z

@adhiamboperes as per the expected issue, when I m reproducing it mine is coming a bit aligned. PTAL !

Hi @aayushimathur6, can you share the specifications of the device you used to repro? One tip is to use an emulator with the same specifications as the device on which the issue was reported.

adhiamboperes · 2023-04-18T07:52:29Z

@adhiamboperes as per the expected issue, when I m reproducing it mine is coming a bit aligned. PTAL !

Hi @aayushimathur6, can you share the specifications of the device you used to repro? One tip is to use an emulator with the same specifications as the device on which the issue was reported.

I attempted to repro the issue myself on the Nexus 9 API 29 and I can confirm that it is no longer reproducing, additionally, the recent work done in #4849 and #4844 contain screenshots that confirm this.

Tablet Landscape

Tablet Portrait

adhiamboperes · 2023-04-18T07:55:30Z

However, subsequent work in #4874 breaks the default profile chooser view.

@seanlip, what's the appropriate action in this case between creating a new issue for this and reverting #4874?

seanlip · 2023-04-18T08:01:12Z

If the issue was caused by #4874 (i.e. it worked fine before that PR and didn't after that PR) then please revert that PR. That's better than trying to fix-forward (unless the fix is obvious) because develop should always be clean and releasable.

Thanks for checking!

adhiamboperes · 2023-04-18T09:03:53Z

If the issue was caused by #4874 (i.e. it worked fine before that PR and didn't after that PR) then please revert that PR. That's better than trying to fix-forward (unless the fix is obvious) because develop should always be clean and releasable.

Thanks for checking!

I do not have the appropriate permissions to revert this so I will leave it for @BenHenning.

adhiamboperes · 2023-04-18T09:04:42Z

Otherwise we can close this issue as fixed. Thanks @aayushimathur6

aayushimathur6 · 2023-04-18T15:35:07Z

Otherwise we can close this issue as fixed. Thanks @aayushimathur6

sure, Thanks @adhiamboperes I will find a new one to work on

aayushimathur6 · 2023-04-18T15:35:45Z

@adhiamboperes as per the expected issue, when I m reproducing it mine is coming a bit aligned. PTAL !

Hi @aayushimathur6, can you share the specifications of the device you used to repro? One tip is to use an emulator with the same specifications as the device on which the issue was reported.

Nexus 9 API 29

…dableAdapter" (#4951) This reverts commit `7fd290d68f0440d926f2d443dbd7bfb28ab20547`, fixing part of #2116. While testing #2116, we found that the UI for default profile view does not display correctly, and traced the change to #4874 in [this discusson](#2116 (comment)). #4874 introduces a change to `MarginBindingAdapters` which utilizes `MarginLayoutParamsCompat` to compute the margins of a layout before drawing it. I suspect that this works for the `Promoted Story` and `Topic Summary` because we compute the start and end margins of each item relative to grid columns laid out on the HomeActivity, but no such implementation exists for the Profile Chooser view. We need to do some further investigation into this, hence the decision to revert. We will need to test all the associated screens to make sure they still look as expected: ![Screenshot 2023-04-19 at 18 01 28](https://user-images.githubusercontent.com/59600948/233117952-8c981fa2-2d0c-45cc-80ff-651862c1fd96.png) ## Essential Checklist  - [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 This was mainly a re-implimentation per #632, and the UI did not change. Please refer to #4874 for screenshots. The Affected screen displays okay with this revert: ![Screenshot_1681916915](https://user-images.githubusercontent.com/59600948/233125096-2242fb7e-eb9f-4b78-8db0-c22abb6b5cc3.png) Other screens: | | | |---|---| |![Screenshot_1681917117](https://user-images.githubusercontent.com/59600948/233126283-45a860c7-26ac-47f6-8b38-e54b1ee7cb1f.png)|![Screenshot_1681917190](https://user-images.githubusercontent.com/59600948/233126350-08033853-4434-462d-9bf3-98040ff2356d.png)|

masclot · 2023-04-28T13:21:14Z

I tried to reproduce this in Nexus 9 emulator, API 29, but couldn't. I tried with the old branch I still have with the original changes, and a new branch where I only apply the changes to MarginBindingAdapters. I could not reproduce the issue.
Screenshots:

landscape	portrait

Did you change any configuration?

adhiamboperes · 2023-05-02T12:58:01Z

Hi @masclot, I have confirmed that I can repro this when I check out commit 7fd290d68f0440d926f2d443dbd7bfb28ab20547, which is the one I reverted. I suspect that your view may be cached. Can your clear your cache and retry?
I did not change any configs--this is a clean install of the app.

masclot · 2023-05-05T09:04:17Z

Thanks @adhiamboperes I could reproduce the issue by clearing the application data, which shows a somewhat different profile chooser on app start. Also, I could only reproduce in landscape mode.

…es. Fix #2116: UI misalignment due to not resetting the layout. (#4965) ## Explanation Fix #2116: Fix part of #632: Simplify MarginBindingAdapters. The code is mostly the same as in PR #4874, which was reverted. This PR fixes the bug that caused the rollback. The rest of the reverted changes in PR #4874 will be included in a separate PR. The fix consists of resetting the layout params after changing the top and bottom margins, by calling View.setLayoutParams(), as explained in the [layout params documentation](https://developer.android.com/reference/android/view/ViewGroup.MarginLayoutParams#bottomMargin). The same call is not needed when calling a method instead of setting a property. It also fixes an RTL issue: if the view is not attached yet, there is no layout direction information available, making the old implementation render in LTR always. Some screenshots: |new|current| |-|-| |![home_rtl](https://user-images.githubusercontent.com/103062089/236451422-13843234-5f6c-4ed3-997a-e4b0459c3641.png) | ![home_rtl_current](https://user-images.githubusercontent.com/103062089/236451614-55595920-ed58-4329-8d7d-7bdbc0487688.png)| |![profile_chooser_landscape](https://user-images.githubusercontent.com/103062089/236451425-6766ed39-4a6b-4918-bf62-28bff5d05565.png)|![profile_chooser_landscape_current](https://user-images.githubusercontent.com/103062089/236451616-6979857b-f431-45cf-82c1-8db2a7618669.png)| |![profile_chooser_portrait](https://user-images.githubusercontent.com/103062089/236451427-ba5cc671-ff03-4718-ae45-9e3cc924efeb.png)|![profile_chooser_portrait_current](https://user-images.githubusercontent.com/103062089/236451621-058ec5b9-0cdb-4713-931e-c49bd9a5edba.png)| |![recently_played_rtl](https://user-images.githubusercontent.com/103062089/236451431-01e65a32-b448-422d-88a1-efb5326d5ab9.png)|![recently_played_rtl_current](https://user-images.githubusercontent.com/103062089/236451622-57a5cc80-f0d9-400d-8003-e9ff9735950b.png)| Test results: ![Test results](https://user-images.githubusercontent.com/103062089/236451433-d5a0e34f-75c0-4a6d-aeb5-88012913796f.png) ## Essential Checklist  - [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". - [ ] 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  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 --------- Co-authored-by: Adhiambo Peres <59600948+adhiamboperes@users.noreply.github.com>

rt4914 added Type: Improvement Priority: Essential This work item must be completed for its milestone. good first issue This item is good for new contributors to make their pull request. labels Nov 16, 2020

rt4914 added this to the Beta milestone Nov 16, 2020

rt4914 assigned ShridharGoel Nov 17, 2020

ShridharGoel added a commit to ShridharGoel/oppia-android that referenced this issue Nov 24, 2020

Fix oppia#2116: Update tablet UI for profile_chooser_add_view.xml

75f811d

ShridharGoel added a commit to ShridharGoel/oppia-android that referenced this issue Nov 24, 2020

Fix oppia#2116: Update tablet UI for profile_chooser_add_view.xml

298f27e

ShridharGoel mentioned this issue Nov 24, 2020

Fix #2116: Update tablet UI for profile_chooser_add_view.xml #2163

Closed

8 tasks

ShridharGoel added a commit to ShridharGoel/oppia-android that referenced this issue Nov 24, 2020

Fix oppia#2116: Update tablet UI for profile_chooser_add_view.xml

5fff393

ShridharGoel added a commit to ShridharGoel/oppia-android that referenced this issue Nov 24, 2020

Fix oppia#2116: Update tablet UI for profile_chooser_add_view.xml

769c0af

anandwana001 removed the SLoP-25 label Nov 25, 2020

rt4914 assigned rt4914 and unassigned ShridharGoel Dec 29, 2020

ArpitShukIa mentioned this issue Apr 27, 2021

Tablet Profile Chooser UI #3110

Closed

rt4914 added this to Needs Triage in CLAM Team (deprecated -- please use new board) via automation Jul 12, 2021

rt4914 moved this from Needs Triage to Beta (Bugs & Fixes) in CLAM Team (deprecated -- please use new board) Jul 12, 2021

rt4914 moved this from Beta (Bugs & Fixes) to High-fi Beta in CLAM Team (deprecated -- please use new board) Jul 12, 2021

rt4914 removed their assignment Jan 18, 2022

rt4914 mentioned this issue Feb 2, 2022

Fix part of #3258 : Replacing CircularImageView with ShapeableImageView #4139

Closed

6 tasks

BenHenning added temp: triage for beta and removed Status: Not started labels Jun 7, 2022

BenHenning modified the milestones: Beta, Beta MR1 Jun 11, 2022

adhiamboperes mentioned this issue Mar 13, 2023

[A11y] Add label for all non-test activities #3602

Closed

6 tasks

seanlip added enhancement End user-perceivable enhancements. and removed issue_user_learner labels Mar 29, 2023

adhiamboperes assigned aayushimathur6 and unassigned aayushimathur6 Apr 5, 2023

adhiamboperes unassigned aayushimathur6 Apr 18, 2023

adhiamboperes mentioned this issue Apr 19, 2023

Fix part of #2116: revert "#4874 Move PromotedStoryListAdapter to BindableAdapter" #4951

Merged

6 tasks

adhiamboperes removed the Issue: Needs Clarification Indicates that an issue needs more detail in order to be able to be acted upon. label Apr 20, 2023

adhiamboperes mentioned this issue May 10, 2023

Fix part of #632: Simplify MarginBindingAdapters and fix some RTL cases. Fix #2116: UI misalignment due to not resetting the layout. #4965

Merged

6 tasks

adhiamboperes assigned masclot May 30, 2023

seanlip removed the Type: Improvement label Jun 16, 2023

adhiamboperes closed this as completed in #4965 Jun 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix UI for profile chooser screen in add-view #2116

Fix UI for profile chooser screen in add-view #2116

rt4914 commented Nov 16, 2020

ShridharGoel commented Nov 17, 2020

ShridharGoel commented Nov 22, 2020 •

edited

Loading

rt4914 commented Nov 23, 2020

ShridharGoel commented Nov 23, 2020

adhiamboperes commented Mar 13, 2023

aayushimathur6 commented Apr 15, 2023

adhiamboperes commented Apr 17, 2023 •

edited

Loading

adhiamboperes commented Apr 18, 2023 •

edited

Loading

adhiamboperes commented Apr 18, 2023

seanlip commented Apr 18, 2023

adhiamboperes commented Apr 18, 2023

adhiamboperes commented Apr 18, 2023 •

edited

Loading

aayushimathur6 commented Apr 18, 2023

aayushimathur6 commented Apr 18, 2023

masclot commented Apr 28, 2023

adhiamboperes commented May 2, 2023

masclot commented May 5, 2023 •

edited

Loading

Fix UI for profile chooser screen in add-view #2116

Fix UI for profile chooser screen in add-view #2116

Comments

rt4914 commented Nov 16, 2020

Mocks

Current Screenshot

Device:

ShridharGoel commented Nov 17, 2020

ShridharGoel commented Nov 22, 2020 • edited Loading

rt4914 commented Nov 23, 2020

ShridharGoel commented Nov 23, 2020

adhiamboperes commented Mar 13, 2023

aayushimathur6 commented Apr 15, 2023

adhiamboperes commented Apr 17, 2023 • edited Loading

adhiamboperes commented Apr 18, 2023 • edited Loading

adhiamboperes commented Apr 18, 2023

seanlip commented Apr 18, 2023

adhiamboperes commented Apr 18, 2023

adhiamboperes commented Apr 18, 2023 • edited Loading

aayushimathur6 commented Apr 18, 2023

aayushimathur6 commented Apr 18, 2023

masclot commented Apr 28, 2023

adhiamboperes commented May 2, 2023

masclot commented May 5, 2023 • edited Loading

ShridharGoel commented Nov 22, 2020 •

edited

Loading

adhiamboperes commented Apr 17, 2023 •

edited

Loading

adhiamboperes commented Apr 18, 2023 •

edited

Loading

adhiamboperes commented Apr 18, 2023 •

edited

Loading

masclot commented May 5, 2023 •

edited

Loading