Skip to content

Use fixed sizes and consistent layout for "hero icons"

akwizgran requested to merge 2144-graphics-size into master

This branch resolves the issues with image scaling for the transfer data feature by using fixed image sizes. The app has several other screens where we show a large icon followed by a title and some body text (I'm calling this a "hero icon" to establish my career as a famous UX blogger). I found that most of those screens used a fixed size for the icon, which produced a nice layout that worked well across screen sizes, so I copied that approach.

I copied the layout from fragment_final.xml, which I think is the nicest example of this type of screen. The hero icon is 128x128dp for a square/round icon or 192x96dp for a wide icon. The icon, title and body text form a packed chain, with a horizontal bias of 0.25 to offset the icon from the top of the screen if space is available. The chain has 32dp of margin between elements (or 16dp between paragraphs of body text) and 32dp at the sides.

The content is scrollable so it can be used in portrait or landscape mode on small or large screens.

If the screen has action buttons, they're inside the scrollable area, anchored to the bottom of the screen, with 16dp margin around and between them.

If the screen is styled like a fullscreen dialog, the dialog buttons are outside the scrollable area. I had to convert a couple of ScrollViews to NestedScrollViews to make this work.

I also standardised the text style to Heading5 for the title and Body1 for the body, again copied from fragment_final.xml.

Closes #2144 (closed)

Merge request reports