search

weijiang8410 / mathdoku

Automatically exported from code.google.com/p/mathdoku
0 stars 0 forks source link

Buttons squashed/stretched on low aspect ratio screen #104

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
On more square shaped screens, the grid takes up most of the available screen 
space, meaning:

Portrait Mode: The buttons and other text/controls are squashed into a very low 
area
Landscape Mode: The buttons are stretched vertically (tall and narrow, rather 
than the usual button shape) and the "Mode: definitive value" text wraps.

Tried on various other devices and the new screen layout works very well on all 
of them. Just my HP Touchpad has problems. See attached screenshots.

Original issue reported on code.google.com by em...@srlee.com on 26 Mar 2013 at 1:39

Attachments:

GoogleCodeExporter commented 9 years ago 
Probably we can solve this easily by choosing a fixed ratio for the grid versus 
the controls. For example use max 2/3 for the grid and 1/3 for the controls. 

On a rectangular screen of 600 x 1000 dp this results in:
 * Landscape mode (600 x 1000)
     Controls width = 1/3 * 1000 = 333 dp
     GridView: max width = 1000 - 333 = 667 dp
     As the GridView max width is bigger then the screen width, the grid will be 600 x 600 dp.
 * Portrait mode (1000 x 600)
     Controls height = 1/3 * 1000 = 333 dp
     GridView: max height = 1000 - 333 = 667 dp
     As the GridView max height is bigger then the screen height, thhe grid will be 600 x 600 dp.

On a hypothetical screen of 600 x 800 dp this results in:
 * Landscape mode (600 x 800)
     Controls width = 1/3 * 800 = 266 dp
     GridView: max width = 800 - 266 = 534 dp
     As the GridView width is smaller then the screen height, the grid will be 534 x 534 dp.
 * Portrait mode (800 x 600)
     Controls height = 1/3 * 800 = 266 dp
     GridView: max height = 800 - 266 = 534 dp
     As the GridView height is smaller then the screen height, the grid will be 534 x 534 dp.

What do you think of this approach?

Original comment by paul.din...@gmail.com on 26 Mar 2013 at 4:07

GoogleCodeExporter commented 9 years ago 
Yes, that seems the right way to solve this issue. I've just tested the 
"algorithm" against some example devices and it will only impact my HP Touchpad 
(as desired):

Device      Width  Height  2/3 Height  2/3 Height < Width?
HTC Desire   480    800       266            No
Nexus 4      768   1280       426            No
Nexus 7      800   1280       426            No
Hp Touchpad  768   1024       682            Yes

(I'm using px = dp, since we're only interested in the ratio of width/height)

We can easily tweak the exact "2/3" number depending on how it looks.

Original comment by em...@srlee.com on 26 Mar 2013 at 4:30

GoogleCodeExporter commented 9 years ago 
This issue was closed by revision r164.

Original comment by paul.din...@gmail.com on 27 Mar 2013 at 1:03

GoogleCodeExporter commented 9 years ago 
For small screens the low ratio check is not performed as specialized layouts 
exists for those screens. For all other screens an additional check is made 
whether the size of the grid has to be reduced in order to reserve enough space 
for the buttons.

Original comment by paul.din...@gmail.com on 27 Mar 2013 at 1:18

Attachments:

GoogleCodeExporter commented 9 years ago 
Tested Revision 165 on 4 different devices.

3 Device look same as before (as expected).
HP Touchpad - Portrait: looks great
HP Touchpad - Landscape: couple of minor issues
1) Grid is not centred vertically - expected top margin to be the same as the 
bottom margin.
2) There still isn't a lot of space for the controls (slightly less than <1/3), 
which means the Mode text still wraps (see screenshot).

If the top margin was the same size as the bottom margin, that would probably 
resolve both issues...

Original comment by em...@srlee.com on 27 Mar 2013 at 5:05

Attachments:

GoogleCodeExporter commented 9 years ago 
The input mode label will be restricted to one line. The grid will be centered 
vertically in landscape mode.

Original comment by paul.din...@gmail.com on 27 Mar 2013 at 10:48

GoogleCodeExporter commented 9 years ago 
See revision169.

Original comment by paul.din...@gmail.com on 27 Mar 2013 at 10:49

GoogleCodeExporter commented 9 years ago 
Tested Revision 198:
1) Grid is now centred vertically in landscape mode.
2)Input Mode Text has now been made into a button (and shortened). It now 
displays without wrapping.

Original comment by em...@srlee.com on 2 Apr 2013 at 1:01

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Setting to Verified

Original comment by em...@srlee.com on 8 Apr 2013 at 7:40

GoogleCodeExporter commented 9 years ago 
Setting to Verified

Original comment by em...@srlee.com on 8 Apr 2013 at 7:40