A Clash of Clans-style cloud animation library for screen transitions and loading effects in Jetpack Compose. Ideal for scenarios like "Searching for Opponents..." with customizable text, icons, and responsive design for all screen typesβphones and tablets, portrait and landscape.
Searching for opponents
Phone Portrait mode | Phone Landscape mode |
---|---|
![]() ![]() |
![]() ![]() |
Navigating Between screens
Phone Portrait mode | Phone Landscape mode |
---|---|
![]() ![]() |
![]() ![]() |
- Smooth cloud animations mimicking Clash of Clans transition effect
- Supports customizable text and icons (e.g. magnifying glass)
- Perfect for navigation transitions between screens
- Responsive design: works beautifully on smartphones & tablets, portrait & landscape
- Easily configurable animation duration and visibility
Add the following lines in your settings.gradle.kts
:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven("https://jitpack.io")
}
}
Add the following dependency in your build.gradle.kts
(Module: app):
dependencies {
implementation("com.github.Swapnil-J-Patil:CloudAnimation:v1.0.2")
}
To use the Cloud Animation: Navigating Between screens
, follow this example:
var cloudsVisibility by remember { mutableStateOf(false) }
var magnifierVisibility by remember { mutableStateOf(false) }
val configuration = LocalConfiguration.current
val isPortrait = configuration.orientation == Configuration.ORIENTATION_PORTRAIT
val coroutineScope = rememberCoroutineScope()
var screen by remember { mutableStateOf("screen1") }
var flag by remember { mutableStateOf(false) }
val isTab =
configuration.screenWidthDp >= 600 && configuration.screenHeightDp >= 600
LaunchedEffect(flag) {
if (flag) {
cloudsVisibility = true
delay(2000)
cloudsVisibility = false
flag = false
}
}
Box(
modifier = Modifier.fillMaxSize().background(Purple80)
)
{
when (screen) {
"screen1" -> Screen1 {
coroutineScope.launch {
flag = true
delay(1200)
screen = it
}
}
"screen2" -> Screen2 {
coroutineScope.launch {
flag = true
delay(2000)
screen = it
}
}
}
when {
isTab && isPortrait -> {
Log.d("currentStatus", "Tab Portrait ")
AnimatedCloudsScreenTab(
searchText = "Searching for Opponents...",
cloudVisibility = cloudsVisibility,
magnifyingGlassVisibility = magnifierVisibility
)
}
isTab && !isPortrait -> {
Log.d("currentStatus", "Tab Landscape ")
AnimatedCloudsScreenTabLandscape(
searchText = "Searching for Opponents...",
cloudVisibility = cloudsVisibility,
magnifyingGlassVisibility = magnifierVisibility
)
}
!isTab && isPortrait -> {
Log.d("currentStatus", "Phone Portrait ")
AnimatedCloudsScreen(
searchText = "Searching for Opponents...",
cloudVisibility = cloudsVisibility,
magnifyingGlassVisibility = magnifierVisibility
)
}
else -> {
Log.d("currentStatus", "Phone Landscape ")
AnimatedCloudsScreenLandscape(
searchText = "Searching for Opponents...",
cloudVisibility = cloudsVisibility,
magnifyingGlassVisibility = magnifierVisibility
)
}
}
}
To use the Cloud Animation: Searching for opponents
, follow this example:
var cloudsVisibility by remember { mutableStateOf(false) }
var magnifierVisibility by remember { mutableStateOf(false) }
val configuration = LocalConfiguration.current
val isPortrait = configuration.orientation == Configuration.ORIENTATION_PORTRAIT
val isTab = configuration.screenWidthDp >= 600 && configuration.screenHeightDp >= 600
LaunchedEffect(Unit) {
delay(500)
cloudsVisibility = true
delay(1000)
magnifierVisibility = true
delay(2000)
magnifierVisibility = false
delay(1000)
cloudsVisibility = false
}
Box(
modifier = Modifier.fillMaxSize().background(Purple80)
)
{
when {
isTab && isPortrait -> {
Log.d("currentStatus", "Tab Portrait ")
AnimatedCloudsScreenTab(
searchText = "Searching for Opponents...",
cloudVisibility = cloudsVisibility,
magnifyingGlassVisibility = magnifierVisibility
)
}
isTab && !isPortrait -> {
Log.d("currentStatus", "Tab Landscape ")
AnimatedCloudsScreenTabLandscape(
searchText = "Searching for Opponents...",
cloudVisibility = cloudsVisibility,
magnifyingGlassVisibility = magnifierVisibility
)
}
!isTab && isPortrait -> {
Log.d("currentStatus", "Phone Portrait ")
AnimatedCloudsScreen(
searchText = "Searching for Opponents...",
cloudVisibility = cloudsVisibility,
magnifyingGlassVisibility = magnifierVisibility
)
}
else -> {
Log.d("currentStatus", "Phone Landscape ")
AnimatedCloudsScreenLandscape(
searchText = "Searching for Opponents...",
cloudVisibility = cloudsVisibility,
magnifyingGlassVisibility = magnifierVisibility
)
}
}
}
Parameter | Type | Description |
---|---|---|
cloudVisibility |
Boolean |
Toggle visibility of cloud animation |
magnifyingGlassVisibility |
Boolean |
Toggle magnifying glass and text |
searchText |
String |
Text to display (e.g. "Searching for Opponents...") |
cloudAnimationDuration |
Int |
Duration of cloud animation in milliseconds |
textAnimationDuration |
Int |
Duration of magnifying glass/text animation |
searchImage |
Int |
Resource ID of the icon used (default: magnifying glass) |
If you find this repository helpful, donβt forget to β star the repo!
This project is licensed under the MIT License.
Enjoy using Cloud Animation in your Jetpack Compose project! π