How to Create Outlined Text in Android using Jetpack Compose?

Last Updated : 30 Apr, 2022

In Android, we can customize various aspects of a Text for displaying them accordingly. We can change the font size, and font family as well as apply various functions like bold, italics, etc. However, it is not possible to display an outline font for the same text. In case, you are unaware of what outlined font is, look at the below image of sample outlined text:

In this article, we will show you how you could create outlined text in Android using Jetpack Compose. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. While choosing the template, select Empty Compose Activity. If you do not find this template, try upgrading the Android Studio to the latest version. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.geeksforgeeks.outlinedtext

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            // Creating a Simple Scaffold 
            // Layout for the application
            Scaffold(

                // Creating a Top Bar
                topBar = { TopAppBar(title = { Text("GFG | Outlined Text", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },

                // Creating Content
                content = {

                    // Creating a Column Layout
                    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {

                        // Create a Paint that has black stroke
                        val textPaintStroke = Paint().asFrameworkPaint().apply {
                            isAntiAlias = true
                            style = android.graphics.Paint.Style.STROKE
                            textSize = 100f
                            color = android.graphics.Color.BLACK
                            strokeWidth = 12f
                            strokeMiter= 10f
                            strokeJoin = android.graphics.Paint.Join.ROUND
                        }

                        // Create a Paint that has white fill
                        val textPaint = Paint().asFrameworkPaint().apply {
                            isAntiAlias = true
                            style = android.graphics.Paint.Style.FILL
                            textSize = 100f
                            color = android.graphics.Color.WHITE
                        }

                        // Create a canvas, draw the black stroke and 
                        // override it with the white fill
                        Canvas(
                            modifier = Modifier.fillMaxSize(),
                            onDraw = {
                                drawIntoCanvas {
                                    it.nativeCanvas.drawText(
                                        "GeeksforGeeks",
                                        200f,
                                        200.dp.toPx(),
                                        textPaintStroke
                                    )

                                    it.nativeCanvas.drawText(
                                        "GeeksforGeeks",
                                        200f,
                                        200.dp.toPx(),
                                        textPaint
                                    )
                                }
                            }
                        )
                    }
                }
            )
        }
    }
}