enter image description here
i still confused using component view in jetpack compose,
please help me for making this one. thanks
i was tried but it's not like current view in figma
Card(modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 20.dp)
.wrapContentHeight(), elevation = 8.dp,
shape = RoundedCornerShape(25.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 4.dp)
.wrapContentHeight(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Image(painter = painterResource(id = R.drawable.ic_points_star_icon), modifier = Modifier
.padding(vertical = 8.dp)
.size(60.dp), contentDescription = "")
Column(modifier = Modifier
.weight(1f)
.padding(vertical = 8.dp), horizontalAlignment = Alignment.Start) {
Text(text = "Heading Text", style = AppTheme.typography.boldHeaderStyle)
Text(text = "This is sample body text", color = textColor.copy(0.4f), style = AppTheme.typography.captionTextStyle)
}
Button(
onClick = { /*Your on Click*/ },
shape = RoundedCornerShape(5.dp),
elevation = ButtonDefaults.elevation(
defaultElevation = 0.dp,
pressedElevation = 0.dp,
disabledElevation = 0.dp,
hoveredElevation = 0.dp,
focusedElevation = 0.dp,
),
colors = ButtonDefaults.buttonColors(
backgroundColor = BackArrowTint.copy(0.6f),
contentColor = Color.White
),
modifier = Modifier
.wrapContentHeight()
.padding(horizontal = 4.dp),
) {
Text(
text = "Buy Ticket",
modifier = Modifier.padding(vertical = 2.dp, horizontal = 4.dp),
color = White,
style = AppTheme.typography.buttonStyle,
)
}
}
}
Sample Image:
Related
I have a dialog where user have 2 option. each option have different Compose UI view. The problem is that the height of the dialog is never updated according to the user selected option. So Is there any way to change height of Dialog dynamically according to the content.
Here is my code which I am using to show a dialog
var type = remember { mutableStateOf("Adult") }
Dialog(
onDismissRequest = { onDismiss() }, properties = DialogProperties(
dismissOnBackPress = true, dismissOnClickOutside = true
),
) {
Card(
shape = RoundedCornerShape(12.dp),
modifier = Modifier.fillMaxWidth(),
elevation = 8.dp
) {
Column(
modifier = Modifier
.height(IntrinsicSize.Min)
.background(Color.White)
.padding(top = 10.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row() {
SemiBoldTextSmall(
text = "Adult",
textColor = if (type.value == "Adult") Color.Black else Color.LightGray,
fontSize = 14.sp,
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
.weight(1f)
.clickable {
type.value = "Adult"
})
SemiBoldTextSmall(text = "Kids",
textColor = if (type.value == "Kids") Color.Black else Color.LightGray,
fontSize = 14.sp,
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
.weight(1f)
.clickable {
type.value = "Kids"
})
}
if (type.value == "Kids") {
EditBox(modifier = Modifier
.padding(top = 10.dp, start = 20.dp, end = 20.dp)
.background(color = Color.White, shape = RoundedCornerShape(10.dp))
.border(
width = 1.dp,
color = Color.LightGray,
shape = RoundedCornerShape(10.dp)
)
.wrapContentSize(),
placeholder = "Mobile Number",
text = "",
textSize = 14.sp,
keyboardType = KeyboardType.Number,
onValueChange = {
})
} else {
EditBox(modifier = Modifier
.padding(top = 30.dp, start = 20.dp, end = 20.dp)
.background(color = Color.White, shape = RoundedCornerShape(10.dp))
.border(
width = 1.dp,
color = Color.LightGray,
shape = RoundedCornerShape(10.dp)
)
.wrapContentSize(),
placeholder = "Name",
text = "",
textSize = 14.sp,
onValueChange = {
})
EditBox(modifier = Modifier
.padding(top = 10.dp, start = 20.dp, end = 20.dp)
.background(color = Color.White, shape = RoundedCornerShape(10.dp))
.border(
width = 1.dp,
color = Color.LightGray,
shape = RoundedCornerShape(10.dp)
)
.wrapContentSize(),
placeholder = "Mobile Number",
text = "",
textSize = 14.sp,
keyboardType = KeyboardType.Number,
onValueChange = {
})
}
SemiBoldTextSmall(text = "+ ADD",
textColor = Color.White,
fontSize = 14.sp,
modifier = Modifier
.padding(top = 30.dp)
.fillMaxWidth()
.background(color = greenColor, shape = RectangleShape)
.padding(10.dp)
.clickable {
onSubmit()
})
}
}
}
Use Modifier.requiredHeight() instead of height()
Modifier.requiredHeight(): Declare the height of the content to be exactly the same as the min or max intrinsic height of the content.
I have the above UI Screen. In that layout the "Trash" icon should be aligned Vertically_centered , as of now its not Vertical Centered. How to achieve this in Jetpack compose without using Padding. Please find my code below in which I'm using a column with 2 rows in it.:
#Composable
fun DisplayShelfInfo(shelfHistoryItem: ShelfHistoryItem){
Column(modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.padding(top = 5.dp , bottom = 5.dp)
.background(color = colorResource(R.color.row_back_ground)),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally) {
Row(modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()){
Text(
text = stringResource(R.string.shelf_nr), color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Text(
text = (shelfHistoryItem.shelfId).toString(), color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Spacer(Modifier.weight(1f))
Image(
painter = painterResource(id = R.drawable.ic_delete),
modifier = Modifier
.padding(end = 5.dp)
.align(Alignment.CenterVertically)
.clickable {},
contentDescription = "Delete Image"
)
}
Row(modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()){
Text(
text = shelfHistoryItem.noOfArticles.toString(), color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Text(
text = stringResource(R.string.article_count_label), color = Color.Black,
)
}
}
}
Move the Image out of Row, and use 2 Columns.
Something like:
Row(
modifier = Modifier
.height(IntrinsicSize.Min) //important
.background(Red),
) {
Column(
modifier = Modifier
.weight(1f)
.padding(top = 5.dp, bottom = 5.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
Text(
text = "shelf_nr",
color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Text(
text = "shelfId", color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Spacer(Modifier.weight(1f))
}
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
Text(
text = "shelfHistoryItem", color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Text(
text = "article_count_label", color = Color.Black,
)
}
}
Column(
modifier = Modifier.fillMaxHeight(), //important
verticalArrangement = Arrangement.Center,
) {
Image(
painter = painterResource(id = R.drawable.ic_menu_camera),
modifier = Modifier
.padding(end = 5.dp)
.clickable {},
contentDescription = "Delete Image"
)
}
}
#Composable
fun BottomStrip() {
Row(modifier = Modifier
.fillMaxWidth()
.height(70.dp)
.background(color = colorResource(id = R.color.cgux_background_grey)),
horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(id = R.drawable.cgux_ic_keyboard_16),
modifier = Modifier
.width(36.dp)
.height(36.dp)
.border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base)))
.padding(5.dp)
.clickable {},
contentDescription = "Expandable Image",
colorFilter = ColorFilter.tint( colorResource(id = R.color.cgux_primary_500_base))
)
}
}
I have a composable function as above . My idea is to align image to right of Row with some padding on all sides of Image.
I also have to create border around image , which I did using border modifier.
The problem I'm facing is when I set border to Image , the padding is lost which means I don't see padding for Image. Image touch right end of the screen.Is there a way we can have padding for border as well.?
Adding the padding before border will solve your problem. Below is the full code.
#Composable
fun BottomStrip() {
Row(modifier = Modifier
.fillMaxWidth()
.height(70.dp)
.background(color = colorResource(id = R.color.cgux_background_grey)),
horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(id = R.drawable.cgux_ic_keyboard_16),
modifier = Modifier
.width(36.dp)
.height(36.dp)
.padding(5.dp)
.border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base)))
.padding(5.dp)
.clickable {},
contentDescription = "Expandable Image",
colorFilter = ColorFilter.tint( colorResource(id = R.color.cgux_primary_500_base))
)
}
}
In jetpack compose the order of modifiers is important. Official doc
You can use this solution and add padding before setting size for your image:
#Composable
fun BottomStrip() {
Row(modifier = Modifier
.fillMaxWidth()
.height(70.dp)
.background(color = colorResource(id = R.color.cgux_background_grey)),
horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(id = R.drawable.cgux_ic_keyboard_16),
modifier = Modifier
.padding(5.dp) // padding between Row and Image, you can remove it because you already set size for Image and Row
.border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base)))
.padding(5.dp) // padding between border and image
.size(36.dp)
.clickable {},
contentDescription = "Expandable Image",
colorFilter = ColorFilter.tint( colorResource(id = R.color.cgux_primary_500_base))
)
}
}
You can try like below.
#Composable
fun BottomStrip() {
Row(
modifier = Modifier
.fillMaxWidth()
.height(70.dp)
.background(color = Color.Cyan),
horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = R.drawable.ic_visa),
modifier = Modifier
.padding(5.dp)
.border(BorderStroke(1.dp, Color.Red))
.clickable {},
contentDescription = null
)
}
}
I want to display the icons below so the center one is overlapping.
I am trying to use the Box but not sure how to arrange them so they are overlapping and in the center of the screen.
I have started using a Box with 3 Box stacked on each other. But not sure about how to arrange them so the center slightly overlaps the left and right icons. And slightly higher.
fun SurveyIconScreen() {
Box {
Box(modifier = Modifier
.clip(CircleShape)
.size(22.dp)
.background(color = Color.White),
contentAlignment = Alignment.Center) {
Icon(painter = painterResource(id = R.drawable.ic_star), contentDescription = "Star")
}
Box(modifier = Modifier
.clip(CircleShape)
.size(22.dp)
.background(color = Color.White),
contentAlignment = Alignment.Center) {
Icon(painter = painterResource(id = R.drawable.ic_cart), contentDescription = "Star")
}
Box(modifier = Modifier
.clip(CircleShape)
.size(22.dp)
.background(color = Color.White),
contentAlignment = Alignment.Center) {
Icon(painter = painterResource(id = R.drawable.ic_cart), contentDescription = "Star")
}
}
}
You can apply an offset modifier to overlap the icons.
Also use the zIndex(1f) modifier to drawn the icon in the center on top of all other icons.
Something like:
val shape = RoundedCornerShape(4.dp)
val borderColor = LightGray
Row(
modifier = Modifier.fillMaxWidth().height(70.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
){
Icon(Icons.Outlined.Star, contentDescription = "Star",
modifier = Modifier
.offset(x = 3.dp)
.size(32.dp)
.border(BorderStroke(1.dp,borderColor), shape)
.background(White)
)
Icon(
Icons.Outlined.ShoppingCart,
contentDescription = "Star",
modifier = Modifier
.zIndex(1f)
.offset(y = -12.dp)
.size(32.dp)
.border(BorderStroke(1.dp,borderColor), shape)
.background(White)
)
Icon(Icons.Outlined.Note, contentDescription = "Star",
modifier = Modifier
.offset(x = -3.dp)
.size(32.dp)
.border(BorderStroke(1.dp,borderColor), shape)
.background(White)
)
}
I am trying to build the following component.
Following is my code,
#Composable
fun View(modifier: Modifier = Modifier){
Row(modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.spacedBy(10.dp),
verticalAlignment = Alignment.CenterVertically) {
IconButton(onClick = { /*TODO*/ },
modifier = Modifier
.background(shape = roundShape, color = Color.Blue)
.size(40.dp)) {
Icon(
painter = painterResource(id = R.drawable.ic_microphone_2),
contentDescription = null,
tint = Color.White
)
}
BasicTextField(
value = "",
onValueChange = { },
modifier=Modifier
.height(40.dp)
.fillMaxWidth()
.border(1.dp,Color.Gray,roundShape)
)
}
The content of the IconButton is no longer centered after switching the LayoutDirection to Rtl.
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
View()
}
this is the result of my code.
#Composable
fun IconView(modifier: Modifier = Modifier) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.spacedBy(10.dp),
verticalAlignment = Alignment.CenterVertically
) {
Box(modifier = Modifier
.background(shape = RoundedCornerShape(20.dp), color = Color.Blue)
.size(50.dp).clickable {
}
){
Icon(
modifier = Modifier.align(alignment = Center),
painter = painterResource(id = android.R.drawable.ic_menu_call),
contentDescription = null,
tint = Color.White
)
}
BasicTextField(
value = "",
onValueChange = { },
modifier = Modifier
.height(40.dp)
.fillMaxWidth()
.border(1.dp, Color.Gray, RoundedCornerShape(20.dp))
)
}
}
Don't use iconButton as parent use Box and align child Icon to center. I Hope it will help you. Cheers