https://github.com/js-bhavyansh/segmented_buttons

Segmented button UI in Jetpack Compose with dynamic options and customizable styles.
https://github.com/js-bhavyansh/segmented_buttons

android-studio jetpack-compose kotlin material-ui segmented-button

Last synced: 2 days ago
JSON representation

Segmented button UI in Jetpack Compose with dynamic options and customizable styles.

• Host: GitHub
• URL: https://github.com/js-bhavyansh/segmented_buttons
• Owner: js-bhavyansh
• Created: 2024-08-07T15:38:06.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-08-08T09:44:21.000Z (3 months ago)
• Last Synced: 2024-10-21T10:02:07.231Z (about 1 month ago)
• Topics: android-studio, jetpack-compose, kotlin, material-ui, segmented-button
• Language: Kotlin
• Homepage:
• Size: 104 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Segmented Buttons UI in Jetpack Compose

This project showcases a segmented button UI using Jetpack Compose's `SingleChoiceSegmentedButtonRow`. It allows for easy navigation between different options with a visually appealing design.

## Features

- Dynamic segmented buttons with selectable options.

- Smooth transitions between different segments.

- Customizable button shapes and styles.

## Screenshots



    

    



## Installation

1. Clone the repository:

    ```sh

    git clone https://github.com/Bhavyansh03-tech/Segmented_Buttons.git

    ```

2. Open the project in Android Studio.

3. Sync the project with Gradle files.

## Usage

To use the segmented button UI in your project, integrate the `SingleChoiceSegmentedButtonRow` and `SegmentedButton` composables as shown below:

```kotlin

@OptIn(ExperimentalMaterial3Api::class)

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        setContent {

            SegmentedButtonsTheme {

                var selectedIndex by remember {

                    mutableIntStateOf(0)

                }

                val options = remember {

                    mutableStateListOf("Music", "Movies", "Podcasts")

                }

                Box(

                    modifier = Modifier.fillMaxWidth(),

                    contentAlignment = Alignment.Center

                ) {

                    SingleChoiceSegmentedButtonRow {

                        options.forEachIndexed { index, option ->

                            SegmentedButton(

                                selected = selectedIndex == index,

                                onClick = { selectedIndex = index },

                                shape = SegmentedButtonDefaults.itemShape(

                                    index = index,

                                    count = options.size

                                )

                            ) {

                                Text(text = option)

                            }

                        }

                    }

                }

            }

        }

    }

}

```

## Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.

1. Fork the repository.

2. Create your feature branch (`git checkout -b feature/your-feature`).

3. Commit your changes (`git commit -am 'Add some feature'`).

4. Push to the branch (`git push origin feature/your-feature`).

5. Create a new Pull Request.

## Contact

For questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech).

---