Hi guys, I'm trying to create transparent chip view for genders `Male` & `Female`. I'm repeatin...

# compose

[Spikey Sanju]

Hi guys, I'm trying to create transparent chip view for genders Male & Female. I'm repeating this code block for two times here. Below code works but I guess it can be optimised. Any Suggestion?

I have also attached image of the both chip views

[Spikey Sanju]

Guys, I optimised in this way 🙌.. Thanks

[Javier]

Yeah, I deleted the comment because I haven't finished to read the previous comment.

It is better to put all related content in the same thread

[Spikey Sanju]

Sure will do 👍

[jossiwolf]

This works, but now you're essentially defining your models in your UI layer. You could think about extracting the data into a model:

data class Gender(val name: String, val color: Color)

@Composable
fun ContentHost() {
    val genders = listOf(
        Gender("Male", Color.Blue),
        Gender("Female", Color.Red),
        Gender("Non-Binary", Color.Green)
    )
    Column {
       genders.forEach { gender ->
           ChipTag(gender.name, gender.color)
       }
    }
}

[joakim]

@jossiwolf extra points for adding more genders.

[Spikey Sanju]

But the reason why I added only male & female genders because, I'm creating this application for dogs 😅..

#AndroidDevChallenge

[joakim]

:D fair enough. Although who are we to assume the gender of our furry friends.

[Javier]

Maybe instead of a data class, I would use an enum

[Javier]

So if you add something later, you will not need to add it manually to the list or change something in the composable

[Se7eN]

I'd use a sealed class

[Javier]

Why a sealed class?

[TheMrCodes]

If you use a enum you could say that the GenderTag function takes a Gender Object as parameter and Takes the name and color from there. The code could then look like this: (No guarantee that it works without small errors wrote it on my phone)

enum class Gender(tagColor: Color) {
    Female(R.color.blue)
    Male(R.color.red)
}

fun GenderTag(gender: Gender) {
   ChipView(gender.name, colorResource(gender.color))
}

[Se7eN]

@Javier Maybe if later I was required to have different colors (or some other properties) of the genders in different screens I'd be able to do that easily