Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/js-bhavyansh/blur_effect
Jetpack Compose sample showcasing animated blur effects on UI elements.
https://github.com/js-bhavyansh/blur_effect
android-studio animated-blur blur-effect jetpack-compose kotlin material-ui
Last synced: 2 days ago
JSON representation
Jetpack Compose sample showcasing animated blur effects on UI elements.
- Host: GitHub
- URL: https://github.com/js-bhavyansh/blur_effect
- Owner: js-bhavyansh
- Created: 2024-08-02T07:48:02.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-08-03T11:30:13.000Z (4 months ago)
- Last Synced: 2024-10-21T10:02:00.724Z (about 1 month ago)
- Topics: android-studio, animated-blur, blur-effect, jetpack-compose, kotlin, material-ui
- Language: Kotlin
- Homepage:
- Size: 9.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blur Animation Sample
This project demonstrates a simple blur animation effect in Jetpack Compose using the `animateDpAsState` function. The screen contains a text element and an elevated card that apply a blur effect when toggled by a switch.
## Features
- Blur Animation: Animated blur effect on text and card elements.
- Elevated Card: A card that navigates to a second screen on click.
- Switch Toggle: A switch to toggle the blur effect.
## Libraries Used
- Jetpack Compose: Modern toolkit for building native Android UI.
- Material 3: Material Design 3 components and theming.
- Navigation: Jetpack Navigation component for handling navigation between screens.
## Screenshots
### Text And Card :
### Image :
## Getting Started
### Installation
1. Clone the repository:
```sh
git clone https://github.com/Bhavyansh03-tech/Blur_Effect.git
```
2. Open the project in Android Studio.
3. Build the project and run it on an emulator or a physical device.
## Code Overview
### Text and Card
```kotlin
@Composable
fun MainScreen(
navController: NavController
) {
val checked by remember { mutableStateOf(true) }
val animatedBlur by animateDpAsState(targetValue = if (checked) 10.dp else 0.dp, label = "")
Column(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFF181A18)),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
modifier = Modifier.blur(
radius = animatedBlur,
edgeTreatment = BlurredEdgeTreatment.Unbounded
),
text = "Blur Effect",
color = Color.White,
fontSize = MaterialTheme.typography.displayLarge.fontSize
)
Spacer(modifier = Modifier.height(24.dp))
Box(
modifier = Modifier
.fillMaxWidth(0.8f)
.fillMaxHeight(0.2f)
) {
ElevatedCard(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(20.dp))
.border(width = 1.dp, color = Color.White, shape = RoundedCornerShape(20.dp))
.size(150.dp)
.blur(
radius = animatedBlur,
edgeTreatment = BlurredEdgeTreatment.Unbounded
),
elevation = CardDefaults.cardElevation(16.dp),
onClick = {
navController.navigate("SecondScreen")
}
) {
Image(
modifier = Modifier.height(200.dp),
painter = painterResource(id = R.drawable.img),
contentDescription = null,
contentScale = ContentScale.Crop
)
}
}
Spacer(modifier = Modifier.height(24.dp))
Switch(checked = checked, onCheckedChange = { !checked })
}
}
```
### Image
```kotlin
@Composable
fun SecondScreen() {
val isBlurred = remember { mutableStateOf(false) }
val animatedBlur by animateDpAsState(targetValue = if (isBlurred.value) 10.dp else 0.dp, label = "...")
val scrollState = rememberScrollState()
val imageList = listOf(
R.drawable.img,
R.drawable.img1,
R.drawable.img2,
R.drawable.img4,
)
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(scrollState)
) {
imageList.forEach { imageResId ->
Image(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 4.dp)
.blur(
radius = animatedBlur,
edgeTreatment = BlurredEdgeTreatment.Unbounded
)
.clickable {
isBlurred != isBlurred
},
painter = painterResource(id = imageResId),
contentDescription = null,
contentScale = ContentScale.Crop
)
}
}
}
```
## 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).
---