Programming Tutorials

Compose Column Align Bottom The Column is a jetpack compose layout widget. The Column layout places its elements in vertical sequences. By default, the Column lays out its elements from top to bottom. The Column layout aligns its element from the top start. The following jetpack compose tutorial will demonstrate how we can align Column children widgets at the bottom position. That means we lay out Column elements from the bottom position to the top position. We can set Column container size using its modifier argument. If we set the Column layout size to fill the maximum available size and we want to put a child element at the bottom of the Column container, then what should we do to achieve it? The Column widget constructor has an argument named ‘verticalArrangement’. The ‘verticalArrangement’ argument data type is ‘Arrangement.Vertical’ and it is used to specify the vertical arrangement of the layout’s children. The default value for this argument is ‘Arrangement.Top’. So t...

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.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 Column Vertical Scrolling The Column is one of the most used layout widgets in the jetpack compose library. Column place child items vertically on the android application user interface. A Column displays its items one after another vertically oriented. When a Column layout holds many items and all items can’t show in the available visible screen area, then we need to scroll Column layouts to see invisible items. But by default Column layout is not scrollable. If we do not implement the Column scrolling functionality the rest items whose not get available space will remain hidden. This android application development tutorial will demonstrate to us how we can enable vertical scrolling of a Column layout widget in the jetpack compose. The following code put a Column layout in a composable function. Then we put hundred Text items inside it by looping them. Huge items, so only a few items are placed in the Column’s visible area and the rest are hidden. Now we create a S...

Introduction Jetpack Compose has revolutionized the way Android developers create UI components, offering a modern, declarative approach that simplifies the development process. Unlike traditional XML-based layouts, Compose enables developers to build UIs using Kotlin code, making it more flexible and easier to maintain. In this article, we'll dive into how to use a basic Column layout in Jetpack Compose, which is one of the most frequently used components for organizing elements vertically. This example demonstrates how to create a simple Android application using Jetpack Compose that includes buttons, text views, and a structured column layout. It showcases the power of Compose in making your UI concise and efficient. We'll break down the code step-by-step to help you understand how to leverage the Column composable, manage alignment, padding, and spacing, and integrate components like buttons and text elements seamlessly. Setting Up the Main Content The core of this applic...