How to set text size in Android Jetpack Compose Text

Question

XML code

<TextView
    android:textSize="22sp"
    ... />

What is the corresponding Jetpack compose code?

Answer 1

Using the below way, we can provide TextSize.

 Text( text = "Hello World", fontSize = 10.sp)

Answer 2

The easiest method to adjust font size and weight in Jetpack Compose

Text( text = "$text1", fontWeight = FontWeight.Bold, fontSize = 14.sp )

Answer 3

import androidx.compose.ui.unit.sp


@Composable
        fun BigText() {
            Text("Hello World", fontSize = 30.sp)
        }

//============== FOR OTHER TEXT CONFIG

@Composable
fun TextViewSimple(textStr: String) {
    Text(text = textStr)
}


@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}

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


@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}


@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}

@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue, offset = offset, blurRadius = 3f
            )
        )
    )
}

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}


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

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


@OptIn(ExperimentalTextApi::class)
@Composable
fun BrushText() {
    val gradientColors = listOf(Color.Cyan, Color.Blue, Color.Magenta /*...*/)
    Text(
        text = "brush text ".repeat(20),
        style = TextStyle(
            brush = Brush.linearGradient(
                colors = gradientColors
            )
        )
    )
}


// Creating a Outline text
@Composable
fun OutLineText() {

        // 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.CYAN
            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(
                        "Hello World",
                        200f,
                        200.dp.toPx(),
                        textPaintStroke
                    )

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

Google documentation >> https://developer.android.com/jetpack/compose/text

Output : Text output is follow same sequence

Answer 4

We have to use fontSize to change the text size.

import androidx.compose.ui.unit.sp
 
Text(
    "Hello World",
    fontSize = 30.sp
)

Docs - Changing the text size

Compose has TextUnit we can use using .sp or .em.

More info on TextUnit