Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Chip in Jetpack Compose

Chip in Jetpack Compose - Coding Bihar
Chip in Jetpack Compose

What are Chips?

Chips are used to show text, make selection and filter content or actions. It can be used to show multiple interactive elements together in the same area.

There are four types of chips, we can use:
1. Assist Chip - asked an assistant to complete the action.
2. Filter Chip - filter content or actions.
3. Input Chip -  
4. Suggestion Chip n- suggest users for actions or response.


In this tutorial, We will learn to create Chips.

AssistChip

Copy this code →
 AssistChip(
            onClick = { /* Do something! */ },
            label = { Text("Assist Chip") },
            leadingIcon = {
                Icon(
                    Icons.Filled.Person,
                    contentDescription = "Localized description",
                    Modifier.size(AssistChipDefaults.IconSize)
                )
            }
        )


ElevatedAssistChip


Copy this code →
 ElevatedAssistChip(
            onClick = { /* Do something! */ },
            label = { Text("Assist Chip") },
            leadingIcon = {
                Icon(
                    Icons.Filled.Person,
                    contentDescription = "Localized description",
                    Modifier.size(AssistChipDefaults.IconSize)
                )
            }
        )


Filter Chip

Copy this code →
var selected by remember { mutableStateOf(false) }
        FilterChip(
            selected = selected,
            onClick = { selected = !selected },
            label = { Text("Filter chip") },
            leadingIcon = if (selected) {
                {
                    Icon(
                        imageVector = Icons.Filled.Done,
                        contentDescription = "Localized Description",
                        modifier = Modifier.size(FilterChipDefaults.IconSize)
                    )
                }
            } else {
                null
            }
        )

Elevated Filter Chip

Copy this code →
 ElevatedFilterChip(
            selected = selected,
            onClick = { selected = !selected },
            label = { Text("Filter chip") },
            leadingIcon = if (selected) {
                {
                    Icon(
                        imageVector = Icons.Filled.Done,
                        contentDescription = "Localized Description",
                        modifier = Modifier.size(FilterChipDefaults.IconSize)
                    )
                }
            } else {
                null
            }
        )



Input Chip

Copy this code →
var selected by remember { mutableStateOf(false) }
        InputChip(
            selected = selected,
            onClick = { selected = !selected },
            label = { Text("Input Chip") },
        )


Suggestion Chip

Copy this code →
 SuggestionChip(
            onClick = { /* Do something! */ },
            label = { Text("Suggestion Chip") }
        )


Elevated Suggestion Chip


Copy this code →
 ElevatedSuggestionChip(
            onClick = { /* Do something! */ },
            label = { Text("Suggestion Chip") }
        )


Lets Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.



MainActivity



Copy this code →
package com.example.codingbihar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodingBiharTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    FilterChips()
                   }
                }
              }
         }
      }
Create a separate file for Card and named it as Filter Chips

FilterChips


Copy this code →
package com.example.codingbihar

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material3.ElevatedFilterChip
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterChips() {
    Column(Modifier.fillMaxSize()) {
        var evenselected by remember {
            mutableStateOf(false)
        }
        var oddselected by remember { mutableStateOf(false) }
        Row(
            modifier = Modifier
                .padding(20.dp)
                .align(Alignment.CenterHorizontally)
        ) {
            ElevatedFilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "Even Only") },
                leadingIcon = if (evenselected) {
                    {
                        Icon(
                            imageVector = Icons.Filled.Done,
                            contentDescription = "Localized Description",
                            modifier = Modifier.size(FilterChipDefaults.IconSize)
                        )
                    }
                } else {
                    null
                }
            )
            ElevatedFilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "Odd Only") },
                leadingIcon = if (oddselected) {
                    {
                        Icon(
                            imageVector = Icons.Filled.Done,
                            contentDescription = "Localized Description",
                            modifier = Modifier.size(FilterChipDefaults.IconSize)
                        )
                    }
                } else {
                    null
                })
        }
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "1") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "2") })
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "3") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "4") })
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "5") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "6") })
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "7") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "8") })
            FilterChip(selected = oddselected,
                onClick = { oddselected = !oddselected },
                label = { Text(text = "9") })
            FilterChip(selected = evenselected,
                onClick = { evenselected = !evenselected },
                label = { Text(text = "10") })
        }
    }

OUTPUT : -





 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!