Mastering Apps for Large Screen

Slide 1

Slide 1 text

Su Myat Tun Mastering Apps for Large Screens

Slide 2

Slide 2 text

What + Why Large Screens ?

Slide 3

Slide 3 text

Why large screens Matter for your app It is not just larger, but it’s optimal in that new context. Why adapt apps How to adapt your app design in portrait posture, ways to consider approach to adapting tablets Approaches 01 02 03 What + Why Large Screen?

Slide 4

Slide 4 text

1. Phones, Foldables, and Tablets 2. Android 12L + Android 13 3. Optimized UXs for different forms of Input 4. Multi-tasking 280M Active large-screen devices Section #

Slide 5

Slide 5 text

Beyond mobile phones, foldables and tablets are fasted growing devices

Slide 6

Slide 6 text

It is not only about stretch to fit but also adapt new form factors

Slide 7

Slide 7 text

Large screen gives user more immersive experience

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

User expectations that change when an app is adapted to a larger screen Device Basics What + Why Large Screen?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

User approach tablets often because it helps people get more done.

Slide 14

Slide 14 text

1. Comfort 2. Capability 3. Efficiency 4. Immersion Design challenge for Large screens

Slide 15

Slide 15 text

1. Comfort - less constrained by portable form; space to see more at the same time 2. Capability 3. Efficiency 4. Immersion

Slide 16

Slide 16 text

1. Comfort 2. Capability - Ability to see more and do more 3. Efficiency 4. Immersion

Slide 17

Slide 17 text

1. Comfort 2. Capability 3. Efficiency - Makes multitasking is easier 4. Immersion

Slide 18

Slide 18 text

1. Comfort 2. Capability 3. Efficiency 4. Immersion

Slide 19

Slide 19 text

Way to consider when approaching adapting the composition of your mobile apps for tablets. Way to Adapt Approach

Slide 20

Slide 20 text

Expand & reorganize 01 Combine content 02

Slide 21

Slide 21 text

21 Expand & reorganize A great option would be expand the canvas of a phone screen, and reorganize the content. This is different from simply “stretching” the mobile phone design Approach

Slide 22

Slide 22 text

22 Combine content Based on your mobile app hierarchy, this would be essentially taking multiple screens from one user flow and present them in a single view, when on a tablet. Approach +

Slide 23

Slide 23 text

+ =

Slide 24

Slide 24 text

Way to consider when approaching adapting the composition of your mobile apps for tablets. Building blocks Approach

Slide 25

Slide 25 text

25 Layout regions Foundation for interactive experiences. Navigation, App bar,Body Building blocks

Slide 26

Slide 26 text

In tablet, move nav bar to the edges that make easier to access

Slide 27

Slide 27 text

The compositions can be helpful when defining layouts and organizing common elements involved in adapting your app. Canonical layouts Adapting

Slide 28

Slide 28 text

Layout regions How to organize the content and actions in your app to best suit the use-cases you support. Adapting

Slide 29

Slide 29 text

1. List Detail Many layouts can be established based on the relationship between a list of items and a detailed view for a selected item.

Slide 30

Slide 30 text

1:1 layout 1:2 layout

Slide 31

Slide 31 text

Supporting panel The supporting panel layout extends a screen which different from list and detail view layout because the primary and secondary regions represent functionally distinct panels. Adapting

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Feed Feeds are a common layout found in news and social apps. A feed layout can be used to show different pieces of content thought cards and lists. Feeds

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Large Screen Quality Tiers measurement

Slide 36

Slide 36 text

Large screen ready Full screen Basic support for external support devices Large Screen optimized Layout optimization Enhanced support for external input devices Tier 3: Basic Tier 2: Better Large Screen differentiated Multitasking Foldable postures Drag & drop Tier 1: Best 01 02 03 Quality Tiers

Slide 37

Slide 37 text

Large Screen Restricted

Slide 38

Slide 38 text

Keep learning How to build great Android apps for large screens and foldables on youtube goo.gle/large-screen-quality d.android.com/large-screens/gallery goo.gle/material-layout goo.gle/large-screen-layouts goo.gle/large-screen-input

Slide 39

Slide 39 text

Thank You Su Myat Tun Senior Android Developer @ Lomotif