Examples with Styles

The following documentation contains examples of using Styles to create certain kinds of components.

Buttons

Styles can be used to create many different kinds of buttons that may be different from standard Material components.

Base button

Consider the following button defined as a base for different types of buttons:

@Composable
funBaseButton(
onClick:()->Unit,
modifier:Modifier=Modifier,
style:Style=Style,
enabled:Boolean=true,
interactionSource:MutableInteractionSource? =remember{
MutableInteractionSource()
},
content:@ComposableRowScope.()->Unit
){
valstyleState=rememberUpdatedStyleState(interactionSource){
it.isEnabled=enabled
}
Row(
modifier=modifier
.semantics(properties={
role=Role.Button
})
.clickable(
enabled=enabled,
onClick=onClick,
interactionSource=interactionSource,
indication=null,
)
.styleable(styleState,baseButtonStyle,style),
content=content,
verticalAlignment=Alignment.CenterVertically
)
}
Button.kt 

Hover background translation button

To define a button with a background that moves on hover, use the following code:

@Preview
@Composable
funHoverButtonExample(){
Box(
modifier=Modifier.padding(32.dp),
contentAlignment=Alignment.Center
){
BaseButton(
onClick={},
style=Style{
background(Color.Transparent)
shape(RoundedCornerShape(0.dp))
border(1.dp,Color.Black)
contentColor(Color.Black)
fontSize(16.sp)
fontWeight(FontWeight.Light)
letterSpacing(1.sp)
contentPadding(vertical=13.dp,horizontal=20.dp)
dropShadow(
Shadow(
spread=0.dp,color=Color(0xFFFFE54C),
radius=0.dp,
offset=DpOffset(7.dp,7.dp)
)
)
hovered{
animate(tween(200)){
dropShadow(
Shadow(
spread=0.dp,color=Color(0xFFFFE54C),
radius=0.dp,
offset=DpOffset(0.dp,0.dp)
)
)
}
}
pressed{
animate(tween(200)){
dropShadow(
Shadow(
spread=0.dp,color=Color(0xFFFFE54C),
radius=0.dp,
offset=DpOffset(0.dp,0.dp)
)
)
}
}
}
){
BaseText("Button 52")
}
}
}
Examples.kt 

Rounded depth button with shadow animation

To create a button with a depth press effect that translates the shadow up and down on pressed, the following is how it can be achieved:

@Preview
@Composable
funShadowAnimationButton(){
Box(modifier=Modifier.padding(32.dp)){
valdensity=LocalDensity.current
valbuttonStyle=Style{
background(Color(0xFFFBEED0))
border(2.dp,Color(0xFF422800))
shape(RoundedCornerShape(30.dp))
dropShadow(
Shadow(
color=Color(0xFF422800),offset=DpOffset(4.dp,4.dp),
radius=0.dp,spread=0.dp
)
)
contentColor(Color(0xFF422800))
fontWeight(FontWeight.SemiBold)
fontSize(18.sp)
contentPaddingHorizontal(25.dp)
externalPadding(8.dp)
height(50.dp)
textAlign(TextAlign.Center)
hovered{
animate{
background(Color.White)
}
}
pressed{
animate{
dropShadow(
Shadow(
color=Color(0xFF422800),
offset=DpOffset(2.dp,2.dp),
radius=0.dp,
spread=0.dp
)
)
translation(with(density){2.dp.toPx()},with(density){2.dp.toPx()})
}
}
}
BaseButton(
onClick={},
style=buttonStyle
){
BaseText("Button 74")
}
}
}
Examples.kt 

Multiple layered styles with pressed animation

The following code creates a button that has a depth pressed effect with Styles, that has multiple layers of styles, that all use the same StyleState:

@Preview
@Composable
funMultipleStylesButton(){
valinteractionSource=remember{MutableInteractionSource()}
valstyleState=remember(interactionSource){MutableStyleState(interactionSource)}
valdensity=LocalDensity.current
Box(
modifier=Modifier
.styleable(styleState){
size(200.dp,48.dp)
externalPadding(32.dp)
}
.clickable(interactionSource,indication=null){},
contentAlignment=Alignment.Center
){
valedgeStyle=Style{
fillSize()
shape(RoundedCornerShape(16.dp))
background(Color(0xFF1CB0F6))
}
valfrontStyle=Style{
fillSize()
background(Color(0xFF1899D6))
shape(RoundedCornerShape(16.dp))
contentPadding(vertical=12.dp,horizontal=16.dp)
translationY(with(density){(-4).dp.toPx()})
pressed{
animate{
translationY(with(density){(0).dp.toPx()})
}
}
}
Box(modifier=Modifier
.semantics(properties={
role=Role.Button
})
.styleable(styleState,edgeStyle)){
Box(
modifier=Modifier
.styleable(styleState,frontStyle),
contentAlignment=Alignment.Center
){
BaseText(
"Button 19".toUpperCase(Locale.current),
style=Style{
contentColor(Color.White)
fontSize(15.sp)
fontWeight(FontWeight.Bold)
letterSpacing(0.8.sp)
}
)
}
}
}
}
Examples.kt