Jetpack compose screen orientation. Android’s Screen Orientation allows the user to choose whether they want Fullscreen or Wide Landscaped mode. Images Viewers, Web Browsers and Video Players are the most common applications that allow you to switch between landscape and portrait mode.
It is crucial to recognize the screen orientation in order to display content in such applications. This article will demonstrate How to force orientation for some screens in Jetpack compose. Once the IDE has been installed, follow the steps below.
Step by Step Implementation jetpack compose screen orientation.
Step 1 – Create a new project in Android Studio
Start an Android Studio and Create a new Project. Select an jetpack compose Empty Content Activity when choosing the template. You can find the template in Android Studio if you don’t find it. The application was demonstrated in Kotlin. When creating a new project, make sure to select Kotlin.
Step 2 – Working with the MainActivity.kt
The below MainActivity.kt code you just copy and replace with your main activity code.To understand the code better and run it for test with screen rotate, comments are included within the code.
jetpack compose screen orientation Source code.
package com.codeplayon.screenorientation
import android.content.res.Configuration
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.tooling.preview.Preview
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Creating a Scaffold Layout
Scaffold(
// Creating a Top Bar
topBar = { TopAppBar(title = {
Text("Jetpack Screen Orientation", color = Color.White) },
backgroundColor = Color(0xff0f9d00)) },
content = {
// Creating a Column to display Text
Column(Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center) {
// Fetching current app configuration
val configuration = LocalConfiguration.current
// When orientation is Landscape
when (configuration.orientation) {
Configuration.ORIENTATION_LANDSCAPE -> {
Text("Landscape")
}
// Other wise
else -> {
Text("Portrait")
}
}
}
}
)
}
}
}
Read More Tutorial