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 -
- Depth: The text appears to have thickness or depth, often seen in the form of shadows or beveled edges.
- 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.
- 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.
- 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?
- Logos and Branding: 3D text is often used in logos to make them stand out and appear more dynamic.
- Titles and Headings: In design, 3D text can make titles or headings more eye-catching.
- 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:
