Introduce shimmer modifier

README.md

@@ -26,7 +26,7 @@ UI Components includes several custom views for Android platform to make develop
 * [TimelineView](libraries/timeline-view): **TimelineView** for creating a timeline and show actions on it.
 * [TimelineViewCompose](libraries/timeline-view-compose): **TimelineView** for creating a timeline for compose and show actions on it.
 * [FitOptionMessage](libraries/fit-option-message-view): **FitOptionMessageView** for displaying text views with clipped imageviews.
-
+* [Shimmer](libraries/shimmer-compose): **Shimmer** for displaying shimmer for loading state.
 License
 --------
     Copyright 2022 Trendyol.com

buildSrc/src/main/kotlin/Dependencies.kt

@@ -15,6 +15,7 @@ object Dependencies {
     const val composeBom = "androidx.compose:compose-bom:2023.05.01"
     const val composeActivity = "androidx.activity:activity-compose:1.3.0-alpha07"
     const val composeMaterial = "androidx.compose.material:material"
+    const val composeUiUtil = "androidx.compose.ui:ui-util"
     const val composeUiTooling = "androidx.compose.ui:ui-tooling"
     const val composeRuntime = "androidx.compose.runtime:runtime"
     const val composeCoil = "io.coil-kt:coil-compose:2.2.1"

libraries/shimmer-compose/.gitignore

@@ -0,0 +1 @@
+/build

libraries/shimmer-compose/README.md

@@ -0,0 +1,76 @@
+shimmerComposeVersion = **shimmer-compose-1.0.0** [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+
+# Shimmer Modifier
+
+The `shimmer` modifier allows you to display a shimmer with a custom shape for loading state.
+
+# Parameters
+
+The `Shimmer` modifier accepts the following parameters:
+
+
+| Parameter Name          | Type        | Description                    |
+|-------------------------|-------------|--------------------------------|
+| isVisible                    | Boolean      | It determines if the shimmer isVisible or not                   |
+| isWipeOffAnimationEnabled               | Boolean   | It enables or disables wipe-off animation of the shimmer     |
+| shape | Shape      | It determines the shimmer's shape |
+
+# Usage
+
+```kotlin
+val title by mutableStateOf("")
+
+Text(
+   text = title,
+   modifier = Modifier
+      .fillMaxWidth()
+      .shimmer(title == "")
+)
+```
+
+# Installation
+
+- To implement **Shimmer** to your Android project via Gradle, you need to add JitPack repository to your root build.gradle.
+
+```groovy
+ allprojects {
+       repositories {
+           // ... 
+
+           maven { url 'https://jitpack.io' }
+       }
+   }
+```
+
+Open your module-level `build.gradle` file and add the `Shimmer` dependency:
+
+```groovy
+dependencies {    
+  implementation "com.github.Trendyol.android-ui-components:shimmer-compose:$shimmerComposeVersion"
+}  
+```
+
+# Contributors
+
+This library is maintained mainly by Trendyol Android Team members but also other Android lovers contributes.
+
+# License
+--------
+    Copyright 2023 Trendyol.com
+
+    Copyright 2022 The Android Open Source Project
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+    Placeholder.kt file in androidx project has been renamed to Shimmer.kt and modified to fit our needs
+    https://github.com/androidx/androidx/blob/8da8b8938ee44b72bd258b15eb623680b3fcbb29/wear/compose/compose-material/src/main/java/androidx/wear/compose/material/Placeholder.kt

libraries/shimmer-compose/build.gradle.kts

@@ -0,0 +1,47 @@
+plugins {
+    id(Plugins.androidLibrary)
+    id(Plugins.kotlinAndroid)
+    id(Plugins.mavenPublish)
+}
+
+android {
+    namespace = "com.trendyol.shimmercompose"
+    compileSdk = Configs.compileSdkVersion
+
+    defaultConfig {
+        minSdk = Configs.minSdkVersion
+        targetSdk = Configs.targetSdkVersion
+
+        vectorDrawables.useSupportLibrary = true
+    }
+
+    buildTypes {
+        getByName<com.android.build.gradle.internal.dsl.BuildType>("release") {
+            isMinifyEnabled = false
+            setProguardFiles(
+                mutableListOf(
+                    getDefaultProguardFile("proguard-android.txt"),
+                    "proguard-rules.pro"
+                )
+            )
+        }
+    }
+    buildFeatures {
+        compose = true
+    }
+
+    composeOptions {
+        kotlinCompilerExtensionVersion = Dependencies.kotlinCompilerExtensionVersion
+    }
+    kotlinOptions {
+        jvmTarget = "1.8"
+    }
+}
+
+dependencies {
+    implementation(platform(Dependencies.composeBom))
+    implementation(Dependencies.composeMaterial)
+    implementation(Dependencies.composeUiUtil)
+    implementation(Dependencies.composeUiTooling)
+    implementation(Dependencies.composeRuntime)
+}

sample-compose/build.gradle.kts

@@ -49,4 +49,5 @@ dependencies {
 
     implementation(projects.libraries.timelineViewCompose)
     implementation(projects.libraries.ratingBarCompose)
+    implementation(projects.libraries.shimmerCompose)
 }

sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/ComponentsScreen.kt

@@ -35,6 +35,10 @@ fun ComponentsScreen(
         ComponentItem(title = "RatingBar") {
             onItemClick(Route.RatingBar)
         }
+
+        ComponentItem(title = "Shimmer") {
+            onItemClick(Route.Shimmer)
+        }
     }
 }
 

sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/Route.kt

@@ -7,4 +7,6 @@ sealed class Route(val destination: String) {
     object TimelineView : Route("timelineView")
 
     object RatingBar : Route("ratingbar")
+
+    object Shimmer : Route("shimmer")
 }

sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/SampleComposeNavGraph.kt

@@ -32,5 +32,9 @@ fun SampleComposeNavGraph(
         composable(Route.RatingBar.destination) {
             RatingBarScreen()
         }
+
+        composable(Route.Shimmer.destination) {
+            ShimmerScreen()
+        }
     }
 }

sample-compose/src/main/java/com/trendyol/uicomponents/samplecompose/ShimmerScreen.kt

@@ -0,0 +1,126 @@
+package com.trendyol.uicomponents.samplecompose
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import androidx.lifecycle.viewmodel.compose.viewModel
+import coil.compose.AsyncImage
+import com.trendyol.uicomponents.samplecompose.ui.theme.ColorPrimary
+import com.trendyol.uicomponents.shimmercompose.shimmer
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+@Composable
+fun ShimmerScreen(viewModel: ShimmerViewModel = viewModel()) = with(viewModel) {
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                backgroundColor = ColorPrimary,
+                elevation = 0.dp
+            ) {
+                Text(
+                    modifier = Modifier.padding(start = 16.dp),
+                    text = "Shimmer",
+                    style = MaterialTheme.typography.h6.copy(color = Color.White)
+                )
+            }
+        }
+    ) { paddingValues ->
+        LazyVerticalGrid(
+            modifier = Modifier.padding(paddingValues),
+            columns = GridCells.Fixed(2),
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            contentPadding = PaddingValues(16.dp)
+        ) {
+            items(20) {
+                ListItem(uiState.item, uiState.isLoading)
+            }
+        }
+    }
+}
+
+@Composable
+fun ListItem(item: Item, isLoading: Boolean) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        AsyncImage(
+            model = item.imageUrl,
+            contentDescription = null,
+            modifier = Modifier
+                .aspectRatio(1f)
+                .fillMaxWidth()
+                .clip(RoundedCornerShape(8.dp))
+                .shimmer(isLoading)
+        )
+
+        Text(
+            text = item.title,
+            modifier = Modifier
+                .fillMaxWidth()
+                .shimmer(isLoading),
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+        )
+    }
+}
+
+@Stable
+interface ShimmerUiState {
+    val item: Item
+    val isLoading: Boolean
+}
+
+@Stable
+data class Item(
+    val title: String,
+    val imageUrl: String
+)
+
+class MutableShimmerUiState : ShimmerUiState {
+    override var item: Item by mutableStateOf(Item("", ""))
+    override var isLoading: Boolean by mutableStateOf(true)
+}
+
+class ShimmerViewModel : ViewModel() {
+    private val _uiState = MutableShimmerUiState()
+    val uiState: ShimmerUiState = _uiState
+
+    init {
+        fetchItem()
+    }
+
+    private fun fetchItem() = viewModelScope.launch {
+        delay(1_500)
+        _uiState.isLoading = false
+        _uiState.item = Item(
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            "https://via.placeholder.com/600/92c952"
+        )
+    }
+}

settings.gradle.kts

@@ -13,6 +13,7 @@ include(":libraries:touch-delegator")
 include(":libraries:fit-option-message-view")
 include(":libraries:timeline-view-compose")
 include(":libraries:rating-bar-compose")
+include(":libraries:shimmer-compose")
 
 rootProject.name = "trendyol-android-ui-components"