3DText in Android Jetpack Compose Tutorial

3-D Text in Android Jetpack Compose Tutorial

What is 3D Text?

3D text refers to text that appears to have depth, making it look as if it's three-dimensional. This is typically achieved through visual effects like shading, shadows, gradients, or perspective transformations, which give the text the appearance of existing in a three-dimensional space rather than being flat on a two-dimensional surface.

Characteristics of 3D Text - 

1. Depth: The text appears to have thickness or depth, often seen in the form of shadows or beveled edges.
2. Shading and Lighting: Light and shadow effects are used to simulate how light would hit the text if it were a 3D object, creating highlights and darker areas.
3. Perspective: The text may appear to be viewed from an angle, with the sides and edges receding into the background, giving it a sense of perspective.
4. Multiple Layers: In some designs, the text consists of multiple layers, each slightly offset from the others, to create a 3D effect.

Where are used in Android app?

1. Logos and Branding: 3D text is often used in logos to make them stand out and appear more dynamic.
2. Titles and Headings: In design, 3D text can make titles or headings more eye-catching.
3. Games and UI Design: 3D text is frequently used in video games and other interfaces to add depth and visual interest.

MainActivity

Copy this code →

package com.codingbihar.jetpackcomposeskill

import ...

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

ThreeDTextExample

Copy this code →

package com.codingbihar.jetpackcomposeskill

import ...

@Composable
fun MainScreen() {
    Box (Modifier.fillMaxSize().background(color = Black)){

        Column {
            ThreeDText4("Android Jetpack Compose!")
            ThreeDTextWithGradient("Hello Android World!")
            StackedThreeDText("Android Jetpack Compose!")
        }
    }
}

@Composable
fun ThreeDText4(text: String) {
    Box(modifier = Modifier.padding(16.dp)) {
        // Shadow layer
        Text(
            text = text,
            color = Color.Gray,
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .offset(8.dp, 8.dp) // Offset for the shadow effect
        )
        // Main text layer
        Text(
            text = text,
            color = Color.White,
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

@Composable
fun ThreeDTextWithGradient(text: String) {
    Box(modifier = Modifier.padding(16.dp)) {
        // Shadow layer
        Text(
            text = text,
            color = Color.LightGray,
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .offset(4.dp, 4.dp)
        )
        // Gradient text layer
        Text(
            text = text,
            style = TextStyle(
                brush = Brush.linearGradient(
                    colors = listOf(Color.Blue, Green, Red)
                ),
                fontSize = 40.sp,
                fontWeight = FontWeight.Bold
            )
        )
    }
}
@Composable
fun StackedThreeDText(text: String) {
    Box(modifier = Modifier.padding(16.dp)) {
        // Multiple shadow layers for depth
        Text(
            text = text,
            color = Color.DarkGray,
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.offset(6.dp, 6.dp)
        )
        Text(
            text = text,
            color = Color.Gray,
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.offset(3.dp, 3.dp)
        )
        // Main text layer
        Text(
            text = text,
            color = Color.White,
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

OUTPUT: