Kiwix-android: Distorted launcher screen in landscape mode

Created on 18 Feb 2019 · 12Comments · Source: kiwix/kiwix-android

Describe the bug
The UI of the launcher screen looks distorted in landscape mode.

Steps to reproduce the behavior:

Launch the app.
In the launcher screen, rotate it to landscape mode.

Screenshots
launch_screen1
launch_screen2

Environment

Device : Redmi 4
OS version : Android 7.1.2

bug

Source

sonusourav

All 12 comments

Would like to work on this.

sonusourav on 18 Feb 2019

👍1

Maybe you can move text to one side and image to another and check how it looks. You may cross check with material guidelines how it should be done. You should describe your solution while creating an issue.

abdulwd on 19 Feb 2019

@abdulwd
There are two options:
Option1
A separate XML for landscape mode.

Option2
Another option is to change margin and spaces between them but I don't think it is recommended. I tried doing this and here is how it looks like.

Screen1
land_1

Screen2
land_2

Please let me know your opinion.

sonusourav on 19 Feb 2019

@sonusourav How about moving the Get Started button on the right side with a separator?

iadeelzafar on 19 Feb 2019

@iadeelzafar So, are you suggesting option 1 in some way that I have to create a new XML for landscape mode. But would that look good moving to the button to the right?
@abdulwd If I change just the spaces and positon in this XML only, then may be it will be different in different mobiles. Is it fine to make a new XML for landscape with the same design but proper space and position for the landscape mode?

sonusourav on 21 Feb 2019

Button and some text on one side with a separator for the image on the other. @abdulwd can suggest better.

iadeelzafar on 21 Feb 2019

Using a RelativeLayout for these erroneous layouts should work for uniformity in the landscape view too. The main content of the page could be designed as a Relative Layout with layout_below attributes to make sure there is no overlapping. And this RelativeLayout could in turn be a child of the parent layout with centerVertical and centerHorizontal attributes as true.

namrata-jha on 27 Feb 2019

We're using constraint layout which is more powerful than relative layout. @sonusourav You should use a separate layout for the landscape keeping image on left and text on right. Do have a look at material guidelines to check how they should be positioned in landscape mode.

abdulwd on 27 Feb 2019

👍1

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.