Programming Tutorials

Compose Card Content Alignment The Card is a widget of the jetpack compose library. A Card layout displays a single widget inside it. The Card is useful to render a specified shape with elevation. The Card also can draw a background color on its surface. The jetpack compose developer can put a border/stroke around the Card layout itself. But how can they align the content inside of a Card layout? By default, the Card widget constructor has no argument to directly set alignment for its child element. So we have to write extra code to define the alignment of a Card child. The following jetpack compose tutorial will demonstrate to us how we can set a Card content alignment in an android application. The Box is another layout widget of the android jetpack compose library. We can set alignment for the Box content using its constructor’s ‘contentAlignment’ argument. The Card widget tries to expand its child size to fill the parent Card size. To align the Card content, we have to wr...

Compose Box Gradient Background Color The Box is a layout widget of the android jetpack compose library. The Box is a single-child container. The Box layout is helpful to align the child element in a specific position. The following jetpack compose tutorial demonstrates to us how we can set a gradient background color to a Box layout. The Box constructor has no specific argument to set or change its background color. So how do we set a background color to it? As with other layout widgets, we can set a background color to a Box widget by using its ‘modifier’ argument’s ‘background’ element. The modifier’s ‘background()’ function element has several constructors to specify a background color or brush for the widget. The ’background()’ element has a constructor that accepts a ‘brush’ argument. The ‘brush’ argument data type is ‘Brush’. So we can pass a Brush instance to the Box widget to draw its background. We can create any type of gradient brush to draw a gradient background ...

Compose Box Center Alignment The Box is a very popular layout widget in a jetpack compose android application. Box allows us to put a single element inside it. So, Box is a single-child container. When Box’s child widget is much smaller than the Box widget itself, the developer needs to align it inside the Box component. Such as we have a Box widget whose size is fill the available area and we have a Button widget inside the Box widget, in this situation we have to align our Box child widget as per our requirement. This android development tutorial shows you how you can center align a component inside a Box widget. Box center alignment is so easy to implement in a jetpack compose application. Let us describe the code, and how we dot it. At first, we put a Box layout widget in a composable function. Next, we set the Box modifier to fill the maximum available size. We also put a padding value and clip to make it rounded corners. Then we set the Box’s ‘contentAlignment’ property...

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

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

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

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

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

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

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