Implement automatic resizing of the action bars and tabs on landscape view.

[jaunesarmiento]

In a typical Android app, the action bars and tabs resizes to 40px from the default 48px. And I think 56px on tablet (needs confirmation).

[teusink]

I cannot confirm the pixels, but I do see indeed differences yes, like you mention. I will lookin to it this week.

[jaunesarmiento]

Cool, thanks @teusinkorg!

[teusink]

It is not pixel perfect, but it is nearing stock.

I base my font-size to 16px and work with percentages and em from there. But when I calculate the sizes back I have different end sizes.

Roughly:

• Smartphone portrait: 42,4 px
• Smartphone landscape: 38,16 px
• Tablet: 48,76 px

Optical those values are almost the same as normal stock. But probably due to some other css values in my code I cannot replicatie the values you have (40,48 and 56).

But I can confirm that the above 3 situations do apply, concerning resizing.

See my css files on github (application.css, application.smartphone.css, application.tablet.css)
Github: https://github.com/teusinkorg/jpHolo/tree/master/assets/www/themes

[jaunesarmiento]

Dude, your jpHolo is smashing! :) Great job on it.

I'm kinda confused with this:

• Tablet: 48,76 px

Can you elaborate that? Is that 48 and 76/100 pixels on landscaped tablet?

Also, this might be useful for us both: http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/#action-bar-height

[teusink]

Thanks! And thanks for the link. I will check it coming week.

I measered it with a centimeter (not sure how it is called in English) the action bar. On my devices the heights are (in cm) almost the same between jpHolo and native.

But it is still possible that your pixel values are still correct and that some css-thingy in my template is mixxing up things and gives a different value in pixels, but the same in centimeters (due to scaling).

On the other hand, 56px on a Nexus 10 looks quite different then on a Galaxy Note 10.1. As it scales the user interface, to give the same look on all screens.

So the trick will be, I think, to find a baseline pixels that exactly matches (again, jpHolo is not pixel perfect in that matter :). and scale from there.

As I can be a perfectionist with these kind of things, I will continue the search for perfection :).

I am guesing above and will read the url. Seems very interesting.

Let's keep in touch (and feel free to use code from jpHolo).

[jaunesarmiento]

Right, centimeter. :)

If you read the guidelines on that link real quick, you'll see that the heights on different orientation and devices matches the ones I posted here. I'll probably just stick to that. :)

Same thing for me. I am a bit of a perfectionist as well. That is also why I hated other mobile UI frameworks cough KendoUI cough out there.

Cool, thanks! Will definitely check out how you did the navigation drawers and maybe port it over to Fries. 👍

[teusink]

Hi, updated my GitHub project: https://github.com/teusinkorg/jpHolo (saw you forked it, so wanted to let you know). Changed the images and layout more to native.

I will get back to you concerning the url you mentioned. I am very curious how the pixels are calculated and scaled on Android.

[teusink]

I checked your supplied URL. I think my dimensions is bit different do to that jQuery Mobile scales and that I overwrite that (partly) with my dimensions.

As of now jpHolo is almost perfect (I fiddled with ms paint (go figure) long enough until it matches 99%).

I think you should stick to the mentioned sizes on the cheat sheet for Fries. You can control the sizes absolute.

But consider the fact that the mentioned sizes are NOT pixels, but dp. Dp is density depended and it may vary depending on the physical screen.

Unit Units / physical inch Density independent Same physical size on every screen
dp ~160 yes no

I am curious about your results with this!