Jetpack compose: How to get screen layout direction

The code demonstrates how to retrieve the layout direction of the screen. In Jetpack Compose, a composable function can access the layout direction using the LocalConfiguration object. The LocalConfiguration provides access to the device configuration information.

Here's a breakdown of the code:

  1. MainActivity.kt

    • This file defines the main activity of the app.
    • The onCreate function sets the content of the activity using the setContent composable.
    • The GetScaffold composable is the root composable for the app's UI.

  2. GetScaffold composable

    • This composable defines the app's Scaffold layout.
    • The Scaffold composable provides a default layout structure for an app screen.
    • It consists of a top bar, content area, and a bottom bar (optional).
    • In this example, the TopAppBar composable is used for the top bar and the MainContent composable is used for the content area.

  3. MainContent composable

    • This composable displays the text "Screen Layout Direction" followed by the actual layout direction retrieved from the device configuration.
    • The LocalConfiguration.current.layoutDirection property is used to access the layout direction.
    • The getLayoutDirectionName function is used to convert the integer value of the layout direction to a human-readable string ("LTR" for left-to-right or "RTL" for right-to-left).

  4. getLayoutDirectionName function

    • This function takes an integer value as input and returns a string representation of the layout direction.
    • It uses a when expression to map the integer values (0 for LTR and 1 for RTL) to their corresponding string representations.

In summary, this code snippet showcases how to leverage Jetpack Compose's LocalConfiguration to determine the layout direction of the device and display it on the screen. This information can be useful for adapting the UI layout based on the user's language and locale.


MainActivity.kt 

package com.cfsuman.jetpackcompose

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.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.style.TextAlign
import androidx.compose.ui.unit.dp
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 - Screen Layout Direction")},
                backgroundColor = Color(0xFF5F9EA0),
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFC2B280)
        )
    }


    @Composable
    fun MainContent() {
        val configuration = LocalConfiguration.current
        val layoutDirection = configuration.layoutDirection

        Box(Modifier.fillMaxSize().padding(12.dp)) {
            Text(
                text = "Screen layout Direction" +
                        "\n${getLayoutDirectionName(layoutDirection)}",
                fontSize = 24.sp,
            )
        }
    }
}


fun getLayoutDirectionName(value:Int):String{
    return when (value) {
        0 -> {
            "LTR : Left To Right"
        }
        1 -> {
            "RTL : Right To Left"
        }
        else -> {"Error!"}
    }
}
More android jetpack compose tutorials