Simplifying UI with Jetpack Compose Part III

Contents

Text in Jetpack Compose

TextStyling in Jetpack Compose

TextField in Jetpack Compose

Images in Jetpack Compose

Buttons in Jetpack Compose

LazyRow and LazyColumn in Jetpack Compose

TEXT In Jetpack Compose

1. Text Size

Change the text size using ‘FONTSIZE’ parameter.

@Composable
fun TextWithSize(label : String, size : TextUnit) {
    Text(label, fontSize = size)
}

2. Text Color

Change the text color using ‘Color’ parameter

@Composable
fun ColorText() {
    Text("Color text", color = Color.Blue)
}

3. Italic Text

Use FontStyle paramter to making the italic text

@Composable
fun ItalicText() {
    Text("Italic Text", fontStyle = FontStyle.Italic)
}

4. Text Overflow

When limiting a long text, you may want to indicate a text overflow, which is only shown if the displayed text is truncated. To do so, set the textOverflow parameter

@Composable
fun OverflowedText() {
    Text("Hello Compose ".repeat(50), maxLines = 2,
    overflow = TextOverflow.Ellipsis)
}

5. Maximum number of lines

To limit the number of visible lines in a Text composable, set the maxLines parameter:

@Composable
fun MaxLines() {
    Text("hello ".repeat(50), maxLines = 2)
}

6. Selectable Text

By default, composables aren’t selectable, which means by default users can’t select and copy text from your app. To enable text selection, you need to wrap your text elements with a SelectionContainer composable

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

TextStyle in JetPack Compose

• color: Sets the text color to Color.Black.
• fontSize: Sets the font size to 20.sp.
• fontWeight: Sets the font weight to FontWeight.Bold.
• fontStyle: Sets the font style to italic using FontStyle.Italic.
• textDecoration: Adds a line-through decoration to the text using TextDecoration.LineThrough.
• textAlign: Sets the text alignment to center using TextAlign.Center.
• letterSpacing: Sets the letter spacing to 0.2.em.
• fontFamily: Sets the font family to Sans Serif using FontFamily.SansSerif.

TextField In Jetpack Compose

What’s TextField?

TextField is a user interface control that is used to allow the user to enter the text. This is used to get the data from the user as numbers or Strings.

1. Simple TextField

@Composable
fun SimpleTextField() {
    var text by remember { mutableStateOf(TextFieldValue("")) }
    TextField(
        value = text,
        onValueChange = { newText ->
            text = newText
        }
    )
}

OUTPUT

2. Label and PlaceHolder

@Composable
fun LabelAndPlaceHolder() {
    var text by remember { mutableStateOf(TextFieldValue("")) }
    TextField(
        value = text,
        onValueChange = {
            text = it
        },
        label = { Text(text = "Your Label") },
        placeholder = { Text(text = "Your Placeholder/Hint") },
    )
}

OUTPUT

3. Keyboard Options

@Composable
fun TextFieldWithInputType() {
    var text by remember { mutableStateOf(TextFieldValue("")) }
    TextField(
        value = text,
        label = { Text(text = "Number Input Type") },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        onValueChange = { it ->
            text = it
        }
    )
}

Following Keyboard Types available in Compose:

• KeyboardType.Text
• KeyboardType.Ascii
• KeyboardType.Number
• KeyboardType.Phon
• KeyboardType.Uri
• KeyboardType.Email
• KeyboardType.Password
• KeyboardType.NumberPassword

4. TextField with Icons

@Composable
fun TextFieldWithIcons() {
    var text by remember { mutableStateOf(TextFieldValue("")) }
    return OutlinedTextField(
        value = text,
        leadingIcon = { Icon(imageVector = Icons.Default.Email, contentDescription = "emailIcon") },
        onValueChange = {
            text = it
        },
        label = { Text(text = "Email address") },
        placeholder = { Text(text = "Enter your e-mail") },
    )
}

OUTPUT

Image in JetPack Compose

The Image composable is used to display images in a Jetpack Compose UI. It supports various image sources, such as drawable resources, local files, network URLs, and even custom image loaders.

@Composable
fun ImageExample() {
    Image(
        painter = painterResource(R.drawable.my_image),
        contentDescription = "My Image",
        contentScale = ContentScale.Fit,
        modifier = Modifier
            .size(200.dp)
            .clip(shape = RoundedCornerShape(8.dp))
    )
}

CODE EXPLANATION

we define a composable function called DrawableResourceImage that takes an imageResId as a parameter, representing the drawable resource ID of the image. We use the painterResource function to obtain a Painter instance for the given resource ID and pass it to the painter parameter of the Image composable. We set the contentDescription parameter to null, which should ideally be replaced with a descriptive text for accessibility purposes.

Round Corner Image

Circle Image

ContentScale

Following ContentScale types available in Compose.

• FillBounds
• FillHeight
• FillWidth
• Inside
• Fit
• Crop

BUTTONS IN JETPACK COMPOSE

Buttons are essential components in any user interface as they allow users to interact with your app and trigger actions.

1. Text Button :

2. Outlined Button :

3. IconButton :

LazyColumn and LazyRow in Jetpack Compose

What is LazyRow?

LazyRow is a Horizontal scrolling component that renders only the visible items on the screen, making it highly efficient for displaying long lists. As the user scrolls, LazyRow dynamically loads and unloads items as needed, ensuring smooth scrolling performance.

What is LazyColumn?

It is same as LazyRow , LazyColumn is a Vertical scrolling component that renders only the visible items on the screen, making it highly efficient for displaying long lists.

Conclusion

In this article, we explored the power of Jetpack Compose in simplifying UI development. We covered several fundamental components and concepts that make building dynamic and responsive user interfaces a breeze.

Simplifying UI with Jetpack Compose Part I

Simplifying UI with Jetpack Compose Part I

Simplifying UI with Jetpack Compose Part II

Simplifying UI with Jetpack Compose Part II

Auther linkedin : Mir Niyazul Haque

keep acquiring knowledge.