Programming Tutorials

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

Compose Button Rounded Corners The Button is a primary component of the android jetpack compose library. A Button is used to perform an action. The widget has an onClick event. We can add a Text composable or any other composable as child elements of the Button. Commonly used Text widget or a Text widget with an icon as Button elements to describe the action to perform on Button click event. This android jetpack compose tutorial will demonstrate how we can display a rounded corners-shaped Button widget on the app screen. And how we can change the corner radius size or percentage for a Button widget. We know the Button widget constructor has an argument named ‘shape’, this shape argument accepts a ‘Shape’ type of value. The default value for the ‘shape’ parameter is ‘MaterialTheme.shapes.small’. We can set or change the Button shape using this shape argument. Such as, when we set the value of the ‘shape’ argument to ‘CircleShape’ then it displays a circular-shaped Button widget...

Compose Button With Icon & Text The Button is a primary widget of an android application, and for any software development SDK. Without a Button widget, we can’t build software or mobile application. The Button provides a click functionality. Android jetpack compose library provides a few built-in widgets to create many types of Buttons such as Button, TextButton, OutlinedButton, FloatingActionButton, IconButton, etc. Different types of Button widgets allow us to render the different types of Button in the mobile user interface an example, IconButton can render an Icon inside IconButon with click action, and TextButton simply shows a Text object inside TextButton itself. OutlinedButton draws a border around the text button, etc. The Button widget shows a Text object with a background color and elevation. But in some situations, android developers have to render a Button widget with both Text and an Icon. This android development tutorial will show you how we can show an Ic...

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

Make Text Clickable In Compose The Text widget is a very important widget of the android jetpack compose library. The Text widget allows us to display text objects inside its surface. Commonly Text widget displays simple text on it. But an android jetpack compose developer can style this text using the Text widget’s ‘style’ argument. This ‘style’ argument allows us to define text decoration, font family, font weight, text color, etc. Android jetpack compose developer also can directly set The Text widget’s font family, font size, text color, text alignment, text letter spacing, etc using its parameters. But how can they set a click event for the Text widget when it has no default click event handler or onClick argument? The following code snippet will describe to us how we can set a click event handler for a Text widget. The Text widget modifier object has an element name ‘clickable’. This ‘clickable()’ method allows us to set an onClick event to a Text widget. Modifier’s click...

Compose Roate Animation Animation plays a vital role in an android application lifecycle. Today’s mobile applications are built-in with full of animations. Most of those animations are system-generated such as a Button click effect. Android app developers need to create some animations per their application requirements. There are many types of animations that exist in the jetpack compose library. Today we will discuss here rotate animation which means object rotation animation. In the following kotlin example code, we rotate an Icon object on a Button click event. We can display a rotated icon without animating it by using its modifier object’s ‘rotate’ element. When we put a value between 0 to 360, it will display the object as rotated to the specified degrees. So this modifier’s ‘rotate()’ element will help us to create a rotate animation for a widget. Somehow we need to change the value of the ‘degrees’ argument of the 'rotate()' method and animate the state change. ...

Compose Animate Color Change Animation plays an important part in an android application lifecycle. Mobile app users like animation while they perform some tasks. Animations provide perfect visual feedback for user-generated action. As with native android SDK, the jetpack compose library has great tools to animate things on an android application. This tutorial will demonstrate to us how we can animate the color change in our jetpack compose application. Such as we change a Column widget’s background color from Blue to Yellow after an event. This change can happen using animation with some specified duration interval. In the following kotlin code snippets, we change a Box widget’s background color by a Button click event. The color transition happens using animation. And the interval of changing the color value is the jetpack compose default. To make a color change animation we have to use the animateColorAsState() method. In this tutorial, we put this method as a variable va...

Compose Image Tint The Image is a most frequently used widget of android jetpack compose library that allows us to display an image object on the android mobile device screen. The jetpack compose library provides us the tools to modify the image object’s appearance and color and many properties. By default, the Image widget constructor has a parameter named ‘colorFilter’ to apply some effect of the original image color. Using this ‘colorFilter’ parameter an android app developer can apply color filters in three different ways, which are colorMatrix, lighting, and tint. Today we will learn how we can apply tint on an Image widget’s image object using its ‘colorFilter’ parameter. Here we will pass the ‘ColorFilter.tint()’ method as the ‘colorFilter’ parameter value. We have to construct the ‘ColorFilter.tint()’ method by passing two parameters to it. One is ‘color’ and another one is ‘blendMode’. The tint() method creates a color filter for the image that applies the blend mode...

Compose Image Shadow Elevation The Image is a frequently used widget of android jetpack compose library that allows us to display an image object to the android mobile device screen. We can display an image object to the Image widget surface from various sources such as bitmap resources, painter resources, and even vector resources. Without an image, we can’t visualize an android application. Most android app developers display multiple images on their app screens. The Image makes an app more beautiful. The jetpack compose library allows us to modify the image properties such as we can change the actual image size, can set the image scaling algorithms, can filter the image color by various conditions, and can change the image opacity value. After all, as with other widgets, the Image widget modifier object’s different elements allow us to tweak image properties more. Today’s subject is, how we can add an elevation value to the Image object. By default Image widget constructors ...