Skip to content

Commit 03b7d68

Browse files
x3rocodex3rocode
authored
Create README.md
1 parent a6c2764 commit 03b7d68

File tree

1 file changed

+102
-0
lines changed

1 file changed

+102
-0
lines changed

‎README.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# <p align="center">xBlur</p>
2+
<p align="center">
3+
<img alt="api" src="https://img.shields.io/badge/API-33%2B-green?logo=android"/>
4+
<img alt="api" src="https://img.shields.io/badge/API-33%2B-green?logo=android"/>
5+
<img alt="api" src="https://img.shields.io/badge/API-33%2B-green?logo=android"/>
6+
<img alt="api" src="https://img.shields.io/badge/API-33%2B-green?logo=android"/>
7+
<img alt="api" src="https://img.shields.io/badge/API-33%2B-green?logo=android"/>
8+
</p>
9+
<p align="center">:cloud: xBlur is Realtime iOS-like blur for Android Compose :cloud:</p>
10+
11+
<p align="center"><img src="https://user-images.githubusercontent.com/51151970/210677532-58654512-5f23-40c3-8b66-ed0fcad869a6.png" width="80%"></img></p>
12+
13+
14+
<br>
15+
16+
## :movie_camera: Look how works
17+
<p align="center"><img src="https://user-images.githubusercontent.com/51151970/210678545-aa9103c1-d3f5-4c7d-a0ee-335fda75d8cb.gif" width="50%"></img></p>
18+
19+
https://user-images.githubusercontent.com/51151970/210694618-5910577f-54fc-40cd-9a82-263653fb8fff.mp4
20+
21+
22+
## :rocket: Using Gradle
23+
In your top-level `build.gradle` file:
24+
```gradle
25+
repositories {
26+
...
27+
mavenCentral()
28+
}
29+
```
30+
31+
In your app `build.gradle` file:
32+
```groovy
33+
dependencies {
34+
implementation 'com.github.x3rocode:xblur-compose:[latest_version]'
35+
}
36+
```
37+
38+
## :zap: Quik How to Use
39+
40+
```kotlin
41+
//This will look like IOS!
42+
BlurDialog(
43+
blurRadius = 250, //blur radius
44+
onDismiss = { openDialog = false }, //dialog ondismiss
45+
size = IntOffset(280,160), //dialog size
46+
shape = RoundedCornerShape(30.dp), //dialog shape
47+
backgroundColor = Color.White, //mixing color with dialog
48+
backgroundColorAlpha = 0.4f, //mixing color alpha
49+
dialogDimAmount = 0.3f, //set this if you want dark behind dialog.
50+
dialogBehindBlurRadius = 100 //blur behind dialog
51+
){
52+
//Some Contents inside dialog
53+
}
54+
```
55+
56+
## :fire: Feature
57+
58+
- backgroundColor : You can mix any color you want.
59+
<br>
60+
61+
|backgroundColor|sample|
62+
|:----:|:----:|
63+
|backgroundColor = Color.Transparent|<img src="https://user-images.githubusercontent.com/51151970/210683654-ee51199b-1e9b-482c-a743-335a20a47600.png"/>|
64+
|backgroundColor = Color.White|<img src="https://user-images.githubusercontent.com/51151970/210684137-bf3f8c33-30ba-40a3-b40e-e64c8d5355ff.png"/>|
65+
|backgroundColor = Color.Black|<img src="https://user-images.githubusercontent.com/51151970/210684677-744de40e-bb97-4502-b030-5c3306f76a3a.png"/>|
66+
|backgroundColor = Color.Yellow|<img src="https://user-images.githubusercontent.com/51151970/210684888-3c58770e-0330-4532-b5cb-5e9b495b785b.png"/>|
67+
|backgroundColor = Color.Red|<img src="https://user-images.githubusercontent.com/51151970/210685073-9e91ae87-a373-4664-91dd-a5331f5111f8.png"/>|
68+
<br>
69+
70+
- backgroundColorAlpha : You can set background color alpha.
71+
<br>
72+
73+
|backgroundColorAlpha|sample|
74+
|:----:|:----:|
75+
|backgroundColorAlpha = 0.0f|<img src="https://user-images.githubusercontent.com/51151970/210683654-ee51199b-1e9b-482c-a743-335a20a47600.png"/>|
76+
|backgroundColorAlpha = 0.5f|<img src="https://user-images.githubusercontent.com/51151970/210685849-378b4e2b-f2fa-402c-b1bc-dff4706651fa.png"/>|
77+
|backgroundColorAlpha = 1.0f|<img src="https://user-images.githubusercontent.com/51151970/210685954-1dea3c22-36be-429d-814e-2777cfcb7de0.png"/>|
78+
<br>
79+
80+
- dialogDimAmount : set this if you want dark behind dialog.
81+
<br>
82+
83+
|dialogDimAmount = 0.0f|dialogDimAmount = 0.5f|dialogDimAmount = 0.0f|
84+
|:----:|:----:|:----:|
85+
|<img src="https://user-images.githubusercontent.com/51151970/210686408-75080344-5874-47ec-8ede-a464bb5f90a7.png" width="70%"/>|<img src="https://user-images.githubusercontent.com/51151970/210686490-2b3c23d7-034f-4652-84e1-4ce6ed6991ef.png" width="70%"/>|<img src="https://user-images.githubusercontent.com/51151970/210686602-b8d4c2bc-8427-4fc6-93ea-bbb1b0a408bf.png" width="70%"/>|
86+
<br>
87+
88+
- dialogBehindBlurRadius : blur behind dialog
89+
<br>
90+
91+
|dialogBehindBlurRadius = 0|dialogBehindBlurRadius = 100|
92+
|:----:|:----:|
93+
|<img src="https://user-images.githubusercontent.com/51151970/210693537-61d9c90a-0cb0-4121-ada7-179c8fbf360c.png" width="50%"/>|<img src="https://user-images.githubusercontent.com/51151970/210693471-462c2f8d-1d3a-4cf9-9dad-a06a812a1597.png" width="50%"/>|
94+
95+
<br>
96+
97+
## :alarm_clock: Todo
98+
99+
- blur toast message
100+
- blur navigation bar
101+
- blur bottom sheet
102+

0 commit comments

Comments
 (0)