Programming Tutorials

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....

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.clickable import androidx.compose.foundation.gestures.detectTapGestures import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.Column 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.input.pointer.pointerInput 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 o...

Compose TextField IME Action Done TextField is an equivalent widget of the android view system’s EditText widget. In a jetpack compose application TextField is used to enter and modify text. So, TextField is a Text input widget of the jetpack compose library. The following jetpack compose tutorial will demonstrate to us how can we show IME action ‘Done’ on the soft keyboard and how we can respond to IME action Done click. TextField constructor’s ‘keyboardOptions’ argument allows us to set the TextField-related soft keyboard’s IME action. We can set one of the options from Default, Done, Sent, Go, Next, Search, etc. The ‘ImeAction.Default’ is the default value for this argument. So using this keyboardOptions parameter we set the IME action Done. IME action Done represents that the user is done providing input to a group of inputs. On the other hand, TextField ‘keyboardActions’ argument allows us to specify actions that will be triggered in response to users triggering IME acti...

Compose TextField Focus Change Listener TextFIeld is a widget of the android jetpack compose library. This widget is used for entering text and modifying text on an app screen. Android view system’s EditText is an equivalent of the jetpack compose TextField widget. TextField widget has a very easy API to request focus on it, remove focus from it and handle the focus change listener. The ‘FocusRequester’ object is used in conjunction with ‘Modifier.focusRequester’ to send requests to change focus. So, we can use this Modifier object’s ‘focusRequester’ element to set the focus on a TextField widget programmatically. FocusManager.clearFocus() method clear focus from the currently focused component and set the focus to the root focus modifier. So we can remove focus from a TextField using FocusManager.clearFocus() method. We have to create an instance of LocalFocusManager and call its clearFoucs() method to remove focus from TextField. So, we can request focus for a TextField wid...

Compose TextField Clear Focus TextField is one of the most used widgets of the android jetpack compose library. A TextField is used for writing some text on the android user interface or modifying text in an app. TextField is the equivalent of the android view system’s EditText widget. They act likely the same in an android app. But the jetpack compose library provides us a different API to manage the TextField behaviors such as requesting focus on TextField and clear focus from a TextField widget. This android jetpack compose tutorial will demonstrate how we can clear focus from a TextField widget programmatically. We can use FocusManager.clearFocus() method to clear focus from the currently focused component and set the focus to the root focus modifier. To do that we create an instance of LocalFocusManager and call its clearFocus() method to remove focus from TextField. Finally, we used two Button widgets to make our tutorial. On the first Button click event, we set focus to...

Compose TextField Input Type TextField is an equivalent widget of the android view system’s EditText widget. Jetpack compose TextField allows users to enter and modify text. That’s why TextField is a Text input widget of the jetpack compose library. The following jetpack compose tutorial will demonstrate to us how we can input different types of text on the TextField widget using different types of Software keyboards. Such as how we can enter email, phone number, simple text, password, decimal, number, URI, etc to TextField with the specified soft keyboard type. The TextField constructor’s ‘keyboardOptions’ parameter’s ‘keyboardType’ property allows us to define the Keyboard type for the focused TextField. The ‘keyboardType’ element accepts one value from Ascii, Decimal, Email, Number, NumberPassword, Password, Phone, Text, and Uri. Those keyboard types are used for different purposes such as the ‘Decimal’ type soft keyboard used to request an IME that is capable of inputting...

Compose TextField Error TextField is an equivalent widget of the android view system’s EditText widget. Jetpack compose TextField is used to enter and modify text. So, TextField is called a Text input widget of the jetpack compose library. The following jetpack compose tutorial will demonstrate to us how we can handle errors on TextField. For example, how we can catch TextField error while users enter text on it, how we can show an error message on the TextField while an error occurred and how we can show different colors on the TextField widget to indicate that TextField generates an error. The first question is, how we can catch an error from TextField while the user enters Text on it? The answer is TextField constructor’s ‘onValueChange’ argument allows us to catch errors in real-time while users enter text on It. We also can catch errors on TextField’s focused change. We can make a TextField mandatory to input some text in it, if the user leaves the TextField blank then w...

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.layout.Column 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.input.TextFieldValue 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 { MainContent() } } @Composable fun MainContent(){ Column( Modifier .background(Color(0xFFEDEAE0)) .fillMaxSize...

Compose TextField Hint The TextField is the text input widget of android jetpack compose library. TextField is an equivalent widget of the android view system’s EditText widget. TextField is used to enter and modify text. TextField widget constructor has no argument named ‘hint’. But we put a title for this tutorial as ‘TextField hint’? So, what is a hint, and why do we use it for a widget? Hint means to instruct users on what should they do in this widget. Such as a hint for a DropdownMenu widget may be ‘select an item’ and a hint for TextField is ‘put your age here’ to collect the user's age in the specified TextField widget. The following jetpack compose tutorial will demonstrate how we can display a hint like text/message to the user for a TextField. There are two ways to show a text message to the users inside a TextField layout. One is the TextField constructor’s ‘label’ argument and another one is the ‘placeholder’ argument. The TextField label argument is optional...

Compose TextField Background Color Text is the main thing of any application. The jetpack compose makes it easier for the android application developer to display text, enter text and modify text. To write text inside an android application the jetpack compose library provides a widget name TextField. Displaying and managing a TextField widget is very easy in jetpack compose. Sometimes android app developers need to change the default background color of a TextField widget in jetpack compose. Changing the TextField background color is a little bit difficult. We can’t directly put a color for any property of the TextField widget to change its background color. This android application development tutorial will demonstrate to us how we can change the TextField background color in jetpack compose. TextField has a property/parameter/argument named ‘colors’. Here we can assign some values to change the TextField default colors such as background color, text color, cursor color, pla...

Compose TextField Remove Underline The TextField is the text input widget of android jetpack compose library. TextField is an equivalent widget of the android view system’s EditText widget. TextField is used to enter and modify text. The following jetpack compose tutorial will demonstrate to us how we can remove (actually hide) the underline from a TextField widget in an android application. We have to apply a simple trick to remove (hide) the underline from the TextField. The TextField constructor’s ‘colors’ argument allows us to set or change colors for TextField’s various components such as text color, cursor color, label color, error color, background color, focused and unfocused indicator color, etc. Jetpack developers can pass a TextFieldDefaults.textFieldColors() function with arguments value for the TextField ‘colors’ argument. There are many arguments for this ‘TextFieldDefaults.textFieldColors()’function such as textColor, disabledTextColor, backgroundColor, cursorC...

Compose TextField Request Focus The TextField is a text input widget of android jetpack compose library. Android app users can modify text using the TextField widget. Jetpack compose TextField is an equivalent of the android view system EditText widget. An android app screen can contain multiple TextField widgets to collect user data. So, how we can focus on a specific TextField widget programmatically? This android jetpack compose tutorial will demonstrate how we can focus a TextField widget in code. The ‘FocusRequester’ object is used in conjunction with ‘Modifier.focusRequester’ to send requests to change focus. So, we can use this Modifier object’s ‘focusRequester’ element to set the focus on a TextField widget programmatically. The modifier ‘focusRequester()’ function has a required argument name ‘focusRequester’ and its data type is FocusRequester. So that we have to pass a FocusRequester object to this function to make it workable. At the beginning of this tutorial, we...

Compose Button Elevation The Button is a primary component of an android application. Android application developers can’t imagine an application without a Button widget. In the jetpack compose library there are several types of Button widgets such as Button, TextButton, FloatingActionButton, OutlinedButton, IconButton, etc, Android application developers used them in their app user interface for various requirements. Such as an IconButton shows an Icon inside it with a clickable functionality. TextButton displays a clickable simple Text object. By default, TextButton has no elevation. The Button widget has an elevation but we can change its elevation value. This android application development tutorial will demonstrate to us how we can set or change a Button widget elevation in jetpack compose. In this example, we will set or change Button, TextButton, and OutlinedButton’s elevation size/value. We also change the TextButton’s different states elevations such as default eleva...