Hi Everyone, can anyone give me any example. how t...

# compose

[Napa Ram]

Hi Everyone, can anyone give me any example. how to create UI for Tablet specific in compose and
What are the things i should keep in mind while creating UI for tablet

[nglauber]

Well… I think there are a few ways, but one thing you can do is:
Define something like this is values folder:

<bool name="isTablet">false</bool>

and then, this in values-sw600dp folder:

<bool name="isTablet">true</bool>

Finally, in your composable:

val isTablet = booleanResource(id = R.bool.isTablet)
if (isTablet) {
   // UI for tablet
} else {
   // UI for phone
}

[Napa Ram]

in compose i don't things so we need to do in this way

[Napa Ram]

we are planning for production app need some proper solution

[nglauber]

I’m curious: why this is not a proper solution?

[Alex Vanyo]

We’re working on improving our docs for tablets and large screens in Compose, so it’s a great question!

I’d try to avoid the naming of an isTablet flag, since I’d argue that isn’t quite the right question to ask.

If your app is running on a tablet, you might have additional space to make use of in your UI. But, if your app is running in multi-window mode on a tablet, you might not have much more space than a “classic” phone does. Android apps running on Chrome OS with free-form windows is another case where your app’s window size might change arbitrarily.

Because of that, I’d try to frame your logic around “here is the space available to me, therefore this is the UI I should show”

[Alex Vanyo]

Some specific tips for knowing what space is available to you:

If you’re making screen-level layout decisions (like changing the overall layout of your UI depending on the size available), you can observe WindowInfoRepository.currentWindowMetrics as state to get the overall space that your app can use. And now that it is state, you can approach creating your UI just like you would anywhere else in Compose.

If you’re making a composable that could be placed in different locations, the same mindset applies: “here is the space I’m being given, therefore this is how I should render.” In a lot of cases where you’re just changing positioning, you can use a combination of modifiers or custom layouts. If you want to change content depending on the size available, you can use BoxWithConstraints and then use the maxWidth and maxHeight constraints to make decisions.

[Alex Vanyo]

The biggest thing I’d watch out for is performing a bunch of side-effects based on the size, especially things like “I’m at this size, therefore I’m going to navigate to this other screen.” The declarative paradigm really likes if you can treat your size as just another piece of state for deciding what UI to show: “AppData + Size => UI”