I'm making a Login page on Jetpack compose. I'm using themes with MaterialTheme. When I choose the background colour as white, it shows me a dark grey colour. I can use all other colours, but if I use white, it is not working.
Here´s the code:
#Composable
fun LoginScreen() {
ReportAppTheme(darkTheme = false){
Column(
modifier = Modifier
.fillMaxSize()
.background(color = MaterialTheme.colors.background),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.SpaceAround
){}
And this is my theme.kt
private val LightColorPalette = lightColors(
primary = Main3,
primaryVariant = Main1,
onPrimary = white,
secondary = Teal200,
secondaryVariant = Teal_600,
onSecondary = black,
error = red_dark,
background = white ,
onError = red_light,
onBackground = black,
surface = white,
onSurface = black
)
#Composable
fun ReportAppTheme(
darkTheme: Boolean,
content: #Composable () -> Unit,
) {
MaterialTheme(
colors = if(darkTheme) DarkColorPalette
else LightColorPalette
) {
content()
}
}
I gave this a look and it shows white for me. Ran on a real device.
My only ideas are, your white is not defined as white or your actually in dark mode.
It's the elevation that change your color.
Try to add your composable function inside a surface like that
Surface(
modifier = Modifier.fillMaxSize(),
elevation = 0.dp,
color = MaterialTheme.colors.background
)
You will see that the white will be white :)
Related
I have such an implemenation
Surface(
modifier = Modifier.background(Color.Transparent),
shape = RoundedCornerShape(corner = CornerSize(2.dp)),
border = BorderStroke(width = 1.dp, color = showpageColorAgvotBoarder)
) {
Text(
modifier = Modifier.padding(2.dp),
text = item,
style = ShowpageAgvotStyle
)
}
the result I get is
Like entire background is black, however, surface backgroudn is white...
I need just a boarder and background of surface should be transparent (in this case black as entire background is black)
What am I doing wrong?
You need to use color = Color.Transparent parameter instead of Modifier.background(Color.Transparent)
Surface(
modifier = Modifier,
shape = RoundedCornerShape(corner = CornerSize(2.dp)),
border = BorderStroke(width = 1.dp, color = Color.Red),
color = Color.Transparent // This is what you're missing
) {
Text(
modifier = Modifier.padding(2.dp),
text = "item",
color = Color.Gray
)
}
Surface has a new color parameter that dictates the color instead of the modifier.
The background color of the Surface is based on the color attribute.
By default is:
MaterialTheme.colors.surface (M2)
MaterialTheme.colorScheme.surface (M3).
Use:
Surface(
color = Color.Transparent,
//..
) {
//...
}
I am working on ripple effect in jetpack compose. I provide my color and after clicking on view it show some time after that different type of color showing like dark grey on press state.
binding.itemComposable.setContent {
Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
val options = getOptions()
options.forEachIndexed { _, optionText ->
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
val textColor = if (isPressed) TealBlue else Slate
val borderWidth = if (isPressed) 1.dp else 0.dp
val borderColor = if (isPressed) Aqua else OffWhite
Surface(
onClick = {
logE("Item Click")
},
shape = RoundedCornerShape(4.dp),
border = BorderStroke(borderWidth, borderColor),
interactionSource = interactionSource
) {
Text(
modifier = Modifier
.fillMaxWidth()
.background(backgroundColor)
.padding(16.dp),
text = optionText,
style = Typography.h3,
fontWeight = FontWeight.Medium,
color = textColor
)
}
}
}
}
Expected Output
Above image is see clearly ripple effect.
Actual output
I cannot add image, instead i added my youtube video. Please have a look.
val DuckEggBlue = Color(0xFFF0FCFC)
This is my color which I am using.
Can anyone guide me what is wrong here.
UPDATE
I tried from this doc
#Immutable
private object SecondaryRippleTheme : RippleTheme {
#Composable
override fun defaultColor() = RippleTheme.defaultRippleColor(
contentColor = DuckEggBlue,
lightTheme = true
)
#Composable
override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
contentColor = DuckEggBlue,
lightTheme = true
)
}
In my code
CompositionLocalProvider(LocalRippleTheme provides SecondaryRippleTheme) {
Text(
modifier = Modifier
.fillMaxWidth()
.background(OffWhite)
.padding(16.dp),
text = optionText,
style = Typography.h3,
fontWeight = FontWeight.Medium,
color = textColor
)
}
but nothing works. It still grey ripple effect.
I tried many options Box, Surface, using PointerInput to delay but maybe visually it doesn't work when you change background color with same ripple
Surface(
modifier = Modifier
.indication(
interactionSource = interactionSource,
rememberRipple(
color = Color.Cyan
)
)
,
shape = RoundedCornerShape(4.dp),
contentColor = backgroundColor,
border = BorderStroke(borderWidth, borderColor),
onClick = {},
interactionSource = interactionSource
) {
Text(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
text = optionText,
fontWeight = FontWeight.Medium,
color = textColor
)
}
With Color.Cyan
If you don't change color when pressed ripple is more apparent but your color is too light to apply for ripple as i tested with other colors.
with PointerInput I tried by changing is pressed to Boolean with initial false value
Modifier.pointerInput(Unit) {
detectTapGestures(onPress = { offset ->
isPressed = true
val press = PressInteraction.Press(offset)
// delay(50)
interactionSource.emit(press)
tryAwaitRelease()
interactionSource.emit(PressInteraction.Release(press))
isPressed = false
})
}
Hey guys I am using RoundedCornerShape(4.dp) to my Surface which looks fine. When I tried to click on the item it not showing me 4dp corner in Surface. I tried this stack overflow 1 and stack overflow 2 but nothing works.
binding.itemComposable.setContent {
Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
val options = getOptions()
options.forEachIndexed { _, optionText ->
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
val textColor = if (isPressed) TealBlue else Slate
val borderWidth = if (isPressed) 1.dp else 0.dp
val borderColor = if (isPressed) Aqua else OffWhite
val clickable = Modifier.clickable(
interactionSource = interactionSource,
indication = rememberRipple(true)
) {
println("Item Click")
}
Surface(
modifier = Modifier
.then(clickable)
.border(borderWidth, borderColor),
shape = RoundedCornerShape(4.dp)
) {
Text(
modifier = Modifier
.fillMaxWidth()
.background(backgroundColor)
.padding(16.dp),
text = optionText,
style = Typography.h3,
fontWeight = FontWeight.Medium,
color = textColor
)
}
}
}
}
Without click on item corner is 4 dp
When I click it's not changing corner
If you want to handle the click on a Surface you have to use the function that accepts an onClick():
Surface(
onClick = {},
shape = RoundedCornerShape(4.dp),
border = BorderStroke(borderWidth,borderColor),
interactionSource = interactionSource
)
Create a variable for shape
val shape = RoundedCornerShape(4.dp)
Use it in Modifier.clip() and Modifier.border() like this,
Surface(
modifier = Modifier
.clip(shape)
.border(
width = borderWidth,
color = borderColor,
shape = shape,
)
.then(clickable),
// shape = shape,
)
shape in border() specifies the shape of the border which by default is RectangleShape. Hence, you are seeing the rectangle border.
shape in clip() changes the shape of the composable before the click action is added. This is to make the ripple effect appear only on the given shape.
Note: Order of modifiers are important.
The shape in the Surface may not be needed after these changes.
If youre using Surface to wrapping the content, try to add a container inside the content for example Box or Column. Then use your Surface only as a shape mask, the background and other content will be flexible as you want.
This is the example
Surface(
modifier = Modifier
.then(clickable)
.border(borderWidth, borderColor),
shape = RoundedCornerShape(4.dp)
) {
Box(modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
.background(Color.Green)){
Text(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
text = optionText,
style = Typography.h3,
fontWeight = FontWeight.Medium,
color = textColor
)
}
}
Android Jetpack compose Card draws a border around the card when background color has some transparency. This is how it looks in AS:
But this is how it looks in the app:
If I set background to a solid color it works, but by default backgroundColor is a surface color from material (in my app val white850 = Color(0xD9FFFFFF)) and it looks like on the picture above.
#Composable
fun TraitCard(trait: Trait) {
Card(
shape = MaterialTheme.shapes.small,
modifier = Modifier.size(width = 192.dp, height = 56.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start
) {
Icon(
imageVector = Icons.Rounded.ChildFriendly,
contentDescription = "",
modifier = Modifier
.fillMaxHeight()
.background(color = MaterialTheme.colors.background)
.aspectRatio(1f)
.padding(8.dp),
tint = MaterialTheme.colors.onBackground
)
Text(
text = trait.name,
style = MaterialTheme.typography.h3,
modifier = Modifier.padding(horizontal = 16.dp),
)
}
}
}
Does anyone have a clue why it's happening?
This is because of the elevation that Card has by default (and how shadows are drawn), if you remove the elevation this won't happen.
You can try to convert the semitransparent color to the non transparent one with something like:
backgroundColor = Color(0xD9FFFFFF).compositeOver(Color.White),
I want to achieve this layout:
In XML I would add an image in a relative layout with match_parent attributes, then a view with a black half-transparent background set to match_parent as well, then the content.
In compose I made this composeable:
#Composable
fun ImageCover(resourceId: Int, alpha: Float = 0.5f, content: #Composable () -> Unit) {
Box(modifier = Modifier.fillMaxSize()) {
Image(
painter = painterResource(id = resourceId),
contentDescription = null,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
Surface(
color = Color.Black, modifier = Modifier
.fillMaxSize()
.alpha(alpha)
) {
content()
}
}
}
But the problem is alpha is applied to the surface and its content. So no matter what I put in the content, even if it's another surface with a background, will also be half transparent. Here, for example, the two sentences and two components at the bottom will be half transparent as well.
The background color of the Surface is based on the color attribute.
Apply the alpha to the color property instead of the Modifier.
Something like:
Surface(
color = Color.Black.copy(alpha = 0.6f),
modifier = Modifier.fillMaxSize()
){
//....
}