1.0.0-alpha05 release version

germainkevinbusiness · May 24, 2022 · f150f28 · f150f28
1 parent 93ba096
commit f150f28
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,19 @@
 [![](https://jitpack.io/v/germainkevinbusiness/CollapsingTopBarCompose.svg)](https://jitpack.io/#germainkevinbusiness/CollapsingTopBarCompose)
 # CollapsingTopBarCompose
-A top bar that expands or collapses based on the scrolling of a content
+A Jetpack Compose Collapsing Top Bar, that expands or collapses based on the scrolling of a content
+
+<table>
+  <tr>
+    <td>Centered expanded title and subtitle</td>
+     <td>Centered expanded title without subtitle</td>
+    <td>Left expanded title without subtitle</td>
+  </tr>
+  <tr>
+    <td valign="top"><img src="https://user-images.githubusercontent.com/83923717/170046931-3f9cf06e-9476-4ea1-a932-34d3197a47df.gif" alt="Demonstration 1" width="100%" height="auto"/></td>
+    <td valign="top"><img src="https://user-images.githubusercontent.com/83923717/170036886-f340d845-b5f8-475d-93ea-709652aa6ad6.gif" alt="Demonstration 2" width="100%" height="auto"/></td>
+    <td valign="top"><img src="https://user-images.githubusercontent.com/83923717/170043487-5e78724b-bd66-4617-b703-624281d49c2a.gif" alt="Demonstration 2" width="100%" height="auto"/></td>
+  </tr>
+ </table>
 
 # How to get this library in your android app
 
@@ -24,6 +37,73 @@ dependencies {
 }
 ```
 
+# Usage
+Basic usage is shown below, there's a more elaborate example in
+the [sample app](https://github.com/germainkevinbusiness/CollapsingTopBarCompose/blob/master/app/src/main/java/com/germainkevin/collapsingtopbarcompose/MainActivity.kt).
+
+
+In order to use a ```CollapsingTopBar```, you first need to create a ```TopBarScrollBehavior```.
+```kotlin
+ val scrollBehavior = remember { 
+    CollapsingTopBarDefaults.collapsingTopBarScrollBehavior(
+        isAlwaysCollapsed = false,
+        isInitiallyCollapsed = true,
+        collapsedTopBarHeight = 56.dp,
+        expandedTopBarMaxHeight = 156.dp,
+    ) 
+ }
+```
+To know when scrolling occurs inside your Layout so the ```CollapsingTopBar``` can collapse or expand, add the ```scrollBehavior.nestedScrollConnection``` inside your Layout's  ```Modifier.nestedScroll``` :
+```kotlin
+Scaffold(
+  modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+  topBar = {
+        CollapsingTopBar(
+        scrollBehavior = scrollBehavior,
+        centeredTitleAndSubtitle = true, // set to false if you want the expanded title and subtitle to be at the left instead
+        title = { Text(text = "All contacts") },
+        subtitle = { Text(text = "17 contacts") },
+        )
+   },
+ ){}
+```
+
+So when we put it all together we got:
+
+```kotlin
+
+val scrollBehavior = remember { 
+    CollapsingTopBarDefaults.collapsingTopBarScrollBehavior(
+        isAlwaysCollapsed = false,
+        isInitiallyCollapsed = true,
+        collapsedTopBarHeight = 56.dp,
+        expandedTopBarMaxHeight = 156.dp,
+    ) 
+ }
+ Scaffold(
+  modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+  topBar = {
+        CollapsingTopBar(
+        scrollBehavior = scrollBehavior,
+        centeredTitleAndSubtitle = true, // set to false if you want the expanded title and subtitle to be at the left instead
+        title = { Text(text = "All contacts") },
+        subtitle = { Text(text = "17 contacts") },
+        )
+   },
+ ) {
+    LazyColumn(
+      contentPadding = innerPadding,
+      verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        val context = LocalContext.current
+        val contactNames = context.resources.getStringArray(R.array.contactNames)
+        items(count = contactNames.size) {
+          ContactListNames(context, contactNames[it])
+        }
+    }
+ }
+```
+
 **That's it!**
 
 ## License

diff --git a/app/build.gradle b/app/build.gradle
@@ -64,11 +64,11 @@ dependencies {
 
     // Accompanist
     //Jetpack Navigation Compose Material
-    implementation 'com.google.accompanist:accompanist-navigation-material:0.24.3-alpha'
+    implementation 'com.google.accompanist:accompanist-navigation-material:0.24.9-beta'
     //Insets for Jetpack Compose
-    implementation "com.google.accompanist:accompanist-insets:0.24.3-alpha"
+    implementation 'com.google.accompanist:accompanist-insets:0.24.9-beta'
     //System UI Controller
-    implementation "com.google.accompanist:accompanist-systemuicontroller:0.24.3-alpha"
+    implementation 'com.google.accompanist:accompanist-systemuicontroller:0.24.9-beta'
 
     // Coroutines
     implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.1'

diff --git a/app/src/main/java/com/germainkevin/collapsingtopbarcompose/Components.kt b/app/src/main/java/com/germainkevin/collapsingtopbarcompose/Components.kt
@@ -45,7 +45,7 @@ fun CollapsingTopBarExample(scrollBehavior: TopBarScrollBehavior, contactNames:
                 ),
                 style = LocalTextStyle.current.copy(
                     fontWeight = FontWeight.Normal,
-                    color = MaterialTheme.colorScheme.onPrimary
+                    color = MaterialTheme.colorScheme.onPrimaryContainer
                 )
             )
         },
@@ -74,6 +74,7 @@ fun ContactListNames(context: Context, contactName: String) {
         Text(
             text = contactName,
             style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.onSurface,
             modifier = Modifier
                 .fillMaxWidth()
                 .wrapContentHeight()