Jetpack Compose

jetpack compose screen orientation 2022

jetpack compose screen orientation
410views

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