Jetpack compose: How to detect screen orientation change

The code defines a simple app that displays the current screen orientation ("portrait" or "landscape") on the screen.

The app uses the following Jetpack Compose components:

  • Scaffold: This is the top-level layout for the app. It provides a default app bar, content area, and floating action button (FAB).
  • TopAppBar: This is the app bar at the top of the screen. It can display a title, navigation icon, and actions.
  • Box: This is a layout element that can contain other composables. It fills the available space and positions its children according to the specified alignment.
  • Text: This is a composable that displays text. It can be styled using the TextStyle modifier.

The MainContent composable is responsible for displaying the screen orientation. It retrieves the current screen orientation using the LocalConfiguration.current composable and stores it in a mutable state variable called orientation. The orientation variable is then used to display the text "Screen Orientation\n$orientation" on the screen.

Here is a breakdown of the code:

  1. The MainActivity class is the main activity for the app. It sets the content of the app using the setContent function. The content is defined by the GetScaffold composable.

  2. The GetScaffold composable defines the layout of the app. It uses a Scaffold composable to provide a top app bar, content area, and background color.

  3. The MainContent composable is the content of the app. It retrieves the current screen orientation and displays it on the screen.

In summary, this code demonstrates how to use Jetpack Compose to detect screen orientation changes and display the current orientation on the screen.


MainActivity.kt 

package com.cfsuman.jetpackcompose

import android.content.res.Configuration
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp


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


    @Composable
    fun GetScaffold() {
        Scaffold(
            topBar = {TopAppBar(
                title = {Text(text = "Compose - Detect Orientation Change")},
                backgroundColor = Color(0xFF592720),
                contentColor = Color.White
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFEEDC82)
        )
    }


    @Composable
    fun MainContent() {
        val configuration = LocalConfiguration.current
        val orientation by remember { mutableStateOf(
            when (configuration.orientation) {
                Configuration.ORIENTATION_LANDSCAPE -> {
                    "Landscape"
                }
                else -> {
                    "Portrait"
                }
            }
        )}

        Box(Modifier.fillMaxSize().wrapContentSize(Alignment.Center)) {
            Text(
                text = "Screen Orientation\n$orientation",
                style = TextStyle(
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center
                )
            )
        }
    }
}
More android jetpack compose tutorials