Text Formatting with JetPack Compose, the Kotlin’s UI Kit

To see the full source code in Github https://github.com/nickyrabit/JetPackComposeTextFormatting

PS: You will need Android +4.0 For this, Go to Android Developer to get it.

Get fonts from my friend: https://www.websiteplanet.com/blog/best-free-fonts/

Composer looks like Flutter, so if you know a little bit of Flutter this will be easy for you. If you don’t then don’t worry. The Github code has comments to guide you.

From Android Studio 4.0 go to File, New Project then click “ Empty Compose Activity”

After that, you will get a Hello World for this Composable UI

You will find the familiar onCreate method looking like this

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Greeting("Android")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview
@Composable
fun DefaultPreview() {
    MaterialTheme {
        Greeting("Android")
    }
}

Now To Explain the code above

That is a normal MainActivity extending AppCompactActivity

Set Content shows the content of the activity, in our case we have a Material Theme which defines the styling principles from the Material design specification. It must be present within a hierarchy of components that includes Material components, as it defines key values such as base colors and typography.

Okay, remove the name parameter from Greeting method and inside that Greeting method, Place a Text() component and let’s format it

Text("Hello World")

This will be a plain text displaying Hello World, To make it Bold, do this

Text("Hello WOrld", style = TextStyle(fontWeight = FontWeight.Bold))

We have added the style property to Text component and set the weight to bold

To make it Italic do this

Text("I am Italic",style = TextStyle(fontStyle = FontStyle.Italic))

Simple huh? now let’s add a custom font,

Download any font you like from https://fonts.google.com/ then place it inside res/font folder. if you don’t see it go to res folder right click it and click “new” goto “Android Resource Directory” in directory name type the word “font” and at the resource type select “fonts”

Paste the font there preferably in .otf or .ttf format and rename files into small letters and underscores

Now back to the MainActivity do the following

Text("I am Custom Font Montserrat", style = TextStyle(fontFamily = FontFamily(Font(name="montserrat_semibold.otf"))))

My font here is montserrat_semibold .otf

There it’s done!! There are so many ways to alter the fonts. You can clone my project and test more stuff

Github : https://github.com/nickyrabit/JetPackComposeTextFormatting

Instagram: https://instagram.com/nickyrabit

LinkedIn : https://www.linkedin.com/in/nicholaus-legnard-5a2a89b8

Thanks