Home > Software engineering >  Jetpack Compose imageVector : how do I able to use the Social vector from google fonts
Jetpack Compose imageVector : how do I able to use the Social vector from google fonts

Time:12-23

I tried to import the icon provided by Google Font according to the prompts of Google Font, but I found that I could not import the icon of cake into my EditText. Can you please take a look what is going on ?Thank you so much !

@Composable
fun ShowTextField(context:Context){
  
    var text by remember {
        mutableStateOf("")
    }
    TextField(value = text ,
        onValueChange = {text = it},text
        label = { Text(text = "birthday")},
        leadingIcon = @Composable{
            
            Image(
                imageVector = Icons.Filled.Cake,
                contentDescription = "cake",
                modifier = Modifier.clickable { 
                    Toast.makeText(
                        context,
                        "Your Birthday:${text}",
                        Toast.LENGTH_SHORT
                    ).show()
                }
            )
        }
    )
}

Cake Google Font

CodePudding user response:

  1. I think you need to download it as .svg file and import into drawable as vector asset before you use it,
  2. if you already imported it, you should use Icon(), not Image() and instead of imageVector just use "painterResource(R.drawable.cake)," (of course if you named your asset as "cake"
@Composable
fun ShowTextField(context:MainActivity){

    var text by remember {
        mutableStateOf("")
    }
    TextField(value = text,
        onValueChange = {text = it},
        label = { Text(text = "birthday")},
        leadingIcon = @Composable{

            Icon(
                painterResource(R.drawable.cake),
                contentDescription = "cake",
                modifier = Modifier.clickable {
                    Toast.makeText(
                        context,
                        "Your Birthday:${text}",
                        Toast.LENGTH_SHORT
                    ).show()
                }
            )
        }
    )
}
  • Related