Programming Tutorials

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.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose - Row Center Vertically", color = Color.White)}, backgrou...

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.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose -...

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.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose -...

Compose Row onClick Event The Row is a very important layout component of the android jetpack compose library. The Row layout widget places its nested elements in a horizontal sequence. So, the Row widget is basically used to put some elements side by side, which means one after another. Sometimes android application developers put some buttons horizontally one after another. Android app developers also display a list of items inside a Row widget where items are horizontally positioned. By default Row widget does not allow scrolling but android application developers can implement the horizontal scrolling capability of a Row widget. The Row widget has no built-in property/argument/parameter to enable or handle a click event. So, how android developers can add an onClick event to a Row widget? This jetpack compose android application development tutorial will demonstrate to us how can we add a click functionality to a Row widget in our app. To enable the onClick event on a Ro...

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.horizontalScroll import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( ...

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.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color 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 { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( ...

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.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose - Column Spacing", ...

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.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( tit...

Compose Column Background Color The Column is a jetpack compose layout widget. The Column layout places its elements in vertical sequences. The Column is a highly used layout widget of the jetpack compose library. The following jetpack compose tutorial will demonstrate how we can set a background color for a Column widget. By default, the Column widget constructor has no direct argument to set or change its background color. So how we can set a background color for the Column container? The Column widget constructor’s ‘modifier’ argument allows us to modify many properties of the Column widget itself. Such as we can set the Column width, height, click listener, padding, shape, rotation, background color, etc. So, we can change the Column layout’s background color by using its modifier ‘background’ element. This ‘background()’ function element has an argument name ‘color’. We can pass a Color value to this argument to set a background color for a Column widget. This jetpack ...

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.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose - Column Center", color = Color.White)}, backgroundColor ...

Compose Box Elevation The Box is a layout widget in android jetpack compose. Box container shows a single widget at a time in a specified position inside its area. Sometimes android app developers draw a rectangle or a circle or a rounded corners rectangle using the Box widget. This is a very helpful widget to do that type of drawing. Now the question is how can an android app developer add an elevation around the Box widget when they draw a circle shape or a rectangular area? This android application development tutorial demonstrates to us how we can add an elevation to a Box widget in jetpack compose. But there is no parameter/argument/property of the Box widget to draw an elevation. So, we have to do a simple trick to achieve this feature in the Box component. We know the Surface is a material design component of the jetpack compose library. This Surface layout widget can hold another layout and it has a property named ‘elevation’. So we can simply set an elevation for the ...

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.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose - Box Alignment", color = Color.White)}, backgroundColor ...

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.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose - Box Center", ...

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.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose - Box rounded corners", color = Color.White)}, ...

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.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( "Compose - Box background color", color = Color.White)}, backgroundColor = Color(0xFF333399)) }, ...

MainActivity.kt package com.cfsuman.jetpackcompose import android.content.Context import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Toast import androidx.activity.compose.setContent import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.material.* import androidx.compose.runtime.* 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.tooling.preview.Preview import androidx.compose.ui.unit.dp class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GetScaffold() } } @Composable fun GetScaffold(){ Scaffold( topBar = {TopAppBar( title = {Text( ...

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.itemsIndexed import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment 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?) { sup...

Compose LazyColumn Add Remove Item The LazyColumn is an equivalent widget of RecyclerView. But there is no adapter for LazyColumn. Like RecyclerView, LazyColumn does not need any adapter to populate items. In this case, we can show items in a LazyColumn widget using a simple list. Yes, we talked about the jetpack compose library LazyColumn widget. LazyColumn shows a vertically scrollable list of items. This is super fast and took a much smaller memory size. The items are composed when they are in a visible state in a LazyColumn. As with adding a list to the LazyColumn items collection we can even add a single item to the LazyColumn. The following android jetpack compose tutorial code will describe to us how we can add and remove an item from LayColumn. To do this, we create a mutable list of string values which we generate from a random UUID. We also remember the items of the mutable list using the jetpack compose library API. To generate LazyColumn items we used its LazyListSc...

Compose LazyColumn Items Indexed The LazyColumn is a special type of Column layout that has items vertical scrolling feature enabled. In the pre-compose application, there is a similar widget name RecyclerView. Like the RecyclerView widget, LayColumn is used to display a long list of items. Items may come from a room database, API data, or whatever it is. The main feature of the LazyColumn widget is, that it shows a vertically scrolling list that only composes and lays out the currently visible items. This feature allows a LazyColumn to scroll a long list very smoothly and it also takes a small size of device memory. We can add a single item to the LazyColumn items collection, we also can add multiple items to its items collection at once. But how does an android jetpack compose developers add items to the LazyColumn collection of items with their index value? This jetpack compose tutorial will describe to us how we can get LazyColumn items with their corresponding index value....