Added scrollbar to settings and account activities

app/src/main/kotlin/com/tutpro/baresip/AccountActivity.kt

@@ -61,6 +61,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.tutpro.baresip.BaresipService.Companion.uas
 import com.tutpro.baresip.CustomElements.Checkbox
+import com.tutpro.baresip.CustomElements.verticalScrollbar
 
 class AccountActivity : ComponentActivity() {
 
@@ -232,14 +233,16 @@ class AccountActivity : ComponentActivity() {
             LocalCustomColors.current.grayLight
         else
             LocalCustomColors.current.black
+        val scrollState = rememberScrollState()
         Column(
             modifier = Modifier
                 .imePadding()
                 .fillMaxWidth()
                 .padding(contentPadding)
-                .padding(top = 8.dp, bottom = 8.dp, start = 16.dp, end = 4.dp)
+                .padding(start = 16.dp, end = 4.dp, top = 8.dp, bottom = 8.dp)
-                .verticalScroll(rememberScrollState()),
+                .verticalScrollbar(scrollState)
-            verticalArrangement = Arrangement.spacedBy(12.dp),
+                .verticalScroll(state = scrollState),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             oldNickname = acc.nickName.value
             oldDisplayname = acc.displayName

app/src/main/kotlin/com/tutpro/baresip/ConfigActivity.kt

@@ -66,6 +66,7 @@ import androidx.compose.ui.unit.sp
 import androidx.core.content.ContextCompat
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.tutpro.baresip.CustomElements.Checkbox
+import com.tutpro.baresip.CustomElements.verticalScrollbar
 import com.tutpro.baresip.Utils.copyInputStreamToFile
 import java.io.File
 import java.io.FileInputStream
@@ -334,19 +335,15 @@ class ConfigActivity : ComponentActivity() {
             LocalCustomColors.current.grayLight
         else
             LocalCustomColors.current.black
-        Column(
+        val scrollState = rememberScrollState()
-            modifier = Modifier
-                .fillMaxWidth()
-                .background(LocalCustomColors.current.background)
-                .padding(contentPadding),
-        ) {
         Column(
             modifier = Modifier
                 .imePadding()
                 .fillMaxWidth()
+                .padding(contentPadding)
                 .padding(start = 16.dp, end = 4.dp, top = 8.dp, bottom = 8.dp)
-                    .verticalScroll(rememberScrollState())
+                .verticalScrollbar(scrollState)
-                    .background(LocalCustomColors.current.background),
+                .verticalScroll(state = scrollState),
             verticalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             StartAutomatically(ctx)
@@ -368,7 +365,6 @@ class ConfigActivity : ComponentActivity() {
             Reset(ctx)
         }
     }
-    }
 
     @Composable
     private fun StartAutomatically(ctx: Context) {

app/src/main/kotlin/com/tutpro/baresip/CustomElements.kt

@@ -7,6 +7,7 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -53,6 +54,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
@@ -216,6 +218,34 @@ object CustomElements {
         )
     }
 
+    @Composable
+    fun Modifier.verticalScrollbar(
+        state: ScrollState,
+        scrollbarWidth: Dp = 4.dp,
+        alwaysShow: Boolean = true,
+        color: Color = LocalCustomColors.current.gray
+    ): Modifier {
+        val alpha by animateFloatAsState(
+            targetValue = if(state.isScrollInProgress || alwaysShow) 1f else 0f,
+            animationSpec = tween(400, delayMillis = if(state.isScrollInProgress) 0 else 700)
+        )
+        return this then Modifier.drawWithContent {
+            drawContent()
+            val viewHeight = state.viewportSize.toFloat()
+            val contentHeight = state.maxValue + viewHeight
+            val scrollbarHeight = (viewHeight * (viewHeight / contentHeight )).coerceIn(10.dp.toPx() .. viewHeight)
+            val variableZone = viewHeight - scrollbarHeight
+            val scrollbarYoffset = (state.value.toFloat() / state.maxValue) * variableZone
+            drawRoundRect(
+                cornerRadius = CornerRadius(scrollbarWidth.toPx() / 2, scrollbarWidth.toPx() / 2),
+                color = color,
+                topLeft = Offset(this.size.width - scrollbarWidth.toPx(), scrollbarYoffset),
+                size = Size(scrollbarWidth.toPx(), scrollbarHeight),
+                alpha = alpha
+            )
+        }
+    }
+
     @Composable
     fun Modifier.verticalScrollbar(
         state: LazyListState,
@@ -237,7 +267,8 @@ object CustomElements {
                 val elementHeight = this.size.height / state.layoutInfo.totalItemsCount
                 val scrollbarOffsetY = firstVisibleElementIndex * elementHeight
                 val scrollbarHeight = state.layoutInfo.visibleItemsInfo.size * elementHeight
-                drawRect(
+                drawRoundRect(
+                    cornerRadius = CornerRadius(width.toPx() / 2, width.toPx() / 2),
                     color = color,
                     topLeft = Offset(this.size.width - width.toPx(), scrollbarOffsetY),
                     size = Size(width.toPx(), scrollbarHeight),