Components for displaying text, icons, and progress indicators with Material3 styling. These components provide consistent visual representation of content with proper theming and accessibility support.
import androidx.compose.material3.*
import androidx.compose.material3.Text
import androidx.compose.material3.Icon
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.VerticalDivider
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.LocalContentColorMaterial3 text component with integrated typography and theming support.
/**
* Material3 text component with typography integration and theming support
* @param text The text content to be displayed
* @param modifier Modifier to be applied to the text
* @param color Color of the text (uses theme color if unspecified)
* @param fontSize Size of the text
* @param fontStyle Style of the text (normal, italic)
* @param fontWeight Weight of the text (normal, bold, etc.)
* @param fontFamily Font family for the text
* @param letterSpacing Space between characters
* @param textDecoration Decoration applied to text (underline, strikethrough)
* @param textAlign Alignment of text within its bounds
* @param lineHeight Height of text lines
* @param overflow How to handle text overflow
* @param softWrap Whether text should break at soft line breaks
* @param maxLines Maximum number of lines for the text
* @param minLines Minimum number of lines for the text
* @param onTextLayout Callback for text layout information
* @param style Text style from Material3 typography scale
*/
@Composable
fun Text(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
minLines: Int = 1,
onTextLayout: (TextLayoutResult) -> Unit = {},
style: TextStyle = LocalTextStyle.current
)
/**
* Material3 text component for AnnotatedString with rich text formatting
* @param text The annotated text content with formatting
* @param modifier Modifier to be applied to the text
* @param color Color of the text
* @param fontSize Size of the text
* @param fontStyle Style of the text
* @param fontWeight Weight of the text
* @param fontFamily Font family for the text
* @param letterSpacing Space between characters
* @param textDecoration Decoration applied to text
* @param textAlign Alignment of text within its bounds
* @param lineHeight Height of text lines
* @param overflow How to handle text overflow
* @param softWrap Whether text should break at soft line breaks
* @param maxLines Maximum number of lines for the text
* @param minLines Minimum number of lines for the text
* @param inlineContent Map of inline content for embedded elements
* @param onTextLayout Callback for text layout information
* @param style Text style from Material3 typography scale
*/
@Composable
fun Text(
text: AnnotatedString,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
minLines: Int = 1,
inlineContent: Map<String, InlineTextContent> = mapOf(),
onTextLayout: (TextLayoutResult) -> Unit = {},
style: TextStyle = LocalTextStyle.current
)Usage Examples:
// Basic text with Material3 typography
Text(
text = "Hello, Material3!",
style = MaterialTheme.typography.headlineMedium
)
// Text with custom styling
Text(
text = "Custom styled text",
color = MaterialTheme.colorScheme.primary,
fontWeight = FontWeight.Bold,
fontSize = 18.sp
)
// Text with overflow handling
Text(
text = "This is a very long text that might overflow the available space",
maxLines = 2,
overflow = TextOverflow.Ellipsis
)
// Rich text with AnnotatedString
val annotatedText = buildAnnotatedString {
append("Visit our ")
pushStyle(SpanStyle(color = MaterialTheme.colorScheme.primary))
append("website")
pop()
append(" for more information")
}
Text(text = annotatedText)Material3 icon component for displaying vector graphics, bitmaps, and custom painters.
/**
* Material3 icon component for ImageVector graphics
* @param imageVector Vector graphic to be displayed
* @param contentDescription Accessibility description for the icon
* @param modifier Modifier to be applied to the icon
* @param tint Color tint applied to the icon
*/
@Composable
fun Icon(
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current
)
/**
* Material3 icon component for ImageBitmap graphics
* @param bitmap Bitmap image to be displayed
* @param contentDescription Accessibility description for the icon
* @param modifier Modifier to be applied to the icon
* @param tint Color tint applied to the icon
*/
@Composable
fun Icon(
bitmap: ImageBitmap,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current
)
/**
* Material3 icon component for Painter graphics
* @param painter Painter to draw the icon
* @param contentDescription Accessibility description for the icon
* @param modifier Modifier to be applied to the icon
* @param tint Color tint applied to the icon
*/
@Composable
fun Icon(
painter: Painter,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current
)Usage Examples:
// Icon with Material Design Icons
Icon(
imageVector = Icons.Default.Favorite,
contentDescription = "Add to favorites"
)
// Icon with custom color
Icon(
imageVector = Icons.Default.Home,
contentDescription = "Home",
tint = MaterialTheme.colorScheme.primary
)
// Icon with custom size
Icon(
imageVector = Icons.Default.Settings,
contentDescription = "Settings",
modifier = Modifier.size(32.dp)
)
// Icon from bitmap resource
Icon(
bitmap = ImageBitmap.imageResource(id = R.drawable.custom_icon),
contentDescription = "Custom icon"
)
// Icon from painter resource
Icon(
painter = painterResource(id = R.drawable.vector_icon),
contentDescription = "Vector icon"
)Circular progress indicator for loading states and progress display.
/**
* Material3 indeterminate circular progress indicator for unknown progress
* @param modifier Modifier to be applied to the progress indicator
* @param color Color of the progress indicator
* @param strokeWidth Width of the progress indicator stroke
* @param trackColor Color of the background track
* @param strokeCap Shape of the progress indicator ends
*/
@Composable
fun CircularProgressIndicator(
modifier: Modifier = Modifier,
color: Color = ProgressIndicatorDefaults.circularColor,
strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
trackColor: Color = ProgressIndicatorDefaults.circularTrackColor,
strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularIndeterminateStrokeCap,
)
/**
* Material3 determinate circular progress indicator for known progress
* @param progress Current progress value between 0.0 and 1.0
* @param modifier Modifier to be applied to the progress indicator
* @param color Color of the progress indicator
* @param strokeWidth Width of the progress indicator stroke
* @param trackColor Color of the background track
* @param strokeCap Shape of the progress indicator ends
*/
@Composable
fun CircularProgressIndicator(
progress: () -> Float,
modifier: Modifier = Modifier,
color: Color = ProgressIndicatorDefaults.circularColor,
strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
trackColor: Color = ProgressIndicatorDefaults.circularTrackColor,
strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap,
)Usage Examples:
// Indeterminate progress indicator
CircularProgressIndicator()
// Determinate progress indicator
var progress by remember { mutableFloatStateOf(0.0f) }
CircularProgressIndicator(
progress = { progress }
)
// Custom colored progress indicator
CircularProgressIndicator(
color = MaterialTheme.colorScheme.secondary,
strokeWidth = 6.dp
)
// Progress indicator with track
CircularProgressIndicator(
progress = { 0.75f },
color = MaterialTheme.colorScheme.primary,
trackColor = MaterialTheme.colorScheme.surfaceVariant
)Linear progress indicator for horizontal progress display.
/**
* Material3 indeterminate linear progress indicator for unknown progress
* @param modifier Modifier to be applied to the progress indicator
* @param color Color of the progress indicator
* @param trackColor Color of the background track
* @param strokeCap Shape of the progress indicator ends
*/
@Composable
fun LinearProgressIndicator(
modifier: Modifier = Modifier,
color: Color = ProgressIndicatorDefaults.linearColor,
trackColor: Color = ProgressIndicatorDefaults.linearTrackColor,
strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap,
)
/**
* Material3 determinate linear progress indicator for known progress
* @param progress Current progress value between 0.0 and 1.0
* @param modifier Modifier to be applied to the progress indicator
* @param color Color of the progress indicator
* @param trackColor Color of the background track
* @param strokeCap Shape of the progress indicator ends
*/
@Composable
fun LinearProgressIndicator(
progress: () -> Float,
modifier: Modifier = Modifier,
color: Color = ProgressIndicatorDefaults.linearColor,
trackColor: Color = ProgressIndicatorDefaults.linearTrackColor,
strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap,
)Usage Examples:
// Indeterminate linear progress
LinearProgressIndicator(
modifier = Modifier.fillMaxWidth()
)
// Determinate linear progress
var downloadProgress by remember { mutableFloatStateOf(0.0f) }
LinearProgressIndicator(
progress = { downloadProgress },
modifier = Modifier.fillMaxWidth()
)
// Custom colored linear progress
LinearProgressIndicator(
progress = { 0.65f },
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colorScheme.tertiary
)Small status indicator for displaying notifications or counts.
/**
* Material3 badge for displaying small status indicators or counts
* @param modifier Modifier to be applied to the badge
* @param containerColor Background color of the badge
* @param contentColor Color of the badge content
* @param content Optional content displayed inside the badge
*/
@Composable
fun Badge(
modifier: Modifier = Modifier,
containerColor: Color = BadgeDefaults.containerColor,
contentColor: Color = contentColorFor(containerColor),
content: (@Composable () -> Unit)? = null,
)Container for adding badges to other components.
/**
* Material3 container for adding badges to other components
* @param badge Badge content to be displayed
* @param modifier Modifier to be applied to the badged box
* @param content Main content that will have the badge attached
*/
@Composable
fun BadgedBox(
badge: @Composable () -> Unit,
modifier: Modifier = Modifier,
content: @Composable BoxScope.() -> Unit,
)Usage Examples:
// Simple badge
Badge()
// Badge with count
Badge {
Text("3")
}
// Badge on an icon
BadgedBox(
badge = {
Badge {
Text("9+")
}
}
) {
Icon(Icons.Default.Notifications, contentDescription = "Notifications")
}
// Custom colored badge
Badge(
containerColor = MaterialTheme.colorScheme.error,
contentColor = MaterialTheme.colorScheme.onError
) {
Text("!")
}Default configurations for progress indicators.
object ProgressIndicatorDefaults {
/** Default color for circular progress indicators */
val circularColor: Color
@Composable get
/** Default color for linear progress indicators */
val linearColor: Color
@Composable get
/** Default track color for circular progress indicators */
val circularTrackColor: Color
@Composable get
/** Default track color for linear progress indicators */
val linearTrackColor: Color
@Composable get
/** Default stroke width for circular progress indicators */
val CircularStrokeWidth: Dp
/** Default stroke cap for indeterminate circular progress */
val CircularIndeterminateStrokeCap: StrokeCap
/** Default stroke cap for determinate circular progress */
val CircularDeterminateStrokeCap: StrokeCap
/** Default stroke cap for linear progress indicators */
val LinearStrokeCap: StrokeCap
}Default configurations for badges.
object BadgeDefaults {
/** Default container color for badges */
val containerColor: Color
@Composable get
}class TextLayoutResult(
val layoutInput: TextLayoutInput,
val multiParagraph: MultiParagraph,
val size: IntSize
) {
/** Whether the text has visual overflow */
val hasVisualOverflow: Boolean
/** First baseline of the text */
val firstBaseline: Float
/** Last baseline of the text */
val lastBaseline: Float
/** Number of lines in the text */
val lineCount: Int
/** Whether the text did exceed max lines */
val didOverflowHeight: Boolean
/** Whether the text did exceed the width */
val didOverflowWidth: Boolean
}interface ImageVector {
/** Name of the vector */
val name: String
/** Default width of the vector */
val defaultWidth: Dp
/** Default height of the vector */
val defaultHeight: Dp
/** Viewport width for drawing coordinates */
val viewportWidth: Float
/** Viewport height for drawing coordinates */
val viewportHeight: Float
/** Tint color for the vector */
val tintColor: Color
/** Tint blend mode */
val tintBlendMode: BlendMode
/** Auto-mirroring for RTL layouts */
val autoMirror: Boolean
/** Root group containing vector paths */
val root: VectorGroup
}enum class StrokeCap {
/** Flat edge at stroke ends */
Butt,
/** Rounded edge at stroke ends */
Round,
/** Square edge extending beyond stroke ends */
Square
}enum class TextOverflow {
/** Clip overflow text */
Clip,
/** Show ellipsis for overflow text */
Ellipsis,
/** Show visible overflow text */
Visible
}enum class TextAlign {
Left, Right, Center, Justify, Start, End
}class FontWeight(val weight: Int) {
companion object {
val Thin = FontWeight(100)
val ExtraLight = FontWeight(200)
val Light = FontWeight(300)
val Normal = FontWeight(400)
val Medium = FontWeight(500)
val SemiBold = FontWeight(600)
val Bold = FontWeight(700)
val ExtraBold = FontWeight(800)
val Black = FontWeight(900)
}
}enum class FontStyle {
Normal, Italic
}