# Jetpack Compose Crash Note

- `sp` (match the user font preference) **For Text**
- `dp` (match the user screen pixel 1dp=1px) **For Non-Text**
- `Color = Color.Blue` or using HEX code `color = Color(0xFF[hex-code])`
- To use the `by` keyword in compose to import:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

- Manually ReCompose

var count by remember { mutableStateOf(0) }
key(count){
    // recompose when the var count change
}

# InputStream? OutputStream? wtf

`InputStream` -> Read data
`OutputStram` -> Write data
<div>
<img src="https://hackmd.io/_uploads/SJEZHzxcgg.png" style="background:white;"/>
</div>

# Content Provider
The Content Provider functions as an intermediary, facilitating access to the private data or files of your application by other applications.
## Path provider
Share file with other apps
- Setup a provider

<provider
          android:name="androidx.core.content.FileProvider"
          android:authorities="${applicationId}.provider"
          android:exported="false"
          android:grantUriPermissions="true">
    <meta-data
               android:name="android.support.FILE_PROVIDER_PATHS"
               android:resource="@xml/paths" />
</provider>

- Gave other apps permission to access app private external storage

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <external-files-path name="external_dir" path="." />
</paths>

- Get uri to share with other apps

val cameraCaptureUri = FileProvider.getUriForFile(
    context,
    "${context.packageName}.provider",
    File(context.getExternalFilesDir("image"), "image_${System.currentTimeMillis()}.png")
)

:::warning
Make sure the requested path is defined in the `FILE_PROVIDER_PATHS` resource, or else you'll get a security exception.
:::
# App shortcut
[app shortcut doc](https://developer.android.com/develop/ui/views/launch/shortcuts/creating-shortcuts)
:::info
The maximum action for a app is 5
:::
## Static shortcut
Can't be modify after build
- In android manifest add meta data inside `activity`

<meta-data android:name="android.app.shortcuts" android:resource="@xml/action" />

- add resource for setup action

## Dynamic shortcut
# Effect Handlers
## snapshotFlow
kind of like `LaunchEffect` but allow to use in non-composable function

snapshotFlow { searchQuery }
    .filter { it.length > 2 } // Only emit if query is longer than 2 characters
    .debounce(500) // Wait 500ms after last change
    .collect { query ->
        println("Search query: $query")
        // Example: Trigger a network search
    }

# Compose MainActivity base code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            /* composable function gose here... */
        }
    }
}

# Get DeviceConfig
- Get the screen width

val configuration = LocalConfiguration.current
val screenWidthDp = configuration.screenWidthDp

# Text To Speech (TTS)
Setup a speecher

var tts by remember { mutableStateOf<TextToSpeech?>(null) }
var ttsReady by remember { mutableStateOf(false) }

LaunchedEffect(Unit) {
    tts = TextToSpeech(context) { status ->
        if (status == TextToSpeech.SUCCESS) {
            tts?.language = Locale.US
            ttsReady = true
        }
    }
}

DisposableEffect(Unit) {
    onDispose {
        tts?.stop()
        tts?.shutdown()
    }
}

Speak the text

tts?.speak(text, TextToSpeech.QUEUE_FLUSH, null, null)

In the above example the second paramter decided the TTS engine behavior when there's a new text to speak, there are mainly two option.

| Usage | Description |
| -------------------------- | -------------------------------------------- |
| `TextToSpeech.QUEUE_FLUSH` | Speek immediately |
| `TextToSpeech.QUEUE_ADD` | Speek right after the current speech is done |
# Repeate Background

@Composable
fun RepeatedBackgroundExample() {
    val context = LocalContext.current
    val bitmap = BitmapFactory.decodeResource(context.resources, R.drawable.your_repeatable_image) // Replace with your image resource ID

    val imageShader = ImageShader(bitmap.asImageBitmap(), TileMode.Repeated, TileMode.Repeated)
    val shaderBrush = remember { ShaderBrush(imageShader) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(shaderBrush)
    ) {
        // Your content goes here
    }
}

# Glance Widget
:::info
- Dependencies

implementation("androidx.glance:glance-appwidget:1.1.0")
implementation("androidx.glance:glance-material3:1.1.0")

:::
- Create a Receiver

class MyReceiver : GlanceAppWidgetReceiver() {
    override val glanceAppWidget: GlanceAppWidget = MyGlanceWidget()
}

- Create widget UI

class MyGlanceWidget : GlanceAppWidget() {
    @SuppressLint("RestrictedApi")
    override suspend fun provideGlance(context: Context, id: GlanceId) {
        provideContent {
            /* composable function here... */           
        }
    }
}

- Add appwidget provider for meta data \
create a `xml` file under `res/xml/` with

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:description="@string/app_name"
    android:minWidth="200dp"
    android:minHeight="100dp"
    android:resizeMode="horizontal|vertical"
    android:updatePeriodMillis="1000" />

- In `AndroidManifest.xml`
:::warning
HINT: `android.appwidget.*`
the widget is **appwidget**
:::

<receiver
          android:name=".MyReceiver"
          android:exported="true">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
               android:name="android.appwidget.provider"
               android:resource="@xml/music_widget_info" />
</receiver>

### Auto update widget when rebuild
:::success
> `BarWidget` is a `GlanceAppWidget()` in this example
#### Method 1: Via Application Class
In Application Class
Declare a scope to run suspend action

private val appScope = CoroutineScope(SupervisorJob() + Dispatchers.Main)

Run the update widget method to update the widget

appScope.launch {
    BarWidget().updateAll(applicationContext)
}

:::warning
Remember to bind the application class in `AndroidManifest.xml`
and add the widget update method to `onCreate()` to update the widget when app launch
:::
:::success
#### Method 2: Via MainActivity
Under `MainAcvtivity`

suspend fun refreshWidget(context: Context) {
    BarWidget().updateAll(context)
}

In Composable

CoroutineScope(Dispatchers.Main).launch {
    refreshWidget(this@MainActivity)
}

:::
# Permission Check/Request
:::warning
**Require android studio version above `TIRAMISU`** `@RequiresApi(Build.VERSION_CODES.TIRAMISU)`
:::
- Check permission (Ex: Whether user allow APP to push notification, if so the `hasPermission` will be `true`)

val hasPermission = ContextCompat.checkSelfPermission(
    context,
    Manifest.permission.POST_NOTIFICATIONS
) == PackageManager.PERMISSION_GRANTED

- Create a launcher to show the system dialog for requesting user permission

val launcher = rememberLauncherForActivityResult(
    ActivityResultContracts.RequestPermission()
) {
    Toast.makeText(context, "A permission request has done", Toast.LENGTH_SHORT).show()
}

- If the user didn't accept the permission show the dialog (Image above)

if (!hasPermission) launcher.launch(Manifest.permission.POST_NOTIFICATIONS)

# Notification
- Add permission

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

- Create a notification manager

val notificationManager = context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager

- Create a notification channel

val channel =
    NotificationChannel(
        "channel_id",
        "channel_name",
        NotificationManager.IMPORTANCE_HIGH
    )
    
notificationManager.createNotificationChannel(channel)

- Create a notification

val notification = 
    NotificationCompat.Builder(context, channelId)
        .setContentTitle("hello")
        .setContentText("hello")
        .setSmallIcon(R.drawable.play)
        .build()

- Push the notification

notificationManager.notify(<notifiacationId<Int>>, notification)

# Alarm Manager
- Here is a example of how to send a notification at a custom time via Alarm Manager
:::warning
Permission required

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

**Remember to register the receier in the manifest**
:::
:::info
In this example `android.permission.RECEIVE_BOOT_COMPLETED` is not necessary because we don't active the alarm when the device boot up
:::
- Create a brodcastReceiver for pushing notification

class AlarmReceiver : BroadcastReceiver() {
    override fun onReceive(context: Context, intent: Intent) {
        sendNotification(context)
    }

    private fun sendNotification(context: Context) {
        val notificationManager =
        context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
        val notificationId = (100..200).random()
        val channelId = "hello_background"

        val channel =
        NotificationChannel(
            channelId,
            "hello_background",
            NotificationManager.IMPORTANCE_HIGH
        )
        notificationManager.createNotificationChannel(channel)

        val notification = NotificationCompat.Builder(context, channelId)
            .setContentTitle("It's time to die")
            .setContentText("A test message!!!")
            .setSmallIcon(R.drawable.play)
            .build()

        notificationManager.notify(notificationId, notification)
    }
}

- Create a alarm manager for calling from `MainActivity` and set the alarm via alarm manager

@SuppressLint("ScheduleExactAlarm")
fun setExactAlarm(context: Context, triggerTime: Long) {
    val alarmManager = context.getSystemService(Context.ALARM_SERVICE) as AlarmManager
    val intent = Intent(context, AlarmReceiver::class.java)
    val pendingIntent = PendingIntent.getBroadcast(
        context,
        0,
        intent,
        PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
    )

    alarmManager.setExactAndAllowWhileIdle(AlarmManager.RTC_WAKEUP, triggerTime, pendingIntent)
}

## Repeating Alarm

@RequiresApi(Build.VERSION_CODES.O)
class NotificationReceiver : BroadcastReceiver() {
    @RequiresApi(Build.VERSION_CODES.UPSIDE_DOWN_CAKE)
    override fun onReceive(context: Context, intent: Intent) {
        sendNotification(context, intent)
    }

    @RequiresApi(Build.VERSION_CODES.UPSIDE_DOWN_CAKE)
    private fun sendNotification(context: Context, intent: Intent) {
        val manager = context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
        val notification =
            NotificationCompat.Builder(context, alarm_channel).setContentTitle("Hello")
                .setContentText("Hello World").setSmallIcon(R.drawable.ic_launcher_foreground)
                .build()
        manager.notify(1, notification)
        setExactAlarm(context, intent.getLongExtra("time", AlarmManager.INTERVAL_DAY))
    }
}

@RequiresApi(Build.VERSION_CODES.UPSIDE_DOWN_CAKE)
@SuppressLint("ScheduleExactAlarm")
fun setExactAlarm(context: Context, triggerTime: Long, cancel: Boolean = false) {
    val alarmManager = context.getSystemService(Context.ALARM_SERVICE) as AlarmManager

    val intent = Intent(context, NotificationReceiver::class.java).apply {
        putExtra("time", triggerTime)
    }

    val pendingIntent = PendingIntent.getBroadcast(
        context,
        0,
        intent,
        PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
    )
    if (!cancel) {
        alarmManager.setExactAndAllowWhileIdle(
            AlarmManager.RTC_WAKEUP,
            triggerTime,
            pendingIntent
        )
    } else {
        alarmManager.cancel(pendingIntent)
    }
}

# Calendar
Calendar is a method for java to convert readable time into a calendar that can be convert to muti format
[Article about calendar & alarm](https://ithelp.ithome.com.tw/articles/10206960)

val calendar = Calendar.getInstance().apply {
    timeInMillis = System.currentTimeMillis()

    set(Calendar.HOUR_OF_DAY, 7)
    set(Calendar.MINUTE, 0)
    set(Calendar.SECOND, 0)
    
    if (timeInMillis <= System.currentTimeMillis()) {
        add(Calendar.DAY_OF_MONTH, 1)
    }
}

# Time Picker

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Material3AlarmTimePicker() {
    val timePickerState =
        rememberTimePickerState(initialHour = 7, initialMinute = 0, is24Hour = true)
    var showPicker by remember { mutableStateOf(false) }
    
    Text("${timePickerState.hour}:${timePickerState.minute}")
    
    FilledTonalButton(onClick = { showPicker = !showPicker }) {
        Text("Set Alarm Time")
    }

    Text(text = "Alarm Time: ${timePickerState.hour}:${timePickerState.minute.toString().padStart(2, '0')}")
    
    if (showPicker) {
        Dialog(
            onDismissRequest = { showPicker = false }
        ) {
            Column(
                Modifier
                    .clip(RoundedCornerShape(20.dp))
                    .background(Color.White)
                    .padding(10.dp)
            ) {
                TimePicker(state = timePickerState)
                FilledTonalButton(onClick = {
                    showPicker = false
                }) {
                    Text("Confirm")
                }
            }
        }
    }
}

# API Fetching
## HTTP Connection via JSON Object
:::info
For 55th National
:::
### GET

data class Files(
    val name: String,
    val url: String
)

fun getFiles(): Flow<List<Files>> = flow {
    val files: List<Files> = withContext(Dispatchers.IO) {
        val url = URL("$host/api/files").openConnection() as HttpURLConnection
        url.requestMethod = "GET"
        val jsonText = url.inputStream.bufferedReader().use { it.readText() }
        val jsonFilesObj = JSONObject(jsonText).getJSONArray("files")
        return@withContext List(jsonFilesObj.length()) {
            val file = jsonFilesObj.getJSONObject(it)
            Files(
                file.getString("name"),
                file.getString("url")
            )
        }
    }
    emit(files)
}.catch {
    Log.e("getFiles", it.toString())
    emit(emptyList())
}

## Raw via GSON
- Data class

data class Music(
    val cover: String,
    val title: String,
    val url: String
) {
    fun title(): String = title.replace(".mp3", "")
}

- Fetch API
> `object : TypeToken<List<Music>>() {}.type` (provide by gson) is for non-generic type

var data by remember { mutableStateOf<List<Music>>(emptyList()) }

withContext(Dispatchers.IO) {
    val jsonString =
    URL("https://skills-music-api.eliaschen.dev/music").openConnection().let {
        BufferedReader(InputStreamReader(it.getInputStream()))
    }.use { it.readText() }
    val gson = Gson()
    val jsonData = object : TypeToken<List<Music>>() {}.type
    data = gson.fromJson(jsonString, jsonData)
}

- Display the data

if(data.isNotEmpty()){
    LazyColumn {
        items(data) {
            Text(it.title())
        }
    }
}

## Retrofit
:::info
- Dependencies

implementation("com.squareup.retrofit2:retrofit:2.11.0")
implementation("com.squareup.retrofit2:converter-gson:2.9.0")

:::
- Example data

data class Music(
    val title: String,
    val url: String
)

- Create a interface for api action

interface Api {
    @GET("/music")
    suspend fun getMusic(): List<Music>
}

- Create a Retrofit Instance for doing request

object RetrofitInstance {
    val api: Api by lazy {
        Retrofit.Builder()
            .baseUrl("https://skills-music-api.eliaschen.dev") // Example host
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(Api::class.java)
    }
}

- Use a ViewModel to retrive data from composable function

class MainViewModel : ViewModel() {
    private val _musicList = MutableStateFlow<List<Music>>(emptyList())
    val musicList: StateFlow<List<Music>> get() = _musicList
    // handle error
    private val _failed = MutableStateFlow(false)
    val failed: StateFlow<Boolean> get() = _failed

    init {
        fetchMusicList()
    }

    private fun fetchMusicList() {
        viewModelScope.launch {
            try {
                val musicList = RetrofitInstance.api.getMusic()
                _musicList.value = musicList
            } catch (e: Exception) {
                _failed.value = true
            }
        }
    }
}

- Retrive data in composable function

@Composable
fun MusicListScreen(viewModel: MainViewModel = viewModel()) {
    val musicList by viewModel.musicList.collectAsState()
    val failed by viewModel.failed.collectAsState()
    if (!failed) {
        LazyColumn {
            items(musicList) { music ->
                Column {
                    Text(text = music.title)
                    Text(text = music.url)
                }
            }
        }
    } else {
        Text("Failed Request!!!")
    }
}

## OkHttp
:::info
- Dependencies

implementation("com.squareup.okhttp3:okhttp:4.9.3")

:::
- Create a client

val client = OkHttpClient()

- use the **`withContext(Dispatchers.IO)`** to perform the request in background
- create a request

val request = Request.Builder().url("<url>").build()

- get the response

val response = client.newCall(request).execute()
val body = call.body?.string()?: return@withContext emptyList<MusicList>()

- prase to json

val gson = Gson()
val listType = object : TypeToken<List<MusicList>>() {}.type
gson.fromJson(res, listType)

### Example (simple)

var data by remember { mutableStateOf<List<Music>>(emptyList()) }

withContext(Dispatchers.IO) {
    val client = OkHttpClient()
    val request = Request.Builder()
        .url("https://skills-music-api.eliaschen.dev/music")
        .build()
    data = client.newCall(request).execute().use { response ->
        Gson().fromJson(response.body?.string(), object : TypeToken<List<Music>>() {}.type)
    }
}

### Example (handle exception)

data class MusicList(
    val title: String,
    val url: String
)

val gson = Gson()
val client = OkHttpClient()

suspend fun fetchUrl(): List<MusicList> {
    return withContext(Dispatchers.IO) {
        try {
            val request = Request.Builder().url("$host/music").build()
            val call = client.newCall(request).execute()
            if (call.isSuccessful) {
                val res = call.body?.string() ?: return@withContext emptyList<MusicList>()
                val listType = object : TypeToken<List<MusicList>>() {}.type
                gson.fromJson(res, listType)
            } else {
                emptyList<MusicList>()
            }
        } catch (e: Exception) {
            emptyList<MusicList>()
        }
    }
}

# Audio
How to do with mediaPlayBack Service Check out the prepare note
[Skills 55th 08 regional Android](/Vur5L4tbTI6DYibWz7wyUA)
## ExoPlayer
:::info
- Dependencies

implementation("androidx.media3:media3-exoplayer:1.5.1")
implementation("androidx.media3:media3-common:1.5.1")

:::
- Create a player

val player = remember { ExoPlayer.Builder(context).build() }

- Add media source with URI and preare for playing

player.setMediaItem(MediaItem.fromUri("<uri>"))
player.prepare()

- player action
- `play()` play the media
- `pause()` pause the media
- `stop()` end the media
- `release()` unload player
- Ex: `release()` when UI unmount

DisposableEffect(Unit) {
    onDispose {
        ExoPlayer.release()
    }
}

### PlayList
the playlist in exoplayer is just a set of mediaitem

MediaItem.Builder()
    .setUri(host + music.url)
    .setMediaMetadata(            // set some metadata
        MediaMetadata.Builder()
            .setTitle(music.title())
            .setDescription(music.cover)
            .build()
    )
    .build()

Add the media items array to the player

player.setMediaItems(mediaItems)

Use a player listener to retrive realtime feel meta data from player
- Player listener

player.addListener(object : Player.Listener {
    override fun onEvents(player: Player, events: Player.Events) {
        // something to do
        super.onEvents(player, events)
    }
})

- Get / Adjust volume

// use `player.volume` to get/set volume, sooo easy~
fun adjustVolume(target: Float) {
    player.volume.coerceIn(0.0f, 1.0f)
    player.volume = target
}

- Repeat Mode

player.repeatMode // get
player.repeatMode = Player.REPEAT_MODE_OFF // no repeat
player.repeatMode = Player.REPEAT_MODE_ONE // for current media item
player.repeatMode = Player.REPEAT_MODE_ALL // for the whole playlist

# Current Time
- `SimpleDateFormat`

var currentTime by remember { mutableStateOf("") }

LaunchedEffect(Unit) {
    while (true) {
        currentTime = SimpleDateFormat("HH:mm", Locale.getDefault()).format(Date())
        delay(1000L)
    }
}

- `DateTimeForamtter`

LocalDateTime.now().format(
    DateTimeFormatter.ofPattern(
        "yyyy-MM-dd HH:mm:ss"
    )
)

# Image
## Access Image from `assets/`

val context = LocalContext.current
val bitmap = remember {
    val file = context.assets.open(<filePath>)
    BitmapFactory.decodeStream(file)
}

Image(
    bitmap = bitmap.asImageBitmap(), contentDescription = <filePath>
)

## Network Image
### Raw

@Composable
fun NetworkImage() {
    var bitmap by remember { mutableStateOf<Bitmap?>(null) }
    LaunchedEffect(Unit) {
        withContext(Dispatchers.IO) {
            try {
                bitmap = URL("https://skills-music-api.eliaschen.dev/image/ocean.jpg").openStream()
                    .use { BitmapFactory.decodeStream(it) } ?: null
            } catch (e: Exception) {
                bitmap = null
            }
        }
    }
    Column {
        bitmap?.asImageBitmap()?.let { Image(bitmap = it, contentDescription = "") }
    }
}

### Okhttp

@Composable
fun NetworkImage(url: String) {
    val bitmap = remember { mutableStateOf<android.graphics.Bitmap?>(null) }

    LaunchedEffect(url) {
        bitmap.value = withContext(Dispatchers.IO) {
            OkHttpClient()
                .newCall(Request.Builder().url(url).build())
                .execute()
                .use { response ->
                    response.body?.bytes()?.let { android.graphics.BitmapFactory.decodeByteArray(it, 0, it.size) }
                }
        }
    }

    bitmap.value?.let {
        Image(bitmap = it.asImageBitmap(), contentDescription = "Network image")
    }
}

# File Download
## OkHttp

withContext(Dispatchers.IO) {
    val client = OkHttpClient()
    
    val request = Request.Builder()
        .url("https://skills-music-api-v2.eliaschen.dev/audio/ocean.mp3")
        .build()
    val response = client.newCall(request).execute()

    response.use {
        it.body?.byteStream()?.use { input ->
            File(context.getExternalFilesDir(null), "hello.mp3").outputStream()
                .use { output ->
                    input.copyTo(output)
                }
        }
    }
}

# File Manage
:::info
- External Root application file directory
`/storage/emulated/0/Android/data/your.package.name/files/`
**Big File (No Limited Space & Required permission)**

context.getExternalFilesDir(null) // use this to access External dir

- Internal Root application file directory
`/data/user/0/your.package.name/files/`
**Small File (Limited Space & No permission require)**

context.filesDir // use this to access Internal dir

we will call the External Root application file directory `root dir`

also you can use the `Device Explore` in android studio to review edit all the file inside the android elmulator
:::
## Folder
- `null` in here mean get the root dir path

context.getExternalFilesDir(null)

- To get the public view asset folders (Example: Download Folder)

Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS

## File/Folder Operation
- Check whether a file exist

var myFile = File(context.getExternalFilesDir(null), "ocean.mp3")
myFile.exists()

- Create a folder under root dir

val customDir = File(context.getExternalFilesDir(null), "customFolder")

if (!customDir.exists()) {
    customDir.mkdir()
}

- Get all files (via list)

fun getFiles(context: Context): List<File> {
    val dir = context.getExternalFilesDir(null)
    return dir?.listFiles()?.toList() ?: emptyList()
}

- Write a file
With FileWriter

withContext(Dispatchers.IO) {  
    val file = File(context.getExternalFilesDir(null), "hello.json")  
    FileWriter(file).use { writer ->  
        writer.write(Gson().toJson(api))  
    }  
}

- With File

File(context.getExternalFilesDir(null), "customFolder")
    .outputStream().use { output ->
    <Your-InputStream>.copyTo(output)
}

- Rename/Move file

val oldFile = File(context.getExternalFilesDir(null), "ocean.mp3")
val newFile = File(context.getExternalFilesDir(null), "new_ocean.mp3")

oldFile.renameTo(newFile)

- Delete a file

File(context.getExternalFilesDir(null), "customFolder").delete()

- Get URI

File(context.getExternalFilesDir(null), "ocean.mp3").toUri()

# Check format
- Email Return a `boolean`

android.util.Patterns.EMAIL_ADDRESS.matcher(email.value).matches()

# Clipbaord

clipboardManager.setText("Hello, clipboard")

# Vibrate feedback

val haptic = LocalHapticFeedback.current
haptic.performHapticFeedback(HapticFeedbackType.LongPress)

# Navigation

## with navHost

- Dependencies

implementation("androidx.navigation:navigation-compose:2.5.2")

- Base code

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "home"){
    composable("home"){
        Home()
    }
    composable("about"){
        About()
    }
    composable("new"){
        New()
    }
}

the page set in `startDestination` will be displayed when the NavHost Component being render

### Nav between screen

- `navigate()` navigate to a screen
- `popBackStack()` navigate to the last screen

Example:

Button(
    onClick = { 
        navController.navigate("about") 
    }
) { 
    Text("Go to About") 
}

Button(
    onClick = { 
        navController.popBackStack() 
    }
) { 
    Text("Go Back") 
}

#### Nav Arguments
- Set up NavHost with arguments

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            HomeScreen(navController)
        }
        composable(
            route = "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.StringType })
        ) { backStackEntry ->
            DetailScreen(itemId = backStackEntry.arguments?.getString("itemId"))
        }
    }
}

- Navigate with argument

@Composable
fun HomeScreen(navController: NavController) {
    Button(onClick = { navController.navigate("detail/123") }) {
        Text("Go to Detail")
    }
}

- Receive argument

@Composable
fun DetailScreen(itemId: String?) {
    Text("Item ID: $itemId")
}

#### Restrict user popBack

navController.navigate("signin") {
    // Clear the back stack to prevent the user from navigating back to the home screen
    popUpTo("home") { inclusive = true }
}

### Nav with TypeSafe
#### With Enum

enum class Screen {
    Home, List
}

var navController = rememberNavController()
NavHost(navController = navController, startDestination = Screen.Home.name) {
    composable(Screen.Home.name) {
        HomeScreen()
    }
    composable(Screen.List.name) {
        ListScreen()
    }
}

#### With Class

sealed class Screen(val route: String) {
    object Home : Screen("home")
    object List : Screen("list")
}

var navController = rememberNavController()
NavHost(navController = navController, startDestination = Screen.Home.route) {
    composable(Screen.Home.route) {
        HomeScreen()
    }
    composable(Screen.List.route) {
        ListScreen()
    }
}

## Open URI
- create a uri handler

val uriHandler = LocalUriHandler.current
uriHandler.openUri("https://eliaschen.dev")

# ViewModel
:::info
- Dependencies

implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.0") 

:::
:::info
You can use the `ViewModel` without any dependencies, but get the limit lifetime (the ViewModel will be destory every time the composables where it declared being recompose or destory), so you have to place the viewModel at the `MainActivity` where it won't destory or recompose during the run time
:::warning
**Install the dependencies will extend the life time of the viewModel**
:::

- Usage

Add a class that inherit the `viewModel`

class userAuth : ViewModel() {
    var starterScreen = mutableStateOf("signin")

    fun changeStarterScreen(screen: String) {
        starterScreen.value = screen
    }
}

Call it in `composable` function

@Composable
fun Main(viewModel: userAuth = viewModel()) {
	
}

or
- Create a value

val viewModel = userAuth()

## ViewModel Factory
Use ViewModel Factory when you need to pass a value into a ViewModel
- In this example we can passing `context` to PlayerModel via viewmodel factory

class PlayerViewModelFactory(private val context: Context) : ViewModelProvider.Factory {
    override fun <T : ViewModel> create(modelClass: Class<T>): T {
        if (modelClass.isAssignableFrom(PlayerModel::class.java)) {
            @Suppress("UNCHECKED_CAST")
            return PlayerModel(context) as T
        }
        throw IllegalArgumentException("Unknown ViewModel class")
    }
}

## ViewModel without plugin
- use `remember`

val viewModel = remember { MyViewModel() }

- Create in `MainActivity`

val viewModel: MyViewModel by viewModels()

# Foreground Service (Background work)
<img src="https://hackmd.io/_uploads/HJ7DJD0s1l.png" style="background:white;"/>

# RoomDB
:::info
- Dependencies **(viewModel Required)**
- **add `kapt` plugin at plugins section**

plugins {
    id("kotlin-kapt") 
}

implementation("androidx.room:room-ktx:2.6.1")
kapt("androidx.room:room-compiler:2.6.1")

:::

## Schema (`@Entity`)

@Entity(tableName = "user")
data class User(
    @PrimaryKey(autoGenerate = true) val id: Int = 0,
    val name: String, // default column name will be "name"
    // Set some custom props with @ColumnInfo like custom ColumnName or DefaultValue
    @ColumnInfo(name = "user_name", defaultValue = "Unknown", collate = ColumnInfo.NOCASE) val name: String = "EliasChen",
    val age: Int,
    val hobby: String
)

- To set the default value to a column just do `val name: String = "EliasChen"` then the default value of name will be "EliasChen"

## DB action (`@Dao`)
- Example of a CRUD Operation using RoomDB

@Dao
interface UserDao {
    @Insert
    suspend fun insert(user: User)

    @Query("SELECT * FROM user")
    suspend fun getAllUsers(): List<User>
    // use flow to auto get updated data
    @Query("SELECT * FROM user")
    fun getAllUsers(): Flow<List<User>>

    @Delete
    suspend fun delete(user: User)

    @Query("DELETE FROM user")
    suspend fun deleteAll()

    @Query("SELECT COUNT(*) FROM user WHERE name = :name")
    suspend fun checkNameExists(name: String): Int
}

- parse `fun` ’s data to `@query` by adding `:` at the start of the string. EX: `:name`

## Database Entry point (`@Database`)

@Database(entities = [<Schema-name>::class,<Schema-name>::class], version = 1)
abstract class AppDatabase : RoomDatabase() {
    abstract fun userDao(): UserDao
}

## Build Database (require passing `context` from parent)

fun getDatabase(context: Context): AppDatabase {
    return Room.databaseBuilder(
        context.applicationContext, AppDatabase::class.java, "app_database"
    )
    .fallbackToDestructiveMigration()
    .build()
}

- Use `.fallbackToDestructiveMigration()` to drop old schema when DB migrate

### Delete the database file

context.deleteDatabase("db")

## `viewModel` for table
### via flow auto update
- Different schema

class TodoViewModel(private val db: AppDB) : ViewModel() {
    val allTodo: Flow<List<Todo>> = db.todoDao().select()

    fun insert(todo: Todo) = viewModelScope.launch {
        db.todoDao().insert(todo)
    }

    fun deleteTodo(id: Int) = viewModelScope.launch {
        db.todoDao().delete(id)
    }

    fun updateName(newName: String, id: Int) = viewModelScope.launch {
        db.todoDao().updateName(newName, id)
    }

    fun updateDone(done: Boolean, id: Int) = viewModelScope.launch {
        db.todoDao().doneTodo(done, id)
    }
}

### via manually update data

class UserViewModel(private val database: AppDatabase) : ViewModel() {
    val users = mutableStateListOf<User>() // for storing data from DB

    init {
        updateUsers()
    }

    fun updateUsers() {
        viewModelScope.launch {
            users.clear()
            users.addAll(database.userDao().getAllUsers())
        }
    }

    fun addUser(name: String) {
        viewModelScope.launch {
            database.userDao().insert(User(name = name))
            updateUsers()
        }
    }

    fun deleteUser(user: User) {
        viewModelScope.launch {
            database.userDao().delete(user)
            updateUsers()
        }
    }

    fun deleteAllUsers() {
        viewModelScope.launch {
            database.userDao().deleteAll()
            updateUsers()
        }
    }

    suspend fun checkNameExists(name: String): Boolean {
        return database.userDao().checkNameExists(name) > 0
    }
}

- `NOTE:` All the DB action (`database` must be use in a `suspend function` or a `viewModelScope`)

## Setup `context` for database

val database = getDatabase(this)
val userViewModel = UserViewModel(database)

- Create `database`from `MainActivity` and passing `database` to the `viewModel` that **interact with the `database`**

# Shared Preferences

Save small data

// create a preferences
val sharedPref = context.getSharedPreferences("test", Context.MODE_PRIVATE)
// get data
var countSaved = sharedPref.getInt("count", 0)
// set data
sharedPref.edit().putInt("count", <set_value>).apply()  

# JSON Parsing
## Org.json (Raw Method)

import org.json.*

- `JSONArray` `JSONObject`

### Parsing JSON
- Pass a string with validate JSON format to `JSONArray` or `JSONObject`
- Get a value of key with `jsonObject[<index>]` or `jsonObject.get<DataType>`
- To get a jsonObject in <mark>jsonObject</mark> use `.getJSONObject(<key>)`
- To get a jsonObject in <mark>jsonArray</mark> use `.getJSONObject(<index>)`

#### Get data from a json object

val jsonString = """
        {
            "name": "Elias",
            "birthday": "2010-05-15",
            "favorite": "Coding"
        }
    """.trimIndent()

val jsonObject = JSONObject(jsonString)

val name = jsonObject.getString("name")
val birthday = jsonObject.getString("birthday")
val favorite = jsonObject.getString("favorite")

println("Name: $name")
println("Birthday: $birthday")
println("Favorite: $favorite")

#### Get data from a json array

val jsonString = """
        {
            "name": "Elias",
            "hobbies": ["Coding", "Reading", "Writing"]
        }
    """.trimIndent()

val jsonObject = JSONObject(jsonString)

val name = jsonObject.getString("name")
val hobbiesArray = jsonObject.getJSONArray("hobbies")

println("Name: $name")
println("Hobbies:")

for (i in 0 until hobbiesArray.length()) {
    val hobby = hobbiesArray.getString(i)
    println("- $hobby")
}

#### Create json object or array

val name = "Elias"
val age = 14
val hobbies = listOf("Coding", "Reading", "Gaming")

// Create a JSON array from the hobbies list
val hobbiesJsonArray = JSONArray()
for (hobby in hobbies) {
    hobbiesJsonArray.put(hobby)
}

// Create the JSON object and put data into it
val jsonObject = JSONObject()
jsonObject.put("name", name)
jsonObject.put("age", age)
jsonObject.put("hobbies", hobbiesJsonArray)

// Output the final JSON string
println(jsonObject.toString(2)) // Pretty print with 2 spaces

## Gson

- Dependencies - gson

implementation("com.google.code.gson:gson:2.8.9")

## Local json file

Ex: the `data.json` locale in `assets/`

`data.json`

{
  "cities": [
    {
      "name": "Taipei",
      "population": 2646204
    },
    {
      "name": "Kaohsiung",
      "population": 2773496
    },
    {
      "name": "Taichung",
      "population": 2815100
    }
  ]
}

## Create a dataclass

data class City(val name: String, val population: Int)
data class CityList(val cities: List<City>)

- Use `@SerializedName` to custom the syntax gson will parsing from json

data class Todo(
    @SerializedName("user_id") val userId: Int,
    @SerializedName("todo_id") val id: Int,
    @SerializedName("task") val title: String,
    @SerializedName("done") val completed: Boolean
)

- Use function under data calss to get modified data

data class Music(
    val cover: String,
    val title: String,
    val url: String
) {
    fun title() {
        title.replace(".mp3", "")
    }
}

## Parsing data into a list

val inputStream = context.assets.open("data.json").BufferReader.use {it.readText()}
val gson = Gson()
gson.fromJson(reader, CityList::class.java)

# XML Parsing

val builder = DocumentBuilderFactory.newInstance().newDocumentBuilder()
val inputStream = context.assets.open("sitemap.xml")
// ^if the source is `String` use `byteInputStream`
// EX: val `inputStream = aStringData.byteInputStream()
val document = builder.parse(inputStream)
val elements = document.documentElement.getElementsByTagName("loc")
// ^return a list of all tag matched

- use `.textContent` to get the value in the tag

elements.item(0).textContent

# Uri
## Content URI (Accessing Content Providers):
- `content://contacts/people/1` (accesses a specific contact with ID 1)
- `content://media/external/audio/media/123` (points to an audio file with ID 123 in external storage)
- `content://com.android.calendar/events` (accesses calendar events)
## File URI (Accessing Files):
- `file:///storage/emulated/0/Download/sample.pdf` (points to a PDF file in the Download folder)
- `file:///android_asset/index.html` (accesses a file in the app’s assets folder)
Intent URI (Triggering Actions):
- `tel:[phone]` (initiates a phone call to the specified number)
- `mailto:[e-mail]` (opens an email client with the specified address)
- `geo:37.7749,-122.4194` (opens a map at the specified coordinates)
## Custom URI (App-Specific):
`myapp://profile/user123` (a custom scheme to open a specific user profile in a custom app)
# WebView
:::info
- Dependencies

implementation("androidx.webkit:webkit:1.8.0")

:::

- Usage
- View for local HTML file

In project explorer under `main/assets` add a HTML file, than use `loadUrl("file:///android_asset/...")` to locate it.

**NOTE:** `file:///android_asset` is point to `main/assets`

        AndroidView(factory = {
            WebView(it).apply {
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, // for style width and height
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
            }
        }, update = {
            it.loadUrl(<file-path or web url(permission for access internet is required)>)
        })
    

- View for web URL

Though we need access to the internet, we have to enable the permission connect to the internet in `AndroidManifest.xml` by adding:

    <uses-permission android:name="android.permission.INTERNET" />

# Pager

- Create a pager state

    var pager_state = rememberPagerState { 2 } // <- the length of pager

    HorizontalPager(
        state = pager_state,
        modifier = Modifier
            .fillMaxWidth()
            .height(220.dp),
    ) { page ->
        Image(
            painter = painterResource(pager_images[page]),
            modifier = Modifier.fillMaxSize(),
            contentDescription = "Image of page $page"
        )
    }

- `pager_state.currentPage` get current page
- `pager_state.animateScrollToPage(<Index>)` scroll to page **(Place in `coroutine scope`)**
# Unit Convert
the `toDp()` method is only available in Local

with(LocalDensity.current) {
    offestX.value.toDp()
}

# Animation
## Animate ContentSize

Modifier.animateContentSize()

## Infinite Transition

val offset by infiniteTransition.animateFloat(
    label = "Example infinite transition"
    initialValue = -textWidth,
    targetValue = screenWidth,
    animationSpec = infiniteRepeatable(
        tween(textMovingSpeedSlider.toInt(), easing = LinearEasing),
        RepeatMode.Restart
    )
)

## Animatable
**`Animatable` is a value based animation method**
- Start by createing a variable with `Animatable()` inside (Also set a inital `float` value)

val offsetX = remember { Animatable(0f) }

- `animateTo()` suspend method to animated value to the target value

offsetX.animateTo(
    targetValue = maxWidth.toFloat(),
    animationSpec = tween(durationMillis = 4000, easing = LinearEasing)
)

- `snapTo()` set the value to the target instantly without any animation

offsetX.snapTo(0f)

## Muti Animation

var toggle: Boolean by remember { mutableStateOf(false) }
val transition = updateTransition(targetState = toggle, label = "")
val color by transition.animateColor(label = "") { s ->
    when (s) {
        true -> Color.Red
        false -> Color.Yellow
    }
}
val size by transition.animateDp(label = "") { s ->
    when (s) {
        true -> 200.dp
        false -> 100.dp
    }
}

Column {
    Button(onClick = {
        toggle = !toggle
    }) { Text("Click to change Color & Size") }
    Box(
        Modifier
            .background(color)
            .size(size)
    )
}

## Fade

var toggle by remember { mutableStateOf(false) }
Column {
    Button(onClick = { toggle = !toggle }) {
        Text("Toggle to see CrossFade")
    }
    Crossfade(toggle) { toggle ->
        when (toggle) {
            true -> Icon(Icons.Default.Add, contentDescription = "")
            false -> Icon(Icons.Default.Call, contentDescription = "")
        }
    }
}

## Visbility

var toggle: Boolean by remember { mutableStateOf(false) }

Column {
    Button(onClick = {
        toggle = !toggle
    }) { Text("Click to Show & Hide") }
    AnimatedVisibility(toggle) {
        Box(
            Modifier
                .background(Color.Red)
                .size(100.dp)
        )
    }
}

## Animated value

animateFloatAsState(
    targetValue = if (it + 1 == pager.currentPage) 1f else 0.2f,
    label = "alpha" // <- just for differentiate from other animations (optional)
)

# Modifier
## Whether to use a modifier via condition

fun Modifier.conditional(condition: Boolean, modifier: Modifier.() -> Modifier): Modifier {
    return if (condition) then(modifier(Modifier)) else this
}

## onGloballyPositioned
Retrive widget layout (width, height)

Modifier.onGloballyPositioned {
    textWidth = it.size.width // Int
}

## Scrollable Column or Row
Use `.verticalScroll()` or `.horizontalScroll()` to do that

val state = rememberScrollState()

Column(Modifier.verticalScroll(state)){
    
}

After binding the `state` use `.animateScrollTo()` to scroll to a location with animation
## BoxWithConstraints

## size & requiredSize
| `requiredSize` | `size` |
| -------- | -------- |
| force to set the size no matter what | respect parent layout size if overflow then fit in the parent layout |

Box(modifier = Modifier.size(100.dp))

Box(modifier = Modifier.requiredSize(100.dp))

## zIndex
same as `z-index` in css, it allow you to chagne the layer of the composables

Modifier.zIndex(1f)
Modifier.zIndex(2f) // <- higher layer

## Weight
`weight()` take the remaining space of the composables

Modifier.weight(1f)


@Composable
fun WeightExample() {
    Column(modifier = Modifier.fillMaxHeight().systemBarsPadding()) {
        Row(modifier = Modifier.fillMaxWidth().height(50.dp)) {
            Text(text = "Weight 2",
                modifier = Modifier.weight(2f)
                    .background(Color.Red).padding(8.dp))
            Text(text = "Weight 2",
                modifier = Modifier.weight(2f)
                    .background(Color.Green).padding(8.dp))
            Text(text = "Weight 3",
                modifier = Modifier.weight(3f)
                    .background(Color.Blue).padding(8.dp))
        }
        Row(modifier = Modifier.fillMaxWidth().height(50.dp)) {
            Text(text = "Weight 2",
                modifier = Modifier.weight(2f)
                    .background(Color.Yellow).padding(8.dp))
            Text(text = "Weight 1",
                modifier = Modifier.weight(1f)
                    .background(Color.Cyan).padding(8.dp))
        }
    }
}

## Border

Modifier.border(2.dp, Color.Green, CircleShape)

## Safe area
- for all bars (bottom nav controller & topbar)

Modifier.windowInsetsPadding(WindowInsets.systemBars)
// ..or
Modifier.systemBarsPadding()

- for only top bar

Modifier.windowInsetsPadding(WindowInsets.statusBars)

## Rounded
- For Object

Modifier.clip(RoundedCornerShape(20))

The `RoundedCornerShape()` also accept something like `CircleShape` (pretty useful)
- For Border

Modifier.border(1.dp, Color.Red,RoundedCornerShape(20))

## Gradient
- for background

Brush.linearGradient(listOf(Color.Red, Color.White))

- Text Color Gradient

Text(
    text = "Hello Gradient",
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = listOf(Color.Red, Color.Blue),
        ),
        fontSize = 50.sp
    )
)

gradient for different direction
| Method|Direction|
|---------|-------|
|`linearGradient`|topLeft -> bottomRight|
|`horizontalGradient`|Left -> Right|
|`verticalGradient`|Top -> Bottom|
## Shadow

Box(
    modifier = Modifier
        .padding(top = 50.dp)
        .size(200.dp)
        .shadow(
            elevation = 8.dp, // the height of the shadow
            shape = RoundedCornerShape(16.dp), // border radius of the box
            clip = false // whether not the  
        )
        .background(
            Color.White
        )
) {
    Text("Hello Shadow", modifier = Modifier.align(Alignment.Center))
}

# Composables
## Alert Dialog

AlertDialog(
        icon = {/* icon */},
        title = {/* title text */},
        text = {/* content */},
        onDismissRequest = {/* function when try to dismiss */},
        confirmButton = {/* button */},
        dismissButton = {/* button */}
)

## DropDown Menu

var expanded by remember { mutableStateOf(false) }

Box(
    modifier = Modifier
        .padding(16.dp)
) {
    IconButton(onClick = { expanded = !expanded }) {
        Icon(Icons.Default.MoreVert, contentDescription = "More options")
    }
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false }
    ) {
        DropdownMenuItem(
            text = { Text("Option 1") },
            onClick = { /* Do something... */ }
        )
        DropdownMenuItem(
            text = { Text("Option 2") },
            onClick = { /* Do something... */ }
        )
    }
}

## BoxWithConstraints
- Exmaple

BoxWithConstraints {
    Image(
        painter = painterResource(R.drawable.ocean_cover),
        contentDescription = "ocean cover", modifier = Modifier
            .size(maxWidth)
            .clip(RoundedCornerShape(15.dp))
    )
}

Available syntax `minWidth` `minHeight` `maxWidth` `maxHeight`
## Button
- `ButtonDefaults` allow you to custom the button color without rewrite all the color settings

Button(onClick = {}, colors = ButtonDefaults.buttonColors(containerColor = Color.Red)) { }

## LazyColumn
:::warning
`stickyHeader` -> `@OptIn(ExperimentalFoundationApi::class)`
:::

LazyColumn(
    modifier = Modifier.fillMaxSize(),
    contentPadding = PaddingValues(16.dp), // Outer padding
    verticalArrangement = Arrangement.spacedBy(8.dp) // Space between items
) {
    stickyHeader {
        Text(
            text = "Sticky Header",
            modifier = Modifier
                .background(Color.Gray)
                .padding(16.dp)
                .fillMaxWidth()
        )
    }
    items(items) { item ->
        Column {
            Text(text = item)
            Divider() // Separator between items
        }
    }
}

## LazyVerticalGrid
- Same as the LazyColumn or LazyRow but `columns` is required

LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 200.dp)) {
    items(data[0].schedule) { schedule ->
        Text(schedule.destination)
    }
}

## Snack bar
<img src="https://hackmd.io/_uploads/r1pWeZS2Je.png" width="250px" />

Must calling snackBar in a coroutineScope

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}

Add `action` or `duration`

val result = snackbarHostState
    .showSnackbar(
        message = "Snackbar",
        actionLabel = "Action",
        // Defaults to SnackbarDuration.Short
        duration = SnackbarDuration.Indefinite
    )
when (result) {
    SnackbarResult.ActionPerformed -> {
        /* Handle snackbar action performed */
    }
    SnackbarResult.Dismissed -> {
        /* Handle snackbar dismissed */
    }
}

## Bottom Bar
<img src="https://hackmd.io/_uploads/SyPG0xHnJl.png" width="250px" />

:::warning
Combind with <a href="#Navigation">NavHost</a>
But in this example we will focus on the BottomBar
:::
To create a BottomBar for our app we need to create it in a `Scaffold`

Scaffold(modifier = Modifier.fillMaxSize(), bottomBar = {
    NavigationBar {
        // NavigationBarItem in here ...
    }
})

:::success
Suggestion: Create a list for stroing navitems data then recall in `NavigationBar` for more simple and effective code
:::
### NavgationBarItem

NavigationBarItem(
    selected = currentScreen == index,
    onClick = {
        currentScreen = index
        nav.navigate(item.title)
    },
    label = { Text(item.title) },
    icon = {
        BadgedBox(badge = {
            // Bad
        }) {
            Icon(
                imageVector = if (currentScreen == index) item.selectedIcon else item.unselectedIcon,
                contentDescription = "image"
            )
        }
    }
)

### Badge


Badge(content = { Text("12") })

## Segmented buttons

var selectedItem by remember { mutableStateOf(0) }
var items = listOf("Kitty", "Squirrel", "Dog")

SingleChoiceSegmentedButtonRow {
    items.forEachIndexed { index, item ->
        SegmentedButton(
            selected = index == selectedItem,
            onClick = { selectedItem = index },
            shape = SegmentedButtonDefaults.itemShape(index = index, count = items.size)
        ) {
            Text(item)
        }
    }
}

:::info
So what the hell does shape do?

The segmented buttons only have rounded borders on the left for the first button and on the right for the last button. This requires you to provide the index and count so it knows which shape to render.
:::
## TimePicker
return a `LocalTime` object

@Composable
fun TimePickerExample() {
    var showTimePicker by remember { mutableStateOf(false) }
    var selectedTime by remember { mutableStateOf(LocalTime.now()) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Selected Time: ${selectedTime.format(DateTimeFormatter.ofPattern("HH:mm"))}",
        )

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = { showTimePicker = true }) {
            Text("Pick a Time")
        }

        if (showTimePicker) {
            TimePickerDialog(
                onDismissRequest = { showTimePicker = false },
                onTimeSelected = { time ->
                    selectedTime = time
                    showTimePicker = false
                }
            )
        }
    }
}

@Composable
fun TimePickerDialog(
    onDismissRequest: () -> Unit,
    onTimeSelected: (LocalTime) -> Unit
) {
    val timePickerState = rememberTimePickerState(
        initialHour = LocalTime.now().hour,
        initialMinute = LocalTime.now().minute,
        is24Hour = true
    )

    AlertDialog(
        onDismissRequest = onDismissRequest,
        confirmButton = {
            TextButton(onClick = {
                onTimeSelected(LocalTime.of(timePickerState.hour, timePickerState.minute))
            }) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismissRequest) {
                Text("Cancel")
            }
        },
        text = {
            TimePicker(state = timePickerState)
        }
    )
}