├── .gitignore ├── .idea ├── .gitignore ├── .name ├── compiler.xml ├── dbnavigator.xml ├── deploymentTargetDropDown.xml ├── gradle.xml ├── misc.xml └── vcs.xml ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── merttoptas │ │ └── jetpack_compose_component_box │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── merttoptas │ │ │ └── jetpack_compose_component_box │ │ │ ├── MainActivity.kt │ │ │ ├── components │ │ │ ├── BackArrowIcon.kt │ │ │ ├── CustomScaffold.kt │ │ │ ├── CustomTopBar.kt │ │ │ ├── buttons │ │ │ │ ├── CustomElevatedButton.kt │ │ │ │ ├── GradientButton.kt │ │ │ │ └── OutlinedButton.kt │ │ │ ├── card │ │ │ │ ├── CustomBasicImageIconCard.kt │ │ │ │ ├── CustomBasicShareCard.kt │ │ │ │ ├── CustomBasicShareWithIconCard.kt │ │ │ │ ├── CustomHorizontalCard.kt │ │ │ │ └── ExpandableCard.kt │ │ │ ├── halfcirclepercentgraph │ │ │ │ └── HalfCirclePercentGraph.kt │ │ │ ├── image │ │ │ │ └── CustomNetworkImage.kt │ │ │ ├── loading │ │ │ │ ├── CircularLoadingBar.kt │ │ │ │ ├── HorizontalLoadingBar.kt │ │ │ │ ├── LineLoadingBar.kt │ │ │ │ └── StoryLoadingBar.kt │ │ │ ├── otp │ │ │ │ └── CustomOtpContainer.kt │ │ │ ├── progressdialog │ │ │ │ └── SimpleProgressDialog.kt │ │ │ └── search │ │ │ │ └── SearchBar.kt │ │ │ ├── navigation │ │ │ ├── NavGraph.kt │ │ │ └── NavScreen.kt │ │ │ ├── screen │ │ │ ├── buttons │ │ │ │ └── ButtonsScreen.kt │ │ │ ├── canvasviews │ │ │ │ └── halfcirclepercentgraph │ │ │ │ │ └── HalfCirclePercentGraphScreen.kt │ │ │ ├── card │ │ │ │ ├── BasicCardsScreen.kt │ │ │ │ └── ExpandableCardScreen.kt │ │ │ ├── dashboard │ │ │ │ └── DashBoardScreen.kt │ │ │ ├── loading │ │ │ │ └── LoadingScreen.kt │ │ │ ├── otp │ │ │ │ └── OtpScreen.kt │ │ │ ├── progressdialog │ │ │ │ └── ProgressDialogScreen.kt │ │ │ └── search │ │ │ │ └── SearchBarScreen.kt │ │ │ └── ui │ │ │ └── theme │ │ │ ├── Color.kt │ │ │ ├── Shape.kt │ │ │ ├── Theme.kt │ │ │ └── Type.kt │ └── res │ │ ├── drawable-v24 │ │ └── ic_launcher_foreground.xml │ │ ├── drawable │ │ ├── ic_baseline_bookmark_24.xml │ │ └── ic_launcher_background.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml │ │ └── xml │ │ ├── backup_rules.xml │ │ └── data_extraction_rules.xml │ └── test │ └── java │ └── com │ └── merttoptas │ └── jetpack_compose_component_box │ └── ExampleUnitTest.kt ├── build.gradle ├── docs └── gif │ ├── buttons.gif │ ├── expandable-card.gif │ ├── half-circle-graph.gif │ ├── loadings.gif │ ├── otp.gif │ └── progress-dialog.gif ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | local.properties 16 | .idea/inspectionProfiles/Project_Default.xml 17 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | Jetpack-Compose-Component-Box -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/dbnavigator.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | -------------------------------------------------------------------------------- /.idea/deploymentTargetDropDown.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | 20 | 21 | 22 | 24 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Jetpack Compose Component Box

4 | 5 | 6 | [![License](https://badgen.net/badge/License/Apache/blue/)](https://opensource.org/licenses/Apache-2.0) 7 | ![MinAPI](https://badgen.net/badge/MinAPI/23/) 8 | [![Compose](https://img.shields.io/badge/compose-1.3.1-red?)](https://developer.android.com/jetpack/compose) 9 | [![Kotlin](https://img.shields.io/badge/Kotlin-1.7.10-blue?logo=kotlin)](http://kotlinlang.org) 10 | [![Gradle](https://img.shields.io/badge/gradle-7.2.1-blue.svg?)](https://lv.binarybabel.org/catalog/gradle/latest) 11 | 12 | 13 | ## About The Project ℹ️ 14 | 15 | This project is a project where you can find and use custom components in Jetpack Compose. Our goal is to add and use components and some custom components that are used many times. 16 | You can also contribute by opening a PR. What you need to do is to open a pr and develop a preview component. That is all! 17 | 18 | ## Contribution 💪🏻 19 | All contributions are welcome! Feel free to jump to the issues and pick one for yourself! Please write a comment inside of the issue before you start working. 20 | 21 | ## Rules 🔖 22 | * 1 - To contribute to the Component Box repo, first open a branch as feature/component-name. 23 | * 2 - Open a package file in the components package specific to the component. 24 | * 3 - Before opening the PR, the Components you write must have a @Preview view. 25 | * 4 - After the PR is open, add the name of the component you wrote to the Readme.md file under Features. 26 | 27 | ## Screens 📱 28 |

29 | 30 | 31 | 32 |

33 | 34 |

35 | 36 | 37 | 38 | 39 |

40 | 41 | ## Features 👀 42 | - Otp Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/otp/CustomOtpContainer.kt) 43 | - Custom Elevated Button Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/buttons/CustomElevatedButton.kt) 44 | - Custom Elevated Button Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/buttons/CustomElevatedButton.kt) 45 | - Gradient Button Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/buttons/GradientButton.kt) 46 | - Outlined Button Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/buttons/OutlinedButton.kt) 47 | - Circular Loading Bar Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/loading/CircularLoadingBar.kt) 48 | - Horizontal Loading Bar Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/loading/HorizontalLoadingBar.kt) 49 | - Line Loading Bar Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/loading/LineLoadingBar.kt) 50 | - Story Loading Bar Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/loading/StoryLoadingBar.kt) 51 | - Expandable Card Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/card/ExpandableCard.kt) 52 | - Progress Dialog Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/progressdialog/SimpleProgressDialog.kt) 53 | - Half Circle Percent Graph Component | [Code](https://github.com/merttoptas/Jetpack-Compose-Component-Box/blob/master/app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/halfcirclepercentgraph/HalfCirclePercentGraph.kt) 54 | 55 | 56 | ## Contributors 👏 57 | * [tfaki](https://github.com/tfaki) 58 | * [cengiztoru](https://github.com/cengiztoru) 59 | * [halilozel1903](https://github.com/halilozel1903) 60 | * [nisaefendioglu](https://github.com/nisaefendioglu) 61 | * [HenryUdorji](https://github.com/HenryUdorji) 62 | 63 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'com.android.application' 3 | id 'org.jetbrains.kotlin.android' 4 | } 5 | 6 | android { 7 | compileSdk 33 8 | 9 | defaultConfig { 10 | applicationId "com.merttoptas.jetpack_compose_component_box" 11 | minSdk 21 12 | targetSdk 33 13 | versionCode 1 14 | versionName "1.0" 15 | 16 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 17 | vectorDrawables { 18 | useSupportLibrary true 19 | } 20 | } 21 | 22 | buildTypes { 23 | release { 24 | minifyEnabled false 25 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 26 | } 27 | } 28 | compileOptions { 29 | sourceCompatibility JavaVersion.VERSION_1_8 30 | targetCompatibility JavaVersion.VERSION_1_8 31 | } 32 | kotlinOptions { 33 | jvmTarget = '1.8' 34 | } 35 | buildFeatures { 36 | compose true 37 | } 38 | composeOptions { 39 | kotlinCompilerExtensionVersion compose_version 40 | } 41 | packagingOptions { 42 | resources { 43 | excludes += '/META-INF/{AL2.0,LGPL2.1}' 44 | } 45 | } 46 | } 47 | 48 | dependencies { 49 | 50 | implementation 'androidx.core:core-ktx:1.9.0' 51 | implementation "androidx.compose.ui:ui:$compose_version" 52 | implementation "androidx.compose.material:material:$compose_version" 53 | implementation "androidx.compose.ui:ui-tooling-preview:$compose_version" 54 | implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1' 55 | implementation 'androidx.activity:activity-compose:1.6.1' 56 | 57 | implementation "com.google.accompanist:accompanist-navigation-animation:0.24.3-alpha" 58 | implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha04" 59 | 60 | //Coil 61 | implementation("io.coil-kt:coil-compose:1.4.0") 62 | 63 | 64 | testImplementation 'junit:junit:4.13.2' 65 | androidTestImplementation 'androidx.test.ext:junit:1.1.4' 66 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0' 67 | androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" 68 | debugImplementation "androidx.compose.ui:ui-tooling:$compose_version" 69 | debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version" 70 | } -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/androidTest/java/com/merttoptas/jetpack_compose_component_box/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.merttoptas.jetpack_compose_component_box", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box 2 | 3 | import android.os.Bundle 4 | import androidx.activity.ComponentActivity 5 | import androidx.activity.compose.setContent 6 | import androidx.compose.foundation.layout.fillMaxSize 7 | import androidx.compose.material.MaterialTheme 8 | import androidx.compose.material.Surface 9 | import androidx.compose.ui.Modifier 10 | import com.merttoptas.jetpack_compose_component_box.navigation.NavGraph 11 | import com.merttoptas.jetpack_compose_component_box.ui.theme.JetpackComposeComponentBoxTheme 12 | 13 | class MainActivity : ComponentActivity() { 14 | override fun onCreate(savedInstanceState: Bundle?) { 15 | super.onCreate(savedInstanceState) 16 | setContent { 17 | JetpackComposeComponentBoxTheme { 18 | Surface( 19 | modifier = Modifier.fillMaxSize(), 20 | color = MaterialTheme.colors.background 21 | ) { 22 | NavGraph() 23 | } 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/BackArrowIcon.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components 2 | 3 | import androidx.compose.material.Icon 4 | import androidx.compose.material.IconButton 5 | import androidx.compose.material.MaterialTheme 6 | import androidx.compose.material.icons.Icons 7 | import androidx.compose.material.icons.rounded.ArrowBack 8 | import androidx.compose.runtime.Composable 9 | 10 | @Composable 11 | fun BackArrowIcon( 12 | onClick: () -> Unit 13 | ) { 14 | IconButton(onClick = onClick) { 15 | Icon( 16 | imageVector = Icons.Rounded.ArrowBack, 17 | contentDescription = "Back", 18 | tint = MaterialTheme.colors.onSurface 19 | ) 20 | } 21 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/CustomScaffold.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components 2 | 3 | import androidx.compose.foundation.layout.PaddingValues 4 | import androidx.compose.material.* 5 | import androidx.compose.runtime.Composable 6 | import androidx.compose.ui.Modifier 7 | import androidx.compose.ui.graphics.Color 8 | 9 | @Composable 10 | fun CustomScaffold( 11 | modifier: Modifier = Modifier, 12 | scaffoldState: ScaffoldState = rememberScaffoldState(), 13 | snackBarHost: @Composable (SnackbarHostState) -> Unit = {}, 14 | topBar: @Composable (() -> Unit) = {}, 15 | bottomBar: @Composable () -> Unit = {}, 16 | floatingActionButton: @Composable (() -> Unit) = {}, 17 | backgroundColor: Color = MaterialTheme.colors.background, 18 | contentColor: Color = contentColorFor(backgroundColor), 19 | content: @Composable (PaddingValues) -> Unit 20 | ) { 21 | Scaffold( 22 | modifier = modifier, 23 | scaffoldState = scaffoldState, 24 | snackbarHost = snackBarHost, 25 | topBar = topBar, 26 | content = content, 27 | bottomBar = bottomBar, 28 | contentColor = contentColor, 29 | floatingActionButton = floatingActionButton, 30 | floatingActionButtonPosition = FabPosition.Center, 31 | isFloatingActionButtonDocked = true, 32 | backgroundColor = backgroundColor 33 | ) 34 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/CustomTopBar.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components 2 | 3 | import androidx.compose.foundation.layout.RowScope 4 | import androidx.compose.foundation.layout.fillMaxWidth 5 | import androidx.compose.material.IconButton 6 | import androidx.compose.material.MaterialTheme 7 | import androidx.compose.material.Text 8 | import androidx.compose.material.TopAppBar 9 | import androidx.compose.runtime.Composable 10 | import androidx.compose.ui.Modifier 11 | import androidx.compose.ui.graphics.Color 12 | import androidx.compose.ui.text.style.TextAlign 13 | import androidx.compose.ui.tooling.preview.Preview 14 | import androidx.compose.ui.unit.Dp 15 | import androidx.compose.ui.unit.dp 16 | 17 | @Composable 18 | fun CustomTopBar( 19 | modifier: Modifier = Modifier, 20 | text: String, 21 | title: @Composable () -> Unit = { 22 | Text( 23 | text = text, 24 | textAlign = TextAlign.Center, 25 | modifier = Modifier.fillMaxWidth(), 26 | color = MaterialTheme.colors.onSecondary, 27 | style = MaterialTheme.typography.subtitle1 28 | ) 29 | }, 30 | navigationIcon: @Composable (() -> Unit)? = null, 31 | actions: @Composable RowScope.() -> Unit = {}, 32 | backgroundColor: Color = MaterialTheme.colors.background, 33 | contentColor: Color = MaterialTheme.colors.background, 34 | elevation: Dp = 0.dp 35 | ) { 36 | TopAppBar( 37 | title = title, 38 | modifier = modifier, 39 | navigationIcon = navigationIcon, 40 | actions = actions, 41 | backgroundColor = backgroundColor, 42 | contentColor = contentColor, 43 | elevation = elevation 44 | ) 45 | } 46 | 47 | @Preview(showBackground = true) 48 | @Composable 49 | private fun BodyPreview() { 50 | CustomTopBar( 51 | modifier = Modifier, 52 | text = "Value", 53 | title = { 54 | Text( 55 | text = "Title", 56 | textAlign = TextAlign.Center, 57 | modifier = Modifier.fillMaxWidth(), 58 | color = MaterialTheme.colors.secondary, 59 | style = MaterialTheme.typography.subtitle1 60 | ) 61 | }, 62 | navigationIcon = { 63 | BackArrowIcon { } 64 | }, 65 | actions = { 66 | IconButton(onClick = {}) {} 67 | }, 68 | ) 69 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/buttons/CustomElevatedButton.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.buttons 2 | 3 | import androidx.compose.foundation.layout.height 4 | import androidx.compose.foundation.layout.padding 5 | import androidx.compose.foundation.shape.RoundedCornerShape 6 | import androidx.compose.material.* 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Modifier 9 | import androidx.compose.ui.graphics.Color 10 | import androidx.compose.ui.graphics.vector.ImageVector 11 | import androidx.compose.ui.unit.dp 12 | 13 | @Composable 14 | fun CustomElevatedButton( 15 | onClick: () -> Unit, 16 | modifier: Modifier = Modifier, 17 | text: String, 18 | textColor: Color = Color.Black, 19 | enabled: Boolean = true, 20 | elevation: ButtonElevation? = ButtonDefaults.elevation(5.dp), 21 | colors: ButtonColors = ButtonDefaults.buttonColors(), 22 | shape: RoundedCornerShape = RoundedCornerShape(50), 23 | leadingIcon: ImageVector? = null, 24 | iconTintColor: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current) 25 | ) { 26 | 27 | Button( 28 | onClick = onClick, 29 | modifier = modifier.height(50.dp), 30 | enabled = enabled, 31 | elevation = elevation, 32 | colors = colors, 33 | shape = shape 34 | ) { 35 | if (leadingIcon != null) { 36 | Icon( 37 | leadingIcon, 38 | "menu", 39 | modifier = Modifier.padding(horizontal = 5.dp), 40 | tint = iconTintColor 41 | ) 42 | } 43 | Text(text = text, color = textColor) 44 | } 45 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/buttons/GradientButton.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.buttons 2 | 3 | import androidx.compose.foundation.background 4 | import androidx.compose.foundation.layout.Box 5 | import androidx.compose.foundation.layout.PaddingValues 6 | import androidx.compose.runtime.Composable 7 | import androidx.compose.material.* 8 | import androidx.compose.ui.Alignment 9 | import androidx.compose.ui.Modifier 10 | import androidx.compose.ui.graphics.Brush 11 | import androidx.compose.ui.graphics.Color 12 | import androidx.compose.ui.text.TextStyle 13 | import androidx.compose.ui.text.font.FontWeight 14 | import androidx.compose.ui.tooling.preview.Preview 15 | import androidx.compose.ui.unit.sp 16 | 17 | /** 18 | * Created by talhafaki on 18.06.2022. 19 | */ 20 | 21 | @Composable 22 | fun GradientButton( 23 | modifier: Modifier = Modifier, 24 | onClick: () -> Unit 25 | ) { 26 | 27 | val gradient = 28 | Brush.horizontalGradient(listOf(Color(0xFF28D8A3), Color(0xFF00BEB2))) 29 | 30 | Button( 31 | modifier = modifier, 32 | colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent), 33 | contentPadding = PaddingValues(), 34 | onClick = { onClick() }, 35 | ) { 36 | Box( 37 | modifier = Modifier 38 | .background(gradient) 39 | .then(modifier), 40 | contentAlignment = Alignment.Center, 41 | ) { 42 | Text( 43 | text = "Gradient Button", 44 | style = TextStyle( 45 | fontSize = 20.sp, 46 | fontWeight = FontWeight.W500, 47 | color = Color.White 48 | ) 49 | ) 50 | } 51 | } 52 | } 53 | 54 | @Preview(showBackground = true) 55 | @Composable 56 | fun GradientButtonPreview() { 57 | GradientButton(modifier = Modifier, onClick = {}) 58 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/buttons/OutlinedButton.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.buttons 2 | 3 | import androidx.compose.foundation.BorderStroke 4 | import androidx.compose.foundation.shape.RoundedCornerShape 5 | import androidx.compose.runtime.Composable 6 | import androidx.compose.material.* 7 | import androidx.compose.ui.Modifier 8 | import androidx.compose.ui.graphics.Color 9 | import androidx.compose.ui.tooling.preview.Preview 10 | import androidx.compose.ui.unit.dp 11 | 12 | /** 13 | * Created by talhafaki on 18.06.2022. 14 | */ 15 | 16 | @Composable 17 | fun OutlinedButton(modifier: Modifier = Modifier) { 18 | OutlinedButton( 19 | onClick = { }, 20 | modifier = modifier, 21 | border = BorderStroke(1.dp, Color.Red), 22 | shape = RoundedCornerShape(50), // = 50% percent 23 | // or shape = CircleShape 24 | colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Red) 25 | ) { 26 | Text(text = "Outlined Button") 27 | } 28 | } 29 | 30 | @Preview 31 | @Composable 32 | fun OutlinedButtonPreview() { 33 | OutlinedButton() 34 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/card/CustomBasicImageIconCard.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.card 2 | 3 | import androidx.compose.foundation.BorderStroke 4 | import androidx.compose.foundation.Image 5 | import androidx.compose.foundation.layout.* 6 | import androidx.compose.material.* 7 | import androidx.compose.material.icons.Icons 8 | import androidx.compose.material.icons.filled.Share 9 | import androidx.compose.material.icons.rounded.Favorite 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.ui.Alignment 12 | import androidx.compose.ui.Modifier 13 | import androidx.compose.ui.draw.clip 14 | import androidx.compose.ui.graphics.Color 15 | import androidx.compose.ui.graphics.Shape 16 | import androidx.compose.ui.graphics.vector.ImageVector 17 | import androidx.compose.ui.layout.ContentScale 18 | import androidx.compose.ui.res.vectorResource 19 | import androidx.compose.ui.text.TextStyle 20 | import androidx.compose.ui.text.font.FontWeight 21 | import androidx.compose.ui.unit.Dp 22 | import androidx.compose.ui.unit.dp 23 | import androidx.compose.ui.unit.sp 24 | import com.merttoptas.jetpack_compose_component_box.R 25 | import com.merttoptas.jetpack_compose_component_box.components.image.CustomNetworkImage 26 | 27 | @ExperimentalMaterialApi 28 | @Composable 29 | fun CustomBasicImageIconCard( 30 | modifier: Modifier = Modifier, 31 | onClickFavorite: () -> Unit, 32 | onClickBookmark: () -> Unit, 33 | onClickShare: () -> Unit, 34 | imageUrl: String, 35 | text: String, 36 | backgroundColor: Color = Color.White, 37 | shape: Shape = MaterialTheme.shapes.medium, 38 | border: BorderStroke? = null, 39 | elevation: Dp = 5.dp, 40 | ) { 41 | Card( 42 | modifier = modifier 43 | .fillMaxWidth(), 44 | shape = shape, 45 | elevation = elevation, 46 | backgroundColor = backgroundColor, 47 | border = border, 48 | ) { 49 | Column(modifier = Modifier.fillMaxWidth()) { 50 | Box( 51 | Modifier 52 | .fillMaxWidth() 53 | .height(200.dp) 54 | .clip(shape) 55 | ) { 56 | CustomNetworkImage( 57 | imageURL = imageUrl, 58 | modifier = Modifier 59 | .fillMaxSize() 60 | .clip(shape), contentScale = ContentScale.Crop 61 | ) 62 | 63 | Text( 64 | text = text, 65 | modifier = Modifier 66 | .align(Alignment.BottomStart) 67 | .padding(start = 16.dp, bottom = 20.dp), 68 | style = TextStyle( 69 | color = Color.White, 70 | fontSize = 20.sp, 71 | fontWeight = FontWeight.Medium 72 | ) 73 | ) 74 | } 75 | 76 | Row( 77 | modifier = Modifier 78 | .fillMaxWidth() 79 | .padding( 80 | start = 15.dp, 81 | end = 15.dp, 82 | ), 83 | horizontalArrangement = Arrangement.Start 84 | ) { 85 | IconButton(onClick = onClickFavorite) { 86 | Icon( 87 | Icons.Rounded.Favorite, 88 | contentDescription = "Localized description", 89 | tint = Color.Gray 90 | ) 91 | } 92 | 93 | IconButton(onClick = onClickShare, modifier = Modifier.padding(start = 20.dp)) { 94 | Image( 95 | imageVector = ImageVector.vectorResource(id = R.drawable.ic_baseline_bookmark_24), 96 | contentDescription = "Bookmark", 97 | ) 98 | } 99 | 100 | IconButton(onClick = onClickBookmark, modifier = Modifier.padding(start = 20.dp)) { 101 | Icon( 102 | Icons.Default.Share, 103 | contentDescription = "Share description", 104 | tint = Color.Gray 105 | ) 106 | } 107 | } 108 | } 109 | } 110 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/card/CustomBasicShareCard.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.card 2 | 3 | import androidx.compose.foundation.BorderStroke 4 | import androidx.compose.foundation.layout.* 5 | import androidx.compose.foundation.shape.RoundedCornerShape 6 | import androidx.compose.material.Card 7 | import androidx.compose.material.ExperimentalMaterialApi 8 | import androidx.compose.material.MaterialTheme 9 | import androidx.compose.material.Text 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.ui.Modifier 12 | import androidx.compose.ui.draw.clip 13 | import androidx.compose.ui.graphics.Color 14 | import androidx.compose.ui.graphics.Shape 15 | import androidx.compose.ui.layout.ContentScale 16 | import androidx.compose.ui.text.TextStyle 17 | import androidx.compose.ui.text.font.FontWeight 18 | import androidx.compose.ui.unit.Dp 19 | import androidx.compose.ui.unit.dp 20 | import androidx.compose.ui.unit.sp 21 | import com.merttoptas.jetpack_compose_component_box.components.image.CustomNetworkImage 22 | 23 | @ExperimentalMaterialApi 24 | @Composable 25 | fun CustomBasicShareCard( 26 | modifier: Modifier = Modifier, 27 | onClick: () -> Unit, 28 | imageUrl: String, 29 | text: String, 30 | subtitleText: String, 31 | backgroundColor: Color = Color.White, 32 | shape: Shape = MaterialTheme.shapes.medium, 33 | border: BorderStroke? = null, 34 | elevation: Dp = 5.dp, 35 | maxLines: Int = 3, 36 | ) { 37 | Card( 38 | onClick = onClick, 39 | modifier = modifier 40 | .fillMaxWidth(), 41 | shape = shape, 42 | elevation = elevation, 43 | backgroundColor = backgroundColor, 44 | border = border, 45 | ) { 46 | Column(modifier = Modifier.fillMaxWidth()) { 47 | CustomNetworkImage( 48 | imageURL = imageUrl, 49 | modifier = Modifier 50 | .fillMaxWidth() 51 | .height(150.dp) 52 | .clip(shape), contentScale = ContentScale.FillWidth 53 | ) 54 | 55 | Column( 56 | modifier = Modifier 57 | .fillMaxWidth() 58 | .padding( 59 | start = 15.dp, 60 | top = 10.dp, 61 | end = 15.dp, 62 | bottom = 10.dp 63 | ) 64 | ) { 65 | Text( 66 | text = text, 67 | style = TextStyle( 68 | color = Color.Black, 69 | fontSize = 18.sp, 70 | fontWeight = FontWeight.Bold 71 | ) 72 | ) 73 | Text( 74 | text = subtitleText, 75 | style = TextStyle( 76 | color = Color.Gray, 77 | fontSize = 12.sp, 78 | fontWeight = FontWeight.Light 79 | ), 80 | maxLines = maxLines 81 | ) 82 | } 83 | 84 | Row( 85 | modifier = Modifier 86 | .fillMaxWidth() 87 | .padding( 88 | start = 15.dp, 89 | top = 10.dp, 90 | end = 15.dp, 91 | bottom = 10.dp 92 | ), 93 | horizontalArrangement = Arrangement.Start 94 | ) { 95 | Text( 96 | text = "Share", 97 | style = TextStyle( 98 | color = MaterialTheme.colors.primary, 99 | fontSize = 16.sp, 100 | fontWeight = FontWeight.Normal 101 | ) 102 | ) 103 | Text( 104 | modifier = Modifier.padding(start = 20.dp), 105 | text = "Explore", 106 | style = TextStyle( 107 | color = MaterialTheme.colors.primary, 108 | fontSize = 16.sp, 109 | fontWeight = FontWeight.Normal 110 | ) 111 | ) 112 | } 113 | } 114 | } 115 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/card/CustomBasicShareWithIconCard.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.card 2 | 3 | import androidx.compose.foundation.BorderStroke 4 | import androidx.compose.foundation.Image 5 | import androidx.compose.foundation.layout.* 6 | import androidx.compose.material.* 7 | import androidx.compose.material.icons.Icons 8 | import androidx.compose.material.icons.filled.Share 9 | import androidx.compose.material.icons.rounded.Favorite 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.ui.Alignment 12 | import androidx.compose.ui.Modifier 13 | import androidx.compose.ui.draw.clip 14 | import androidx.compose.ui.draw.shadow 15 | import androidx.compose.ui.graphics.Color 16 | import androidx.compose.ui.graphics.Shape 17 | import androidx.compose.ui.graphics.vector.ImageVector 18 | import androidx.compose.ui.layout.ContentScale 19 | import androidx.compose.ui.res.vectorResource 20 | import androidx.compose.ui.text.TextStyle 21 | import androidx.compose.ui.text.font.FontWeight 22 | import androidx.compose.ui.unit.Dp 23 | import androidx.compose.ui.unit.dp 24 | import androidx.compose.ui.unit.sp 25 | import com.merttoptas.jetpack_compose_component_box.R 26 | import com.merttoptas.jetpack_compose_component_box.components.image.CustomNetworkImage 27 | 28 | @ExperimentalMaterialApi 29 | @Composable 30 | fun CustomBasicShareWithIconCard( 31 | modifier: Modifier = Modifier, 32 | onClickFavorite: () -> Unit, 33 | onClickBookmark: () -> Unit, 34 | onClickShare: () -> Unit, 35 | imageUrl: String, 36 | text: String, 37 | backgroundColor: Color = Color.White, 38 | shape: Shape = MaterialTheme.shapes.medium, 39 | border: BorderStroke? = null, 40 | elevation: Dp = 5.dp, 41 | ) { 42 | Card( 43 | modifier = modifier 44 | .fillMaxWidth(), 45 | shape = shape, 46 | elevation = elevation, 47 | backgroundColor = backgroundColor, 48 | border = border, 49 | ) { 50 | Column(modifier = Modifier.fillMaxWidth()) { 51 | Box( 52 | Modifier 53 | .fillMaxWidth() 54 | .height(200.dp) 55 | .clip(shape) 56 | ) { 57 | CustomNetworkImage( 58 | imageURL = imageUrl, 59 | modifier = Modifier 60 | .fillMaxSize() 61 | .clip(shape), contentScale = ContentScale.Crop 62 | ) 63 | 64 | Text( 65 | text = text, 66 | modifier = Modifier 67 | .align(Alignment.BottomStart) 68 | .padding(start = 16.dp, bottom = 20.dp), 69 | style = TextStyle( 70 | color = Color.White, 71 | fontSize = 20.sp, 72 | fontWeight = FontWeight.Medium 73 | ) 74 | ) 75 | } 76 | 77 | Row( 78 | modifier = Modifier 79 | .fillMaxWidth() 80 | .padding( 81 | start = 15.dp, 82 | end = 15.dp, 83 | ), 84 | horizontalArrangement = Arrangement.End 85 | ) { 86 | IconButton(onClick = onClickFavorite) { 87 | Icon( 88 | Icons.Rounded.Favorite, 89 | contentDescription = "Localized description", 90 | tint = Color.Gray 91 | ) 92 | } 93 | 94 | IconButton(onClick = onClickShare, modifier = Modifier.padding(start = 20.dp)) { 95 | Image( 96 | imageVector = ImageVector.vectorResource(id = R.drawable.ic_baseline_bookmark_24), 97 | contentDescription = "Bookmark", 98 | ) 99 | } 100 | 101 | IconButton(onClick = onClickBookmark, modifier = Modifier.padding(start = 20.dp)) { 102 | Icon( 103 | Icons.Default.Share, 104 | contentDescription = "Share description", 105 | tint = Color.Gray 106 | ) 107 | } 108 | } 109 | } 110 | } 111 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/card/CustomHorizontalCard.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.card 2 | 3 | import androidx.compose.foundation.BorderStroke 4 | import androidx.compose.foundation.layout.* 5 | import androidx.compose.foundation.shape.RoundedCornerShape 6 | import androidx.compose.material.Card 7 | import androidx.compose.material.ExperimentalMaterialApi 8 | import androidx.compose.material.MaterialTheme 9 | import androidx.compose.material.Text 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.ui.Alignment 12 | import androidx.compose.ui.Modifier 13 | import androidx.compose.ui.draw.clip 14 | import androidx.compose.ui.graphics.Color 15 | import androidx.compose.ui.graphics.Shape 16 | import androidx.compose.ui.text.TextStyle 17 | import androidx.compose.ui.text.font.FontWeight 18 | import androidx.compose.ui.unit.Dp 19 | import androidx.compose.ui.unit.dp 20 | import androidx.compose.ui.unit.sp 21 | import com.merttoptas.jetpack_compose_component_box.components.image.CustomNetworkImage 22 | 23 | 24 | // Horizontal Card with Image & Subtitle Text 25 | 26 | @OptIn(ExperimentalMaterialApi::class) 27 | @Composable 28 | fun CustomHorizontalCard( 29 | modifier: Modifier = Modifier, 30 | onClick: () -> Unit, 31 | imageUrl: String, 32 | text: String, 33 | subtitleText: String, 34 | backgroundColor: Color = Color.White, 35 | shape: Shape = MaterialTheme.shapes.large, 36 | border: BorderStroke? = null, 37 | elevation: Dp = 1.dp 38 | ) { 39 | Card( 40 | onClick = onClick, 41 | modifier = modifier 42 | .fillMaxWidth() 43 | .height(70.dp), 44 | shape = shape, 45 | elevation = elevation, 46 | backgroundColor = backgroundColor, 47 | border = border, 48 | ) { 49 | Row( 50 | modifier = Modifier 51 | .fillMaxWidth() 52 | .padding(10.dp), 53 | verticalAlignment = Alignment.CenterVertically, 54 | ) { 55 | CustomNetworkImage( 56 | imageURL = imageUrl, 57 | modifier = Modifier 58 | .fillMaxHeight() 59 | .clip(RoundedCornerShape(50)) 60 | ) 61 | Text( 62 | text = text, 63 | modifier = Modifier.padding(start = 15.dp), 64 | style = TextStyle( 65 | color = Color.Black, 66 | fontSize = 18.sp, 67 | fontWeight = FontWeight.Bold 68 | ) 69 | ) 70 | Row( 71 | modifier = Modifier.fillMaxWidth(), 72 | verticalAlignment = Alignment.CenterVertically, 73 | horizontalArrangement = Arrangement.End 74 | ) { 75 | Text( 76 | text = subtitleText, modifier = Modifier, style = TextStyle( 77 | color = Color.Gray, 78 | fontSize = 12.sp, 79 | fontWeight = FontWeight.Normal 80 | ) 81 | ) 82 | } 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/card/ExpandableCard.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.card 2 | 3 | import androidx.compose.animation.animateContentSize 4 | import androidx.compose.animation.core.animateFloatAsState 5 | import androidx.compose.animation.core.tween 6 | import androidx.compose.foundation.BorderStroke 7 | import androidx.compose.foundation.layout.* 8 | import androidx.compose.foundation.shape.RoundedCornerShape 9 | import androidx.compose.material.* 10 | import androidx.compose.material.icons.Icons 11 | import androidx.compose.material.icons.filled.ArrowDropDown 12 | import androidx.compose.runtime.* 13 | import androidx.compose.ui.Alignment 14 | import androidx.compose.ui.Modifier 15 | import androidx.compose.ui.draw.rotate 16 | import androidx.compose.ui.graphics.Color 17 | import androidx.compose.ui.tooling.preview.Preview 18 | import androidx.compose.ui.unit.Dp 19 | import androidx.compose.ui.unit.TextUnit 20 | import androidx.compose.ui.unit.dp 21 | 22 | 23 | @ExperimentalMaterialApi 24 | @Composable 25 | fun ExpandableCard( 26 | title: String, 27 | titleFontSize: TextUnit = MaterialTheme.typography.h6.fontSize, 28 | description: String, 29 | descriptionFontSize: TextUnit = MaterialTheme.typography.subtitle1.fontSize, 30 | padding: Dp = 15.dp 31 | ) { 32 | var expandedState by remember { mutableStateOf(false) } 33 | val rotationState by animateFloatAsState( 34 | targetValue = if (expandedState) 180f else 0f 35 | ) 36 | 37 | Card( 38 | shape = RoundedCornerShape(20.dp), 39 | border = BorderStroke(2.dp, Color.Magenta), 40 | modifier = Modifier 41 | .padding(10.dp) 42 | .fillMaxWidth() 43 | .animateContentSize( 44 | animationSpec = tween( 45 | durationMillis = 500 46 | ) 47 | ) 48 | ) { 49 | Column( 50 | modifier = Modifier 51 | .fillMaxWidth() 52 | .padding(padding) 53 | ) { 54 | Row( 55 | verticalAlignment = Alignment.CenterVertically 56 | ) { 57 | Text( 58 | modifier = Modifier.weight(5f), 59 | text = title, 60 | fontSize = titleFontSize, 61 | color = Color.Blue 62 | ) 63 | IconButton( 64 | modifier = Modifier 65 | .weight(1f) 66 | .rotate(rotationState), 67 | onClick = { 68 | expandedState = !expandedState 69 | }) { 70 | Icon( 71 | imageVector = Icons.Default.ArrowDropDown, 72 | contentDescription = "Arrow Drop Down", 73 | tint = Color.Blue, 74 | modifier = Modifier.size(30.dp) 75 | ) 76 | } 77 | } 78 | if (expandedState) { 79 | Text( 80 | text = description, 81 | fontSize = descriptionFontSize, 82 | color = Color.Black 83 | ) 84 | } 85 | } 86 | } 87 | } 88 | 89 | @ExperimentalMaterialApi 90 | @Preview("Expandable Card") 91 | @Composable 92 | fun ExpandableCardPreview() { 93 | ExpandableCard( 94 | title = "Expandable Card", 95 | description = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing. Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." 96 | ) 97 | } 98 | 99 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/halfcirclepercentgraph/HalfCirclePercentGraph.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.halfcirclepercentgraph 2 | 3 | import androidx.compose.animation.core.Animatable 4 | import androidx.compose.animation.core.LinearEasing 5 | import androidx.compose.animation.core.animateIntAsState 6 | import androidx.compose.animation.core.tween 7 | import androidx.compose.foundation.Canvas 8 | import androidx.compose.foundation.layout.* 9 | import androidx.compose.material.MaterialTheme 10 | import androidx.compose.material.Text 11 | import androidx.compose.runtime.* 12 | import androidx.compose.ui.Alignment 13 | import androidx.compose.ui.Modifier 14 | import androidx.compose.ui.geometry.Size 15 | import androidx.compose.ui.graphics.Color 16 | import androidx.compose.ui.graphics.ColorFilter 17 | import androidx.compose.ui.graphics.StrokeCap 18 | import androidx.compose.ui.graphics.drawscope.Stroke 19 | import androidx.compose.ui.platform.LocalConfiguration 20 | import androidx.compose.ui.tooling.preview.Preview 21 | import androidx.compose.ui.unit.Dp 22 | import androidx.compose.ui.unit.dp 23 | import androidx.compose.ui.unit.sp 24 | import kotlinx.coroutines.delay 25 | 26 | /** 27 | * Created by merttoptas on 4.09.2022. 28 | */ 29 | 30 | @Composable 31 | fun HalfCirclePercentGraph( 32 | modifier: Modifier, 33 | percentage: Float, 34 | fillColor: Color, 35 | backgroundColor: Color, 36 | strokeWidth: Dp = 1.dp, 37 | ) { 38 | // Create a state to hold the current progress 39 | val animateFloat = remember { Animatable(0f) } 40 | // Percentage value to be animated 41 | var percentageValue by remember { mutableStateOf(0) } 42 | 43 | // Animate the percentage value 44 | val animatePercentageValue by animateIntAsState( 45 | targetValue = percentageValue, 46 | animationSpec = tween(durationMillis = 2000, easing = LinearEasing) 47 | ) 48 | 49 | 50 | LaunchedEffect(animateFloat) { 51 | delay(500) 52 | percentageValue = (percentage * 100).toInt() 53 | 54 | // If you wish change the animation duration, you can change the durationMillis value 55 | animateFloat.animateTo( 56 | targetValue = 1f, 57 | animationSpec = tween(durationMillis = 2000, easing = LinearEasing) 58 | ) 59 | } 60 | 61 | val configuration = LocalConfiguration.current 62 | // Get device screen witch because we will use it for drawing the circle 63 | val screenWidth = configuration.screenWidthDp 64 | 65 | Box( 66 | modifier = Modifier 67 | .padding(top = 30.dp, bottom = 30.dp) 68 | .height(200.dp) 69 | ) { 70 | Canvas( 71 | modifier = modifier 72 | .size((screenWidth * 0.5f).toInt().dp) 73 | 74 | ) { 75 | // Background Line 76 | drawArc( 77 | color = backgroundColor, 78 | -180f, 79 | 180f, 80 | false, 81 | style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round), 82 | size = Size(size.width, size.height * 2) 83 | ) 84 | // Fill Line 85 | drawArc( 86 | color = fillColor, 87 | startAngle = -180F, 88 | sweepAngle = percentage * 180f * animateFloat.value, 89 | useCenter = false, 90 | style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round), 91 | size = Size(size.width, size.height * 2) 92 | ) 93 | } 94 | Column( 95 | modifier = Modifier 96 | .align(alignment = Alignment.BottomCenter), 97 | horizontalAlignment = Alignment.CenterHorizontally, 98 | verticalArrangement = Arrangement.Center 99 | ) { 100 | Text( 101 | text = "${animatePercentageValue}%", 102 | color = MaterialTheme.colors.primary, 103 | fontSize = 28.sp 104 | ) 105 | Text( 106 | text = "Component Box", 107 | color = MaterialTheme.colors.primary, 108 | fontSize = 12.sp 109 | ) 110 | } 111 | } 112 | } 113 | 114 | @Preview 115 | @Composable 116 | fun PreviewHalfCirclePercentGraph() { 117 | HalfCirclePercentGraph( 118 | modifier = Modifier, 119 | percentage = 0.3f, 120 | fillColor = Color.Red, 121 | backgroundColor = Color.Gray, 122 | strokeWidth = 30.dp 123 | ) 124 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/image/CustomNetworkImage.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.image 2 | 3 | import androidx.compose.foundation.Image 4 | import androidx.compose.foundation.layout.Box 5 | import androidx.compose.material.CircularProgressIndicator 6 | import androidx.compose.runtime.Composable 7 | import androidx.compose.ui.Alignment 8 | import androidx.compose.ui.Modifier 9 | import androidx.compose.ui.layout.ContentScale 10 | import coil.annotation.ExperimentalCoilApi 11 | import coil.compose.ImagePainter 12 | import coil.compose.rememberImagePainter 13 | import coil.size.OriginalSize 14 | 15 | @OptIn(ExperimentalCoilApi::class) 16 | @Composable 17 | fun CustomNetworkImage( 18 | modifier: Modifier = Modifier, 19 | imageURL: Any?, 20 | placeholder: Int = 0, 21 | contentDescription: String? = null, 22 | contentScale: ContentScale = ContentScale.Inside, 23 | crossFade: Boolean = false 24 | ) { 25 | val painter = rememberImagePainter( 26 | data = imageURL, 27 | builder = { 28 | crossfade(crossFade) 29 | size(OriginalSize) 30 | error(placeholder) 31 | fallback(placeholder) 32 | }, 33 | ) 34 | Box { 35 | Image( 36 | painter = painter, 37 | contentDescription = contentDescription, 38 | contentScale = contentScale, 39 | modifier = modifier 40 | ) 41 | if (painter.state is ImagePainter.State.Loading) 42 | CircularProgressIndicator(Modifier.align(Alignment.Center)) 43 | } 44 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/loading/CircularLoadingBar.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.loading 2 | 3 | import androidx.compose.foundation.layout.size 4 | import androidx.compose.material.CircularProgressIndicator 5 | import androidx.compose.runtime.Composable 6 | import androidx.compose.ui.Modifier 7 | import androidx.compose.ui.graphics.Color 8 | import androidx.compose.ui.tooling.preview.Preview 9 | import androidx.compose.ui.unit.dp 10 | 11 | @Composable 12 | fun CircularLoadingBar(modifier: Modifier = Modifier) { 13 | CircularProgressIndicator( 14 | modifier = modifier 15 | .size(200.dp), 16 | color = Color.Green 17 | ) 18 | } 19 | 20 | @Composable 21 | @Preview 22 | fun CircularLoadingBarPreview(modifier: Modifier = Modifier) { 23 | CircularProgressIndicator( 24 | modifier = modifier 25 | .size(200.dp), 26 | color = Color.Green, 27 | progress = 0.5F 28 | ) 29 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/loading/HorizontalLoadingBar.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.loading 2 | 3 | import androidx.compose.foundation.layout.fillMaxWidth 4 | import androidx.compose.foundation.layout.height 5 | import androidx.compose.foundation.layout.padding 6 | import androidx.compose.foundation.shape.CircleShape 7 | import androidx.compose.material.LinearProgressIndicator 8 | import androidx.compose.runtime.Composable 9 | import androidx.compose.ui.Modifier 10 | import androidx.compose.ui.draw.clip 11 | import androidx.compose.ui.graphics.Color 12 | import androidx.compose.ui.tooling.preview.Preview 13 | import androidx.compose.ui.unit.dp 14 | 15 | @Composable 16 | fun HorizontalLoadingBar(modifier: Modifier = Modifier) { 17 | LinearProgressIndicator( 18 | modifier = modifier 19 | .padding(16.dp) 20 | .clip(CircleShape) 21 | .fillMaxWidth() 22 | .height(20.dp), 23 | backgroundColor = Color.LightGray, 24 | color = Color.Green 25 | ) 26 | } 27 | 28 | @Composable 29 | @Preview 30 | fun HorizontalLoadingBarPreview(modifier: Modifier = Modifier) { 31 | LinearProgressIndicator( 32 | modifier = modifier 33 | .padding(16.dp) 34 | .clip(CircleShape) 35 | .fillMaxWidth() 36 | .height(20.dp), 37 | backgroundColor = Color.LightGray, 38 | color = Color.Green, 39 | progress = 0.5F 40 | ) 41 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/loading/LineLoadingBar.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.loading 2 | 3 | import androidx.compose.foundation.layout.fillMaxWidth 4 | import androidx.compose.foundation.layout.height 5 | import androidx.compose.foundation.layout.padding 6 | import androidx.compose.material.LinearProgressIndicator 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Modifier 9 | import androidx.compose.ui.graphics.Color 10 | import androidx.compose.ui.tooling.preview.Preview 11 | import androidx.compose.ui.unit.dp 12 | 13 | @Composable 14 | fun ThinLoadingBar(modifier: Modifier = Modifier) { 15 | LinearProgressIndicator( 16 | modifier = modifier 17 | .padding(16.dp) 18 | .fillMaxWidth() 19 | .height(2.dp), 20 | backgroundColor = Color.LightGray, 21 | color = Color.Green 22 | ) 23 | } 24 | 25 | @Preview 26 | @Composable 27 | fun ThinLoadingBarPreview(modifier: Modifier = Modifier) { 28 | LinearProgressIndicator( 29 | modifier = modifier 30 | .padding(16.dp) 31 | .fillMaxWidth() 32 | .height(2.dp), 33 | backgroundColor = Color.LightGray, 34 | color = Color.Green, 35 | progress = 0.5F 36 | ) 37 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/loading/StoryLoadingBar.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.loading 2 | 3 | 4 | import androidx.compose.animation.core.Animatable 5 | import androidx.compose.animation.core.LinearEasing 6 | import androidx.compose.animation.core.tween 7 | import androidx.compose.foundation.layout.fillMaxWidth 8 | import androidx.compose.foundation.layout.height 9 | import androidx.compose.foundation.layout.padding 10 | import androidx.compose.foundation.shape.CircleShape 11 | import androidx.compose.material.LinearProgressIndicator 12 | import androidx.compose.runtime.Composable 13 | import androidx.compose.runtime.LaunchedEffect 14 | import androidx.compose.runtime.remember 15 | import androidx.compose.ui.Modifier 16 | import androidx.compose.ui.draw.clip 17 | import androidx.compose.ui.graphics.Color 18 | import androidx.compose.ui.tooling.preview.Preview 19 | import androidx.compose.ui.unit.dp 20 | 21 | @Composable 22 | fun StoryLoadingBar( 23 | modifier: Modifier = Modifier, 24 | ) { 25 | 26 | val progress = remember { Animatable(0F) } 27 | LaunchedEffect(true) { 28 | progress.animateTo( 29 | targetValue = 1f, 30 | animationSpec = tween( 31 | durationMillis = 5000, 32 | easing = LinearEasing 33 | ) 34 | ) 35 | } 36 | 37 | LinearProgressIndicator( 38 | modifier = modifier 39 | .padding(16.dp) 40 | .clip(CircleShape) 41 | .fillMaxWidth() 42 | .height(20.dp), 43 | backgroundColor = Color.DarkGray, 44 | color = Color.White, 45 | progress = progress.value 46 | ) 47 | 48 | } 49 | 50 | @Preview 51 | @Composable 52 | fun StoryLoadingBarPreview() { 53 | LinearProgressIndicator( 54 | modifier = Modifier 55 | .padding(16.dp) 56 | .clip(CircleShape) 57 | .fillMaxWidth() 58 | .height(20.dp), 59 | backgroundColor = Color.DarkGray, 60 | color = Color.White, 61 | progress = 0.5f 62 | ) 63 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/otp/CustomOtpContainer.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.otp 2 | 3 | import androidx.compose.foundation.background 4 | import androidx.compose.foundation.clickable 5 | import androidx.compose.foundation.layout.* 6 | import androidx.compose.foundation.text.KeyboardOptions 7 | import androidx.compose.material.MaterialTheme 8 | import androidx.compose.material.Text 9 | import androidx.compose.material.TextField 10 | import androidx.compose.runtime.* 11 | import androidx.compose.ui.Alignment 12 | import androidx.compose.ui.ExperimentalComposeUiApi 13 | import androidx.compose.ui.Modifier 14 | import androidx.compose.ui.draw.clip 15 | import androidx.compose.ui.focus.FocusRequester 16 | import androidx.compose.ui.focus.focusRequester 17 | import androidx.compose.ui.graphics.Color 18 | import androidx.compose.ui.platform.LocalSoftwareKeyboardController 19 | import androidx.compose.ui.text.input.KeyboardType 20 | import androidx.compose.ui.unit.dp 21 | import kotlinx.coroutines.delay 22 | import kotlinx.coroutines.launch 23 | 24 | 25 | @OptIn(ExperimentalComposeUiApi::class) 26 | @Composable 27 | fun CustomOtpContainer( 28 | modifier: Modifier = Modifier, 29 | value: String, 30 | backgroundColor: Color = Color.White, 31 | onValueChanged: (String) -> Unit, 32 | length: Int = 5, 33 | ) { 34 | val focusRequester = remember { FocusRequester() } 35 | val keyboard = LocalSoftwareKeyboardController.current 36 | 37 | TextField( 38 | value = value, 39 | onValueChange = { 40 | if (it.length <= length) { 41 | if (it.all { c -> c in '0'..'9' }) { 42 | onValueChanged(it) 43 | } 44 | if (it.length >= length) { 45 | keyboard?.hide() 46 | } 47 | } 48 | }, 49 | modifier = Modifier 50 | .size(0.dp) 51 | .focusRequester(focusRequester), 52 | keyboardOptions = KeyboardOptions( 53 | keyboardType = KeyboardType.Number 54 | ) 55 | ) 56 | 57 | Row( 58 | modifier = Modifier.fillMaxWidth(), 59 | horizontalArrangement = Arrangement.Center 60 | ) { 61 | repeat(length) { 62 | Otp( 63 | modifier = modifier 64 | .size(width = 60.dp, height = 60.dp) 65 | .clip(MaterialTheme.shapes.large) 66 | .background(backgroundColor) 67 | .clickable { 68 | focusRequester.requestFocus() 69 | keyboard?.show() 70 | }, 71 | value = value.getOrNull(it)?.toString() ?: "", 72 | isCursorVisible = value.length == it 73 | ) 74 | Spacer(modifier = Modifier.size(8.dp)) 75 | } 76 | } 77 | } 78 | 79 | 80 | @Composable 81 | fun Otp( 82 | modifier: Modifier, 83 | value: String, 84 | isCursorVisible: Boolean = false 85 | ) { 86 | val scope = rememberCoroutineScope() 87 | val (cursorSymbol, setCursorSymbol) = remember { mutableStateOf("") } 88 | 89 | LaunchedEffect(key1 = cursorSymbol, isCursorVisible) { 90 | if (isCursorVisible) { 91 | scope.launch { 92 | delay(350) 93 | setCursorSymbol(if (cursorSymbol.isEmpty()) "|" else "") 94 | } 95 | } 96 | } 97 | 98 | Box( 99 | modifier = modifier 100 | ) { 101 | Text( 102 | text = if (isCursorVisible) cursorSymbol else value, 103 | style = MaterialTheme.typography.body1, 104 | modifier = Modifier.align(Alignment.Center) 105 | ) 106 | } 107 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/progressdialog/SimpleProgressDialog.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.progressdialog 2 | 3 | import androidx.compose.foundation.layout.* 4 | import androidx.compose.foundation.shape.RoundedCornerShape 5 | import androidx.compose.material.* 6 | import androidx.compose.runtime.Composable 7 | import androidx.compose.ui.Alignment 8 | import androidx.compose.ui.Modifier 9 | import androidx.compose.ui.graphics.Color 10 | import androidx.compose.ui.graphics.Shape 11 | import androidx.compose.ui.tooling.preview.Preview 12 | import androidx.compose.ui.unit.Dp 13 | import androidx.compose.ui.unit.dp 14 | import androidx.compose.ui.unit.sp 15 | import androidx.compose.ui.window.Dialog 16 | 17 | 18 | @Composable 19 | fun SimpleProgressDialog( 20 | modifier: Modifier = Modifier, 21 | message: String? = null, 22 | isCircular: Boolean = true, 23 | shape: Shape = RoundedCornerShape(10.dp), 24 | backgroundColor: Color = Color.White, 25 | elevation: Dp = 10.dp, 26 | onDismissRequest: () -> Unit, 27 | ) { 28 | Dialog(onDismissRequest = { onDismissRequest() }) { 29 | ProgressDialogUI( 30 | modifier, 31 | message, 32 | isCircular, 33 | shape, 34 | backgroundColor, 35 | elevation, 36 | ) 37 | } 38 | } 39 | 40 | @Composable 41 | fun ProgressDialogUI( 42 | modifier: Modifier, 43 | message: String?, 44 | isCircular: Boolean, 45 | shape: Shape, 46 | backgroundColor: Color, 47 | elevation: Dp 48 | ) { 49 | Card( 50 | shape = shape, 51 | backgroundColor = backgroundColor, 52 | elevation = elevation, 53 | modifier = modifier 54 | ) { 55 | Column( 56 | horizontalAlignment = Alignment.CenterHorizontally, 57 | verticalArrangement = Arrangement.Center, 58 | modifier = Modifier.padding(20.dp) 59 | ) { 60 | if (isCircular) { 61 | CircularProgressIndicator(strokeWidth = 1.dp) 62 | } else { 63 | LinearProgressIndicator() 64 | } 65 | 66 | Spacer(modifier = Modifier.height(10.dp)) 67 | 68 | if (message != null) { 69 | Text(text = message, style = MaterialTheme.typography.body1, fontSize = 12.sp) 70 | } 71 | } 72 | } 73 | } 74 | 75 | 76 | @Composable 77 | @Preview 78 | fun SimpleProgressDialogPreview() { 79 | SimpleProgressDialog(message = "Processing...") {} 80 | } 81 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/components/search/SearchBar.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.components.search 2 | 3 | import androidx.compose.animation.AnimatedVisibility 4 | import androidx.compose.animation.fadeIn 5 | import androidx.compose.animation.fadeOut 6 | import androidx.compose.foundation.BorderStroke 7 | import androidx.compose.foundation.layout.Row 8 | import androidx.compose.foundation.layout.fillMaxWidth 9 | import androidx.compose.foundation.layout.padding 10 | import androidx.compose.foundation.layout.wrapContentHeight 11 | import androidx.compose.foundation.shape.RoundedCornerShape 12 | import androidx.compose.material.* 13 | import androidx.compose.material.icons.Icons 14 | import androidx.compose.material.icons.filled.Close 15 | import androidx.compose.material.icons.filled.Search 16 | import androidx.compose.runtime.* 17 | import androidx.compose.ui.Alignment 18 | import androidx.compose.ui.Modifier 19 | import androidx.compose.ui.focus.onFocusChanged 20 | import androidx.compose.ui.graphics.Color 21 | import androidx.compose.ui.graphics.Shape 22 | import androidx.compose.ui.platform.LocalFocusManager 23 | import androidx.compose.ui.tooling.preview.Preview 24 | import androidx.compose.ui.unit.Dp 25 | import androidx.compose.ui.unit.dp 26 | 27 | 28 | @Composable 29 | fun SearchBar( 30 | modifier: Modifier, 31 | query: String, 32 | placeholderText: String = "", 33 | border: BorderStroke = BorderStroke((0.5f).dp, MaterialTheme.colors.primary), 34 | backgroundColor: Color = MaterialTheme.colors.surface, 35 | shape: Shape = RoundedCornerShape(32.dp), 36 | elevation: Dp = 8.dp, 37 | onClearClick: () -> Unit = {}, 38 | onQueryChanged: (String) -> Unit, 39 | ) { 40 | var showClearButton by remember { mutableStateOf(false) } 41 | val focusManager = LocalFocusManager.current 42 | 43 | Card( 44 | elevation = elevation, 45 | modifier = modifier.padding(12.dp), 46 | border = border, 47 | backgroundColor = backgroundColor, 48 | shape = shape 49 | ) { 50 | Row(verticalAlignment = Alignment.CenterVertically) { 51 | 52 | Icon( 53 | modifier = Modifier.padding(start = 12.dp), 54 | imageVector = Icons.Filled.Search, 55 | contentDescription = "Search", 56 | tint = MaterialTheme.colors.onSurface 57 | ) 58 | 59 | OutlinedTextField( 60 | modifier = Modifier 61 | .fillMaxWidth() 62 | .padding(vertical = 2.dp) 63 | .onFocusChanged { focusState -> 64 | showClearButton = (focusState.isFocused || query.isNotBlank()) 65 | }, 66 | value = query, 67 | onValueChange = onQueryChanged, 68 | placeholder = { 69 | Text(text = placeholderText, modifier = Modifier.wrapContentHeight()) 70 | }, 71 | colors = TextFieldDefaults.textFieldColors( 72 | focusedIndicatorColor = Color.Transparent, 73 | unfocusedIndicatorColor = Color.Transparent, 74 | backgroundColor = Color.Transparent, 75 | cursorColor = LocalContentColor.current.copy(alpha = LocalContentAlpha.current) 76 | ), 77 | trailingIcon = { 78 | AnimatedVisibility( 79 | visible = showClearButton, 80 | enter = fadeIn(), 81 | exit = fadeOut() 82 | ) { 83 | IconButton(onClick = { 84 | onClearClick() 85 | focusManager.clearFocus() 86 | }) { 87 | Icon( 88 | imageVector = Icons.Filled.Close, 89 | contentDescription = "Close" 90 | ) 91 | } 92 | } 93 | }, 94 | maxLines = 1, 95 | singleLine = true 96 | ) 97 | } 98 | } 99 | } 100 | 101 | @Composable 102 | @Preview 103 | fun SearchBarPreview() { 104 | SearchBar(query = "Android", modifier = Modifier) {} 105 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/navigation/NavGraph.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.navigation 2 | 3 | import androidx.compose.animation.ExperimentalAnimationApi 4 | import androidx.compose.foundation.layout.padding 5 | import androidx.compose.material.ExperimentalMaterialApi 6 | import androidx.compose.material.MaterialTheme 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Modifier 9 | import com.google.accompanist.navigation.animation.AnimatedNavHost 10 | import com.google.accompanist.navigation.animation.composable 11 | import com.google.accompanist.navigation.animation.rememberAnimatedNavController 12 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 13 | import com.merttoptas.jetpack_compose_component_box.components.halfcirclepercentgraph.HalfCirclePercentGraph 14 | import com.merttoptas.jetpack_compose_component_box.screen.buttons.ButtonsScreen 15 | import com.merttoptas.jetpack_compose_component_box.screen.canvasviews.halfcirclepercentgraph.HalfCirclePercentGraphScreen 16 | import com.merttoptas.jetpack_compose_component_box.screen.card.BasicCardsScreen 17 | import com.merttoptas.jetpack_compose_component_box.screen.card.ExpandableCardScreen 18 | import com.merttoptas.jetpack_compose_component_box.screen.dashboard.DashBoardScreen 19 | import com.merttoptas.jetpack_compose_component_box.screen.loading.LoadingScreen 20 | import com.merttoptas.jetpack_compose_component_box.screen.otp.OtpScreen 21 | import com.merttoptas.jetpack_compose_component_box.screen.progressdialog.ProgressDialogScreen 22 | import com.merttoptas.jetpack_compose_component_box.screen.search.SearchScreen 23 | 24 | @OptIn(ExperimentalAnimationApi::class, ExperimentalMaterialApi::class) 25 | @Composable 26 | fun NavGraph(startDestination: String = NavScreen.DashBoard.route) { 27 | val navController = rememberAnimatedNavController() 28 | 29 | CustomScaffold( 30 | backgroundColor = MaterialTheme.colors.background, 31 | ) { innerPadding -> 32 | AnimatedNavHost( 33 | navController = navController, 34 | startDestination = startDestination, 35 | Modifier.padding(innerPadding) 36 | ) { 37 | 38 | composable(NavScreen.DashBoard.route) { 39 | DashBoardScreen(navigateToButtons = { 40 | navController.navigate(NavScreen.Buttons.route) 41 | }, navigateToOtpScreen = { 42 | navController.navigate(NavScreen.Otp.route) 43 | }, navigateToLoadings = { 44 | navController.navigate(NavScreen.Loading.route) 45 | }, navigateToExpandableCardScreen = { 46 | navController.navigate(NavScreen.ExpandableCard.route) 47 | }, navigateToBasicCardScreen = { 48 | navController.navigate(NavScreen.BasicCards.route) 49 | }, navigateToProgressDialogScreen = { 50 | navController.navigate(NavScreen.ProgressDialog.route) 51 | }, navigateToSearchBarScreen = { 52 | navController.navigate(NavScreen.SearchBar.route) 53 | }, navigateToHalfCircleProgress = { 54 | navController.navigate(NavScreen.HalfCircleProgressBar.route) 55 | }) 56 | } 57 | 58 | composable(NavScreen.Buttons.route) { 59 | ButtonsScreen(navigateToBack = { 60 | navController.popBackStack() 61 | }) 62 | } 63 | composable(NavScreen.Loading.route) { 64 | LoadingScreen(navigateToBack = { 65 | navController.popBackStack() 66 | }) 67 | } 68 | composable(NavScreen.Otp.route) { 69 | OtpScreen(navigateToBack = { 70 | navController.popBackStack() 71 | }) 72 | } 73 | composable(NavScreen.ExpandableCard.route) { 74 | ExpandableCardScreen(navigateToBack = { 75 | navController.popBackStack() 76 | }) 77 | } 78 | 79 | composable(NavScreen.BasicCards.route) { 80 | BasicCardsScreen(navigateToBack = { 81 | navController.popBackStack() 82 | }) 83 | } 84 | 85 | composable(NavScreen.ProgressDialog.route) { 86 | ProgressDialogScreen(navigateToBack = { 87 | navController.popBackStack() 88 | }) 89 | } 90 | 91 | composable(NavScreen.SearchBar.route) { 92 | SearchScreen(navigateToBack = { 93 | navController.popBackStack() 94 | }) 95 | } 96 | 97 | composable(NavScreen.HalfCircleProgressBar.route) { 98 | HalfCirclePercentGraphScreen(navigateToBack = { 99 | navController.popBackStack() 100 | }) 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/navigation/NavScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.navigation 2 | 3 | sealed class NavScreen(val route: String) { 4 | object DashBoard : NavScreen("dashboard") 5 | object Buttons : NavScreen("buttons") 6 | object Otp : NavScreen("otp") 7 | object Loading : NavScreen("loading") 8 | object ExpandableCard : NavScreen("expandableCard") 9 | object BasicCards : NavScreen("basicCards") 10 | object ProgressDialog : NavScreen("progressDialog") 11 | object SearchBar : NavScreen("searchBar") 12 | object HalfCircleProgressBar : NavScreen("halfCircleProgressBar") 13 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/buttons/ButtonsScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.buttons 2 | 3 | import androidx.compose.foundation.layout.* 4 | import androidx.compose.material.ButtonDefaults 5 | import androidx.compose.material.IconButton 6 | import androidx.compose.material.MaterialTheme 7 | import androidx.compose.material.icons.Icons 8 | import androidx.compose.material.icons.filled.Add 9 | import androidx.compose.material.rememberScaffoldState 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.ui.Alignment 12 | import androidx.compose.ui.Modifier 13 | import androidx.compose.ui.graphics.Color 14 | import androidx.compose.ui.unit.dp 15 | import com.merttoptas.jetpack_compose_component_box.components.BackArrowIcon 16 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 17 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 18 | import com.merttoptas.jetpack_compose_component_box.components.buttons.CustomElevatedButton 19 | import com.merttoptas.jetpack_compose_component_box.components.buttons.GradientButton 20 | import com.merttoptas.jetpack_compose_component_box.components.buttons.OutlinedButton 21 | 22 | @Composable 23 | fun ButtonsScreen(navigateToBack: () -> Unit) { 24 | val scaffoldState = rememberScaffoldState() 25 | 26 | CustomScaffold( 27 | modifier = Modifier.fillMaxSize(), 28 | scaffoldState = scaffoldState, 29 | topBar = { 30 | CustomTopBar( 31 | text = "Buttons", 32 | elevation = 10.dp, 33 | navigationIcon = { 34 | BackArrowIcon(navigateToBack) 35 | }, 36 | actions = { 37 | IconButton(onClick = {}) {} 38 | }, 39 | ) 40 | }, 41 | content = { 42 | Content() 43 | }, 44 | backgroundColor = MaterialTheme.colors.background 45 | ) 46 | } 47 | 48 | @Composable 49 | private fun Content() { 50 | Column( 51 | modifier = Modifier 52 | .fillMaxSize() 53 | .padding(horizontal = 20.dp), 54 | horizontalAlignment = Alignment.CenterHorizontally, 55 | verticalArrangement = Arrangement.Center 56 | ) { 57 | CustomElevatedButton( 58 | modifier = Modifier.fillMaxWidth(), 59 | onClick = {}, 60 | text = "Enabled", 61 | colors = ButtonDefaults.buttonColors( 62 | backgroundColor = Color(0xffE5EADC) 63 | ), 64 | leadingIcon = Icons.Default.Add, 65 | iconTintColor = Color(0xff648A4F), 66 | textColor = Color(0xff648A4F), 67 | ) 68 | 69 | GradientButton( 70 | modifier = Modifier 71 | .fillMaxWidth() 72 | .padding(horizontal = 8.dp, vertical = 8.dp) 73 | ) {} 74 | 75 | OutlinedButton( 76 | modifier = Modifier 77 | .fillMaxWidth() 78 | .wrapContentWidth(Alignment.CenterHorizontally), 79 | ) 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/canvasviews/halfcirclepercentgraph/HalfCirclePercentGraphScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.canvasviews.halfcirclepercentgraph 2 | 3 | import androidx.compose.foundation.layout.* 4 | import androidx.compose.material.MaterialTheme 5 | import androidx.compose.material.rememberScaffoldState 6 | import androidx.compose.runtime.Composable 7 | import androidx.compose.ui.Alignment 8 | import androidx.compose.ui.Modifier 9 | import androidx.compose.ui.graphics.Color 10 | import androidx.compose.ui.unit.dp 11 | import com.merttoptas.jetpack_compose_component_box.components.BackArrowIcon 12 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 13 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 14 | import com.merttoptas.jetpack_compose_component_box.components.halfcirclepercentgraph.HalfCirclePercentGraph 15 | import com.merttoptas.jetpack_compose_component_box.components.loading.CircularLoadingBar 16 | import com.merttoptas.jetpack_compose_component_box.components.loading.HorizontalLoadingBar 17 | import com.merttoptas.jetpack_compose_component_box.components.loading.StoryLoadingBar 18 | import com.merttoptas.jetpack_compose_component_box.components.loading.ThinLoadingBar 19 | 20 | /** 21 | * Created by merttoptas on 4.09.2022. 22 | */ 23 | 24 | @Composable 25 | fun HalfCirclePercentGraphScreen(navigateToBack: () -> Unit) { 26 | val scaffoldState = rememberScaffoldState() 27 | 28 | CustomScaffold( 29 | modifier = Modifier.fillMaxSize(), 30 | scaffoldState = scaffoldState, 31 | topBar = { 32 | CustomTopBar( 33 | text = "Half Circle Percent Graph", 34 | elevation = 10.dp, 35 | navigationIcon = { 36 | BackArrowIcon(onClick = navigateToBack) 37 | }, 38 | ) 39 | }, 40 | content = { 41 | Content() 42 | } 43 | ) 44 | } 45 | 46 | @Composable 47 | private fun Content() { 48 | Column( 49 | modifier = Modifier.fillMaxSize().padding(horizontal = 50.dp), 50 | verticalArrangement = Arrangement.SpaceAround, 51 | horizontalAlignment = Alignment.CenterHorizontally, 52 | ) { 53 | HalfCirclePercentGraph( 54 | modifier = Modifier.fillMaxWidth(), 55 | percentage = 0.80f, 56 | fillColor = MaterialTheme.colors.primary, 57 | backgroundColor = Color.Gray, 58 | strokeWidth = 30.dp 59 | ) 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/card/BasicCardsScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.card 2 | 3 | import androidx.compose.foundation.layout.* 4 | import androidx.compose.foundation.rememberScrollState 5 | import androidx.compose.foundation.verticalScroll 6 | import androidx.compose.material.ExperimentalMaterialApi 7 | import androidx.compose.material.rememberScaffoldState 8 | import androidx.compose.runtime.Composable 9 | import androidx.compose.ui.Modifier 10 | import androidx.compose.ui.unit.dp 11 | import com.merttoptas.jetpack_compose_component_box.components.BackArrowIcon 12 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 13 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 14 | import com.merttoptas.jetpack_compose_component_box.components.card.CustomBasicImageIconCard 15 | import com.merttoptas.jetpack_compose_component_box.components.card.CustomBasicShareCard 16 | import com.merttoptas.jetpack_compose_component_box.components.card.CustomBasicShareWithIconCard 17 | import com.merttoptas.jetpack_compose_component_box.components.card.CustomHorizontalCard 18 | 19 | 20 | @ExperimentalMaterialApi 21 | @Composable 22 | fun BasicCardsScreen(navigateToBack: () -> Unit) { 23 | val scaffoldState = rememberScaffoldState() 24 | CustomScaffold( 25 | modifier = Modifier.fillMaxSize(), 26 | scaffoldState = scaffoldState, 27 | topBar = { 28 | CustomTopBar( 29 | text = "Basic Cards", 30 | elevation = 10.dp, 31 | navigationIcon = { 32 | BackArrowIcon(onClick = navigateToBack) 33 | }, 34 | ) 35 | }, 36 | content = { 37 | Content() 38 | } 39 | ) 40 | } 41 | 42 | @ExperimentalMaterialApi 43 | @Composable 44 | private fun Content() { 45 | Column( 46 | modifier = Modifier 47 | .fillMaxSize() 48 | .verticalScroll(rememberScrollState()) 49 | .padding(horizontal = 10.dp, vertical = 10.dp), 50 | ) { 51 | 52 | CustomHorizontalCard( 53 | modifier = Modifier.fillMaxWidth(), 54 | onClick = {}, 55 | imageUrl = "https://miro.medium.com/max/1400/1*u48XQeiEY0DGRQj8--EFyw.png", 56 | text = "Jetpack Compose", 57 | subtitleText = "Box", 58 | elevation = 5.dp 59 | ) 60 | 61 | CustomBasicShareCard( 62 | modifier = Modifier 63 | .fillMaxWidth() 64 | .padding(top = 20.dp), 65 | onClick = {}, 66 | imageUrl = "https://images.deliveryhero.io/image/fd-tr/LH/vs6i-hero.jpg", 67 | text = "1914 translation by H. Rackham", 68 | subtitleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fermentum, metus in malesuada aliquet, ex erat cursus nisl, sit amet molestie risus ligula ut magna. Aliquam erat volutpat." 69 | ) 70 | 71 | CustomBasicShareWithIconCard( 72 | modifier = Modifier 73 | .fillMaxWidth() 74 | .padding(top = 20.dp), 75 | text = "Aliquet Et Ante", 76 | onClickBookmark = {}, 77 | onClickShare = {}, 78 | imageUrl = "https://media.kingston.com/hyperx/category/hx-family-keyboard-alloy-origins-60-lg.jpg", 79 | onClickFavorite = {} 80 | ) 81 | Row(modifier = Modifier.fillMaxWidth()) { 82 | CustomBasicImageIconCard( 83 | modifier = Modifier 84 | .padding(top = 20.dp) 85 | .weight(0.5f), 86 | onClickBookmark = {}, 87 | onClickShare = {}, 88 | imageUrl = "https://media.kingston.com/hyperx/category/hx-family-keyboard-alloy-origins-60-lg.jpg", 89 | onClickFavorite = {}, 90 | text = "Aliquet Et Ante", 91 | ) 92 | CustomBasicImageIconCard( 93 | modifier = Modifier 94 | .padding(top = 20.dp, start = 10.dp) 95 | .weight(0.5f), 96 | onClickBookmark = {}, 97 | onClickShare = {}, 98 | imageUrl = "https://media.kingston.com/hyperx/category/hx-family-keyboard-alloy-origins-60-lg.jpg", 99 | onClickFavorite = {}, 100 | text = "Aliquet Et Ante", 101 | ) 102 | } 103 | 104 | } 105 | } 106 | 107 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/card/ExpandableCardScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.card 2 | import androidx.compose.foundation.layout.* 3 | import androidx.compose.material.ExperimentalMaterialApi 4 | import androidx.compose.material.rememberScaffoldState 5 | import androidx.compose.runtime.Composable 6 | import androidx.compose.ui.Modifier 7 | import androidx.compose.ui.unit.dp 8 | import com.merttoptas.jetpack_compose_component_box.components.BackArrowIcon 9 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 10 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 11 | import com.merttoptas.jetpack_compose_component_box.components.card.ExpandableCard 12 | 13 | @ExperimentalMaterialApi 14 | @Composable 15 | fun ExpandableCardScreen(navigateToBack: () -> Unit) { 16 | val scaffoldState = rememberScaffoldState() 17 | CustomScaffold( 18 | modifier = Modifier.fillMaxSize(), 19 | scaffoldState = scaffoldState, 20 | topBar = { 21 | CustomTopBar( 22 | text = "Expandable Card", 23 | elevation = 10.dp, 24 | navigationIcon = { 25 | BackArrowIcon(onClick = navigateToBack) 26 | }, 27 | ) 28 | }, 29 | content = { 30 | Content() 31 | } 32 | ) 33 | } 34 | 35 | @ExperimentalMaterialApi 36 | @Composable 37 | private fun Content() { 38 | Column( 39 | modifier = Modifier 40 | .fillMaxSize() 41 | .padding(horizontal = 10.dp, vertical = 50.dp), 42 | ) { 43 | ExpandableCard( 44 | title = "Expandable Card", 45 | description = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing. Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." 46 | ) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/dashboard/DashBoardScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.dashboard 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.foundation.layout.padding 7 | import androidx.compose.material.MaterialTheme 8 | import androidx.compose.material.rememberScaffoldState 9 | import androidx.compose.runtime.Composable 10 | import androidx.compose.ui.Alignment 11 | import androidx.compose.ui.Modifier 12 | import androidx.compose.ui.graphics.Color 13 | import androidx.compose.ui.unit.dp 14 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 15 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 16 | import com.merttoptas.jetpack_compose_component_box.components.buttons.CustomElevatedButton 17 | 18 | @Composable 19 | fun DashBoardScreen( 20 | navigateToButtons: () -> Unit, 21 | navigateToLoadings: () -> Unit, 22 | navigateToOtpScreen: () -> Unit, 23 | navigateToExpandableCardScreen: () -> Unit, 24 | navigateToBasicCardScreen: () -> Unit, 25 | navigateToProgressDialogScreen: () -> Unit, 26 | navigateToSearchBarScreen: () -> Unit, 27 | navigateToHalfCircleProgress: () -> Unit, 28 | ) { 29 | val scaffoldState = rememberScaffoldState() 30 | 31 | CustomScaffold( 32 | modifier = Modifier.fillMaxSize(), 33 | scaffoldState = scaffoldState, 34 | topBar = { 35 | CustomTopBar( 36 | text = "DashBoard", 37 | elevation = 10.dp, 38 | ) 39 | }, 40 | content = { 41 | Content( 42 | navigateToButtons = { 43 | navigateToButtons.invoke() 44 | }, 45 | navigateToOtpScreen = { 46 | navigateToOtpScreen.invoke() 47 | }, 48 | navigateToLoadings = { 49 | navigateToLoadings.invoke() 50 | }, 51 | navigateToExpandableCardScreen = { 52 | navigateToExpandableCardScreen.invoke() 53 | }, 54 | navigateToBasicCardScreen = { 55 | navigateToBasicCardScreen.invoke() 56 | }, 57 | navigateToProgressDialogScreen = { 58 | navigateToProgressDialogScreen.invoke() 59 | }, 60 | navigateToSearchBarScreen = { 61 | navigateToSearchBarScreen.invoke() 62 | }, 63 | navigateToHalfCircleProgress = { 64 | navigateToHalfCircleProgress.invoke() 65 | } 66 | ) 67 | }, 68 | backgroundColor = MaterialTheme.colors.background 69 | ) 70 | } 71 | 72 | @Composable 73 | private fun Content( 74 | navigateToButtons: () -> Unit, 75 | navigateToOtpScreen: () -> Unit, 76 | navigateToLoadings: () -> Unit, 77 | navigateToExpandableCardScreen: () -> Unit, 78 | navigateToBasicCardScreen: () -> Unit, 79 | navigateToProgressDialogScreen: () -> Unit, 80 | navigateToSearchBarScreen: () -> Unit, 81 | navigateToHalfCircleProgress: () -> Unit, 82 | ) { 83 | Column( 84 | modifier = Modifier 85 | .fillMaxSize() 86 | .padding(horizontal = 20.dp), 87 | horizontalAlignment = Alignment.CenterHorizontally, 88 | verticalArrangement = Arrangement.Center 89 | ) { 90 | CustomElevatedButton(onClick = navigateToButtons, text = "Buttons", textColor = Color.White) 91 | CustomElevatedButton( 92 | modifier = Modifier.padding(top = 10.dp), 93 | onClick = navigateToOtpScreen, 94 | text = "Otp", 95 | textColor = Color.White 96 | ) 97 | CustomElevatedButton( 98 | modifier = Modifier.padding(top = 10.dp), 99 | onClick = navigateToLoadings, 100 | text = "Loadings", 101 | textColor = Color.White 102 | ) 103 | CustomElevatedButton( 104 | modifier = Modifier.padding(top = 10.dp), 105 | onClick = navigateToExpandableCardScreen, 106 | text = "Expandable Card", 107 | textColor = Color.White 108 | ) 109 | 110 | CustomElevatedButton( 111 | modifier = Modifier.padding(top = 10.dp), 112 | onClick = navigateToBasicCardScreen, 113 | text = "Basic Cards", 114 | textColor = Color.White 115 | ) 116 | 117 | CustomElevatedButton( 118 | modifier = Modifier.padding(top = 10.dp), 119 | onClick = navigateToProgressDialogScreen, 120 | text = "Progress Dialog", 121 | textColor = Color.White 122 | ) 123 | 124 | CustomElevatedButton( 125 | modifier = Modifier.padding(top = 10.dp), 126 | onClick = navigateToSearchBarScreen, 127 | text = "SearchBar", 128 | textColor = Color.White 129 | ) 130 | 131 | CustomElevatedButton( 132 | modifier = Modifier.padding(top = 10.dp), 133 | onClick = navigateToHalfCircleProgress, 134 | text = "Half Circle Progress", 135 | textColor = Color.White 136 | ) 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/loading/LoadingScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.loading 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.material.rememberScaffoldState 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Alignment 9 | import androidx.compose.ui.Modifier 10 | import androidx.compose.ui.unit.dp 11 | import com.merttoptas.jetpack_compose_component_box.components.BackArrowIcon 12 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 13 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 14 | import com.merttoptas.jetpack_compose_component_box.components.loading.CircularLoadingBar 15 | import com.merttoptas.jetpack_compose_component_box.components.loading.HorizontalLoadingBar 16 | import com.merttoptas.jetpack_compose_component_box.components.loading.StoryLoadingBar 17 | import com.merttoptas.jetpack_compose_component_box.components.loading.ThinLoadingBar 18 | 19 | @Composable 20 | fun LoadingScreen(navigateToBack: () -> Unit) { 21 | val scaffoldState = rememberScaffoldState() 22 | 23 | CustomScaffold( 24 | modifier = Modifier.fillMaxSize(), 25 | scaffoldState = scaffoldState, 26 | topBar = { 27 | CustomTopBar( 28 | text = "Loading", 29 | elevation = 10.dp, 30 | navigationIcon = { 31 | BackArrowIcon(onClick = navigateToBack) 32 | }, 33 | ) 34 | }, 35 | content = { 36 | Content() 37 | } 38 | ) 39 | } 40 | 41 | @Composable 42 | private fun Content() { 43 | Column( 44 | modifier = Modifier.fillMaxSize(), 45 | verticalArrangement = Arrangement.SpaceAround, 46 | horizontalAlignment = Alignment.CenterHorizontally, 47 | ) { 48 | CircularLoadingBar() 49 | 50 | HorizontalLoadingBar() 51 | 52 | ThinLoadingBar() 53 | 54 | StoryLoadingBar() 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/otp/OtpScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.otp 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.foundation.layout.padding 7 | import androidx.compose.material.IconButton 8 | import androidx.compose.material.MaterialTheme 9 | import androidx.compose.material.rememberScaffoldState 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.runtime.mutableStateOf 12 | import androidx.compose.runtime.remember 13 | import androidx.compose.ui.Alignment 14 | import androidx.compose.ui.Modifier 15 | import androidx.compose.ui.graphics.Color 16 | import androidx.compose.ui.unit.dp 17 | import com.merttoptas.jetpack_compose_component_box.components.BackArrowIcon 18 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 19 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 20 | import com.merttoptas.jetpack_compose_component_box.components.otp.CustomOtpContainer 21 | 22 | 23 | @Composable 24 | fun OtpScreen(navigateToBack: () -> Unit) { 25 | val scaffoldState = rememberScaffoldState() 26 | 27 | CustomScaffold( 28 | modifier = Modifier.fillMaxSize(), 29 | scaffoldState = scaffoldState, 30 | topBar = { 31 | CustomTopBar( 32 | text = "Otp", 33 | elevation = 10.dp, 34 | navigationIcon = { 35 | BackArrowIcon(navigateToBack) 36 | }, 37 | actions = { 38 | IconButton(onClick = {}) {} 39 | }, 40 | ) 41 | }, 42 | content = { 43 | Content() 44 | }, 45 | backgroundColor = MaterialTheme.colors.background 46 | ) 47 | } 48 | 49 | @Composable 50 | private fun Content() { 51 | val otpValue = remember { mutableStateOf("") } 52 | 53 | Column( 54 | modifier = Modifier 55 | .fillMaxSize() 56 | .padding(horizontal = 20.dp), 57 | horizontalAlignment = Alignment.CenterHorizontally, 58 | verticalArrangement = Arrangement.Center 59 | ) { 60 | CustomOtpContainer(value = otpValue.value, onValueChanged = { 61 | otpValue.value = it 62 | }, backgroundColor = Color(0xffF3F6FA)) 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/progressdialog/ProgressDialogScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.progressdialog 2 | 3 | import androidx.compose.foundation.layout.* 4 | import androidx.compose.material.Button 5 | import androidx.compose.material.ExperimentalMaterialApi 6 | import androidx.compose.material.rememberScaffoldState 7 | import androidx.compose.runtime.* 8 | import androidx.compose.ui.Alignment 9 | import androidx.compose.ui.Modifier 10 | import androidx.compose.ui.graphics.Color 11 | import androidx.compose.ui.unit.dp 12 | import com.merttoptas.jetpack_compose_component_box.components.BackArrowIcon 13 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 14 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 15 | import com.merttoptas.jetpack_compose_component_box.components.buttons.CustomElevatedButton 16 | import com.merttoptas.jetpack_compose_component_box.components.progressdialog.SimpleProgressDialog 17 | import kotlinx.coroutines.delay 18 | import kotlinx.coroutines.launch 19 | 20 | @ExperimentalMaterialApi 21 | @Composable 22 | fun ProgressDialogScreen(navigateToBack: () -> Unit) { 23 | val scaffoldState = rememberScaffoldState() 24 | CustomScaffold( 25 | modifier = Modifier.fillMaxSize(), 26 | scaffoldState = scaffoldState, 27 | topBar = { 28 | CustomTopBar( 29 | text = "Progress Dialog", 30 | elevation = 10.dp, 31 | navigationIcon = { 32 | BackArrowIcon(onClick = navigateToBack) 33 | }, 34 | ) 35 | }, 36 | content = { 37 | Content() 38 | } 39 | ) 40 | } 41 | 42 | @ExperimentalMaterialApi 43 | @Composable 44 | private fun Content() { 45 | val openDialog = remember { mutableStateOf(true) } 46 | val scope = rememberCoroutineScope() 47 | 48 | LaunchedEffect(openDialog) { 49 | delay(2000) 50 | openDialog.value = false 51 | } 52 | 53 | Column( 54 | modifier = Modifier 55 | .fillMaxSize() 56 | .padding(horizontal = 10.dp, vertical = 50.dp), 57 | horizontalAlignment = Alignment.CenterHorizontally 58 | ) { 59 | if (openDialog.value) { 60 | SimpleProgressDialog( 61 | message = "Please wait...", 62 | onDismissRequest = { 63 | openDialog.value = false 64 | } 65 | ) 66 | } 67 | 68 | CustomElevatedButton(onClick = { 69 | openDialog.value = true 70 | scope.launch { 71 | delay(2000) 72 | openDialog.value = false 73 | } 74 | }, text = "Show Progress Dialog", textColor = Color.White) 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/screen/search/SearchBarScreen.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.screen.search 2 | 3 | import androidx.compose.foundation.layout.Column 4 | import androidx.compose.foundation.layout.fillMaxSize 5 | import androidx.compose.foundation.layout.padding 6 | import androidx.compose.foundation.lazy.LazyColumn 7 | import androidx.compose.foundation.lazy.items 8 | import androidx.compose.material.Text 9 | import androidx.compose.material.rememberScaffoldState 10 | import androidx.compose.runtime.* 11 | import androidx.compose.ui.Modifier 12 | import androidx.compose.ui.graphics.Color 13 | import androidx.compose.ui.tooling.preview.Preview 14 | import androidx.compose.ui.unit.dp 15 | import com.merttoptas.jetpack_compose_component_box.components.BackArrowIcon 16 | import com.merttoptas.jetpack_compose_component_box.components.CustomScaffold 17 | import com.merttoptas.jetpack_compose_component_box.components.CustomTopBar 18 | import com.merttoptas.jetpack_compose_component_box.components.search.SearchBar 19 | 20 | @Composable 21 | fun SearchBarScreenContent() { 22 | 23 | var searchQuery by remember { mutableStateOf("") } 24 | val allOS by remember { mutableStateOf(getRandomGeneratedDummyPlatforms()) } 25 | var filteredOSList by remember { mutableStateOf(allOS) } 26 | 27 | Column(modifier = Modifier.fillMaxSize()) { 28 | SearchBar( 29 | modifier = Modifier, 30 | query = searchQuery, 31 | placeholderText = "Search", 32 | onQueryChanged = { 33 | searchQuery = it 34 | filteredOSList = allOS.filter { it.contains(searchQuery, true) } 35 | }, 36 | onClearClick = { 37 | searchQuery = "" 38 | filteredOSList = allOS 39 | }) 40 | 41 | PlatformList(filteredOSList) 42 | } 43 | 44 | } 45 | 46 | @Composable 47 | fun PlatformList(OSList: List) { 48 | if (OSList.isEmpty()) { 49 | Text(text = "No any OS that matches your query", color = Color.Red) 50 | return 51 | } 52 | 53 | LazyColumn(Modifier.fillMaxSize()) { 54 | items(OSList) { 55 | Text(text = it, modifier = Modifier.padding(16.dp)) 56 | } 57 | } 58 | } 59 | 60 | @Composable 61 | fun SearchScreen(navigateToBack: () -> Unit) { 62 | 63 | val scaffoldState = rememberScaffoldState() 64 | 65 | CustomScaffold( 66 | modifier = Modifier.fillMaxSize(), 67 | scaffoldState = scaffoldState, 68 | topBar = { 69 | CustomTopBar( 70 | text = "SearchBar Screen", 71 | elevation = 10.dp, 72 | navigationIcon = { 73 | BackArrowIcon(onClick = { navigateToBack.invoke() }) 74 | }, 75 | ) 76 | }, 77 | content = { 78 | SearchBarScreenContent() 79 | } 80 | ) 81 | 82 | } 83 | 84 | 85 | fun getRandomGeneratedDummyPlatforms(): List { 86 | val osAndDescriptionsList = listOf( 87 | "Android", 88 | "Android is open to everyone: developers, designers and device makers.", 89 | "iOS", 90 | "iOS is created and developed by Apple Inc. It is the world's second-most widely installed mobile operating system, after Android. ", 91 | "Windows", 92 | "Windows is a graphical operating system developed and published by Microsoft.", 93 | "Linux", 94 | "MacOS" 95 | ) 96 | 97 | val osRandomList = mutableListOf() 98 | (0..100).forEach { 99 | osRandomList.add( 100 | osAndDescriptionsList[(0 until (osAndDescriptionsList.size)).random()] 101 | ) 102 | } 103 | return osRandomList 104 | } 105 | 106 | @Preview 107 | @Composable 108 | fun SearchScreenPreview() { 109 | SearchScreen {} 110 | } 111 | -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/ui/theme/Color.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.ui.theme 2 | 3 | import androidx.compose.ui.graphics.Color 4 | 5 | val Purple200 = Color(0xFFBB86FC) 6 | val Purple500 = Color(0xFF6200EE) 7 | val Purple700 = Color(0xFF3700B3) 8 | val Teal200 = Color(0xFF03DAC5) -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/ui/theme/Shape.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.ui.theme 2 | 3 | import androidx.compose.foundation.shape.RoundedCornerShape 4 | import androidx.compose.material.Shapes 5 | import androidx.compose.ui.unit.dp 6 | 7 | val Shapes = Shapes( 8 | small = RoundedCornerShape(4.dp), 9 | medium = RoundedCornerShape(4.dp), 10 | large = RoundedCornerShape(15.dp) 11 | ) -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/ui/theme/Theme.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.ui.theme 2 | 3 | import androidx.compose.foundation.isSystemInDarkTheme 4 | import androidx.compose.material.MaterialTheme 5 | import androidx.compose.material.darkColors 6 | import androidx.compose.material.lightColors 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.graphics.Color 9 | 10 | private val DarkColorPalette = darkColors( 11 | primary = Purple200, 12 | primaryVariant = Purple700, 13 | secondary = Teal200 14 | ) 15 | 16 | private val LightColorPalette = lightColors( 17 | primary = Purple500, 18 | primaryVariant = Purple700, 19 | secondary = Teal200, 20 | onSecondary = Color.Black, 21 | 22 | 23 | /* Other default colors to override 24 | background = Color.White, 25 | surface = Color.White, 26 | onPrimary = Color.White, 27 | onSecondary = Color.Black, 28 | onBackground = Color.Black, 29 | onSurface = Color.Black, 30 | */ 31 | ) 32 | 33 | @Composable 34 | fun JetpackComposeComponentBoxTheme( 35 | darkTheme: Boolean = isSystemInDarkTheme(), 36 | content: @Composable () -> Unit 37 | ) { 38 | val colors = if (darkTheme) { 39 | DarkColorPalette 40 | } else { 41 | LightColorPalette 42 | } 43 | 44 | MaterialTheme( 45 | colors = colors, 46 | typography = Typography, 47 | shapes = Shapes, 48 | content = content 49 | ) 50 | } -------------------------------------------------------------------------------- /app/src/main/java/com/merttoptas/jetpack_compose_component_box/ui/theme/Type.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box.ui.theme 2 | 3 | import androidx.compose.material.Typography 4 | import androidx.compose.ui.text.TextStyle 5 | import androidx.compose.ui.text.font.FontFamily 6 | import androidx.compose.ui.text.font.FontWeight 7 | import androidx.compose.ui.unit.sp 8 | 9 | // Set of Material typography styles to start with 10 | val Typography = Typography( 11 | body1 = TextStyle( 12 | fontFamily = FontFamily.Default, 13 | fontWeight = FontWeight.Normal, 14 | fontSize = 16.sp 15 | ) 16 | /* Other default text styles to override 17 | button = TextStyle( 18 | fontFamily = FontFamily.Default, 19 | fontWeight = FontWeight.W500, 20 | fontSize = 14.sp 21 | ), 22 | caption = TextStyle( 23 | fontFamily = FontFamily.Default, 24 | fontWeight = FontWeight.Normal, 25 | fontSize = 12.sp 26 | ) 27 | */ 28 | ) -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_baseline_bookmark_24.xml: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #FFFFFFFF 10 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Jetpack-Compose-Component-Box 3 | -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /app/src/main/res/xml/backup_rules.xml: -------------------------------------------------------------------------------- 1 | 8 | 9 | 13 | -------------------------------------------------------------------------------- /app/src/main/res/xml/data_extraction_rules.xml: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /app/src/test/java/com/merttoptas/jetpack_compose_component_box/ExampleUnitTest.kt: -------------------------------------------------------------------------------- 1 | package com.merttoptas.jetpack_compose_component_box 2 | 3 | import org.junit.Test 4 | 5 | import org.junit.Assert.* 6 | 7 | /** 8 | * Example local unit test, which will execute on the development machine (host). 9 | * 10 | * See [testing documentation](http://d.android.com/tools/testing). 11 | */ 12 | class ExampleUnitTest { 13 | @Test 14 | fun addition_isCorrect() { 15 | assertEquals(4, 2 + 2) 16 | } 17 | } -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | compose_version = '1.3.1' 4 | } 5 | }// Top-level build file where you can add configuration options common to all sub-projects/modules. 6 | plugins { 7 | id 'com.android.application' version '7.2.1' apply false 8 | id 'com.android.library' version '7.2.1' apply false 9 | id 'org.jetbrains.kotlin.android' version '1.7.10' apply false 10 | } 11 | 12 | task clean(type: Delete) { 13 | delete rootProject.buildDir 14 | } -------------------------------------------------------------------------------- /docs/gif/buttons.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/docs/gif/buttons.gif -------------------------------------------------------------------------------- /docs/gif/expandable-card.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/docs/gif/expandable-card.gif -------------------------------------------------------------------------------- /docs/gif/half-circle-graph.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/docs/gif/half-circle-graph.gif -------------------------------------------------------------------------------- /docs/gif/loadings.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/docs/gif/loadings.gif -------------------------------------------------------------------------------- /docs/gif/otp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/docs/gif/otp.gif -------------------------------------------------------------------------------- /docs/gif/progress-dialog.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/docs/gif/progress-dialog.gif -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | # IDE (e.g. Android Studio) users: 3 | # Gradle settings configured through the IDE *will override* 4 | # any settings specified in this file. 5 | # For more details on how to configure your build environment visit 6 | # http://www.gradle.org/docs/current/userguide/build_environment.html 7 | # Specifies the JVM arguments used for the daemon process. 8 | # The setting is particularly useful for tweaking memory settings. 9 | org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8 10 | # When configured, Gradle will run in incubating parallel mode. 11 | # This option should only be used with decoupled projects. More details, visit 12 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 13 | # org.gradle.parallel=true 14 | # AndroidX package structure to make it clearer which packages are bundled with the 15 | # Android operating system, and which are packaged with your app"s APK 16 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 17 | android.useAndroidX=true 18 | # Kotlin code style for this project: "official" or "obsolete": 19 | kotlin.code.style=official 20 | # Enables namespacing of each library's R class so that its R class includes only the 21 | # resources declared in the library itself and none from the library's dependencies, 22 | # thereby reducing the size of the R class for that library 23 | android.nonTransitiveRClass=true -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/merttoptas/Jetpack-Compose-Component-Box/a51c0b5b0641a6bb77f9db59b8c717873e82d6a8/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Wed Jun 15 19:04:25 TRT 2022 2 | distributionBase=GRADLE_USER_HOME 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip 4 | distributionPath=wrapper/dists 5 | zipStorePath=wrapper/dists 6 | zipStoreBase=GRADLE_USER_HOME 7 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | 86 | # Determine the Java command to use to start the JVM. 87 | if [ -n "$JAVA_HOME" ] ; then 88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 89 | # IBM's JDK on AIX uses strange locations for the executables 90 | JAVACMD="$JAVA_HOME/jre/sh/java" 91 | else 92 | JAVACMD="$JAVA_HOME/bin/java" 93 | fi 94 | if [ ! -x "$JAVACMD" ] ; then 95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 96 | 97 | Please set the JAVA_HOME variable in your environment to match the 98 | location of your Java installation." 99 | fi 100 | else 101 | JAVACMD="java" 102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 103 | 104 | Please set the JAVA_HOME variable in your environment to match the 105 | location of your Java installation." 106 | fi 107 | 108 | # Increase the maximum file descriptors if we can. 109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 110 | MAX_FD_LIMIT=`ulimit -H -n` 111 | if [ $? -eq 0 ] ; then 112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 113 | MAX_FD="$MAX_FD_LIMIT" 114 | fi 115 | ulimit -n $MAX_FD 116 | if [ $? -ne 0 ] ; then 117 | warn "Could not set maximum file descriptor limit: $MAX_FD" 118 | fi 119 | else 120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 121 | fi 122 | fi 123 | 124 | # For Darwin, add options to specify how the application appears in the dock 125 | if $darwin; then 126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 127 | fi 128 | 129 | # For Cygwin or MSYS, switch paths to Windows format before running java 130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 133 | 134 | JAVACMD=`cygpath --unix "$JAVACMD"` 135 | 136 | # We build the pattern for arguments to be converted via cygpath 137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 138 | SEP="" 139 | for dir in $ROOTDIRSRAW ; do 140 | ROOTDIRS="$ROOTDIRS$SEP$dir" 141 | SEP="|" 142 | done 143 | OURCYGPATTERN="(^($ROOTDIRS))" 144 | # Add a user-defined pattern to the cygpath arguments 145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 147 | fi 148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 149 | i=0 150 | for arg in "$@" ; do 151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 153 | 154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 156 | else 157 | eval `echo args$i`="\"$arg\"" 158 | fi 159 | i=`expr $i + 1` 160 | done 161 | case $i in 162 | 0) set -- ;; 163 | 1) set -- "$args0" ;; 164 | 2) set -- "$args0" "$args1" ;; 165 | 3) set -- "$args0" "$args1" "$args2" ;; 166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;; 167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 172 | esac 173 | fi 174 | 175 | # Escape application args 176 | save () { 177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 178 | echo " " 179 | } 180 | APP_ARGS=`save "$@"` 181 | 182 | # Collect all arguments for the java command, following the shell quoting and substitution rules 183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 184 | 185 | exec "$JAVACMD" "$@" 186 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { 2 | repositories { 3 | gradlePluginPortal() 4 | google() 5 | mavenCentral() 6 | } 7 | } 8 | dependencyResolutionManagement { 9 | repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | } 15 | rootProject.name = "Jetpack-Compose-Component-Box" 16 | include ':app' 17 | --------------------------------------------------------------------------------