Develop Reference

Text Field Gradient Border On Focus Jetpack Compose?

I am trying to change a gradient border on the input focus. The example below is what I want to achieve, but how can I make 'focusedBorderColor' into a gradient border?
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = md_theme_light_primary,
unfocusedBorderColor =md_theme_light_inversePrimary,
focusedLabelColor = Color.White,
trailingIconColor = Color.White,
// disabledTextColor = NaviBlue
),

You can use CardView() with BasicTextField()
var name by remember {
mutableStateOf("")
}
val interactionSource = remember { MutableInteractionSource() }
val isFocused by interactionSource.collectIsFocusedAsState()
val focusRequester = remember {
FocusRequester()
}
Card(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 20.dp, vertical = 20.dp)
.shadow(ambientColor = Color.Blue, spotColor = Color.Cyan, elevation = if (isFocused) 15.dp else 0.dp, clip = true, shape = CircleShape) ,
shape = CircleShape
) {
BasicTextField(
value = name,
onValueChange = { name = it },
interactionSource = interactionSource,
modifier = Modifier
.fillMaxWidth()
.border(
width = 1.dp,
brush = Brush.horizontalGradient(listOf(Color.Cyan, Color.Blue)),
shape = CircleShape
)
.padding(16.dp)
.background(Color.White)
.focusRequester(focusRequester),
)
}
Below is sample gif!

How to handle border and background in compose shape?

In the code the image border only on the sides, not on the corners.
for the button, the background goes out of the shape/border.
I only managed to "fix" the button by using a fixed height but I don't understand why a fixed height help and I wonder if there is another way to do this.
#Composable
fun Test(){
Column(modifier = Modifier.padding(5.dp)) {
Image(
painter = painterResource(id = R.drawable.ic_close),
contentDescription = null,
modifier = Modifier
.clip(CircleShape)
.border(1.dp, Color.Red)
.size(20.dp)
)
OutlinedButton(
onClick = { },
border = BorderStroke(1.dp, Color.Red),
shape = RoundedCornerShape(5.dp),
modifier = Modifier
.clip(RoundedCornerShape(5.dp))
.fillMaxWidth()
.background(Color.Green)
) {}
}
}

For the Image, remove the clip modifier and use the shape inside the border parameter:
Image(
painter = painterResource(id = R.drawable.ic_xxx),
contentDescription = null,
modifier = Modifier
//.clip(CircleShape)
.border(1.dp, Color.Red, CircleShape)
.size(20.dp)
)
For the OutlinedButton use the colors attribute to assign the background color instead of the Modifier.background
OutlinedButton(
onClick = { },
border = BorderStroke(1.dp, Color.Red),
shape = RoundedCornerShape(5.dp),
modifier = Modifier
//.clip(RoundedCornerShape(5.dp))
.fillMaxWidth(),
//.background(Color.Green),
colors = ButtonDefaults.outlinedButtonColors(backgroundColor = Green),
)

JetPack Compose Button with drawable

How can we achieve this in jetpack compose
I'm doing something like this
Button(
elevation = ButtonDefaults.elevation(
defaultElevation = 0.dp,
pressedElevation = 8.dp,
disabledElevation = 0.dp
),
onClick = { onClick },
shape = RoundedCornerShape(28.dp),
modifier = modifier
.fillMaxWidth()
.shadow(0.dp),
contentPadding = PaddingValues(15.dp),
colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
border = BorderStroke(1.dp, Color.Grey)
) {
Box(modifier = modifier.fillMaxWidth(),
contentAlignment = Alignment.Center) {
Icon(
imageVector = imageVector,
modifier = Modifier
.size(18.dp),
contentDescription = "drawable icons",
tint = Color.Unspecified
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = buttonText,
color = Color.Black,
textAlign = TextAlign.Center
)
}
}
So as you can see the Google logo is just left of the text I need it at the start of the box so how can I do this.

You can use align(Alignment.CenterStart) on the Icon's Modifier parameter to center the icon around the start of the Box Composable. This alignment will have priority over the Box's alignment parameter.
You can also delete the Spacer composable because the Box layout children are stacked one on top of the other in the composition order. So the Spacer composable is basically laying below the Text composable in the center.
If you want some space between the Icon and the Text, you could use some padding around the Icon instead.
Try this (It worked for me) :
Box(modifier = modifier.fillMaxWidth(),
contentAlignment = Alignment.Center) {
Icon(
imageVector = imageVector,
modifier = Modifier
.size(18.dp)
.align(Alignment.CenterStart),
contentDescription = "drawable icons",
tint = Color.Unspecified
)
Text(
text = buttonText,
color = Color.Black,
textAlign = TextAlign.Center
)
}

#Composable
fun GoogleButton(
modifier: Modifier = Modifier,
imageVector: ImageVector,
buttonText: String,
onClick: (isEnabled: Boolean) -> Unit = {},
enable: Boolean = true,
backgroundColor: Color,
fontColor: Color,
) {
Button(
onClick = { onClick(enable) },
modifier = modifier
.fillMaxWidth()
.shadow(0.dp)
.noInteractionClickable(enabled = false) { onClick(enable) },
elevation = ButtonDefaults.elevation(
defaultElevation = 0.dp,
pressedElevation = 0.dp,
hoveredElevation = 0.dp,
focusedElevation = 0.dp
),
shape = RoundedCornerShape(28.dp),
contentPadding = PaddingValues(15.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = backgroundColor,
contentColor = fontColor
),
border = BorderStroke(1.dp, MaterialTheme.colors.getButtonBorderStroke)
) {
Box(
modifier = Modifier
.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
Row(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.CenterStart)
) {
Spacer(modifier = Modifier.width(4.dp))
Icon(
imageVector = imageVector,
modifier = Modifier
.size(18.dp),
contentDescription = "drawable_icons",
tint = Color.Unspecified
)
}
Text(
modifier = Modifier.align(Alignment.Center),
text = buttonText,
color = MaterialTheme.colors.loginButtonTextColor,
textAlign = TextAlign.Center,
fontSize = 16.sp,
fontFamily = FontFamily(
Font(
R.font.roboto_medium
)
)
)
}
}
}

As suggested in other answers you can wrap the content with a Box.
As alternative you can simply use the RowScope of the Button without any container.
Just apply a weight(1f) modifier to the Text and an offset(x=- iconWidth/2).
Something like:
Button(
//....
) {
Icon(
imageVector = imageVector,
modifier = Modifier.size(iconWidth),
contentDescription = "drawable icons",
tint = Color.Unspecified
)
Text(
text = "Button",
color = Color.Black,
textAlign = TextAlign.Center,
modifier = Modifier
.weight(1f)
.offset(x= -iconWidth/2) //default icon width = 24.dp
)
}
If you want to use a Box, remove the contentAlignment = Alignment.Center in the Box and use:
Box(modifier = Modifier.fillMaxWidth()) {
Icon( /* ..... */ )
Text(
modifier = Modifier.fillMaxWidth(),
text = "buttonText",
textAlign = TextAlign.Center
)
}

Box doesn't provide bounds, so for longer texts, it causes overlapping. Row works better for me. Also, you can use Spacer here which is not possible for Box. In my case, I have used spacedBy as a replacement for Spacer:
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(
painter,
contentDescription = null
)
Box(
modifier = Modifier.weight(1F),
contentAlignment = Alignment.Center
) {
Text(buttonText)
}
}

Box(contentAlignment = Center){
Icon(Modifier.align(CenterStart))
Text()
}

How to get OutlinedTextField with gradient boarder in Jetpack Compose?

I'm trying to get an OutlinedTextField with gradient border like this one:
But I can add only a single color to the outline,
OutlinedTextField(
value = email,
onValueChange = {email = it},
label = { Text(text = "Email Address") },
modifier = Modifier
.fillMaxWidth(.8f)
.padding(4.dp),
colors = TextFieldDefaults.outlinedTextFieldColors(unfocusedBorderColor = Color.Green)
)
If I add a border with modifier then the gradient is applied to the border, not to the outline:
Modifier.border(width = 1.dp, brush = gradient, shape = RoundedCornerShape(12.dp))
How can I add gradient color to the outline?

so far that i know OutlinedTextField does't support gradient border. But if really want to use gradient border in text field you can try BasicTextField
var name by remember {
mutableStateOf("")
}
BasicTextField(
value = name,
onValueChange = { name = it },
cursorBrush = Brush.horizontalGradient(listOf(Color.Red, Color.Green)),
modifier = Modifier
.fillMaxWidth(),
decorationBox = { innerTextField ->
Row(
modifier = Modifier
.fillMaxWidth()
.border(
brush = Brush.horizontalGradient(listOf(Color.Green, Color.Blue)),
width = 1.dp,
shape = CircleShape
)
.padding(16.dp)
) {
Icon(Icons.Default.Email, contentDescription = "")
Spacer(modifier = Modifier.padding(3.dp))
innerTextField()
}
}
)
and this is the final result
you can learn more about basic text field by looking the sample
[BasicTextField Samples][2]

No ripple effect in Jetpack Compose

There is no ripple effect when I click on MyBox() I've added MyTheme(){} to main #Composable screen but it doesn't work. Is something missing?
#Composable
private MyBox(onClickInvoked: () -> Unit) {
MyAppTheme(isSystemInDarkTheme()) {
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.clip(RoundedCornerShape(10.dp))
.background(MaterialTheme.colors.onBackground)
.clickable(onClick = { onClickInvoked.invoke() })
.padding(horizontal = 10.dp, vertical = 15.dp)
) {
Text(
text = "My text",
modifier = Modifier
.align(Alignment.CenterStart)
.padding(end = 95.dp)
.wrapContentWidth()
.wrapContentHeight(),
color = MaterialTheme.colors.primary
)
Image(
painter = painterResource(R.drawable.icon),
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(end = 20.dp)
.size(60.dp)
)
}
}
}

With compose 1.0.5, I see the default indication after set clickable is
LocalIndication.current. And LocalIndication.current is PlatformRipple. Therefore, after you set clickable to your Box, it will have ripple effect.
In your case, I think the ripple effect won't display because your Box background is too dark (normally MaterialTheme.colors.onBackground is black on Light theme)
I think you can change the ripple effect color to make it easy to see.
Surface(
onClick = { onClickInvoked.invoke() },
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(10.dp),
color = MaterialTheme.colors.onBackground, // normally it is black on Light theme
indication = rememberRipple(color = Color.White) // color for your ripple, you can use other suitable MaterialTheme.colors for your case to support Light/Dark mode
) {
Box(modifier = Modifier.padding(horizontal = 10.dp, vertical = 15.dp)) {
// your Box content
...
}
}
There is a Modifier.indication but after testing I see it not working with Modifier.clickable so I use Surface

I don't really know if there is a problem with your theme. I try to pass the material theme, and the ripples will display normally
MaterialTheme() {
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.clip(RoundedCornerShape(10.dp))
.background(MaterialTheme.colors.secondary)
.clickable(onClick = { t = "My text" })
.padding(horizontal = 10.dp, vertical = 15.dp)
) {
Text(
text = t,
modifier = Modifier
.align(Alignment.CenterStart)
.padding(end = 95.dp)
.wrapContentWidth()
.wrapContentHeight(),
color = MaterialTheme.colors.primary
)
Image(
painter = painterResource(R.drawable.ic_launcher_foreground),
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(end = 20.dp)
.size(60.dp),
contentDescription = ""
)
}
}