Jetpack compose: How to get dimension resource

Introduction

This code demonstrates how to retrieve dimension resources in Jetpack Compose. Dimension resources are XML files that store various dimension values used throughout your application's layout. Jetpack Compose provides a convenient way to access these values within your composable functions.

Breakdown

dimens.xml file: The code starts by defining two dimension resources in the dimens.xml file located in the res/values directory. These resources, named 'defaultPadding' and 'textPadding', hold the values 32dp and 24dp, respectively. Dimension values in Jetpack Compose can be specified in various units, including dp (density-independent pixels).
Accessing dimension resources in composables: The MainActivity class in this example showcases how to access these dimension resources within composable functions. The MainContent composable function utilizes the dimensionResource function to retrieve the padding values defined in the dimens.xml file.
Applying dimensions: The retrieved dimension resource values are then applied as padding to the Column and Text composables. This ensures consistent padding throughout the application's layout based on the values defined in a centralized location (dimens.xml).
Preview: The ComposablePreview function provides a preview of the composable UI, but it's currently commented out in this example.

Summary

By leveraging dimension resources, you can maintain a consistent and centralized approach to managing layout dimensions in your Jetpack Compose applications. This promotes code reusability and simplifies the process of modifying padding or other dimensional aspects of your UI.

Here's a table summarizing the dimension resources used in this example:

Resource Name	Value
defaultPadding	32dp
textPadding	24dp

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
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.LocalContext
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Column(
            modifier = Modifier
                .background(Color(0xFFFADADD))
                .fillMaxSize()
                .padding(dimensionResource(id = R.dimen.defaultPadding)),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "A dimension value defined in XML",
                fontSize = 33.sp,
                color = Color(0xFFECEBBD),
                modifier = Modifier
                    .background(Color(0xFFE63E62))
                    .padding(dimensionResource(id = R.dimen.textPadding))
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}

res/values/dimens.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="defaultPadding">32dp</dimen>
    <dimen name="textPadding">24dp</dimen>
</resources>