Just like Sliver in Flutter or StaggeredGridLayoutManager in android reyclerview
so I can insert a banner or some thing else into grid layout
Both item and items have argument span, using which you can specify how many of grid placed each item takes:
val colors = listOf(
Color.Gray,
Color.Red,
Color.Cyan,
Color.Blue,
Color.LightGray,
Color.Yellow,
)
val columnsCount = 3
LazyVerticalGrid(columns = GridCells.Fixed(columnsCount)) {
items(6) {
Box(
modifier = Modifier
.height(100.dp)
.fillMaxWidth()
.background(colors[it])
)
}
items(3, span = { GridItemSpan(columnsCount) }) {
Box(
modifier = Modifier
.height(100.dp)
.fillMaxWidth()
.background(colors[it])
)
}
}
Result:
Related
I want to create a Image that add a border to yourself on onClick trigger. Here is my code:
#Composable
fun Dices(#DrawableRes dice: List<Int>, viewModel: DicesViewModel) {
Column(Modifier.padding(top = 28.dp, start = 10.dp, end = 10.dp, bottom = 26.dp), verticalArrangement = Arrangement.Bottom, horizontalAlignment = Alignment.CenterHorizontally) {
Row() {
Image(
painter = painterResource(id = dice[0]),
contentDescription = "Dice",
modifier = Modifier
.padding(2.dp)
.size(110.dp)
.clickable { Modifier.border(2.dp, Color.Black) /* doesnt work */ })
}
}
I have six more of these Image(), below, but i do not pase it here, because it's the same as here.
There is any way to add border to this?
I want to add a border to Image after click on it
Try this:
var isSelected by remember{ mutableStateOf(false)}
modifier = Modifier
.padding(2.dp)
.size(110.dp)
.border(if (isSelected) 2.dp else 0.dp, Color.Black)
.clickable { isSelected = !isSelected }
my question is different from the suggested question that is similar because I am making the voting bar change in effect from the parameters of the voting percentage. therefore I need the left column to change dynamically in size and the right column to change dynamically in size therefore I find it difficult to implement with a Stroke object.
what is the attribute of the modifier that I need to change to make the corners round? and the width a little smaller of a Row() element
I am trying to make an android app with jetpack compose,
in the process of implementing the Voting bar which is the bar in the middle with the 2 colors of red and blue.
I can't find the correct attribute to modify so the corners of the bar will be rounded and make the width different from .fillMaxWidth() in the modifier so I ended up using it until I will find a solution.
if you have any insights :) thanks in advance ~!
Figma Design
implementation in android
my code
#Composable
fun VotingBar(
modifier: Modifier = Modifier, leftyPercent: Int, rightyPercent: Int
) {
var leftyPercentWeight: Float = (leftyPercent / 10).toFloat()
var rightyPercentWeight: Float = (rightyPercent / 10).toFloat()
Row(
modifier = modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.White)
.border(1.dp, Color.Black, CircleShape)
) {
Column(
// add rounded corners to the left side
modifier = Modifier
.background(Color(0xFFA60321))
.height(50.dp)
.weight(leftyPercentWeight)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
}
Column(
modifier = Modifier
.background(Color(0xFF03588C))
.height(50.dp)
.weight(rightyPercentWeight)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
// add rounded corners to the right side
) {}
}
Row(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.White),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Row {
Box(
modifier = Modifier
.size(30.dp)
.clip(CircleShape)
.background(Color(0xFFA60321))
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = "Right $rightyPercent%", fontSize = 20.sp, fontWeight = FontWeight.Bold
)
}
Row() {
Box(
modifier = Modifier
.size(30.dp)
.clip(CircleShape)
.background(Color(0xFF03588C))
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = "Left $leftyPercent%", fontSize = 20.sp, fontWeight = FontWeight.Bold
)
}
}
}
I followed the 5 steps tutorial at the leading developer's website but I fill still a beginner.
You can wrap the 2 Row in a Column applying a padding modifier (to avoid the full width) and an horizontalAlignment.
Then in the 1st Row apply a clip modifier to achieve the rounded shape.
Something like:
val shape = RoundedCornerShape(32.dp)
Column(
Modifier.padding(16.dp),
horizontalAlignment= Alignment.CenterHorizontally
) {
Row(
modifier = modifier
.fillMaxWidth()
.height(32.dp)
.background(Color.White)
.clip(shape)
.border(1.dp, Color.Black, shape)
) {
Column(
// add rounded corners to the left side
modifier = Modifier
.background(Color(0xFFA60321))
.weight(leftyPercentWeight)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
}
Column(
modifier = Modifier
.background(Color(0xFF03588C))
.weight(rightyPercentWeight)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
// add rounded corners to the right side
) {}
}
//2nd Row
}
I have elements that I loop through and clicked element changes background to green. I want every element to fill all the free space that is available in the Row. But if I provide weight(1f) it shows only one element that takes all the space, but there should be three elements or whatever count of elements I have passed from outside.
#Composable
fun BottomMenu(
items: List<BottomMenuContent>,
modifier: Modifier = Modifier,
activeHighlightColor: Color = Green,
activeTextColor: Color = Color.White,
inactiveTextColor: Color = Color.Black,
initialSelectedItemIndex: Int = 0
) {
var selectedItemIndex by remember {
mutableStateOf(initialSelectedItemIndex)
}
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = modifier
.fillMaxWidth()
.background(Gray)
.padding(4.dp)
) {
items.forEachIndexed { index, item ->
BottomMenuItem(
item = item,
isSelected = index == selectedItemIndex,
activeHighlightColor = activeHighlightColor,
activeTextColor = activeTextColor,
inactiveTextColor = inactiveTextColor
) {
selectedItemIndex = index
}
}
}
}
#Composable
fun BottomMenuItem(
modifier: Modifier = Modifier,
item: BottomMenuContent,
isSelected: Boolean = false,
activeHighlightColor: Color = Green,
activeTextColor: Color = Color.White,
inactiveTextColor: Color = Color.Black,
onItemClick: () -> Unit
) {
Row( ) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.clickable {
onItemClick()
}
.background(if (isSelected) activeHighlightColor else Color.Transparent)
.weight(1f)
.padding(top = 14.dp, bottom = 14.dp,)
) {
Text(
text = item.title,
color = if(isSelected) activeTextColor else inactiveTextColor
)
}
}}
Remove the weight from the box and instead put it in its parent Row, I modified your code and please look where the weight is placed.
Your BottomMenu
#Composable
fun BottomMenu() {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.background(Color.LightGray)
.fillMaxWidth()
) {
(0..7).forEach {
BottomMenuItem()
}
}
}
Your BottomMenuItem
#Composable
fun RowScope.BottomMenuItem() {
Row(
modifier = Modifier.weight(1f) // remove the weight from the box inside and put it over here instead
) {
Box(
modifier = Modifier
.background(Color.Green)
// remove the weigth(1f) from here
) {
Text(
modifier = Modifier.fillMaxWidth(),
text = "Test",
color = Color.DarkGray
)
}
}
}
Your BottomMenuItem is an extension of a RowScope, so its top level composable can be configured with Row properties such as weight
Output of the code above.
I am making an app that basically allows the user to search through a list of card composables, each with a heading and a body of text. My question is about changing the color of the background for each card to be a different color from a list of colors I have created. I somehow need to iterate through the list of colors and pass a different color each time and I'm not sure how I do that. Here is some code:
LazyColumn(
modifier = Modifier
.fillMaxSize()
.background(color = matte_black)
) {
val list = if (searching) searchResults else allReadings
list.value.let { list ->
items(list.size) { i ->
val reading = list[i]
ReadingItem(reading, **TODO("Add Color")**)
}
}
}
and the composable ReadingItem:
fun ReadingItem(
reading: ReadingData,
**color : Color**
) {
val context = LocalContext.current
val resources = context.resources
val displayMetrics = resources.displayMetrics
val screenWidth = displayMetrics.widthPixels / displayMetrics.density
val spacing = 16.dp
val scroll = rememberScrollState()
Card(
shape = RoundedCornerShape(4.dp),
backgroundColor = color, TODO("This is where i would like the color to iterate through the list")
modifier = Modifier.padding(16.dp)
) {
Column(
modifier = Modifier.width(screenWidth.dp - (spacing * 2)),
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.Start
) {
Text(
text = reading.title,
modifier = Modifier.padding(8.dp),
textAlign = TextAlign.Start,
style = TextStyle(
color = milk_white,
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
)
//Spacer(modifier = Modifier.padding(4.dp))
Text(
text = reading.reading,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(8.dp)
.height(100.dp)
.verticalScroll(
state = scroll),
style = TextStyle(
color = milk_white,
fontSize = 16.sp
)
)
}
}
}
and finally, the list of colors:
fun getColors() : List<Color> {
return listOf(
flame_red, orange, ucla_gold, green, tropaz, calypso, plum
)
}
If anyone has any advice it would be very appreciated! Thank you
This should give a basic idea.
Code
#Composable
fun ColourCards() {
val colors = listOf(Color.Blue, Color.Green, Color.Magenta, Color.Gray, Color.Cyan)
LazyColumn {
items(40) {
Box(
Modifier
.fillMaxWidth()
.padding(
horizontal = 16.dp,
vertical = 4.dp,
)
.background(colors[it % colors.size])
.height(80.dp),
)
}
}
}
How to satisfy both spacedBy(8.dp) and .End
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
}
Row(horizontalArrangement = Arrangement.End) {
}
Adding Spacer as the first row element with weight modifier is equivalent of Arrangement.End:
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Spacer(modifier = Modifier.weight(1f))
Box(
Modifier
.size(30.dp)
.background(Color.Red))
Box(
Modifier
.size(30.dp)
.background(Color.Green))
}
If you need to layout your other items with weight modifier, you can wrap it in one more Row:
Row {
Spacer(modifier = Modifier.weight(1f))
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Box(
Modifier
.size(30.dp)
.background(Color.Red)
)
Box(
Modifier
.size(30.dp)
.background(Color.Green)
)
}
}