Android, .NET & ColdFusion Tutorials: March 2021

jetpack compose - LazyVerticalGrid

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

        setContent {
            MainContent()
        }
    }


    @ExperimentalFoundationApi
    @Composable
    fun MainContent(){
        val list = (1..100).map { it.toString() }

        LazyVerticalGrid(
            cells = GridCells.Fixed(3),
            modifier = Modifier
                .background(Color(0xFFFAD6A5))
                .wrapContentHeight()
                .fillMaxWidth(),
            // content padding
            contentPadding = PaddingValues(
                start = 12.dp,
                top = 16.dp,
                end = 12.dp,
                bottom = 16.dp
            )
            ) {
                items(list){ txt ->
                    Card(
                        backgroundColor = Color(0xFFFF1493),
                        modifier = Modifier
                            .padding(4.dp)
                            .fillMaxWidth(),
                        elevation = 8.dp,
                        shape = RoundedCornerShape(16.dp)
                    ) {
                        Text(
                            text = txt,
                            fontWeight = FontWeight.Bold,
                            fontSize = 30.sp,
                            color = Color(0xFFFFFFFF),
                            textAlign = TextAlign.Center,
                            modifier = Modifier.padding(16.dp)
                        )
                    }
                }
        }
    }


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

More android jetpack compose tutorials

jetpack compose - LazyRow content padding spacing

Compose LazyRow Content Padding & Spacing

The LazyRow is a list widget of the jetpack compose library. The LayRow displays a horizontally scrolling list that only composes and lays out the currently visible items.

The content of LazyRow is its items. The following jetpack compose tutorial will demonstrate to us how we can set padding to the LazyRow content and also set the spacing between its items.

The LazyRow widget constructor has an argument name ‘contentPadding’ whose data type is ‘PaddingValues’. So, we can define the LazyRow content padding using this argument. The LazyRow content padding value puts padding around the entire content, not for a single item. We can set the padding value for the LazyRow content to all sides or any specific side or sides.

LazyRow content spacing means it puts space between each item of LazyRow. The LazyRow constructor has another argument name ‘horizontalArrangement’ whose data type is ‘Arrangement.Horizontal. The ‘horizontalArrangement’ argument defines the horizontal arrangement of the LazyRow children. We can pass an ‘Arrangement’ instance for this argument.

The ’Arrangement’ object is used to specify the arrangement of children in the layout. We can pass this ‘horizontalArrangement’ argument value to the ‘Arrangement.spacedBy()’ function. This function has a required argument name ‘space’ whose data type is ‘Dp’. This ‘space’ argument allows us to put a specified space between LazyRow items.

This jetpack compose tutorial code written in an android studio IDE. Copy the code and run it on an emulator to see how we put padding around a LazyRow content and put spacing between its items. We also displayed a screenshot of this tutorial’s emulator screen at the bottom of this tutorial which will help you to understand the code without running it on an emulator device.

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.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val list = (1..100).map { it.toString() }

        LazyRow(
            modifier = Modifier
                .background(Color(0xFFFFAA1D))
                .wrapContentHeight()
                .fillMaxWidth(),
            // content padding
            contentPadding = PaddingValues(
                start = 16.dp,
                top = 24.dp,
                end = 12.dp,
                bottom = 32.dp
            ),
            // content spacing
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            items(list){ txt ->
                Card(
                    backgroundColor = Color(0xFFFF0800),
                    modifier = Modifier.fillMaxWidth(),
                    elevation = 8.dp,
                    shape = RoundedCornerShape(16.dp)
                ) {
                    Text(
                        text = txt,
                        fontWeight = FontWeight.Bold,
                        fontSize = 40.sp,
                        color = Color(0xFFFFFFFF),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(32.dp)
                    )
                }
            }
        }
    }


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

More android jetpack compose tutorials

jetpack compose - LazyColumn content spacing padding

Compose LazyColumn Content Spacing & Padding

The LazyColumn is a list widget of the jetpack compose library. LazyColumn is a similar widget to the RecyclerView widget. The LayColumn displays a vertically scrolling list that only composes and lays out the currently visible items.

The content of LazyColumn is its items. The following jetpack compose tutorial will demonstrate how we can set the padding around the LazyColumn content and also how we can set the spacing between its items.

The LazyColumn widget constructor has an argument name ‘contentPadding’ whose data type is ‘PaddingValues’. So, we can define the LazyColumn content padding using this argument. The LazyColumn content padding value actually puts padding around all its content, not for a single item. We can set the padding value for the LazyColumn content to all sides or any specific side/sides.

On the other hand, LazyColumn content spacing means, it puts space between each item of LazyColumn. LazyColumn constructor has another argument name ‘verticalArrangement’ whose data type is ‘Arrangement.Vertical’. This argument specifies the vertical arrangement of the LazyColumn children. We can pass an ‘Arrangement’ instance for this argument.

The ’Arrangement’ object is used to specify the arrangement of children in the layout. We can pass this ‘verticalArrangement’ argument value to the ‘Arrangement.spacedBy()’ function. This function has a required argument name ‘space’ whose data type is ‘Dp’. This ‘space’ argument allows us to put a specified space between LazyColumn items.

This jetpack compose tutorial code written in an android studio IDE. Copy the code and run it on an emulator or a real device to test how we put padding around LazyColumn content and put spacing between LazyColumn items. We also displayed a screenshot of this tutorial’s emulator screen at the bottom of this tutorial.

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.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val list = (1..100).map { it.toString() }

        LazyColumn(
            modifier = Modifier
                .background(Color(0xFFAAF0D1))
                .fillMaxSize(),
            // content padding
            contentPadding = PaddingValues(
                start = 12.dp,
                top = 16.dp,
                end = 12.dp,
                bottom = 16.dp
            ),
            // content spacing
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            items(list){ txt ->
                Card(
                    backgroundColor = Color(0xFF009B7D),
                    modifier = Modifier.fillMaxWidth(),
                    elevation = 8.dp,
                    shape = RoundedCornerShape(12.dp)
                ) {
                    Text(
                        text = txt,
                        fontWeight = FontWeight.Bold,
                        fontSize = 35.sp,
                        color = Color(0xFFFFFFFF),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(25.dp)
                    )
                }
            }
        }
    }


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

More android jetpack compose tutorials

jetpack compose - Accessing font resource

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.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val ptSansRegular = Font(
            R.font.pt_sans_regular_400, FontWeight.W400
        )
        val ptSansItalic = Font(
            R.font.pt_sans_italic_400, FontWeight.W400
        )
        val ptSansBold = Font(
            R.font.pt_sans_bold_700, FontWeight.W700
        )
        val ptSansBoldItalic = Font(
            R.font.pt_sans_bold_italic_700, FontWeight.W700
        )

        Column(
            modifier = Modifier
                .background(Color(0xFFFAD6A5))
                .fillMaxSize()
                .padding(32.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text(
                text = "Custom font regular",
                fontSize = 30.sp,
                color = Color(0xFF8A3324),
                fontFamily = FontFamily(ptSansRegular)
            )

            Text(
                text = "Custom font italic",
                fontSize = 30.sp,
                color = Color(0xFF8A3324),
                fontFamily = FontFamily(ptSansItalic)
            )

            Text(
                text = "Custom font bold",
                fontSize = 30.sp,
                color = Color(0xFF8A3324),
                fontFamily = FontFamily(ptSansBold)
            )

            Text(
                text = "Custom font bold italic",
                fontSize = 30.sp,
                color = Color(0xFF8A3324),
                fontFamily = FontFamily(ptSansBoldItalic)
            )
        }
    }


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

More android jetpack compose tutorials

jetpack compose - Text custom font

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.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val customFontBold = Font(R.font.ptsansbold)
        val customFontRegular = Font(R.font.ptsansregular)
        val customFontItalic = Font(R.font.ptsansitalic)

        Column(
            modifier = Modifier
                .background(Color(0xFFE3DAC9))
                .fillMaxSize()
                .padding(32.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text(
                text = "Custom font bold",
                fontSize = 40.sp,
                color = Color(0xFF8A3324),
                fontFamily = FontFamily(customFontBold)
            )

            Text(
                text = "Custom font regular",
                fontSize = 40.sp,
                color = Color(0xFF8A3324),
                fontFamily = FontFamily(customFontRegular)
            )

            Text(
                text = "Custom font italic",
                fontSize = 40.sp,
                color = Color(0xFF8A3324),
                fontFamily = FontFamily(customFontItalic)
            )
        }
    }


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

More android jetpack compose tutorials

jetpack compose - Get color resource

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.res.colorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
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(
                    colorResource(id = R.color.layoutBackgroundColor)
                )
                .fillMaxSize()
                .padding(32.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "colorResource API to get colors" +
                        " from a resource XML file",
                fontSize = 40.sp,
                color = colorResource(id = R.color.defaultTextColor),
                modifier = Modifier
                    .background(
                        colorResource(id = R.color.textBackgroundColor)
                    )
                    .padding(16.dp)
            )
        }
    }


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

res/values/custom_colors.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="layoutBackgroundColor">#FFDEA5A4</color>
    <color name="textBackgroundColor">#FFF1E9D2</color>
    <color name="defaultTextColor">#FFCC3333</color>
</resources>

More android jetpack compose tutorials

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>

More android jetpack compose tutorials