├── .gitignore ├── .idea ├── .gitignore ├── compiler.xml ├── gradle.xml ├── inspectionProfiles │ └── Project_Default.xml ├── misc.xml └── vcs.xml ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── pencelab │ │ └── collapsingtoolbarincompose │ │ └── ExampleInstrumentedTest.kt │ ├── debug │ └── java │ │ └── com │ │ └── pencelab │ │ └── collapsingtoolbarincompose │ │ └── AnimalListPreviewParameterProvider.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── pencelab │ │ │ └── collapsingtoolbarincompose │ │ │ ├── MainActivity.kt │ │ │ ├── data │ │ │ └── model │ │ │ │ └── Animal.kt │ │ │ └── ui │ │ │ ├── composables │ │ │ ├── AnimalCard.kt │ │ │ ├── EagerCatalog.kt │ │ │ ├── LazyCatalog.kt │ │ │ └── Toolbar.kt │ │ │ └── theme │ │ │ ├── Color.kt │ │ │ ├── Shape.kt │ │ │ ├── Theme.kt │ │ │ └── Type.kt │ └── res │ │ ├── drawable-hdpi │ │ ├── baby_green_sea_turtle.png │ │ ├── capuchin_monkey.png │ │ ├── emerald_basilisk.png │ │ ├── greeen_iguana.png │ │ ├── hoffmans_two_toed_sloth.png │ │ ├── jaguar.png │ │ ├── keel_billed_toucan.png │ │ ├── king_vulture.png │ │ ├── red_eyed_tree_frog.png │ │ ├── resplendent_quetzal.png │ │ ├── scarlet_macaw.png │ │ ├── toolbar_background.png │ │ └── white_nosed_coati.png │ │ ├── drawable-mdpi │ │ ├── baby_green_sea_turtle.png │ │ ├── capuchin_monkey.png │ │ ├── emerald_basilisk.png │ │ ├── greeen_iguana.png │ │ ├── hoffmans_two_toed_sloth.png │ │ ├── jaguar.png │ │ ├── keel_billed_toucan.png │ │ ├── king_vulture.png │ │ ├── red_eyed_tree_frog.png │ │ ├── resplendent_quetzal.png │ │ ├── scarlet_macaw.png │ │ ├── toolbar_background.png │ │ └── white_nosed_coati.png │ │ ├── drawable-xhdpi │ │ ├── baby_green_sea_turtle.png │ │ ├── capuchin_monkey.png │ │ ├── emerald_basilisk.png │ │ ├── greeen_iguana.png │ │ ├── hoffmans_two_toed_sloth.png │ │ ├── jaguar.png │ │ ├── keel_billed_toucan.png │ │ ├── king_vulture.png │ │ ├── red_eyed_tree_frog.png │ │ ├── resplendent_quetzal.png │ │ ├── scarlet_macaw.png │ │ ├── toolbar_background.png │ │ └── white_nosed_coati.png │ │ ├── drawable-xxhdpi │ │ ├── baby_green_sea_turtle.png │ │ ├── capuchin_monkey.png │ │ ├── emerald_basilisk.png │ │ ├── greeen_iguana.png │ │ ├── hoffmans_two_toed_sloth.png │ │ ├── jaguar.png │ │ ├── keel_billed_toucan.png │ │ ├── king_vulture.png │ │ ├── red_eyed_tree_frog.png │ │ ├── resplendent_quetzal.png │ │ ├── scarlet_macaw.png │ │ ├── toolbar_background.png │ │ └── white_nosed_coati.png │ │ ├── drawable-xxxhdpi │ │ ├── baby_green_sea_turtle.png │ │ ├── capuchin_monkey.png │ │ ├── emerald_basilisk.png │ │ ├── greeen_iguana.png │ │ ├── hoffmans_two_toed_sloth.png │ │ ├── jaguar.png │ │ ├── keel_billed_toucan.png │ │ ├── king_vulture.png │ │ ├── red_eyed_tree_frog.png │ │ ├── resplendent_quetzal.png │ │ ├── scarlet_macaw.png │ │ ├── toolbar_background.png │ │ └── white_nosed_coati.png │ │ ├── drawable │ │ ├── logo_costa.xml │ │ ├── logo_costa_rica_map.xml │ │ ├── logo_rica.xml │ │ └── logo_wildlife.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-night │ │ └── themes.xml │ │ └── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml │ └── test │ └── java │ └── com │ └── pencelab │ └── collapsingtoolbarincompose │ └── ExampleUnitTest.kt ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── screenshots ├── ScrollFlag_EnterAlways.gif ├── ScrollFlag_EnterAlwaysCollapsed.gif ├── ScrollFlag_ExitUntilCollapsed.gif ├── ScrollFlag_Scroll.gif ├── animals_catalog.png ├── toolbar_collapsed.png └── toolbar_expanded.png └── 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/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19 | 20 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CollapsingToolbarInCompose 2 | 3 |

4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 | 14 | ## Branches 15 | 16 | - `master`: Initial code. 17 | - `column_version`: Resulting code using a `Column`. 18 | - `lazycolumn_version`: Resulting code using a `LazyColumn`. 19 | 20 | ## Description 21 | 22 | This is a native Android application whose UI is completely implemented in Jetpack Compose. It replicates the functionality of a *Coordinator Layout* and displays a list of items with a collapsing toolbar on top that behaves differently depending on its scroll flag. 23 | 24 | This project is part of a programming guide published on *Medium* that shows how to implement a collapsing toolbar in Jetpack Compose which can be found here. 25 | 26 | ## Purpose 27 | 28 | The main purpose is to show how to implement the same functionality of a *Coordinator Layout* built 100% in Jetpack Compose. In order to do so, 4 out of its 5 different behaviors/scroll flags are implemented: 29 | 30 |
Scroll behavior 31 | The toolbar acts like if it were attached to the top of the list. When the list is scrolled down, the toolbar gets collapsed and leaves the screen before the first element does. When the list is scrolled up, once the first element is completely shown, the toolbar enters the screen and gets expanded. 32 |

33 |
34 |
EnterAlways behavior 35 | As soon as the list is scrolled down, no matter its current position or scroll state, the toolbar gets collapsed and leaves the screen. When the list is scrolled up, the toolbar enters the screen immediately and gets expanded. 36 |

37 |
38 |
EnterAlwaysCollapsed behavior 39 | As soon as the list is scrolled down, no matter its current position or scroll state, the toolbar gets collapsed and leaves the screen. When the list is scrolled up, the toolbar enters the screen immediately, but it only gets expanded if the first element is being shown completely. 40 |

41 |
42 |
ExitUntilCollapsed behavior 43 | In this case, the toolbar never leaves the screen. As soon as the list is scrolled down, no matter its current position or scroll state, the toolbar gets collapsed. When the list is scrolled up, the toolbar gets expanded only if the first element is being shown completely. 44 |

45 |
46 | 47 | ## Theme 48 | The application is titled ***Costa Rica Wildlife*** and shows a list of exotic animals that can be found across this country. 49 | 50 |
Expanded Toolbar Preview
51 |

52 |
53 |
Collapsed Toolbar Preview
54 |

55 |
56 |
Sample List Preview
57 |

58 | 59 | --- 60 | 61 | ### Photo Credits 62 | - Arenal Volcano by [Fabio Fistarol] 63 | - Jaguar by [Omar Mena] 64 | - Scarlet Macaw by [Shannon Kunkle] 65 | - Baby Green Sea Turtle by [Charlotte Rush] 66 | - Red-Eyed Tree Frog by [Zdeněk Macháček] 67 | - Hoffman's Two-Toed Sloth by [Adrián Valverde] 68 | - Resplendent Quetzal by [Zdeněk Macháček] 69 | - White-Nosed Coati by [Frank Williams] 70 | - Green Iguana by [Alli Elder] 71 | - Keel-Billed Toucan by [Zdeněk Macháček] 72 | - Capuchin Monkey by [Etienne Delorieux] 73 | - Emerald Basilisk by [Ray Harrington] 74 | - King Vulture by [Birger Strahl] 75 | -------------------------------------------------------------------------------- /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 31 8 | 9 | defaultConfig { 10 | applicationId "com.pencelab.collapsingtoolbarincompose" 11 | minSdk 21 12 | targetSdk 31 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 | ext { 49 | accompanist_version = '0.24.7-alpha' 50 | } 51 | 52 | dependencies { 53 | 54 | implementation 'androidx.core:core-ktx:1.7.0' 55 | implementation 'androidx.appcompat:appcompat:1.4.1' 56 | implementation 'com.google.android.material:material:1.6.0' 57 | implementation "androidx.compose.ui:ui:$compose_version" 58 | implementation "androidx.compose.ui:ui-util:$compose_version" 59 | implementation "androidx.compose.material:material:$compose_version" 60 | implementation "androidx.compose.ui:ui-tooling-preview:$compose_version" 61 | implementation "androidx.compose.material:material-icons-extended:$compose_version" 62 | implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1' 63 | implementation 'androidx.activity:activity-compose:1.4.0' 64 | testImplementation 'junit:junit:4.13.2' 65 | androidTestImplementation 'androidx.test.ext:junit:1.1.3' 66 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0' 67 | androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" 68 | debugImplementation "androidx.compose.ui:ui-tooling:$compose_version" 69 | 70 | //Accompanist 71 | implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version" 72 | } -------------------------------------------------------------------------------- /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/pencelab/collapsingtoolbarincompose/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose 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.pencelab.collapsingtoolbarincompose", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/debug/java/com/pencelab/collapsingtoolbarincompose/AnimalListPreviewParameterProvider.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose 2 | 3 | import androidx.compose.ui.tooling.preview.PreviewParameterProvider 4 | import com.pencelab.collapsingtoolbarincompose.data.model.Animal 5 | 6 | class AnimalListPreviewParameterProvider: PreviewParameterProvider> { 7 | override val values = sequenceOf( 8 | listOf( 9 | Animal("Jaguar", R.drawable.jaguar), 10 | Animal("Scarlet Macaw", R.drawable.scarlet_macaw), 11 | Animal("Baby Green Sea Turtle", R.drawable.baby_green_sea_turtle), 12 | Animal("Red-Eyed Tree Frog", R.drawable.red_eyed_tree_frog), 13 | Animal("Hoffman's Two-Toed Sloth", R.drawable.hoffmans_two_toed_sloth), 14 | Animal("Resplendent Quetzal", R.drawable.resplendent_quetzal), 15 | Animal("White-Nosed Coati", R.drawable.white_nosed_coati), 16 | Animal("Green Iguana", R.drawable.greeen_iguana), 17 | Animal("Keel-Billed Toucan", R.drawable.keel_billed_toucan), 18 | Animal("Capuchin Monkey", R.drawable.capuchin_monkey), 19 | Animal("Emerald Basilisk", R.drawable.emerald_basilisk), 20 | Animal("King Vulture", R.drawable.king_vulture) 21 | ) 22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose 2 | 3 | import android.os.Bundle 4 | import androidx.activity.ComponentActivity 5 | import androidx.activity.compose.setContent 6 | import androidx.compose.foundation.Image 7 | import androidx.compose.foundation.layout.* 8 | import androidx.compose.material.MaterialTheme 9 | import androidx.compose.material.Text 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.runtime.SideEffect 12 | import androidx.compose.ui.Alignment 13 | import androidx.compose.ui.Modifier 14 | import androidx.compose.ui.graphics.Color 15 | import androidx.compose.ui.res.painterResource 16 | import androidx.compose.ui.text.style.TextAlign 17 | import androidx.compose.ui.tooling.preview.Preview 18 | import androidx.compose.ui.tooling.preview.PreviewParameter 19 | import androidx.compose.ui.unit.dp 20 | import androidx.core.view.WindowCompat 21 | import com.google.accompanist.systemuicontroller.rememberSystemUiController 22 | import com.pencelab.collapsingtoolbarincompose.data.model.Animal 23 | import com.pencelab.collapsingtoolbarincompose.ui.theme.CollapsingToolbarInComposeTheme 24 | 25 | class MainActivity : ComponentActivity() { 26 | override fun onCreate(savedInstanceState: Bundle?) { 27 | super.onCreate(savedInstanceState) 28 | 29 | val animals = listOf( 30 | Animal("Jaguar", R.drawable.jaguar), 31 | Animal("Scarlet Macaw", R.drawable.scarlet_macaw), 32 | Animal("Baby Green Sea Turtle", R.drawable.baby_green_sea_turtle), 33 | Animal("Red-Eyed Tree Frog", R.drawable.red_eyed_tree_frog), 34 | Animal("Hoffman's Two-Toed Sloth", R.drawable.hoffmans_two_toed_sloth), 35 | Animal("Resplendent Quetzal", R.drawable.resplendent_quetzal), 36 | Animal("White-Nosed Coati", R.drawable.white_nosed_coati), 37 | Animal("Green Iguana", R.drawable.greeen_iguana), 38 | Animal("Keel-Billed Toucan", R.drawable.keel_billed_toucan), 39 | Animal("Capuchin Monkey", R.drawable.capuchin_monkey), 40 | Animal("Emerald Basilisk", R.drawable.emerald_basilisk), 41 | Animal("King Vulture", R.drawable.king_vulture) 42 | ) 43 | 44 | WindowCompat.setDecorFitsSystemWindows(window, false) 45 | 46 | setContent { 47 | val systemUiController = rememberSystemUiController() 48 | val useDarkIcons = !MaterialTheme.colors.isLight 49 | SideEffect { 50 | systemUiController.setSystemBarsColor(Color.Transparent, darkIcons = useDarkIcons) 51 | } 52 | 53 | CollapsingToolbarInComposeApp(animals) 54 | } 55 | } 56 | } 57 | 58 | @Composable 59 | fun CollapsingToolbarInComposeApp(animals: List) { 60 | CollapsingToolbarInComposeTheme { 61 | Column( 62 | verticalArrangement = Arrangement.Center, 63 | modifier = Modifier.fillMaxSize() 64 | ) { 65 | Row( 66 | modifier = Modifier.fillMaxWidth().wrapContentHeight(), 67 | verticalAlignment = Alignment.CenterVertically, 68 | horizontalArrangement = Arrangement.Center 69 | ) { 70 | Image( 71 | painter = painterResource(id = R.drawable.logo_costa), 72 | contentDescription = null, 73 | modifier = Modifier 74 | .padding(4.dp) 75 | .height(16.dp) 76 | .wrapContentWidth() 77 | ) 78 | Image( 79 | painter = painterResource(id = R.drawable.logo_rica), 80 | contentDescription = null, 81 | modifier = Modifier 82 | .padding(4.dp) 83 | .height(16.dp) 84 | .wrapContentWidth() 85 | ) 86 | Image( 87 | painter = painterResource(id = R.drawable.logo_wildlife), 88 | contentDescription = null, 89 | modifier = Modifier 90 | .padding(4.dp) 91 | .height(32.dp) 92 | .wrapContentWidth() 93 | ) 94 | } 95 | Spacer(modifier = Modifier 96 | .fillMaxWidth() 97 | .height(8.dp) 98 | ) 99 | animals.forEach { 100 | Text( 101 | text = it.name, 102 | modifier = Modifier.fillMaxWidth(), 103 | textAlign = TextAlign.Center, 104 | style = MaterialTheme.typography.body1 105 | ) 106 | } 107 | } 108 | } 109 | } 110 | 111 | @Preview(showBackground = true) 112 | @Composable 113 | fun CollapsingToolbarInComposeAppPreview( 114 | @PreviewParameter(AnimalListPreviewParameterProvider::class) animals: List 115 | ) { 116 | CollapsingToolbarInComposeApp(animals) 117 | } 118 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/data/model/Animal.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.data.model 2 | 3 | import androidx.annotation.DrawableRes 4 | 5 | data class Animal(val name: String, @DrawableRes val imageResId: Int) 6 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/ui/composables/AnimalCard.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.ui.composables 2 | 3 | import androidx.compose.foundation.Image 4 | import androidx.compose.foundation.background 5 | import androidx.compose.foundation.layout.* 6 | import androidx.compose.foundation.shape.CircleShape 7 | import androidx.compose.foundation.shape.RoundedCornerShape 8 | import androidx.compose.material.* 9 | import androidx.compose.material.icons.Icons 10 | import androidx.compose.material.icons.rounded.Explore 11 | import androidx.compose.material.icons.rounded.Star 12 | import androidx.compose.material.icons.rounded.VolumeUp 13 | import androidx.compose.runtime.* 14 | import androidx.compose.ui.Alignment 15 | import androidx.compose.ui.Modifier 16 | import androidx.compose.ui.graphics.Color 17 | import androidx.compose.ui.layout.ContentScale 18 | import androidx.compose.ui.res.painterResource 19 | import androidx.compose.ui.text.style.TextAlign 20 | import androidx.compose.ui.text.style.TextOverflow 21 | import androidx.compose.ui.tooling.preview.Preview 22 | import androidx.compose.ui.tooling.preview.PreviewParameter 23 | import androidx.compose.ui.unit.dp 24 | import com.pencelab.collapsingtoolbarincompose.AnimalListPreviewParameterProvider 25 | import com.pencelab.collapsingtoolbarincompose.data.model.Animal 26 | import com.pencelab.collapsingtoolbarincompose.ui.theme.CollapsingToolbarInComposeTheme 27 | 28 | private const val BottomBarHeightFraction = 0.14f 29 | private const val TopBarHeightFraction = BottomBarHeightFraction / 2 30 | private val BarColor = Color(red = 0f, green = 0f, blue = 0f, alpha = 0.5f) 31 | 32 | @Preview(showBackground = true) 33 | @Composable 34 | fun AnimalCardPreview( 35 | @PreviewParameter(AnimalListPreviewParameterProvider::class) animals: List 36 | ) { 37 | CollapsingToolbarInComposeTheme { 38 | Row(modifier = Modifier 39 | .fillMaxWidth() 40 | .wrapContentHeight() 41 | ) { 42 | animals.take(2).forEach { 43 | AnimalCard( 44 | animal = it, 45 | modifier = Modifier 46 | .padding(2.dp) 47 | .weight(1f) 48 | .wrapContentHeight() 49 | ) 50 | } 51 | } 52 | } 53 | } 54 | 55 | @Composable 56 | fun AnimalCard( 57 | animal: Animal, 58 | modifier: Modifier = Modifier 59 | ) { 60 | Card( 61 | modifier = modifier.aspectRatio(0.66f), 62 | shape = RoundedCornerShape(8.dp) 63 | ) { 64 | Box(modifier = Modifier.fillMaxSize()) { 65 | Image( 66 | painter = painterResource(animal.imageResId), 67 | contentDescription = animal.name, 68 | contentScale = ContentScale.FillWidth, 69 | modifier = Modifier.fillMaxWidth() 70 | ) 71 | TopBar() 72 | BottomBar(animal.name) 73 | } 74 | } 75 | } 76 | 77 | @Composable 78 | private fun BoxScope.TopBar() { 79 | Box( 80 | modifier = Modifier 81 | .fillMaxWidth() 82 | .fillMaxHeight(TopBarHeightFraction) 83 | .background(BarColor) 84 | .padding(horizontal = 8.dp, vertical = 2.dp) 85 | .align(Alignment.TopCenter) 86 | ) { 87 | Row( 88 | modifier = Modifier 89 | .fillMaxHeight(0.75f) 90 | .wrapContentWidth() 91 | .align(Alignment.CenterStart), 92 | horizontalArrangement = Arrangement.spacedBy(2.dp), 93 | verticalAlignment = Alignment.CenterVertically 94 | ) { 95 | Icon(imageVector = Icons.Rounded.Star, contentDescription = null) 96 | Icon(imageVector = Icons.Rounded.Star, contentDescription = null) 97 | Icon(imageVector = Icons.Rounded.Star, contentDescription = null) 98 | } 99 | 100 | Row( 101 | modifier = Modifier 102 | .fillMaxHeight(0.75f) 103 | .wrapContentWidth() 104 | .align(Alignment.CenterEnd), 105 | horizontalArrangement = Arrangement.spacedBy(2.dp), 106 | verticalAlignment = Alignment.CenterVertically 107 | ) { 108 | IconButton( 109 | onClick = { }, 110 | modifier = Modifier 111 | .fillMaxHeight() 112 | .aspectRatio(1f) 113 | .background( 114 | color = LocalContentColor.current.copy(alpha = 0.0f), 115 | shape = CircleShape 116 | ) 117 | ) { 118 | Icon( 119 | imageVector = Icons.Rounded.VolumeUp, 120 | contentDescription = null 121 | ) 122 | } 123 | IconButton( 124 | onClick = { }, 125 | modifier = Modifier 126 | .fillMaxHeight() 127 | .aspectRatio(1f) 128 | .background( 129 | color = LocalContentColor.current.copy(alpha = 0.0f), 130 | shape = CircleShape 131 | ) 132 | ) { 133 | Icon( 134 | imageVector = Icons.Rounded.Explore, 135 | contentDescription = null 136 | ) 137 | } 138 | } 139 | } 140 | } 141 | 142 | @Composable 143 | private fun BoxScope.BottomBar(text: String) { 144 | Box( 145 | modifier = Modifier 146 | .fillMaxWidth() 147 | .fillMaxHeight(BottomBarHeightFraction) 148 | .background(BarColor) 149 | .align(Alignment.BottomCenter) 150 | ) { 151 | Text( 152 | text = text, 153 | textAlign = TextAlign.Center, 154 | maxLines = 1, 155 | overflow = TextOverflow.Ellipsis, 156 | modifier = Modifier 157 | .fillMaxWidth() 158 | .align(Alignment.Center) 159 | ) 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/ui/composables/EagerCatalog.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.ui.composables 2 | 3 | import androidx.compose.foundation.ScrollState 4 | import androidx.compose.foundation.layout.* 5 | import androidx.compose.foundation.rememberScrollState 6 | import androidx.compose.foundation.verticalScroll 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.runtime.remember 9 | import androidx.compose.ui.Modifier 10 | import androidx.compose.ui.platform.LocalLayoutDirection 11 | import androidx.compose.ui.tooling.preview.Preview 12 | import androidx.compose.ui.tooling.preview.PreviewParameter 13 | import androidx.compose.ui.unit.dp 14 | import com.pencelab.collapsingtoolbarincompose.AnimalListPreviewParameterProvider 15 | import com.pencelab.collapsingtoolbarincompose.data.model.Animal 16 | import com.pencelab.collapsingtoolbarincompose.ui.theme.CollapsingToolbarInComposeTheme 17 | 18 | @Preview(showBackground = true) 19 | @Composable 20 | fun EagerCatalogPreview( 21 | @PreviewParameter(AnimalListPreviewParameterProvider::class) animals: List 22 | ) { 23 | CollapsingToolbarInComposeTheme { 24 | EagerCatalog( 25 | animals = animals, 26 | columns = 2, 27 | modifier = Modifier.fillMaxSize() 28 | ) 29 | } 30 | } 31 | 32 | /**-------------------------------------------------------------------------------------- * 33 | * W A R N I N G * 34 | * -------------------------------------------------------------------------------------- * 35 | * This composable function is only for illustration purpose. * 36 | * DO NOT attempt using a Column component whose content is built dynamically. * 37 | * This is highly inefficient and you should prefer using a LazyColumn component instead. * 38 | * -------------------------------------------------------------------------------------- */ 39 | @Composable 40 | fun EagerCatalog( 41 | animals: List, 42 | columns: Int, 43 | modifier: Modifier = Modifier, 44 | scrollState: ScrollState = rememberScrollState(), 45 | contentPadding: PaddingValues = PaddingValues(0.dp) 46 | ) { 47 | 48 | val chunkedList = remember(animals, columns) { 49 | animals.chunked(columns) 50 | } 51 | 52 | Column( 53 | modifier = modifier.verticalScroll(scrollState) 54 | ) { 55 | Spacer( 56 | modifier = Modifier 57 | .fillMaxWidth() 58 | .height(contentPadding.calculateTopPadding()) 59 | ) 60 | 61 | chunkedList.forEach { chunk -> 62 | Row ( 63 | modifier = Modifier 64 | .fillMaxWidth() 65 | .wrapContentHeight() 66 | ) { 67 | 68 | Spacer( 69 | modifier = Modifier 70 | .fillMaxHeight() 71 | .width(contentPadding.calculateStartPadding(LocalLayoutDirection.current)) 72 | ) 73 | 74 | chunk.forEach { animal -> 75 | AnimalCard( 76 | animal = animal, 77 | modifier = Modifier 78 | .padding(2.dp) 79 | .weight(1f) 80 | ) 81 | } 82 | 83 | val emptyCells = columns - chunk.size 84 | if (emptyCells > 0) { 85 | Spacer(modifier = Modifier.weight(emptyCells.toFloat())) 86 | } 87 | 88 | Spacer( 89 | modifier = Modifier 90 | .fillMaxHeight() 91 | .width(contentPadding.calculateEndPadding(LocalLayoutDirection.current)) 92 | ) 93 | } 94 | } 95 | 96 | Spacer( 97 | modifier = Modifier 98 | .fillMaxWidth() 99 | .height(contentPadding.calculateBottomPadding()) 100 | ) 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/ui/composables/LazyCatalog.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.ui.composables 2 | 3 | import androidx.compose.foundation.layout.* 4 | import androidx.compose.foundation.lazy.LazyColumn 5 | import androidx.compose.foundation.lazy.LazyListState 6 | import androidx.compose.foundation.lazy.items 7 | import androidx.compose.foundation.lazy.rememberLazyListState 8 | import androidx.compose.runtime.Composable 9 | import androidx.compose.runtime.remember 10 | import androidx.compose.ui.Modifier 11 | import androidx.compose.ui.tooling.preview.Preview 12 | import androidx.compose.ui.tooling.preview.PreviewParameter 13 | import androidx.compose.ui.unit.dp 14 | import com.pencelab.collapsingtoolbarincompose.AnimalListPreviewParameterProvider 15 | import com.pencelab.collapsingtoolbarincompose.data.model.Animal 16 | import com.pencelab.collapsingtoolbarincompose.ui.theme.CollapsingToolbarInComposeTheme 17 | 18 | @Preview(showBackground = true) 19 | @Composable 20 | fun LazyCatalogPreview( 21 | @PreviewParameter(AnimalListPreviewParameterProvider::class) animals: List 22 | ) { 23 | CollapsingToolbarInComposeTheme { 24 | LazyCatalog( 25 | animals = animals, 26 | columns = 2, 27 | modifier = Modifier.fillMaxSize() 28 | ) 29 | } 30 | } 31 | 32 | @Composable 33 | fun LazyCatalog( 34 | animals: List, 35 | columns: Int, 36 | modifier: Modifier = Modifier, 37 | listState: LazyListState = rememberLazyListState(), 38 | contentPadding: PaddingValues = PaddingValues(0.dp) 39 | ) { 40 | 41 | val chunkedList = remember(animals, columns) { 42 | animals.chunked(columns) 43 | } 44 | 45 | LazyColumn( 46 | state = listState, 47 | contentPadding = contentPadding, 48 | modifier = modifier 49 | ) { 50 | items(chunkedList) { chunk -> 51 | Row ( 52 | modifier = Modifier 53 | .fillMaxWidth() 54 | .wrapContentHeight() 55 | ) { 56 | chunk.forEach { animal -> 57 | AnimalCard( 58 | animal = animal, 59 | modifier = Modifier 60 | .padding(2.dp) 61 | .weight(1f) 62 | ) 63 | } 64 | 65 | val emptyCells = columns - chunk.size 66 | if (emptyCells > 0) { 67 | Spacer(modifier = Modifier.weight(emptyCells.toFloat())) 68 | } 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/ui/composables/Toolbar.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.ui.composables 2 | 3 | import androidx.annotation.DrawableRes 4 | import androidx.compose.foundation.Image 5 | import androidx.compose.foundation.background 6 | import androidx.compose.foundation.layout.* 7 | import androidx.compose.foundation.shape.CircleShape 8 | import androidx.compose.material.* 9 | import androidx.compose.material.icons.Icons 10 | import androidx.compose.material.icons.rounded.PrivacyTip 11 | import androidx.compose.material.icons.rounded.Settings 12 | import androidx.compose.runtime.Composable 13 | import androidx.compose.ui.BiasAlignment 14 | import androidx.compose.ui.Modifier 15 | import androidx.compose.ui.graphics.ColorFilter 16 | import androidx.compose.ui.graphics.graphicsLayer 17 | import androidx.compose.ui.layout.ContentScale 18 | import androidx.compose.ui.layout.Layout 19 | import androidx.compose.ui.platform.LocalDensity 20 | import androidx.compose.ui.res.painterResource 21 | import androidx.compose.ui.tooling.preview.Preview 22 | import androidx.compose.ui.unit.dp 23 | import androidx.compose.ui.util.lerp 24 | import com.pencelab.collapsingtoolbarincompose.R 25 | import com.pencelab.collapsingtoolbarincompose.ui.theme.CollapsingToolbarInComposeTheme 26 | import kotlin.math.roundToInt 27 | 28 | private val ContentPadding = 8.dp 29 | private val Elevation = 4.dp 30 | private val ButtonSize = 24.dp 31 | private const val Alpha = 0.75f 32 | 33 | private val ExpandedPadding = 1.dp 34 | private val CollapsedPadding = 3.dp 35 | 36 | private val ExpandedCostaRicaHeight = 20.dp 37 | private val CollapsedCostaRicaHeight = 16.dp 38 | 39 | private val ExpandedWildlifeHeight = 32.dp 40 | private val CollapsedWildlifeHeight = 24.dp 41 | 42 | private val MapHeight = CollapsedCostaRicaHeight * 2 43 | 44 | @Preview 45 | @Composable 46 | fun CollapsingToolbarCollapsedPreview() { 47 | CollapsingToolbarInComposeTheme { 48 | CollapsingToolbar( 49 | backgroundImageResId = R.drawable.toolbar_background, 50 | progress = 0f, 51 | onPrivacyTipButtonClicked = {}, 52 | onSettingsButtonClicked = {}, 53 | modifier = Modifier 54 | .fillMaxWidth() 55 | .height(80.dp) 56 | ) 57 | } 58 | } 59 | 60 | @Preview 61 | @Composable 62 | fun CollapsingToolbarHalfwayPreview() { 63 | CollapsingToolbarInComposeTheme { 64 | CollapsingToolbar( 65 | backgroundImageResId = R.drawable.toolbar_background, 66 | progress = 0.5f, 67 | onPrivacyTipButtonClicked = {}, 68 | onSettingsButtonClicked = {}, 69 | modifier = Modifier 70 | .fillMaxWidth() 71 | .height(120.dp) 72 | ) 73 | } 74 | } 75 | 76 | @Preview 77 | @Composable 78 | fun CollapsingToolbarExpandedPreview() { 79 | CollapsingToolbarInComposeTheme { 80 | CollapsingToolbar( 81 | backgroundImageResId = R.drawable.toolbar_background, 82 | progress = 1f, 83 | onPrivacyTipButtonClicked = {}, 84 | onSettingsButtonClicked = {}, 85 | modifier = Modifier 86 | .fillMaxWidth() 87 | .height(160.dp) 88 | ) 89 | } 90 | } 91 | 92 | @Composable 93 | fun CollapsingToolbar( 94 | @DrawableRes backgroundImageResId: Int, 95 | progress: Float, 96 | onPrivacyTipButtonClicked: () -> Unit, 97 | onSettingsButtonClicked: () -> Unit, 98 | modifier: Modifier = Modifier 99 | ) { 100 | val costaRicaHeight = with(LocalDensity.current) { 101 | lerp(CollapsedCostaRicaHeight.toPx(), ExpandedCostaRicaHeight.toPx(), progress).toDp() 102 | } 103 | val wildlifeHeight = with(LocalDensity.current) { 104 | lerp(CollapsedWildlifeHeight.toPx(), ExpandedWildlifeHeight.toPx(), progress).toDp() 105 | } 106 | val logoPadding = with(LocalDensity.current) { 107 | lerp(CollapsedPadding.toPx(), ExpandedPadding.toPx(), progress).toDp() 108 | } 109 | 110 | Surface( 111 | color = MaterialTheme.colors.primary, 112 | elevation = Elevation, 113 | modifier = modifier 114 | ) { 115 | Box (modifier = Modifier.fillMaxSize()) { 116 | //#region Background Image 117 | Image( 118 | painter = painterResource(id = backgroundImageResId), 119 | contentDescription = null, 120 | contentScale = ContentScale.FillWidth, 121 | modifier = Modifier 122 | .fillMaxSize() 123 | .graphicsLayer { 124 | alpha = progress * Alpha 125 | }, 126 | alignment = BiasAlignment(0f, 1f - ((1f - progress) * 0.75f)) 127 | ) 128 | //#endregion 129 | Box( 130 | modifier = Modifier 131 | .statusBarsPadding() 132 | .padding(horizontal = ContentPadding) 133 | .fillMaxSize() 134 | ) { 135 | CollapsingToolbarLayout (progress = progress) { 136 | //#region Logo Images 137 | Image( 138 | painter = painterResource(id = R.drawable.logo_costa_rica_map), 139 | contentDescription = null, 140 | modifier = Modifier 141 | .padding(logoPadding) 142 | .height(MapHeight) 143 | .wrapContentWidth() 144 | .graphicsLayer { alpha = ((0.25f - progress) * 4).coerceIn(0f, 1f) }, 145 | colorFilter = ColorFilter.tint(MaterialTheme.colors.onPrimary) 146 | ) 147 | Image( 148 | painter = painterResource(id = R.drawable.logo_costa), 149 | contentDescription = null, 150 | modifier = Modifier 151 | .padding(logoPadding) 152 | .height(costaRicaHeight) 153 | .wrapContentWidth(), 154 | colorFilter = ColorFilter.tint(MaterialTheme.colors.onPrimary) 155 | ) 156 | Image( 157 | painter = painterResource(id = R.drawable.logo_rica), 158 | contentDescription = null, 159 | modifier = Modifier 160 | .padding(logoPadding) 161 | .height(costaRicaHeight) 162 | .wrapContentWidth(), 163 | colorFilter = ColorFilter.tint(MaterialTheme.colors.onPrimary) 164 | ) 165 | Image( 166 | painter = painterResource(id = R.drawable.logo_wildlife), 167 | contentDescription = null, 168 | modifier = Modifier 169 | .padding(logoPadding) 170 | .height(wildlifeHeight) 171 | .wrapContentWidth(), 172 | colorFilter = ColorFilter.tint(MaterialTheme.colors.onPrimary) 173 | ) 174 | //#endregion 175 | //#region Buttons 176 | Row ( 177 | modifier = Modifier.wrapContentSize(), 178 | horizontalArrangement = Arrangement.spacedBy(ContentPadding) 179 | ) { 180 | IconButton( 181 | onClick = onPrivacyTipButtonClicked, 182 | modifier = Modifier 183 | .size(ButtonSize) 184 | .background( 185 | color = LocalContentColor.current.copy(alpha = 0.0f), 186 | shape = CircleShape 187 | ) 188 | ) { 189 | Icon( 190 | modifier = Modifier.fillMaxSize(), 191 | imageVector = Icons.Rounded.PrivacyTip, 192 | contentDescription = null, 193 | ) 194 | } 195 | IconButton( 196 | onClick = onSettingsButtonClicked, 197 | modifier = Modifier 198 | .size(ButtonSize) 199 | .background( 200 | color = LocalContentColor.current.copy(alpha = 0.0f), 201 | shape = CircleShape 202 | ) 203 | ) { 204 | Icon( 205 | modifier = Modifier.fillMaxSize(), 206 | imageVector = Icons.Rounded.Settings, 207 | contentDescription = null, 208 | ) 209 | } 210 | } 211 | //#endregion 212 | } 213 | } 214 | } 215 | } 216 | } 217 | 218 | @Composable 219 | private fun CollapsingToolbarLayout( 220 | progress: Float, 221 | modifier: Modifier = Modifier, 222 | content: @Composable () -> Unit 223 | ) { 224 | Layout( 225 | modifier = modifier, 226 | content = content 227 | ) { measurables, constraints -> 228 | check(measurables.size == 5) // [0]: Country Map | [1-3]: Logo Images | [4]: Buttons 229 | 230 | val placeables = measurables.map { 231 | it.measure(constraints) 232 | } 233 | layout( 234 | width = constraints.maxWidth, 235 | height = constraints.maxHeight 236 | ) { 237 | 238 | val expandedHorizontalGuideline = (constraints.maxHeight * 0.4f).roundToInt() 239 | val collapsedHorizontalGuideline = (constraints.maxHeight * 0.5f).roundToInt() 240 | 241 | val countryMap = placeables[0] 242 | val costa = placeables[1] 243 | val rica = placeables[2] 244 | val wildlife = placeables[3] 245 | val buttons = placeables[4] 246 | countryMap.placeRelative( 247 | x = 0, 248 | y = collapsedHorizontalGuideline - countryMap.height / 2, 249 | ) 250 | costa.placeRelative( 251 | x = lerp( 252 | start = countryMap.width, 253 | stop = constraints.maxWidth / 2 - costa.width, 254 | fraction = progress 255 | ), 256 | y = lerp( 257 | start = collapsedHorizontalGuideline - costa.height / 2, 258 | stop = expandedHorizontalGuideline - costa.height, 259 | fraction = progress 260 | ) 261 | ) 262 | rica.placeRelative( 263 | x = lerp( 264 | start = countryMap.width + costa.width, 265 | stop = constraints.maxWidth / 2 - rica.width, 266 | fraction = progress 267 | ), 268 | y = lerp( 269 | start = collapsedHorizontalGuideline - rica.height / 2, 270 | stop = expandedHorizontalGuideline, 271 | fraction = progress 272 | ) 273 | ) 274 | wildlife.placeRelative( 275 | x = lerp( 276 | start = countryMap.width + costa.width + rica.width, 277 | stop = constraints.maxWidth / 2, 278 | fraction = progress 279 | ), 280 | y = lerp( 281 | start = collapsedHorizontalGuideline - wildlife.height / 2, 282 | stop = expandedHorizontalGuideline + rica.height / 2, 283 | fraction = progress 284 | ) 285 | ) 286 | buttons.placeRelative( 287 | x = constraints.maxWidth - buttons.width, 288 | y = lerp( 289 | start = (constraints.maxHeight - buttons.height) / 2, 290 | stop = 0, 291 | fraction = progress 292 | ) 293 | ) 294 | } 295 | } 296 | } 297 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/ui/theme/Color.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.ui.theme 2 | 3 | import androidx.compose.ui.graphics.Color 4 | 5 | val DeepSapphire = Color(0xFF063068) 6 | val Denim = Color(0xFF0A54B5) 7 | val MineShaft = Color(0xFF353535) 8 | val Scorpion = Color(0xFF5C5C5C) 9 | 10 | val White = Color(0xFFFFFFFF) 11 | val Black = Color(0xFF000000) 12 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/ui/theme/Shape.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.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(0.dp) 11 | ) -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/ui/theme/Theme.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.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 | 9 | private val DarkColorPalette = darkColors( 10 | primary = DeepSapphire, 11 | secondary = MineShaft, 12 | background = Black, 13 | surface = DeepSapphire, 14 | onPrimary = White, 15 | onSecondary = White, 16 | onSurface = White, 17 | onBackground = White 18 | ) 19 | 20 | private val LightColorPalette = lightColors( 21 | primary = Denim, 22 | secondary = Scorpion, 23 | background = White, 24 | surface = Denim, 25 | onPrimary = White, 26 | onSecondary = White, 27 | onSurface = White, 28 | onBackground = Black 29 | ) 30 | 31 | @Composable 32 | fun CollapsingToolbarInComposeTheme( 33 | darkTheme: Boolean = isSystemInDarkTheme(), 34 | content: @Composable () -> Unit 35 | ) { 36 | val colors = if (darkTheme) { 37 | DarkColorPalette 38 | } else { 39 | LightColorPalette 40 | } 41 | 42 | MaterialTheme( 43 | colors = colors, 44 | typography = Typography, 45 | shapes = Shapes, 46 | content = content 47 | ) 48 | } 49 | -------------------------------------------------------------------------------- /app/src/main/java/com/pencelab/collapsingtoolbarincompose/ui/theme/Type.kt: -------------------------------------------------------------------------------- 1 | package com.pencelab.collapsingtoolbarincompose.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 | val Typography = Typography( 10 | body1 = TextStyle( 11 | fontFamily = FontFamily.Default, 12 | fontWeight = FontWeight.Normal, 13 | fontSize = 14.sp 14 | ), 15 | h1 = TextStyle( 16 | fontFamily = FontFamily.Default, 17 | fontWeight = FontWeight.Bold, 18 | fontSize = 32.sp 19 | ), 20 | h2 = TextStyle( 21 | fontFamily = FontFamily.Default, 22 | fontWeight = FontWeight.Bold, 23 | fontSize = 24.sp 24 | ), 25 | subtitle1 = TextStyle( 26 | fontFamily = FontFamily.Default, 27 | fontWeight = FontWeight.SemiBold, 28 | fontSize = 24.sp 29 | ), 30 | subtitle2 = TextStyle( 31 | fontFamily = FontFamily.Default, 32 | fontWeight = FontWeight.SemiBold, 33 | fontSize = 20.sp 34 | ), 35 | ) 36 | -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/baby_green_sea_turtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/baby_green_sea_turtle.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/capuchin_monkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/capuchin_monkey.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/emerald_basilisk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/emerald_basilisk.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/greeen_iguana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/greeen_iguana.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/hoffmans_two_toed_sloth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/hoffmans_two_toed_sloth.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/jaguar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/jaguar.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/keel_billed_toucan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/keel_billed_toucan.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/king_vulture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/king_vulture.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/red_eyed_tree_frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/red_eyed_tree_frog.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/resplendent_quetzal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/resplendent_quetzal.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/scarlet_macaw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/scarlet_macaw.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/toolbar_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/toolbar_background.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/white_nosed_coati.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-hdpi/white_nosed_coati.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/baby_green_sea_turtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/baby_green_sea_turtle.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/capuchin_monkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/capuchin_monkey.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/emerald_basilisk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/emerald_basilisk.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/greeen_iguana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/greeen_iguana.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/hoffmans_two_toed_sloth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/hoffmans_two_toed_sloth.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/jaguar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/jaguar.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/keel_billed_toucan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/keel_billed_toucan.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/king_vulture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/king_vulture.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/red_eyed_tree_frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/red_eyed_tree_frog.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/resplendent_quetzal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/resplendent_quetzal.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/scarlet_macaw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/scarlet_macaw.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/toolbar_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/toolbar_background.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-mdpi/white_nosed_coati.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-mdpi/white_nosed_coati.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/baby_green_sea_turtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/baby_green_sea_turtle.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/capuchin_monkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/capuchin_monkey.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/emerald_basilisk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/emerald_basilisk.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/greeen_iguana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/greeen_iguana.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/hoffmans_two_toed_sloth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/hoffmans_two_toed_sloth.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/jaguar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/jaguar.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/keel_billed_toucan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/keel_billed_toucan.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/king_vulture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/king_vulture.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/red_eyed_tree_frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/red_eyed_tree_frog.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/resplendent_quetzal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/resplendent_quetzal.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/scarlet_macaw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/scarlet_macaw.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/toolbar_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/toolbar_background.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/white_nosed_coati.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xhdpi/white_nosed_coati.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/baby_green_sea_turtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/baby_green_sea_turtle.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/capuchin_monkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/capuchin_monkey.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/emerald_basilisk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/emerald_basilisk.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/greeen_iguana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/greeen_iguana.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/hoffmans_two_toed_sloth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/hoffmans_two_toed_sloth.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/jaguar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/jaguar.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/keel_billed_toucan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/keel_billed_toucan.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/king_vulture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/king_vulture.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/red_eyed_tree_frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/red_eyed_tree_frog.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/resplendent_quetzal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/resplendent_quetzal.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/scarlet_macaw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/scarlet_macaw.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/toolbar_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/toolbar_background.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxhdpi/white_nosed_coati.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxhdpi/white_nosed_coati.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/baby_green_sea_turtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/baby_green_sea_turtle.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/capuchin_monkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/capuchin_monkey.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/emerald_basilisk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/emerald_basilisk.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/greeen_iguana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/greeen_iguana.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/hoffmans_two_toed_sloth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/hoffmans_two_toed_sloth.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/jaguar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/jaguar.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/keel_billed_toucan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/keel_billed_toucan.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/king_vulture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/king_vulture.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/red_eyed_tree_frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/red_eyed_tree_frog.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/resplendent_quetzal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/resplendent_quetzal.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/scarlet_macaw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/scarlet_macaw.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/toolbar_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/toolbar_background.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-xxxhdpi/white_nosed_coati.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/drawable-xxxhdpi/white_nosed_coati.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/logo_costa.xml: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | 15 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/logo_costa_rica_map.xml: -------------------------------------------------------------------------------- 1 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/logo_rica.xml: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/logo_wildlife.xml: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30 | 31 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pencelab/CollapsingToolbarInCompose/889bb771cd1aa217e05ddf9801d1ccd5c6c9937a/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/values-night/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FF120A8F 4 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Collapsing Toolbar In Compose 3 | Costa Rica Wildlife 4 | -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 12 | 13 |