Skip to content

Instantly share code, notes, and snippets.

@joshayoung

joshayoung/ThousandsSeparator.kt

Last active July 15, 2025 22:23
Show Gist options
  • Save joshayoung/c42e67e0f24c4c12a7fc3e26e5eb3196 to your computer and use it in GitHub Desktop.
Save joshayoung/c42e67e0f24c4c12a7fc3e26e5eb3196 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joshayoung revised this gist Jul 15, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion video
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    [ThousandsSeparator.webm](https://gist.github.com/user-attachments/assets/2f078a7f-3d48-4dde-a29c-3dcf2ec9eaaa)
    https://gist.github.com/user-attachments/assets/2f078a7f-3d48-4dde-a29c-3dcf2ec9eaaa
  2. joshayoung revised this gist Jul 15, 2025. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions video
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [ThousandsSeparator.webm](https://gist.github.com/user-attachments/assets/2f078a7f-3d48-4dde-a29c-3dcf2ec9eaaa)
  3. joshayoung created this gist Jul 15, 2025.
    119 changes: 119 additions & 0 deletions ThousandsSeparator.kt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,119 @@
    package com.joshayoung.mobiledevcampusminichallenges

    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.activity.enableEdgeToEdge
    import androidx.compose.foundation.background
    import androidx.compose.foundation.clickable
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Box
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.Row
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.fillMaxWidth
    import androidx.compose.foundation.layout.padding
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material3.MaterialTheme
    import androidx.compose.material3.Surface
    import androidx.compose.material3.Text
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.getValue
    import androidx.compose.runtime.mutableIntStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.runtime.setValue
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.draw.clip
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.text.font.FontWeight
    import androidx.compose.ui.text.style.TextAlign
    import androidx.compose.ui.tooling.preview.Preview
    import androidx.compose.ui.unit.dp
    import com.joshayoung.mobiledevcampusminichallenges.ui.theme.MobileDevCampusMiniChallengesTheme

    class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    setContent {
    MobileDevCampusMiniChallengesTheme {
    ThousandsSeparatorPicker()
    }
    }
    }
    }

    @Composable
    fun ThousandsSeparatorPicker() {
    Surface(
    modifier = Modifier
    .background(color = MaterialTheme.colorScheme.background)
    .fillMaxSize()
    ) {
    Column(modifier = Modifier
    .padding(20.dp)
    ,verticalArrangement = Arrangement.Center,
    ) {
    Text("Thousands separator", modifier = Modifier
    .padding(bottom = 4.dp)
    ,fontWeight = FontWeight.SemiBold,
    color = MaterialTheme.colorScheme.onBackground
    )
    Box(modifier = Modifier
    .clip(RoundedCornerShape(16.dp))
    .background(color = Color(0xFF8138FF).copy(alpha = 0.08f))
    .fillMaxWidth()
    .padding(4.dp)
    ) {
    Row(modifier = Modifier
    .fillMaxWidth()
    ,horizontalArrangement = Arrangement.SpaceBetween
    ) {
    val options = listOf("1.000", "1,000", "1 000")
    SelectableButtons(options)
    }
    }
    }
    }
    }

    @Composable
    fun SelectableButtons(items: List<String>) {
    var selectedIndex by remember { mutableIntStateOf(0) }

    items.forEachIndexed { index, item ->
    Box(modifier = Modifier
    .clip(RoundedCornerShape(16.dp))
    .clickable {
    selectedIndex = index
    }
    .background(
    if(selectedIndex == index) {
    Color.White
    } else {
    Color.Transparent
    }
    )
    .padding(horizontal = 20.dp)
    ) {
    var fontWeight = FontWeight.Normal;
    if(selectedIndex == index) {
    fontWeight = FontWeight.Bold;
    }
    Text(text = item,
    fontWeight = fontWeight,
    textAlign = TextAlign.Center,
    modifier = Modifier
    .padding(10.dp),
    )
    }
    }
    }

    @Preview(showBackground = true)
    @Composable
    fun MobileDevChallengesPreview() {
    MobileDevCampusMiniChallengesTheme {
    ThousandsSeparatorPicker()
    }
    }