├── app
    ├── .gitignore
    ├── .DS_Store
    ├── src
    │   ├── .DS_Store
    │   └── main
    │   │   ├── .DS_Store
    │   │   ├── java
    │   │       ├── .DS_Store
    │   │       └── com
    │   │       │   ├── .DS_Store
    │   │       │   └── ekeitho
    │   │       │       ├── .DS_Store
    │   │       │       └── bubble
    │   │       │           ├── domain
    │   │       │               └── Contact.kt
    │   │       │           ├── ui
    │   │       │               └── theme
    │   │       │               │   ├── Type.kt
    │   │       │               │   ├── Color.kt
    │   │       │               │   └── Theme.kt
    │   │       │           ├── views
    │   │       │               ├── ScrollingBubble.kt
    │   │       │               └── ContactListWithScroller.kt
    │   │       │           └── ScrollingBubbleActivity.kt
    │   │   ├── res
    │   │       ├── values
    │   │       │   ├── strings.xml
    │   │       │   ├── themes.xml
    │   │       │   └── colors.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
    │   │       ├── mipmap-anydpi-v26
    │   │       │   ├── ic_launcher.xml
    │   │       │   └── ic_launcher_round.xml
    │   │       ├── xml
    │   │       │   ├── backup_rules.xml
    │   │       │   └── data_extraction_rules.xml
    │   │       ├── drawable-v24
    │   │       │   └── ic_launcher_foreground.xml
    │   │       └── drawable
    │   │       │   └── ic_launcher_background.xml
    │   │   └── AndroidManifest.xml
    ├── proguard-rules.pro
    └── build.gradle
├── gradle
    └── wrapper
    │   ├── gradle-wrapper.jar
    │   └── gradle-wrapper.properties
├── settings.gradle
├── README.md
├── gradle.properties
├── .gitignore
├── gradlew.bat
└── gradlew


/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build


--------------------------------------------------------------------------------
/app/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/.DS_Store


--------------------------------------------------------------------------------
/app/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/.DS_Store


--------------------------------------------------------------------------------
/app/src/main/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/.DS_Store


--------------------------------------------------------------------------------
/app/src/main/java/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/java/.DS_Store


--------------------------------------------------------------------------------
/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 | <resources>
2 |     <string name="app_name">ScrollingBubble</string>
3 | </resources>


--------------------------------------------------------------------------------
/app/src/main/java/com/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/java/com/.DS_Store


--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/gradle/wrapper/gradle-wrapper.jar


--------------------------------------------------------------------------------
/app/src/main/java/com/ekeitho/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/java/com/ekeitho/.DS_Store


--------------------------------------------------------------------------------
/app/src/main/java/com/ekeitho/bubble/domain/Contact.kt:
--------------------------------------------------------------------------------
1 | package com.ekeitho.bubble.domain
2 | 
3 | data class Contact(
4 |     val fullName: String,
5 | )
6 | 


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekeitho/compose-scrolling-bubble/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp


--------------------------------------------------------------------------------
/app/src/main/res/values/themes.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <resources>
3 | 
4 |     <style name="Theme.ScrollingBubble" parent="android:Theme.Material.Light.NoActionBar" />
5 | </resources>


--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | #Sat Mar 05 15:47:00 PST 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 | 


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
3 |     <background android:drawable="@drawable/ic_launcher_background" />
4 |     <foreground android:drawable="@drawable/ic_launcher_foreground" />
5 | </adaptive-icon>


--------------------------------------------------------------------------------
/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
3 |     <background android:drawable="@drawable/ic_launcher_background" />
4 |     <foreground android:drawable="@drawable/ic_launcher_foreground" />
5 | </adaptive-icon>


--------------------------------------------------------------------------------
/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 = "ScrollingBubble"
16 | include ':app'
17 | 


--------------------------------------------------------------------------------
/app/src/main/res/values/colors.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <resources>
 3 |     <color name="purple_200">#FFBB86FC</color>
 4 |     <color name="purple_500">#FF6200EE</color>
 5 |     <color name="purple_700">#FF3700B3</color>
 6 |     <color name="teal_200">#FF03DAC5</color>
 7 |     <color name="teal_700">#FF018786</color>
 8 |     <color name="black">#FF000000</color>
 9 |     <color name="white">#FFFFFFFF</color>
10 | </resources>


--------------------------------------------------------------------------------
/app/src/main/res/xml/backup_rules.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?><!--
 2 |    Sample backup rules file; uncomment and customize as necessary.
 3 |    See https://developer.android.com/guide/topics/data/autobackup
 4 |    for details.
 5 |    Note: This file is ignored for devices older that API 31
 6 |    See https://developer.android.com/about/versions/12/backup-restore
 7 | -->
 8 | <full-backup-content>
 9 |     <!--
10 |    <include domain="sharedpref" path="."/>
11 |    <exclude domain="sharedpref" path="device.xml"/>
12 | -->
13 | </full-backup-content>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # compose-scrolling-bubble
2 | Demonstrates a way to build in Compose the Google Contacts Scrolling bubble feature.
3 | 
4 | If interested, I wrote a [deep dive article](https://ekeitho.medium.com/building-google-contacts-screen-and-its-scrolling-bubble-feature-in-compose-1f8b7e292df) on how to build this yourself!
5 | 
6 | | Google Contacts UI Demo |	Our Initial Compose Demo |
7 | | - | - |
8 | | ![bubble](https://user-images.githubusercontent.com/1561975/166169476-2b68dbf0-b44b-4a99-9120-1178fe949ca0.gif) | ![pointer](https://user-images.githubusercontent.com/1561975/166170032-57ff7187-af88-4d98-9c1c-e4285c49aec8.gif) |
9 | 


--------------------------------------------------------------------------------
/app/src/main/res/xml/data_extraction_rules.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?><!--
 2 |    Sample data extraction rules file; uncomment and customize as necessary.
 3 |    See https://developer.android.com/about/versions/12/backup-restore#xml-changes
 4 |    for details.
 5 | -->
 6 | <data-extraction-rules>
 7 |     <cloud-backup>
 8 |         <!-- TODO: Use <include> and <exclude> to control what is backed up.
 9 |         <include .../>
10 |         <exclude .../>
11 |         -->
12 |     </cloud-backup>
13 |     <!--
14 |     <device-transfer>
15 |         <include .../>
16 |         <exclude .../>
17 |     </device-transfer>
18 |     -->
19 | </data-extraction-rules>


--------------------------------------------------------------------------------
/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/main/java/com/ekeitho/bubble/ui/theme/Type.kt:
--------------------------------------------------------------------------------
 1 | package com.ekeitho.bubble.ui.theme
 2 | 
 3 | import androidx.compose.material3.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 |     bodyLarge = TextStyle(
12 |         fontFamily = FontFamily.Default,
13 |         fontWeight = FontWeight.Normal,
14 |         fontSize = 16.sp,
15 |         lineHeight = 24.sp,
16 |         letterSpacing = 0.5.sp
17 |     )
18 |     /* Other default text styles to override
19 |     titleLarge = TextStyle(
20 |         fontFamily = FontFamily.Default,
21 |         fontWeight = FontWeight.Normal,
22 |         fontSize = 22.sp,
23 |         lineHeight = 28.sp,
24 |         letterSpacing = 0.sp
25 |     ),
26 |     labelSmall = TextStyle(
27 |         fontFamily = FontFamily.Default,
28 |         fontWeight = FontWeight.Medium,
29 |         fontSize = 11.sp,
30 |         lineHeight = 16.sp,
31 |         letterSpacing = 0.5.sp
32 |     )
33 |     */
34 | )


--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <manifest xmlns:android="http://schemas.android.com/apk/res/android"
 3 |     xmlns:tools="http://schemas.android.com/tools"
 4 |     package="com.ekeitho.bubble">
 5 | 
 6 |     <uses-permission android:name="android.permission.INTERNET" />
 7 | 
 8 |     <application
 9 |         android:allowBackup="true"
10 |         android:dataExtractionRules="@xml/data_extraction_rules"
11 |         android:fullBackupContent="@xml/backup_rules"
12 |         android:icon="@mipmap/ic_launcher"
13 |         android:label="@string/app_name"
14 |         android:roundIcon="@mipmap/ic_launcher_round"
15 |         android:supportsRtl="true"
16 |         android:theme="@style/Theme.ScrollingBubble"
17 |         tools:targetApi="31">
18 |         <activity
19 |             android:name="com.ekeitho.bubble.ScrollingBubbleActivity"
20 |             android:exported="true"
21 |             android:label="@string/app_name"
22 |             android:theme="@style/Theme.ScrollingBubble">
23 |             <intent-filter>
24 |                 <action android:name="android.intent.action.MAIN" />
25 | 
26 |                 <category android:name="android.intent.category.LAUNCHER" />
27 |             </intent-filter>
28 |         </activity>
29 |     </application>
30 | 
31 | </manifest>


--------------------------------------------------------------------------------
/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


--------------------------------------------------------------------------------
/app/src/main/java/com/ekeitho/bubble/views/ScrollingBubble.kt:
--------------------------------------------------------------------------------
 1 | package com.ekeitho.bubble.views
 2 | 
 3 | import androidx.compose.foundation.layout.*
 4 | import androidx.compose.foundation.shape.CircleShape
 5 | import androidx.compose.material3.MaterialTheme
 6 | import androidx.compose.material3.Surface
 7 | import androidx.compose.material3.Text
 8 | import androidx.compose.runtime.Composable
 9 | import androidx.compose.ui.Alignment
10 | import androidx.compose.ui.Modifier
11 | import androidx.compose.ui.platform.LocalDensity
12 | import androidx.compose.ui.unit.Dp
13 | import androidx.compose.ui.unit.dp
14 | import com.ekeitho.bubble.alphabetItemSize
15 | 
16 | @Composable
17 | fun ScrollingBubble(
18 |     boxConstraintMaxWidth: Dp,
19 |     bubbleOffsetYFloat: Float,
20 |     currAlphabetScrolledOn: Char,
21 | ) {
22 |     val bubbleSize = 96.dp
23 |     Surface(
24 |         shape = CircleShape,
25 |         modifier = Modifier
26 |             .size(bubbleSize)
27 |             .offset(
28 |                 x = (boxConstraintMaxWidth - (bubbleSize + alphabetItemSize)),
29 |                 y = with(LocalDensity.current) {
30 |                     bubbleOffsetYFloat.toDp() - (bubbleSize / 2)
31 |                 },
32 |             ),
33 |         color = MaterialTheme.colorScheme.primary,
34 |     ) {
35 |         Box(
36 |             modifier = Modifier.fillMaxSize(),
37 |             contentAlignment = Alignment.Center
38 |         ) {
39 |             Text(
40 |                 text = currAlphabetScrolledOn.toString(),
41 |                 style = MaterialTheme.typography.headlineLarge
42 |             )
43 |         }
44 |     }
45 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Built application files
 2 | *.apk
 3 | *.aar
 4 | *.ap_
 5 | *.aab
 6 | 
 7 | # Files for the ART/Dalvik VM
 8 | *.dex
 9 | 
10 | # Java class files
11 | *.class
12 | 
13 | # Generated files
14 | bin/
15 | gen/
16 | out/
17 | #  Uncomment the following line in case you need and you don't have the release build type files in your app
18 | # release/
19 | 
20 | # Gradle files
21 | .gradle/
22 | build/
23 | 
24 | # Local configuration file (sdk path, etc)
25 | local.properties
26 | 
27 | # Proguard folder generated by Eclipse
28 | proguard/
29 | 
30 | # Log Files
31 | *.log
32 | 
33 | # Android Studio Navigation editor temp files
34 | .navigation/
35 | 
36 | # Android Studio captures folder
37 | captures/
38 | 
39 | # IntelliJ
40 | *.iml
41 | .idea/workspace.xml
42 | .idea/tasks.xml
43 | .idea/gradle.xml
44 | .idea/assetWizardSettings.xml
45 | .idea/dictionaries
46 | .idea/libraries
47 | # Android Studio 3 in .gitignore file.
48 | .idea/caches
49 | .idea/modules.xml
50 | # Comment next line if keeping position of elements in Navigation Editor is relevant for you
51 | .idea/navEditor.xml
52 | 
53 | # Keystore files
54 | # Uncomment the following lines if you do not want to check your keystore files in.
55 | #*.jks
56 | #*.keystore
57 | 
58 | # External native build folder generated in Android Studio 2.2 and later
59 | .externalNativeBuild
60 | .cxx/
61 | 
62 | # Google Services (e.g. APIs or Firebase)
63 | # google-services.json
64 | 
65 | # Freeline
66 | freeline.py
67 | freeline/
68 | freeline_project_description.json
69 | 
70 | # fastlane
71 | fastlane/report.xml
72 | fastlane/Preview.html
73 | fastlane/screenshots
74 | fastlane/test_output
75 | fastlane/readme.md
76 | 
77 | # Version control
78 | vcs.xml
79 | 
80 | # lint
81 | lint/intermediates/
82 | lint/generated/
83 | lint/outputs/
84 | lint/tmp/
85 | # lint/reports/
86 | 


--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
 1 | <vector xmlns:android="http://schemas.android.com/apk/res/android"
 2 |     xmlns:aapt="http://schemas.android.com/aapt"
 3 |     android:width="108dp"
 4 |     android:height="108dp"
 5 |     android:viewportWidth="108"
 6 |     android:viewportHeight="108">
 7 |     <path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
 8 |         <aapt:attr name="android:fillColor">
 9 |             <gradient
10 |                 android:endX="85.84757"
11 |                 android:endY="92.4963"
12 |                 android:startX="42.9492"
13 |                 android:startY="49.59793"
14 |                 android:type="linear">
15 |                 <item
16 |                     android:color="#44000000"
17 |                     android:offset="0.0" />
18 |                 <item
19 |                     android:color="#00000000"
20 |                     android:offset="1.0" />
21 |             </gradient>
22 |         </aapt:attr>
23 |     </path>
24 |     <path
25 |         android:fillColor="#FFFFFF"
26 |         android:fillType="nonZero"
27 |         android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
28 |         android:strokeWidth="1"
29 |         android:strokeColor="#00000000" />
30 | </vector>


--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
 1 | plugins {
 2 |     id 'com.android.application'
 3 |     id 'org.jetbrains.kotlin.android'
 4 | }
 5 | 
 6 | android {
 7 |     compileSdk 34
 8 | 
 9 |     defaultConfig {
10 |         applicationId "com.ekeitho.bubble"
11 |         minSdk 21
12 |         targetSdk 34
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 "1.5.8"
40 |     }
41 |     packagingOptions {
42 |         resources {
43 |             excludes += '/META-INF/{AL2.0,LGPL2.1}'
44 |         }
45 |     }
46 | }
47 | 
48 | dependencies {
49 | 
50 |     implementation platform("androidx.compose:compose-bom:$compose_version")
51 | 
52 |     implementation 'androidx.core:core-ktx:1.12.0'
53 |     implementation "androidx.compose.ui:ui"
54 |     implementation("androidx.compose.material:material:1.6.0")
55 |     implementation("androidx.compose.material3:material3:1.1.2")
56 | 
57 |     implementation "androidx.compose.ui:ui-tooling-preview"
58 |     implementation "androidx.compose.ui:ui-text"
59 |     implementation 'androidx.activity:activity-compose:1.8.2'
60 | 
61 |     implementation "org.jetbrains.kotlinx:kotlinx-collections-immutable:0.3.7"
62 | 
63 |     testImplementation 'junit:junit:4.13.2'
64 |     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
65 |     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
66 |     androidTestImplementation "androidx.compose.ui:ui-test-junit4:1.6.0"
67 |     debugImplementation "androidx.compose.ui:ui-tooling"
68 |     debugImplementation "androidx.compose.ui:ui-test-manifest"
69 | }


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/src/main/java/com/ekeitho/bubble/ui/theme/Color.kt:
--------------------------------------------------------------------------------
 1 | package com.ekeitho.bubble.ui.theme
 2 | 
 3 | import androidx.compose.ui.graphics.Color
 4 | 
 5 | 
 6 | val md_theme_light_primary = Color(0xFF6750A4)
 7 | val md_theme_light_onPrimary = Color(0xFFFFFFFF)
 8 | val md_theme_light_primaryContainer = Color(0xFFEADDFF)
 9 | val md_theme_light_onPrimaryContainer = Color(0xFF21005D)
10 | val md_theme_light_secondary = Color(0xFF625B71)
11 | val md_theme_light_onSecondary = Color(0xFFFFFFFF)
12 | val md_theme_light_secondaryContainer = Color(0xFFE8DEF8)
13 | val md_theme_light_onSecondaryContainer = Color(0xFF1D192B)
14 | val md_theme_light_tertiary = Color(0xFF7D5260)
15 | val md_theme_light_onTertiary = Color(0xFFFFFFFF)
16 | val md_theme_light_tertiaryContainer = Color(0xFFFFD8E4)
17 | val md_theme_light_onTertiaryContainer = Color(0xFF31111D)
18 | val md_theme_light_error = Color(0xFFB3261E)
19 | val md_theme_light_errorContainer = Color(0xFFF9DEDC)
20 | val md_theme_light_onError = Color(0xFFFFFFFF)
21 | val md_theme_light_onErrorContainer = Color(0xFF410E0B)
22 | val md_theme_light_background = Color(0xFFFFFBFE)
23 | val md_theme_light_onBackground = Color(0xFF1C1B1F)
24 | val md_theme_light_surface = Color(0xFFFFFBFE)
25 | val md_theme_light_onSurface = Color(0xFF1C1B1F)
26 | val md_theme_light_surfaceVariant = Color(0xFFE7E0EC)
27 | val md_theme_light_onSurfaceVariant = Color(0xFF49454F)
28 | val md_theme_light_outline = Color(0xFF79747E)
29 | val md_theme_light_inverseOnSurface = Color(0xFFF4EFF4)
30 | val md_theme_light_inverseSurface = Color(0xFF313033)
31 | val md_theme_light_inversePrimary = Color(0xFFD0BCFF)
32 | val md_theme_light_shadow = Color(0xFF000000)
33 | 
34 | val md_theme_dark_primary = Color(0xFFD0BCFF)
35 | val md_theme_dark_onPrimary = Color(0xFF381E72)
36 | val md_theme_dark_primaryContainer = Color(0xFF4F378B)
37 | val md_theme_dark_onPrimaryContainer = Color(0xFFEADDFF)
38 | val md_theme_dark_secondary = Color(0xFFCCC2DC)
39 | val md_theme_dark_onSecondary = Color(0xFF332D41)
40 | val md_theme_dark_secondaryContainer = Color(0xFF4A4458)
41 | val md_theme_dark_onSecondaryContainer = Color(0xFFE8DEF8)
42 | val md_theme_dark_tertiary = Color(0xFFEFB8C8)
43 | val md_theme_dark_onTertiary = Color(0xFF492532)
44 | val md_theme_dark_tertiaryContainer = Color(0xFF633B48)
45 | val md_theme_dark_onTertiaryContainer = Color(0xFFFFD8E4)
46 | val md_theme_dark_error = Color(0xFFF2B8B5)
47 | val md_theme_dark_errorContainer = Color(0xFF8C1D18)
48 | val md_theme_dark_onError = Color(0xFF601410)
49 | val md_theme_dark_onErrorContainer = Color(0xFFF9DEDC)
50 | val md_theme_dark_background = Color(0xFF1C1B1F)
51 | val md_theme_dark_onBackground = Color(0xFFE6E1E5)
52 | val md_theme_dark_surface = Color(0xFF1C1B1F)
53 | val md_theme_dark_onSurface = Color(0xFFE6E1E5)
54 | val md_theme_dark_surfaceVariant = Color(0xFF49454F)
55 | val md_theme_dark_onSurfaceVariant = Color(0xFFCAC4D0)
56 | val md_theme_dark_outline = Color(0xFF938F99)
57 | val md_theme_dark_inverseOnSurface = Color(0xFF1C1B1F)
58 | val md_theme_dark_inverseSurface = Color(0xFFE6E1E5)
59 | val md_theme_dark_inversePrimary = Color(0xFF6750A4)
60 | val md_theme_dark_shadow = Color(0xFF000000)
61 | 
62 | 
63 | 
64 | val seed = Color(0xFF6750A4)
65 | val error = Color(0xFFB3261E)


--------------------------------------------------------------------------------
/app/src/main/java/com/ekeitho/bubble/ScrollingBubbleActivity.kt:
--------------------------------------------------------------------------------
  1 | package com.ekeitho.bubble
  2 | 
  3 | import android.os.Bundle
  4 | import androidx.activity.ComponentActivity
  5 | import androidx.activity.compose.setContent
  6 | import androidx.compose.foundation.layout.BoxWithConstraints
  7 | import androidx.compose.foundation.layout.fillMaxSize
  8 | import androidx.compose.material3.MaterialTheme
  9 | import androidx.compose.material3.Surface
 10 | import androidx.compose.runtime.getValue
 11 | import androidx.compose.runtime.mutableStateOf
 12 | import androidx.compose.runtime.remember
 13 | import androidx.compose.runtime.setValue
 14 | import androidx.compose.ui.Modifier
 15 | import androidx.compose.ui.platform.LocalDensity
 16 | import androidx.compose.ui.unit.dp
 17 | import com.ekeitho.bubble.domain.Contact
 18 | import com.ekeitho.bubble.ui.theme.ScrollingBubbleTheme
 19 | import com.ekeitho.bubble.views.ContactListWithScroller
 20 | import com.ekeitho.bubble.views.ScrollingBubble
 21 | import kotlinx.collections.immutable.ImmutableMap
 22 | import kotlinx.collections.immutable.toPersistentList
 23 | import kotlinx.collections.immutable.toPersistentMap
 24 | 
 25 | val alphabetItemSize = 24.dp
 26 | val alphabetCharList = "abcdefghijklmnopqrstuvwxyz".map { it }.toPersistentList()
 27 | 
 28 | internal fun Float.getIndexOfCharBasedOnYPosition(
 29 |   alphabetHeightInPixels: Float,
 30 | ): Char {
 31 | 
 32 |   var index = ((this) / alphabetHeightInPixels).toInt()
 33 |   index = when {
 34 |     index > 25 -> 25
 35 |     index < 0 -> 0
 36 |     else -> index
 37 |   }
 38 |   return alphabetCharList[index]
 39 | }
 40 | 
 41 | class ScrollingBubbleActivity : ComponentActivity() {
 42 |   private val names =
 43 |     "Aaren, Aarika, Abagael, Bab, Babara, Babb, Cacilia, Cacilie, Cahra, Dacey, Dacia, " +
 44 |       "Dacie, Eachelle, Eada, Eadie, Fae, Faina, Faith, Gabbey, Gabbi, Gabbie, Hadria, " +
 45 |       "Hailee, Haily, Ianthe, Ibbie, Ibby, Jacenta, Jacinda, Jacinta, Kacey, Kacie, Kacy, " +
 46 |       "La Verne, Lacee, Lacey, Mab, Mabel, Mabelle, Nada, Nadean, Nadeen, Octavia, Odele, " +
 47 |       "Odelia, Page, Paige, Paloma, Queenie, Quentin, Querida, Rachael, Rachel, Rachele, " +
 48 |       "Saba, Sabina, Sabine, Tabatha, Tabbatha, Tabbi, Ula, Ulla, Ulrica, Val, Valaree, " +
 49 |       "Valaria, Wallie, Wallis, Walliw, Xaviera, Xena, Xenia, Yalonda, Yasmeen, Yasmin, " +
 50 |       "Zabrina, Zahara, Zandra"
 51 |   private val contacts = names.split(", ").map { Contact(it) }.toPersistentList()
 52 | 
 53 |   override fun onCreate(savedInstanceState: Bundle?) {
 54 |     super.onCreate(savedInstanceState)
 55 |     setContent {
 56 |       val context = LocalDensity.current
 57 |       val alphabetHeightInPixels = remember { with(context) { alphabetItemSize.toPx() } }
 58 |       var alphabetRelativeDragYOffset: Float? by remember { mutableStateOf(null) }
 59 |       var alphabetDistanceFromTopOfScreen: Float by remember { mutableStateOf(0F) }
 60 |       ScrollingBubbleTheme {
 61 |         Surface(
 62 |           modifier = Modifier.fillMaxSize(),
 63 |           color = MaterialTheme.colorScheme.background
 64 |         ) {
 65 |           BoxWithConstraints {
 66 |             ContactListWithScroller(
 67 |               contacts = contacts,
 68 |               onAlphabetListDrag = { relativeDragYOffset, containerDistance ->
 69 |                 alphabetRelativeDragYOffset = relativeDragYOffset
 70 |                 alphabetDistanceFromTopOfScreen = containerDistance
 71 |               }
 72 |             )
 73 | 
 74 |             val yOffset = alphabetRelativeDragYOffset
 75 |             if (yOffset != null) {
 76 |               ScrollingBubble(
 77 |                 boxConstraintMaxWidth = this.maxWidth,
 78 |                 bubbleOffsetYFloat = yOffset + alphabetDistanceFromTopOfScreen,
 79 |                 currAlphabetScrolledOn = yOffset.getIndexOfCharBasedOnYPosition(
 80 |                   alphabetHeightInPixels = alphabetHeightInPixels,
 81 |                 ),
 82 |               )
 83 |             }
 84 |           }
 85 |         }
 86 |       }
 87 |     }
 88 |   }
 89 | }
 90 | 
 91 | fun List<Contact>.getFirstUniqueSeenCharIndex(): ImmutableMap<Char, Int> {
 92 |   val firstLetterIndexes = mutableMapOf<Char, Int>()
 93 |   this
 94 |     .map { it.fullName.lowercase().first() }
 95 |     .forEachIndexed { index, char ->
 96 |       if (!firstLetterIndexes.contains(char)) {
 97 |         firstLetterIndexes[char] = index
 98 |       }
 99 |       // else don't care about letters that don't exist
100 |     }
101 |   return firstLetterIndexes.toPersistentMap()
102 | }


--------------------------------------------------------------------------------
/app/src/main/java/com/ekeitho/bubble/ui/theme/Theme.kt:
--------------------------------------------------------------------------------
  1 | package com.ekeitho.bubble.ui.theme
  2 | 
  3 | import android.app.Activity
  4 | import android.os.Build
  5 | import androidx.compose.foundation.isSystemInDarkTheme
  6 | import androidx.compose.material3.MaterialTheme
  7 | import androidx.compose.material3.darkColorScheme
  8 | import androidx.compose.material3.dynamicDarkColorScheme
  9 | import androidx.compose.material3.dynamicLightColorScheme
 10 | import androidx.compose.material3.lightColorScheme
 11 | import androidx.compose.runtime.Composable
 12 | import androidx.compose.runtime.SideEffect
 13 | import androidx.compose.ui.graphics.toArgb
 14 | import androidx.compose.ui.platform.LocalContext
 15 | import androidx.compose.ui.platform.LocalView
 16 | import androidx.core.view.ViewCompat
 17 | 
 18 | private val LightThemeColors = lightColorScheme(
 19 | 
 20 |     primary = md_theme_light_primary,
 21 |     onPrimary = md_theme_light_onPrimary,
 22 |     primaryContainer = md_theme_light_primaryContainer,
 23 |     onPrimaryContainer = md_theme_light_onPrimaryContainer,
 24 |     secondary = md_theme_light_secondary,
 25 |     onSecondary = md_theme_light_onSecondary,
 26 |     secondaryContainer = md_theme_light_secondaryContainer,
 27 |     onSecondaryContainer = md_theme_light_onSecondaryContainer,
 28 |     tertiary = md_theme_light_tertiary,
 29 |     onTertiary = md_theme_light_onTertiary,
 30 |     tertiaryContainer = md_theme_light_tertiaryContainer,
 31 |     onTertiaryContainer = md_theme_light_onTertiaryContainer,
 32 |     error = md_theme_light_error,
 33 |     errorContainer = md_theme_light_errorContainer,
 34 |     onError = md_theme_light_onError,
 35 |     onErrorContainer = md_theme_light_onErrorContainer,
 36 |     background = md_theme_light_background,
 37 |     onBackground = md_theme_light_onBackground,
 38 |     surface = md_theme_light_surface,
 39 |     onSurface = md_theme_light_onSurface,
 40 |     surfaceVariant = md_theme_light_surfaceVariant,
 41 |     onSurfaceVariant = md_theme_light_onSurfaceVariant,
 42 |     outline = md_theme_light_outline,
 43 |     inverseOnSurface = md_theme_light_inverseOnSurface,
 44 |     inverseSurface = md_theme_light_inverseSurface,
 45 |     inversePrimary = md_theme_light_inversePrimary,
 46 | )
 47 | 
 48 | private val DarkThemeColors = darkColorScheme(
 49 |     primary = md_theme_dark_primary,
 50 |     onPrimary = md_theme_dark_onPrimary,
 51 |     primaryContainer = md_theme_dark_primaryContainer,
 52 |     onPrimaryContainer = md_theme_dark_onPrimaryContainer,
 53 |     secondary = md_theme_dark_secondary,
 54 |     onSecondary = md_theme_dark_onSecondary,
 55 |     secondaryContainer = md_theme_dark_secondaryContainer,
 56 |     onSecondaryContainer = md_theme_dark_onSecondaryContainer,
 57 |     tertiary = md_theme_dark_tertiary,
 58 |     onTertiary = md_theme_dark_onTertiary,
 59 |     tertiaryContainer = md_theme_dark_tertiaryContainer,
 60 |     onTertiaryContainer = md_theme_dark_onTertiaryContainer,
 61 |     error = md_theme_dark_error,
 62 |     errorContainer = md_theme_dark_errorContainer,
 63 |     onError = md_theme_dark_onError,
 64 |     onErrorContainer = md_theme_dark_onErrorContainer,
 65 |     background = md_theme_dark_background,
 66 |     onBackground = md_theme_dark_onBackground,
 67 |     surface = md_theme_dark_surface,
 68 |     onSurface = md_theme_dark_onSurface,
 69 |     surfaceVariant = md_theme_dark_surfaceVariant,
 70 |     onSurfaceVariant = md_theme_dark_onSurfaceVariant,
 71 |     outline = md_theme_dark_outline,
 72 |     inverseOnSurface = md_theme_dark_inverseOnSurface,
 73 |     inverseSurface = md_theme_dark_inverseSurface,
 74 |     inversePrimary = md_theme_dark_inversePrimary,
 75 | )
 76 | 
 77 | @Composable
 78 | fun ScrollingBubbleTheme(
 79 |     darkTheme: Boolean = isSystemInDarkTheme(),
 80 |     // Dynamic color is available on Android 12+
 81 |     dynamicColor: Boolean = true,
 82 |     content: @Composable () -> Unit
 83 | ) {
 84 |     val colorScheme = when {
 85 |         dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
 86 |             val context = LocalContext.current
 87 |             if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
 88 |         }
 89 |         darkTheme -> DarkThemeColors
 90 |         else -> LightThemeColors
 91 |     }
 92 |     val view = LocalView.current
 93 |     if (!view.isInEditMode) {
 94 |         SideEffect {
 95 |             (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
 96 |             ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
 97 |         }
 98 |     }
 99 | 
100 |     MaterialTheme(
101 |         colorScheme = colorScheme,
102 |         typography = Typography,
103 |         content = content
104 |     )
105 | }


--------------------------------------------------------------------------------
/app/src/main/res/drawable/ic_launcher_background.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <vector xmlns:android="http://schemas.android.com/apk/res/android"
  3 |     android:width="108dp"
  4 |     android:height="108dp"
  5 |     android:viewportWidth="108"
  6 |     android:viewportHeight="108">
  7 |     <path
  8 |         android:fillColor="#3DDC84"
  9 |         android:pathData="M0,0h108v108h-108z" />
 10 |     <path
 11 |         android:fillColor="#00000000"
 12 |         android:pathData="M9,0L9,108"
 13 |         android:strokeWidth="0.8"
 14 |         android:strokeColor="#33FFFFFF" />
 15 |     <path
 16 |         android:fillColor="#00000000"
 17 |         android:pathData="M19,0L19,108"
 18 |         android:strokeWidth="0.8"
 19 |         android:strokeColor="#33FFFFFF" />
 20 |     <path
 21 |         android:fillColor="#00000000"
 22 |         android:pathData="M29,0L29,108"
 23 |         android:strokeWidth="0.8"
 24 |         android:strokeColor="#33FFFFFF" />
 25 |     <path
 26 |         android:fillColor="#00000000"
 27 |         android:pathData="M39,0L39,108"
 28 |         android:strokeWidth="0.8"
 29 |         android:strokeColor="#33FFFFFF" />
 30 |     <path
 31 |         android:fillColor="#00000000"
 32 |         android:pathData="M49,0L49,108"
 33 |         android:strokeWidth="0.8"
 34 |         android:strokeColor="#33FFFFFF" />
 35 |     <path
 36 |         android:fillColor="#00000000"
 37 |         android:pathData="M59,0L59,108"
 38 |         android:strokeWidth="0.8"
 39 |         android:strokeColor="#33FFFFFF" />
 40 |     <path
 41 |         android:fillColor="#00000000"
 42 |         android:pathData="M69,0L69,108"
 43 |         android:strokeWidth="0.8"
 44 |         android:strokeColor="#33FFFFFF" />
 45 |     <path
 46 |         android:fillColor="#00000000"
 47 |         android:pathData="M79,0L79,108"
 48 |         android:strokeWidth="0.8"
 49 |         android:strokeColor="#33FFFFFF" />
 50 |     <path
 51 |         android:fillColor="#00000000"
 52 |         android:pathData="M89,0L89,108"
 53 |         android:strokeWidth="0.8"
 54 |         android:strokeColor="#33FFFFFF" />
 55 |     <path
 56 |         android:fillColor="#00000000"
 57 |         android:pathData="M99,0L99,108"
 58 |         android:strokeWidth="0.8"
 59 |         android:strokeColor="#33FFFFFF" />
 60 |     <path
 61 |         android:fillColor="#00000000"
 62 |         android:pathData="M0,9L108,9"
 63 |         android:strokeWidth="0.8"
 64 |         android:strokeColor="#33FFFFFF" />
 65 |     <path
 66 |         android:fillColor="#00000000"
 67 |         android:pathData="M0,19L108,19"
 68 |         android:strokeWidth="0.8"
 69 |         android:strokeColor="#33FFFFFF" />
 70 |     <path
 71 |         android:fillColor="#00000000"
 72 |         android:pathData="M0,29L108,29"
 73 |         android:strokeWidth="0.8"
 74 |         android:strokeColor="#33FFFFFF" />
 75 |     <path
 76 |         android:fillColor="#00000000"
 77 |         android:pathData="M0,39L108,39"
 78 |         android:strokeWidth="0.8"
 79 |         android:strokeColor="#33FFFFFF" />
 80 |     <path
 81 |         android:fillColor="#00000000"
 82 |         android:pathData="M0,49L108,49"
 83 |         android:strokeWidth="0.8"
 84 |         android:strokeColor="#33FFFFFF" />
 85 |     <path
 86 |         android:fillColor="#00000000"
 87 |         android:pathData="M0,59L108,59"
 88 |         android:strokeWidth="0.8"
 89 |         android:strokeColor="#33FFFFFF" />
 90 |     <path
 91 |         android:fillColor="#00000000"
 92 |         android:pathData="M0,69L108,69"
 93 |         android:strokeWidth="0.8"
 94 |         android:strokeColor="#33FFFFFF" />
 95 |     <path
 96 |         android:fillColor="#00000000"
 97 |         android:pathData="M0,79L108,79"
 98 |         android:strokeWidth="0.8"
 99 |         android:strokeColor="#33FFFFFF" />
100 |     <path
101 |         android:fillColor="#00000000"
102 |         android:pathData="M0,89L108,89"
103 |         android:strokeWidth="0.8"
104 |         android:strokeColor="#33FFFFFF" />
105 |     <path
106 |         android:fillColor="#00000000"
107 |         android:pathData="M0,99L108,99"
108 |         android:strokeWidth="0.8"
109 |         android:strokeColor="#33FFFFFF" />
110 |     <path
111 |         android:fillColor="#00000000"
112 |         android:pathData="M19,29L89,29"
113 |         android:strokeWidth="0.8"
114 |         android:strokeColor="#33FFFFFF" />
115 |     <path
116 |         android:fillColor="#00000000"
117 |         android:pathData="M19,39L89,39"
118 |         android:strokeWidth="0.8"
119 |         android:strokeColor="#33FFFFFF" />
120 |     <path
121 |         android:fillColor="#00000000"
122 |         android:pathData="M19,49L89,49"
123 |         android:strokeWidth="0.8"
124 |         android:strokeColor="#33FFFFFF" />
125 |     <path
126 |         android:fillColor="#00000000"
127 |         android:pathData="M19,59L89,59"
128 |         android:strokeWidth="0.8"
129 |         android:strokeColor="#33FFFFFF" />
130 |     <path
131 |         android:fillColor="#00000000"
132 |         android:pathData="M19,69L89,69"
133 |         android:strokeWidth="0.8"
134 |         android:strokeColor="#33FFFFFF" />
135 |     <path
136 |         android:fillColor="#00000000"
137 |         android:pathData="M19,79L89,79"
138 |         android:strokeWidth="0.8"
139 |         android:strokeColor="#33FFFFFF" />
140 |     <path
141 |         android:fillColor="#00000000"
142 |         android:pathData="M29,19L29,89"
143 |         android:strokeWidth="0.8"
144 |         android:strokeColor="#33FFFFFF" />
145 |     <path
146 |         android:fillColor="#00000000"
147 |         android:pathData="M39,19L39,89"
148 |         android:strokeWidth="0.8"
149 |         android:strokeColor="#33FFFFFF" />
150 |     <path
151 |         android:fillColor="#00000000"
152 |         android:pathData="M49,19L49,89"
153 |         android:strokeWidth="0.8"
154 |         android:strokeColor="#33FFFFFF" />
155 |     <path
156 |         android:fillColor="#00000000"
157 |         android:pathData="M59,19L59,89"
158 |         android:strokeWidth="0.8"
159 |         android:strokeColor="#33FFFFFF" />
160 |     <path
161 |         android:fillColor="#00000000"
162 |         android:pathData="M69,19L69,89"
163 |         android:strokeWidth="0.8"
164 |         android:strokeColor="#33FFFFFF" />
165 |     <path
166 |         android:fillColor="#00000000"
167 |         android:pathData="M79,19L79,89"
168 |         android:strokeWidth="0.8"
169 |         android:strokeColor="#33FFFFFF" />
170 | </vector>
171 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/src/main/java/com/ekeitho/bubble/views/ContactListWithScroller.kt:
--------------------------------------------------------------------------------
  1 | package com.ekeitho.bubble.views
  2 | 
  3 | import androidx.compose.foundation.gestures.detectVerticalDragGestures
  4 | import androidx.compose.foundation.layout.Arrangement
  5 | import androidx.compose.foundation.layout.Box
  6 | import androidx.compose.foundation.layout.Column
  7 | import androidx.compose.foundation.layout.Row
  8 | import androidx.compose.foundation.layout.RowScope
  9 | import androidx.compose.foundation.layout.fillMaxHeight
 10 | import androidx.compose.foundation.layout.fillMaxSize
 11 | import androidx.compose.foundation.layout.height
 12 | import androidx.compose.foundation.layout.padding
 13 | import androidx.compose.foundation.layout.size
 14 | import androidx.compose.foundation.layout.width
 15 | import androidx.compose.foundation.lazy.LazyColumn
 16 | import androidx.compose.foundation.lazy.LazyListState
 17 | import androidx.compose.foundation.lazy.itemsIndexed
 18 | import androidx.compose.foundation.lazy.rememberLazyListState
 19 | import androidx.compose.foundation.shape.CircleShape
 20 | import androidx.compose.material3.MaterialTheme
 21 | import androidx.compose.material3.Surface
 22 | import androidx.compose.material3.Text
 23 | import androidx.compose.runtime.Composable
 24 | import androidx.compose.runtime.getValue
 25 | import androidx.compose.runtime.mutableStateOf
 26 | import androidx.compose.runtime.remember
 27 | import androidx.compose.runtime.rememberCoroutineScope
 28 | import androidx.compose.runtime.setValue
 29 | import androidx.compose.ui.Alignment
 30 | import androidx.compose.ui.Modifier
 31 | import androidx.compose.ui.input.pointer.pointerInput
 32 | import androidx.compose.ui.layout.onGloballyPositioned
 33 | import androidx.compose.ui.layout.positionInRoot
 34 | import androidx.compose.ui.platform.LocalDensity
 35 | import androidx.compose.ui.unit.dp
 36 | import com.ekeitho.bubble.alphabetItemSize
 37 | import com.ekeitho.bubble.domain.Contact
 38 | import com.ekeitho.bubble.getFirstUniqueSeenCharIndex
 39 | import com.ekeitho.bubble.getIndexOfCharBasedOnYPosition
 40 | import kotlinx.collections.immutable.ImmutableList
 41 | import kotlinx.collections.immutable.ImmutableMap
 42 | import kotlinx.coroutines.launch
 43 | 
 44 | @Composable
 45 | fun ContactListWithScroller(
 46 |   contacts: ImmutableList<Contact>,
 47 |   onAlphabetListDrag: (Float?, Float) -> Unit,
 48 | ) {
 49 |   val mapOfFirstLetterIndex: ImmutableMap<Char, Int> =
 50 |     remember(contacts) { contacts.getFirstUniqueSeenCharIndex() }
 51 |   val alphabetHeightInPixels: Float =
 52 |     with(LocalDensity.current) { alphabetItemSize.toPx() }
 53 |   val lazyListState = rememberLazyListState()
 54 |   val coroutineScope = rememberCoroutineScope()
 55 | 
 56 |   Row(
 57 |     modifier = Modifier.fillMaxSize(),
 58 |     verticalAlignment = Alignment.CenterVertically,
 59 |   ) {
 60 |     ContactList(
 61 |       Modifier
 62 |         .fillMaxHeight()
 63 |         .weight(1F),
 64 |       contacts,
 65 |       lazyListState,
 66 |       mapOfFirstLetterIndex
 67 |     )
 68 | 
 69 |     AlphabetScroller(
 70 |       onAlphabetListDrag = { relativeDragYOffset, containerDistanceFromTopOfScreen ->
 71 |         onAlphabetListDrag(relativeDragYOffset, containerDistanceFromTopOfScreen)
 72 |         coroutineScope.launch {
 73 |           // null case can happen if we go through list
 74 |           // and we don't have a name that starts with I
 75 |           val indexOfChar = relativeDragYOffset?.getIndexOfCharBasedOnYPosition(
 76 |             alphabetHeightInPixels = alphabetHeightInPixels,
 77 |           )
 78 |           mapOfFirstLetterIndex[indexOfChar]?.let {
 79 |             lazyListState.scrollToItem(it)
 80 |           }
 81 |         }
 82 |       },
 83 |     )
 84 |   }
 85 | }
 86 | 
 87 | @Composable
 88 | fun RowScope.ContactList(
 89 |   modifier: Modifier,
 90 |   contacts: ImmutableList<Contact>,
 91 |   lazyListState: LazyListState,
 92 |   firstLetterIndexes: Map<Char, Int>,
 93 | ) {
 94 |   LazyColumn(
 95 |     modifier = modifier,
 96 |     state = lazyListState,
 97 |   ) {
 98 |     itemsIndexed(contacts) { index, contact ->
 99 |       ContactItem(
100 |         contact = contact,
101 |         isAlphabeticallyFirstInCharGroup =
102 |         firstLetterIndexes[contact.fullName.lowercase().first()] == index,
103 |       )
104 |     }
105 |   }
106 | }
107 | 
108 | @Composable
109 | fun ContactItem(
110 |   contact: Contact,
111 |   isAlphabeticallyFirstInCharGroup: Boolean
112 | ) {
113 |   Row(verticalAlignment = Alignment.CenterVertically) {
114 |     Box(
115 |       modifier = Modifier.width(48.dp),
116 |       contentAlignment = Alignment.Center,
117 |     ) {
118 |       if (isAlphabeticallyFirstInCharGroup) {
119 |         Text(
120 |           text = contact.fullName.first().toString(),
121 |           style = MaterialTheme.typography.bodyLarge
122 |         )
123 |       }
124 |     }
125 | 
126 |     Surface(
127 |       shape = CircleShape,
128 |       modifier = Modifier.size(32.dp),
129 |       color = MaterialTheme.colorScheme.secondary
130 |     ) {
131 |       Box(contentAlignment = Alignment.Center) {
132 |         Text(
133 |           text = contact.fullName.first().toString(),
134 |           style = MaterialTheme.typography.bodyLarge
135 |         )
136 |       }
137 |     }
138 | 
139 |     Text(
140 |       modifier = Modifier.padding(16.dp),
141 |       text = contact.fullName,
142 |       style = MaterialTheme.typography.titleLarge,
143 |     )
144 |   }
145 | }
146 | 
147 | @Composable
148 | private fun AlphabetScroller(
149 |   onAlphabetListDrag: (relativeDragYOffset: Float?, distanceFromTopOfScreen: Float) -> Unit,
150 | ) {
151 |   val alphabetCharList = "abcdefghijklmnopqrstuvwxyz".map { it }
152 |   var distanceFromTopOfScreen by remember { mutableStateOf(0F) }
153 | 
154 |   Column(
155 |     modifier = Modifier
156 |       .width(16.dp)
157 |       .onGloballyPositioned {
158 |         distanceFromTopOfScreen = it.positionInRoot().y
159 |       }
160 |       .pointerInput(alphabetCharList) {
161 |         detectVerticalDragGestures(
162 |           onDragStart = {
163 |             onAlphabetListDrag(it.y, distanceFromTopOfScreen)
164 |           },
165 |           onDragEnd = {
166 |             onAlphabetListDrag(null, distanceFromTopOfScreen)
167 |           }
168 |         ) { change, _ ->
169 |           onAlphabetListDrag(
170 |             change.position.y,
171 |             distanceFromTopOfScreen
172 |           )
173 |         }
174 |       },
175 |     verticalArrangement = Arrangement.Center,
176 |   ) {
177 |     for (i in alphabetCharList) {
178 |       Text(
179 |         modifier = Modifier.height(alphabetItemSize),
180 |         text = i.toString(),
181 |       )
182 |     }
183 |   }
184 | }


--------------------------------------------------------------------------------