Text Composable in Jetpack Compose

Hello guys,😀
If you have yet not setup Basic Compose project, please jump for 1st day of learning for Introduction to Compose & Setup 🏗️

Introduction to Text in Compose

Text is one of the most important & central element in UI design. Everything starts from text and end with some complex elements. In the development process, requirements are always not satisfied with normal element but there may arise a need to work on the complex form of Text & other elements.

Compose provides a BasicText and BasicTextField which are the essential elements to display text and handle user input. Also, Compose provides Text and TextField, which are composable following Material Design guidelines. It is preferred to use those as they provide a good look & feel and allow customisation in less code.

Basics to display text using Composable is 🙂

Image from Google

Most of the times it is recommended to use Strings from String.xml resource file that can be achieved using

Image from Google

If we go in some more deep attributes the first we can think of is Styling a Text with (colour, size, style, background, alignment, font etc)
1. Text Colour

Image from Google

2. Text Size

Image from Google

3. Text Style (Italic, Bold)

Images from Google

4. Text Alignment

Images from Google

5. Text Font
Text has a Font family parameter to set to text which is used by composable. By default, serif, sans-serif, monospace and cursive font families are included. We can put files in font resource folder of Android and set font family by referencing from it

Image from Google

Going one more level deep for Multiple Style for Text
If we want to set different styles within the same text, we have to use an AnnotatedString, a string that can be annotated with styles of arbitrary annotations.
AnnotatedString is a data class containing:

• A Text value
• A List of SpanStyleRange, for inline styling with position range within the text value
• A List of ParagraphStyleRange, for text alignment, text direction, line height, and text-indent styling

Note : TextStyle is for use in the Text composable , whereas SpanStyle and ParagraphStyle is for use in AnnotatedString.

Note : Difference between SpanStyle and ParagraphStyle is that ParagraphStyle can be applied to a whole paragraph,
SpanStyle can be applied at the character level.

Image from Google

Oops, it’s was all about text Displaying text. But what about Entering the Text? 🤔🤔

TextField allows users to enter and modify text. There are two levels of TextField implementations:

1. TextField is the Material Design implementation.

• The default styling is filled
• OutlinedTextField is the outline styling version

2. BasicTextField enables users to edit text via hardware or software keyboard, but provides no decorations like hint or placeholder

Image from Google

Image from Google

That’s all about the basics of Text. This article may not cover everything based on your complex Implementation & use cases but you are good to start with. All the best.😃
You can Clone this repository for basic setup. Further, all concepts source code can be updated from same. (Switch to branch TextCompose)
https://github.com/SatyamGondhale/LearnCompose

Subscribe & Stay Updated with latest content.

If you think this has helped you, feel free to 👏🏻 (claps) & share. Thanks.😄