Show different content (layouts) depending on available width/height in Android Compose-CodePudding

I have an Activity and MyApp composable function. In the function I need to show either list with details or just list screen depending on the available width. How to determine available width for the content I want to show using Jetpack Compose?

class MyActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ProjectTheme {
                MyApp()
            }
        }
    }
}

@Composable
fun MyApp() {
    val isLarge: Boolean = ...// how to determine whether the available width is large enough?
    if (isLarge) {
        ListScreenWithDetails()
    } else {
        ListScreen()
    }
}

@Composable
fun ProjectTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    // ... project theme
}

CodePudding user response：

You can use :

val configuration = LocalConfiguration.current

Then:

val isLargeWidth = configuration.screenWidthDp > 840

CodePudding user response：

For a generic solution, consider using the Window Size Classes, see this and this for reference.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        val windowSizeClass = calculateWindowSizeClass(this)
        MyApp(windowSizeClass)
    }
}