Tablet optimized layout

[johan12345]

Some layouts have been adapted for tablets already, others are still missing. Implemented so far:

• [x] App intro
• [x] Map with charger detail view
• [ ] About screen -> just add padding on the sides
• [ ] Favorites screen -> just add padding on the sides
• [ ] Settings screen -> build two-pane layout with androidx.preference 1.2.0
• [ ] Chargeprice screen -> this one might be shown as a dialog on tablets (just as it has already been earlier)

[johan12345]

With #242 the charger detail view now has a tablet-optimized layout. The remaining screens (see list above) should be relatively easy to adapt to tablets, so this could be a good first issue/Hacktoberfest task.

[fejd]

I'd like to work on this. Which screen do you suggest a newcomer like me start with?

[johan12345]

Hi! That would be nice, thank you! I think I would start with the About and Settings screens:

• We already have a custom layout file used for the PreferenceFragments that you could change so that on tablets the preference list doesn't exceed a certain width
• This would then apply to both the About and Settings fragments for now - as a next step, the Settings fragment can be changed into a two-pane view with the new feature in androidx.preference 1.2.0

[fejd]

Thanks Johan. I've started tweaking fragment_preference.xml, but since the About and Settings screens look quite good already I'm a bit unsure about how far I should go with the padding/max width. I'm using a Pixel C in landscape as a reference. Is the goal to pad the preference list a bit horizontally, and get the checkboxes closer to the texts?

[johan12345]

Good question. Yeah, the goal is to pad the list a bit horizontally, both to get the checkboxes closer to the texts and also to make sure that in case we have a long text, the lines don't get so long that they're harder to read (see e.g. here in the Material Design guidelines).

For example, if you look at the Settings app in the Pixel C on Android 13, you see the main settings (right side) occupy roughly 2/3 of the screen width on this device: I guess that width is roughly what I would go for as the maximum width for the About screen, maybe even a bit less (but it would of course be centered as we don't have a left pane in this case).