├── .gitignore ├── .idea ├── .gitignore ├── compiler.xml ├── deploymentTargetDropDown.xml ├── gradle.xml ├── inspectionProfiles │ └── Project_Default.xml ├── kotlinc.xml ├── migrations.xml ├── misc.xml └── vcs.xml ├── README.md ├── app ├── .gitignore ├── build.gradle.kts ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── appmason │ │ └── jetdraggableindicators │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── appmason │ │ │ └── jetdraggableindicators │ │ │ ├── MainActivity.kt │ │ │ └── ui │ │ │ ├── screens │ │ │ ├── Carousel.kt │ │ │ └── DraggableIndicator.kt │ │ │ └── theme │ │ │ ├── Color.kt │ │ │ ├── Theme.kt │ │ │ └── Type.kt │ └── res │ │ ├── drawable │ │ ├── ic_launcher_background.xml │ │ └── ic_launcher_foreground.xml │ │ ├── mipmap-anydpi │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml │ │ └── xml │ │ ├── backup_rules.xml │ │ └── data_extraction_rules.xml │ └── test │ └── java │ └── com │ └── appmason │ └── jetdraggableindicators │ └── ExampleUnitTest.kt ├── build.gradle.kts ├── draggable_indicator.gif ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle.kts /.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/deploymentTargetDropDown.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 41 | -------------------------------------------------------------------------------- /.idea/kotlinc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/migrations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Compose Custom Draggable Indicators 2 | 3 | Demo project to create Instagram-like draggable indicators for Image carousel with diminishing effect. 4 | 5 | > This is not a library. This is a demo project to experiment and try out a functionality. 6 | 7 | ### Blog post 8 | The blog post explaining the source code can be found here: 9 | 10 | [Create Instagram-like Long Press and Draggable Carousel Indicators in Jetpack Compose](https://blog.pushpalroy.com/create-instagram-like-long-press-and-draggable-carousel-indicators-in-jetpack-compose) 11 | 12 | The blog is also available on Medium [here](https://medium.com/@pushpalroy2007/create-instagram-like-long-press-and-draggable-carousel-indicators-in-jetpack-compose-ce16fa75bc1e). 13 | 14 | 15 | ### Demo 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
Custom Draggable Indicator
Draggable Indicator
25 | 26 | ### Features 27 | - Instagram like long press and draggable indicators 28 | - Indicators diminish in size for pages further away from the current selection, providing a focused visual effect 29 | 30 | ### Find this project useful? 31 | 32 | - Support it by clicking the ⭐️ button on the upper right of this page. 33 | 34 | ### License 35 | 36 | ``` 37 | MIT License 38 | 39 | Copyright (c) 2024 Pushpal Roy 40 | 41 | Permission is hereby granted, free of charge, to any person obtaining a 42 | copy of this software and associated documentation files (the "Software"), 43 | to deal in the Software without restriction, including without limitation 44 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 45 | and/or sell copies of the Software, and to permit persons to whom the 46 | Software is furnished to do so, subject to the following conditions: 47 | 48 | The above copyright notice and this permission notice shall be included 49 | in all copies or substantial portions of the Software. 50 | 51 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 52 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 53 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 54 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 55 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 56 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 57 | ``` 58 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("com.android.application") 3 | id("org.jetbrains.kotlin.android") 4 | } 5 | 6 | android { 7 | namespace = "com.appmason.jetdraggableindicators" 8 | compileSdk = 34 9 | 10 | defaultConfig { 11 | applicationId = "com.appmason.jetdraggableindicators" 12 | minSdk = 28 13 | targetSdk = 34 14 | versionCode = 1 15 | versionName = "1.0" 16 | 17 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" 18 | vectorDrawables { 19 | useSupportLibrary = true 20 | } 21 | } 22 | 23 | buildTypes { 24 | release { 25 | isMinifyEnabled = false 26 | proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro") 27 | } 28 | } 29 | compileOptions { 30 | sourceCompatibility = JavaVersion.VERSION_1_8 31 | targetCompatibility = JavaVersion.VERSION_1_8 32 | } 33 | kotlinOptions { 34 | jvmTarget = "1.8" 35 | } 36 | buildFeatures { 37 | compose = true 38 | } 39 | composeOptions { 40 | kotlinCompilerExtensionVersion = "1.5.1" 41 | } 42 | packaging { 43 | resources { 44 | excludes += "/META-INF/{AL2.0,LGPL2.1}" 45 | } 46 | } 47 | } 48 | 49 | dependencies { 50 | 51 | implementation("androidx.core:core-ktx:1.12.0") 52 | implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0") 53 | implementation("androidx.activity:activity-compose:1.8.2") 54 | implementation(platform("androidx.compose:compose-bom:2023.08.00")) 55 | implementation("androidx.compose.ui:ui") 56 | implementation("androidx.compose.ui:ui-graphics") 57 | implementation("androidx.compose.ui:ui-tooling-preview") 58 | implementation("androidx.compose.material3:material3") 59 | testImplementation("junit:junit:4.13.2") 60 | androidTestImplementation("androidx.test.ext:junit:1.1.5") 61 | androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1") 62 | androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00")) 63 | androidTestImplementation("androidx.compose.ui:ui-test-junit4") 64 | debugImplementation("androidx.compose.ui:ui-tooling") 65 | debugImplementation("androidx.compose.ui:ui-test-manifest") 66 | } -------------------------------------------------------------------------------- /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/appmason/jetdraggableindicators/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.appmason.jetdraggableindicators 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.appmason.jetdraggableindicators", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /app/src/main/java/com/appmason/jetdraggableindicators/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.appmason.jetdraggableindicators 2 | 3 | import android.os.Bundle 4 | import androidx.activity.ComponentActivity 5 | import androidx.activity.compose.setContent 6 | import androidx.compose.foundation.layout.fillMaxSize 7 | import androidx.compose.material3.MaterialTheme 8 | import androidx.compose.material3.Surface 9 | import androidx.compose.runtime.Composable 10 | import androidx.compose.ui.Modifier 11 | import androidx.compose.ui.tooling.preview.Preview 12 | import com.appmason.jetdraggableindicators.ui.screens.Carousel 13 | import com.appmason.jetdraggableindicators.ui.theme.JetDraggableIndicatorsTheme 14 | 15 | class MainActivity : ComponentActivity() { 16 | override fun onCreate(savedInstanceState: Bundle?) { 17 | super.onCreate(savedInstanceState) 18 | setContent { 19 | JetDraggableIndicatorsTheme { 20 | // A surface container using the 'background' color from the theme 21 | Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) { 22 | Carousel() 23 | } 24 | } 25 | } 26 | } 27 | } 28 | 29 | @Preview(showBackground = true) 30 | @Composable 31 | fun CarouselPreview() { 32 | JetDraggableIndicatorsTheme { 33 | Carousel() 34 | } 35 | } -------------------------------------------------------------------------------- /app/src/main/java/com/appmason/jetdraggableindicators/ui/screens/Carousel.kt: -------------------------------------------------------------------------------- 1 | package com.appmason.jetdraggableindicators.ui.screens 2 | 3 | import androidx.compose.foundation.ExperimentalFoundationApi 4 | import androidx.compose.foundation.background 5 | import androidx.compose.foundation.layout.Arrangement 6 | import androidx.compose.foundation.layout.Box 7 | import androidx.compose.foundation.layout.Column 8 | import androidx.compose.foundation.layout.Spacer 9 | import androidx.compose.foundation.layout.fillMaxSize 10 | import androidx.compose.foundation.layout.height 11 | import androidx.compose.foundation.layout.padding 12 | import androidx.compose.foundation.pager.HorizontalPager 13 | import androidx.compose.foundation.pager.rememberPagerState 14 | import androidx.compose.foundation.shape.RoundedCornerShape 15 | import androidx.compose.material3.Card 16 | import androidx.compose.runtime.Composable 17 | import androidx.compose.runtime.remember 18 | import androidx.compose.runtime.rememberCoroutineScope 19 | import androidx.compose.ui.Alignment 20 | import androidx.compose.ui.Modifier 21 | import androidx.compose.ui.graphics.Color 22 | import androidx.compose.ui.tooling.preview.Preview 23 | import androidx.compose.ui.unit.dp 24 | import com.appmason.jetdraggableindicators.ui.theme.JetDraggableIndicatorsTheme 25 | import kotlinx.coroutines.launch 26 | 27 | @OptIn(ExperimentalFoundationApi::class) 28 | @Composable 29 | fun Carousel() { 30 | val colorList = remember { 31 | listOf( 32 | Color(0xFF354499), 33 | Color(0xFF0195A8), 34 | Color(0xFF6D9E35), 35 | Color(0xFFBDAD23), 36 | Color(0xFFA86808), 37 | Color(0xFF5B8827), 38 | Color(0xFF0E6F65), 39 | Color(0xFF752583) 40 | ) 41 | } 42 | val state = rememberPagerState( 43 | initialPage = 0, 44 | initialPageOffsetFraction = 0f 45 | ) { colorList.size } 46 | 47 | val coroutineScope = rememberCoroutineScope() 48 | Column( 49 | modifier = Modifier.padding(24.dp), 50 | verticalArrangement = Arrangement.Center, 51 | horizontalAlignment = Alignment.CenterHorizontally 52 | ) { 53 | HorizontalPager( 54 | modifier = Modifier.height(280.dp), 55 | state = state, 56 | ) { page -> 57 | Card( 58 | modifier = Modifier.fillMaxSize(), 59 | shape = RoundedCornerShape(8.dp) 60 | ) { 61 | Box( 62 | modifier = Modifier 63 | .background(color = colorList[page]) 64 | .fillMaxSize() 65 | ) 66 | } 67 | } 68 | Spacer(modifier = Modifier.height(16.dp)) 69 | DraggableIndicator( 70 | modifier = Modifier, 71 | state = state, 72 | itemCount = colorList.size, 73 | onPageSelect = { page -> 74 | coroutineScope.launch { 75 | state.scrollToPage(page) 76 | } 77 | }, 78 | ) 79 | } 80 | } 81 | 82 | @Preview(showBackground = true) 83 | @Composable 84 | fun CarouselPreview() { 85 | JetDraggableIndicatorsTheme { 86 | Carousel() 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /app/src/main/java/com/appmason/jetdraggableindicators/ui/screens/DraggableIndicator.kt: -------------------------------------------------------------------------------- 1 | package com.appmason.jetdraggableindicators.ui.screens 2 | 3 | import androidx.compose.foundation.ExperimentalFoundationApi 4 | import androidx.compose.foundation.background 5 | import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress 6 | import androidx.compose.foundation.layout.Arrangement 7 | import androidx.compose.foundation.layout.Box 8 | import androidx.compose.foundation.layout.padding 9 | import androidx.compose.foundation.layout.size 10 | import androidx.compose.foundation.layout.widthIn 11 | import androidx.compose.foundation.lazy.LazyRow 12 | import androidx.compose.foundation.lazy.rememberLazyListState 13 | import androidx.compose.foundation.pager.PagerState 14 | import androidx.compose.foundation.pager.rememberPagerState 15 | import androidx.compose.foundation.shape.RoundedCornerShape 16 | import androidx.compose.material3.MaterialTheme 17 | import androidx.compose.runtime.Composable 18 | import androidx.compose.runtime.LaunchedEffect 19 | import androidx.compose.runtime.getValue 20 | import androidx.compose.runtime.mutableFloatStateOf 21 | import androidx.compose.runtime.mutableStateOf 22 | import androidx.compose.runtime.remember 23 | import androidx.compose.runtime.rememberCoroutineScope 24 | import androidx.compose.runtime.setValue 25 | import androidx.compose.ui.Alignment 26 | import androidx.compose.ui.Modifier 27 | import androidx.compose.ui.draw.drawBehind 28 | import androidx.compose.ui.graphics.Color 29 | import androidx.compose.ui.graphics.graphicsLayer 30 | import androidx.compose.ui.hapticfeedback.HapticFeedbackType 31 | import androidx.compose.ui.input.pointer.pointerInput 32 | import androidx.compose.ui.platform.LocalDensity 33 | import androidx.compose.ui.platform.LocalHapticFeedback 34 | import androidx.compose.ui.tooling.preview.Preview 35 | import androidx.compose.ui.unit.dp 36 | import com.appmason.jetdraggableindicators.ui.theme.JetDraggableIndicatorsTheme 37 | import kotlinx.coroutines.launch 38 | import kotlin.math.abs 39 | 40 | /** 41 | * Displays a custom indicator for a pager view, allowing for interactive selection and visualization 42 | * of the current page. The indicators are designed to diminish in size for pages further away from 43 | * the current selection, providing a focused visual effect. 44 | * 45 | * The function integrates drag gestures to enable changing the current page by dragging across the indicators, 46 | * with visual feedback during drag operations. It also automatically adjusts the scroll position of the indicators 47 | * to ensure the current selection is always visible within a constrained viewport size. 48 | * 49 | * @param modifier The [Modifier] to be applied to the indicator container. Defaults to [Modifier]. 50 | * @param state The current state of the pager, containing information about the current page and allowing 51 | * control over the pager's scroll position. 52 | * @param itemCount The total number of pages/items in the pager. 53 | * @param onPageSelect A callback function that is invoked when a new page is selected through drag gestures. 54 | * The function is passed the index of the selected page. 55 | */ 56 | @OptIn(ExperimentalFoundationApi::class) 57 | @Composable 58 | fun DraggableIndicator( 59 | modifier: Modifier = Modifier, 60 | state: PagerState, 61 | itemCount: Int, 62 | onPageSelect: (Int) -> Unit, 63 | ) { 64 | val haptics = LocalHapticFeedback.current 65 | val density = LocalDensity.current 66 | val threshold = remember { 67 | with(density) { 68 | ((80.dp / (itemCount.coerceAtLeast(1))) + 10.dp).toPx() 69 | } 70 | } 71 | val accumulatedDragAmount = remember { mutableFloatStateOf(0f) } 72 | var enableDrag by remember { mutableStateOf(false) } 73 | val lazyListState = rememberLazyListState() 74 | val coroutineScope = rememberCoroutineScope() 75 | val currentPage = state.currentPage 76 | 77 | LaunchedEffect(currentPage) { 78 | coroutineScope.launch { 79 | lazyListState.animateScrollToItem(index = currentPage) 80 | } 81 | } 82 | 83 | Box( 84 | modifier = modifier.background( 85 | color = if (enableDrag) MaterialTheme.colorScheme.onBackground.copy(alpha = 0.1f) 86 | else Color.Transparent, 87 | shape = RoundedCornerShape(50) 88 | ), 89 | contentAlignment = Alignment.Center 90 | ) { 91 | LazyRow( 92 | state = lazyListState, 93 | modifier = Modifier 94 | .padding(8.dp) 95 | .widthIn(max = 100.dp) 96 | .pointerInput(Unit) { 97 | detectDragGesturesAfterLongPress( 98 | onDragStart = { 99 | haptics.performHapticFeedback(HapticFeedbackType.LongPress) 100 | accumulatedDragAmount.floatValue = 0f 101 | enableDrag = true 102 | }, 103 | onDrag = { change, dragAmount -> 104 | if (enableDrag) { 105 | change.consume() 106 | accumulatedDragAmount.floatValue += dragAmount.x 107 | if (abs(accumulatedDragAmount.floatValue) >= threshold) { 108 | val nextPage = if (accumulatedDragAmount.floatValue < 0) state.currentPage + 1 else state.currentPage - 1 109 | val correctedNextPage = nextPage.coerceIn(0, itemCount - 1) 110 | 111 | if (correctedNextPage != state.currentPage) { 112 | haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) 113 | onPageSelect(correctedNextPage) 114 | } 115 | accumulatedDragAmount.floatValue = 0f 116 | } 117 | } 118 | }, 119 | onDragEnd = { 120 | enableDrag = false 121 | accumulatedDragAmount.floatValue = 0f 122 | } 123 | ) 124 | }, 125 | horizontalArrangement = Arrangement.spacedBy(8.dp), 126 | verticalAlignment = Alignment.CenterVertically 127 | ) { 128 | items(itemCount) { i -> 129 | val scaleFactor = 1f - (0.1f * abs(i - currentPage)).coerceAtMost(0.4f) 130 | val color = if (i == currentPage) Color(0xFF03A9F4) else Color.Gray 131 | Box( 132 | modifier = Modifier 133 | .size(10.dp) 134 | .graphicsLayer { 135 | scaleX = scaleFactor 136 | scaleY = scaleFactor 137 | } 138 | .drawBehind { 139 | drawCircle(color) 140 | } 141 | ) 142 | } 143 | } 144 | } 145 | } 146 | 147 | @OptIn(ExperimentalFoundationApi::class) 148 | @Preview(showBackground = true) 149 | @Composable 150 | fun DraggableIndicatorPreview() { 151 | JetDraggableIndicatorsTheme { 152 | DraggableIndicator( 153 | itemCount = 8, 154 | state = rememberPagerState( 155 | initialPage = 0, 156 | initialPageOffsetFraction = 0f 157 | ) { 0 }, 158 | onPageSelect = {} 159 | ) 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /app/src/main/java/com/appmason/jetdraggableindicators/ui/theme/Color.kt: -------------------------------------------------------------------------------- 1 | package com.appmason.jetdraggableindicators.ui.theme 2 | 3 | import androidx.compose.ui.graphics.Color 4 | 5 | val Purple80 = Color(0xFFD0BCFF) 6 | val PurpleGrey80 = Color(0xFFCCC2DC) 7 | val Pink80 = Color(0xFFEFB8C8) 8 | 9 | val Purple40 = Color(0xFF6650a4) 10 | val PurpleGrey40 = Color(0xFF625b71) 11 | val Pink40 = Color(0xFF7D5260) -------------------------------------------------------------------------------- /app/src/main/java/com/appmason/jetdraggableindicators/ui/theme/Theme.kt: -------------------------------------------------------------------------------- 1 | package com.appmason.jetdraggableindicators.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.WindowCompat 17 | 18 | private val DarkColorScheme = darkColorScheme( 19 | primary = Purple80, 20 | secondary = PurpleGrey80, 21 | tertiary = Pink80 22 | ) 23 | 24 | private val LightColorScheme = lightColorScheme( 25 | primary = Purple40, 26 | secondary = PurpleGrey40, 27 | tertiary = Pink40 28 | 29 | /* Other default colors to override 30 | background = Color(0xFFFFFBFE), 31 | surface = Color(0xFFFFFBFE), 32 | onPrimary = Color.White, 33 | onSecondary = Color.White, 34 | onTertiary = Color.White, 35 | onBackground = Color(0xFF1C1B1F), 36 | onSurface = Color(0xFF1C1B1F), 37 | */ 38 | ) 39 | 40 | @Composable 41 | fun JetDraggableIndicatorsTheme( 42 | darkTheme: Boolean = isSystemInDarkTheme(), 43 | // Dynamic color is available on Android 12+ 44 | dynamicColor: Boolean = true, 45 | content: @Composable () -> Unit 46 | ) { 47 | val colorScheme = when { 48 | dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { 49 | val context = LocalContext.current 50 | if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) 51 | } 52 | 53 | darkTheme -> DarkColorScheme 54 | else -> LightColorScheme 55 | } 56 | val view = LocalView.current 57 | if (!view.isInEditMode) { 58 | SideEffect { 59 | val window = (view.context as Activity).window 60 | window.statusBarColor = colorScheme.background.toArgb() 61 | WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme 62 | } 63 | } 64 | 65 | MaterialTheme( 66 | colorScheme = colorScheme, 67 | typography = Typography, 68 | content = content 69 | ) 70 | } -------------------------------------------------------------------------------- /app/src/main/java/com/appmason/jetdraggableindicators/ui/theme/Type.kt: -------------------------------------------------------------------------------- 1 | package com.appmason.jetdraggableindicators.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/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pushpalroy/JetDraggableIndicators/5725a874a2528c8b3ee74abf53f45b8ebcf37890/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #FFFFFFFF 10 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | JetDraggableIndicators 3 | -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |