Material Design 3

https://m3.material.io
Admin
Material Design 3 is Google’s open-source design system, providing guidelines, components, and tools...
Tokens:437,589
Snippets:4,785
Trust Score:9.9
Update:14 hours ago
Show doc for...
Tokens:
Raw
### PullToRefreshBox Example in Compose

Source: https://m3.material.io/blog/material-3-compose-1-3

Example of using PullToRefreshBox with a state, refresh callback, and top app bar. The state uses fractional values and the nested scroll connection is separate from PullToRefreshState.

```Kotlin
@Composable
fun PullToRefreshDemo() {
    var itemCount by remember { mutableIntStateOf(15) }
    var isRefreshing by remember { mutableStateOf(false) }
    val state = rememberPullToRefreshState()
    val coroutineScope = rememberCoroutineScope()

    val onRefresh: () -> Unit = {
        isRefreshing = true
        coroutineScope.launch {
            delay(1500)
            itemCount += 5
            isRefreshing = false
        }
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Title") },
                // Provide an accessible alternative to trigger refresh.
                actions = {
                    IconButton(onClick = onRefresh) {
                        Icon(Icons.Filled.Refresh, "Trigger Refresh")
                    }
                }
            )
        }
    ) {
        PullToRefreshBox(
            modifier = Modifier.padding(it),
            state = state,
            isRefreshing = isRefreshing,
            onRefresh = onRefresh,
        ) {
        }
    }
}
```

--------------------------------

### Scaffold with drawer, top app bar, and extended FAB

Source: https://m3.material.io/blog/jetpack-compose-beta

This snippet shows how to set up a Scaffold with a drawer, top app bar, and extended floating action button. It uses rememberScaffoldState() for the scaffold state and rememberCoroutineScope() to launch the drawer opening. The content is a LazyColumn with Cards.

```kotlin
xxxxxxxxxx
```

```kotlin
val scaffoldState = rememberScaffoldState()
```

```kotlin
val scope = rememberCoroutineScope()
```

```kotlin
Scaffold(
```

```kotlin
  scaffoldState = scaffoldState,
```

```kotlin
  drawerContent = { Text("Drawer content") },
```

```kotlin
  topBar = {
```

```kotlin
    TopAppBar(
```

```kotlin
      title = { Text("Top app bar") },
```

```kotlin
      navigationIcon = {
```

```kotlin
        IconButton(
```

```kotlin
          onClick = {
```

```kotlin
            scope.launch { scaffoldState.drawerState.open() }
```

```kotlin
          }
```

```kotlin
        ) {
```

```kotlin
          Icon(Icons.Filled.Menu, contentDescription = stringResource(R.string.label_nav_menu))
```

```kotlin
        }
```

```kotlin
      }
```

```kotlin
    )
```

```kotlin
  },
```

```kotlin
  floatingActionButtonPosition = FabPosition.End,
```

```kotlin
  floatingActionButton = {
```

```kotlin
    ExtendedFloatingActionButton(
```

```kotlin
      text = { Text("Extended FAB") },
```

```kotlin
      onClick = { /* Handle FAB click */ }
```

```kotlin
    )
```

```kotlin
  },
```

```kotlin
  content = { innerPadding ->
```

```kotlin
    LazyColumn(contentPadding = innerPadding) {
```

```kotlin
      items(count = 20) {
```

```kotlin
        Card(
```

```kotlin
          modifier = Modifier
```

```kotlin
            .fillMaxWidth()
```

```kotlin
            .wrapContentHeight()
```

```kotlin
            .padding(16.dp)
```

```kotlin
        ) { /* Card content */ }
```

```kotlin
      }
```

```kotlin
    }
```

```kotlin
  }
```

```kotlin
)
```

--------------------------------

### Install MDC button via npm

Source: https://m3.material.io/blog/material-density-web

Command to install the @material/button package via npm.

```bash
npm install @material/button
```

--------------------------------

### Set up enter and return transitions in SearchFragment

Source: https://m3.material.io/blog/android-material-motion

In SearchFragment, set enterTransition and returnTransition to MaterialSharedAxis with axis Z. The enter transition uses forward=true, and the return transition uses forward=false. Both use the duration resource reply_motion_duration_large.

```kotlin
enterTransition = MaterialSharedAxis(
   MaterialSharedAxis.Z, 
   /* forward= */ true
).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

returnTransition = MaterialSharedAxis(
   MaterialSharedAxis.Z, 
   /* forward= */ false
).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
```

--------------------------------

### Example letterSpacing calculation comment

Source: https://m3.material.io/blog/android-material-theme-type

Example calculation: (0.25 tracking / 14sp font size) = 0.0178571429 em.

```xml
<!-- (0.25 tracking / 14sp font size) = 0.0178571429 em -->
```

--------------------------------

### Density calculation example

Source: https://m3.material.io/blog/material-density-web

Example showing the calculation for a density scale of -3: 36px + 4px * (-3) results in 24px.

```scss
/// @example 36px + 4px * (-3) => 24px
```

--------------------------------

### Apply custom theme in Activity

Source: https://m3.material.io/blog/jetpack-compose-beta

Shows how to wrap UI content with MyTheme in an Activity's setContent. Material components like Button, Checkbox, and BottomNavigation require a MaterialTheme to be in place.

```Kotlin
class MyActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
      MyTheme {
        // Material components like Button, Checkbox, Card, etc.
      }
    }
  }
}

```
Tokens:
Raw