How to Change Screen Orientation in Jetpack Compose?

In this article, we’ll learn how to change screen orientation in Jetpack Compose with the help of examples.

For this article, create an empty Jetpack Compose project and open MainActivity. Create a composable called MyUI() and call it from the onCreate() method.

import android.app.Activity
import android.content.pm.ActivityInfo
import android.content.res.Configuration
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
private fun MyUI() {
   
}

There are 2 ways to set the screen orientation in Android:

Using Manifest File (XML)
Using Activity (Kotlin Code)

1. Using Manifest File (XML):

Android provides screenOrientation attribute to the activity tag. Using it, we can set the orientation in the manifest file.

android:screenOrientation="landscape"

Example:

Add the above attribute in the manifest file and a Text composable in the MyUI().

@Composable
private fun MyUI() {
    Text(text = "SemicolonSpace")
}

Now, run the project. You will see the following output:

The screenOrientation attribute takes the following values:

Value	Description
landscape	Horizontal orientation (the display width is greater than the height).
portrait	Vertical orientation (the display height is greater than the width).
unspecified	The default value. Android chooses the orientation. The results might differ from device to device.
behind	The same orientation as the previous activity that is in the activity stack.
reverseLandscape	Landscape orientation in the opposite direction from the normal landscape.
reversePortrait	Portrait orientation in the opposite direction from the normal portrait.
sensorLandscape	Landscape orientation, but can be either normal or reverse landscape based on the device sensor.
sensorPortrait	Portrait orientation, but can be either normal or reverse portrait based on the device sensor.
userLandscape	Landscape orientation, but can be either normal or reverse landscape based on the device sensor and the user’s preference.
userPortrait	Portrait orientation, but can be either normal or reverse portrait based on the device sensor and the user’s preference.
fullSensor	The accelerometer determines the orientation for any of the four orientations. This is similar to the sensor, except this allows for any of the four possible screen orientations regardless of what the device normally supports. For example, some devices don’t normally use reverse portrait or reverse landscape, but this enables those orientations.
sensor	The accelerometer determines the orientation. The orientation of the display depends on how the user is holding the device. It changes when the user rotates the device. Some devices may not rotate to all four possible orientations. To use all four orientations, use the fullSensor. The sensor is used even if the user locks sensor-based rotation.
nosensor	The orientation is determined without reference to the accelerometer. The sensor is ignored, so the display doesn’t rotate based on how the user moves the device.
user	The user’s current preferred orientation.
fullUser	If the user has locked sensor-based rotation, this behaves the same as the user, otherwise it behaves the same as fullSensor and allows any of the four possible screen orientations.
locked	Locks the orientation to its current rotation, whatever that is.

There are two things you need to remember about the screenOrientation attribute:

1. Android ignores this attribute if the activity is running in multi-window mode.

2. Services such as Google Play consider this value and make your application available only to devices that support the orientation. For example, if you declare either landscape, reverseLandscape, or sensorLandscape, then your application is available only to devices that support landscape orientation.

For more information, look at the official docs.

2. Using Activity (Kotlin Code):

Activity class provides the setRequestedOrientation() method to rotate the screen. Let’s create two buttons for setting landscape and portrait modes.

Example:

@Composable
private fun MyUI() {
    val activity = LocalContext.current as Activity

    Button(
        onClick = {
            activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
        }
    ) {
        Text(text = "Set Landscape Mode")
    }

    Button(
        onClick = {
            activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
        }
    ) {
        Text(text = "Set Portrait Mode")
    }
}

Example:

The ActivityInfo provides constant values similar to the above screenOrientation attribute:

ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
ActivityInfo.SCREEN_ORIENTATION_BEHIND
ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE
ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT
ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE
ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT
ActivityInfo.SCREEN_ORIENTATION_USER_LANDSCAPE
ActivityInfo.SCREEN_ORIENTATION_USER_PORTRAIT
ActivityInfo.SCREEN_ORIENTATION_FULL_SENSOR
ActivityInfo.SCREEN_ORIENTATION_SENSOR
ActivityInfo.SCREEN_ORIENTATION_NOSENSOR
ActivityInfo.SCREEN_ORIENTATION_USER
ActivityInfo.SCREEN_ORIENTATION_FULL_USER
ActivityInfo.SCREEN_ORIENTATION_LOCKED

How to Check Screen Orientation in Jetpack Compose?

We can check the screen orientation using the LocalConfiguration API.

val configuration = LocalConfiguration.current

if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
    // landscape mode
} else if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
    // portrait mode
}

Let us rotate the screen on a button click.

@Composable
private fun MyUI() {
    val activity = LocalContext.current as Activity
    val configuration = LocalConfiguration.current

    Button(
        onClick = {
            if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
                // change to portrait
                activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
            } else if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
                // change to landscape
                activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
            }
            else if (configuration.orientation == Configuration.ORIENTATION_UNDEFINED) {
                // handle unknown orientation
            }
        }
    ) {
        Text(text = "Toggle Orientation")
    }
}

Output:

This is all about screen orientation in Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.

Related Articles:

1. Using Manifest File (XML):

2. Using Activity (Kotlin Code):

How to Check Screen Orientation in Jetpack Compose?

Leave a Comment Cancel reply