I use in my app the Window size classes library from Google to deal with layout and show NavigationRail
, NavigationBar
and PermanentDrawerSheet
when the screen size changes between Compact, Medium and Expanded.
Also I use a ViewModel that that observes which screen size (Compact, Medium and Expanded) is the current one and pass this information across the app. One of use case is to adapt text size, for example for a compact screen size a title has the size of 18.sp and an expanded screen needs a more bit larger text size to be well readable which is in my case 20.sp.
Although that implementation works, it is not optimal since I always need to pass screen size data to each View/Element to make it adaptive to screen sizes.
There is default Typography that can be customized:
// Set of Material typography styles to start with
val Typography = Typography(
bodyLarge = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.5.sp,
hyphens = Hyphens.Auto,
lineBreak = LineBreak.Paragraph
)
)
But that is useless, since is offers text sizes separately:
val displayLarge: TextStyle = TypographyTokens.DisplayLarge,
val displayMedium: TextStyle = TypographyTokens.DisplayMedium,
val displaySmall: TextStyle = TypographyTokens.DisplaySmall,
val headlineLarge: TextStyle = TypographyTokens.HeadlineLarge,
val headlineMedium: TextStyle = TypographyTokens.HeadlineMedium,
val headlineSmall: TextStyle = TypographyTokens.HeadlineSmall,
val titleLarge: TextStyle = TypographyTokens.TitleLarge,
val titleMedium: TextStyle = TypographyTokens.TitleMedium,
val titleSmall: TextStyle = TypographyTokens.TitleSmall,
val bodyLarge: TextStyle = TypographyTokens.BodyLarge,
val bodyMedium: TextStyle = TypographyTokens.BodyMedium,
val bodySmall: TextStyle = TypographyTokens.BodySmall,
val labelLarge: TextStyle = TypographyTokens.LabelLarge,
val labelMedium: TextStyle = TypographyTokens.LabelMedium,
val labelSmall: TextStyle = TypographyTokens.LabelSmall,
and no single text size option that uses large, medium or small one according to the screen like:
val titleTextSize: TextStyle = when(windowSize.widthSizeClass) {
WindowWidthSizeClass.Compact -> TypographyTokens.TitleSmall
WindowWidthSizeClass.Medium -> TypographyTokens.TitleMedium
else -> TypographyTokens.TitleLarge
}
or for a label text that is smaller than title text size:
val labelTextSize: TextStyle = when(windowSize.widthSizeClass) {
WindowWidthSizeClass.Compact -> TypographyTokens.LabelSmall
WindowWidthSizeClass.Medium -> TypographyTokens.LabelMedium
else -> TypographyTokens.LabelLarge
}
Is there any kind of implementation to make it more effective and thus, to avoid custom screen size data pass across the whole app?