1# Material Theme Adapter 2 3[](https://search.maven.org/search?q=g:com.google.accompanist) 4 5!!! warning 6 **This library is deprecated, and the API is no longer maintained.** The original documentation is below. 7 8## Migration 9Recommendation: Use the [Material Theme Builder](https://m3.material.io/theme-builder) tool, or an alternative design tool, to generate a matching XML and Compose theme implementation for your app. See [Migrating XML themes to Compose](https://developer.android.com/jetpack/compose/designsystems/views-to-compose) to learn more. 10 11You can checkout [Material Design 3 in Compose](https://developer.android.com/jetpack/compose/designsystems/material3#material-theming) to learn more about creating and adding theme to your app using Material Theme Builder. 12 13## Original Documenation 14 15A library that enables the reuse of [MDC-Android][mdc] Material 2 XML themes, for theming in [Jetpack Compose][compose]. 16 17 18 19The basis of Material Design 2 theming in [Jetpack Compose][compose] is the [`MaterialTheme`][materialtheme] composable, where you provide [`Colors`][colors], [`Typography`][typography] and [`Shapes`][shapes] instances containing your styling parameters: 20 21``` kotlin 22MaterialTheme( 23 colors = colors, 24 typography = type, 25 shapes = shapes 26) { 27 // M2 Surface, Scaffold, etc. 28} 29``` 30 31[Material Components for Android][mdc] themes allow for similar theming for views via XML theme attributes, like so: 32 33``` xml 34<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight"> 35 <!-- Material 2 color attributes --> 36 <item name="colorPrimary">@color/purple_500</item> 37 <item name="colorSecondary">@color/green_200</item> 38 39 <!-- Material 2 type attributes--> 40 <item name="textAppearanceBody1">@style/TextAppearance.MyApp.Body1</item> 41 <item name="textAppearanceBody2">@style/TextAppearance.MyApp.Body2</item> 42 43 <!-- Material 2 shape attributes--> 44 <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.MyApp.SmallComponent</item> 45</style> 46``` 47 48This library attempts to bridge the gap between [Material Components for Android][mdc] M2 XML themes, and themes in [Jetpack Compose][compose], allowing your composable [`MaterialTheme`][materialtheme] to be based on the `Activity`'s XML theme: 49 50 51``` kotlin 52MdcTheme { 53 // MaterialTheme.colors, MaterialTheme.typography, MaterialTheme.shapes 54 // will now contain copies of the Context's theme 55} 56``` 57 58This is especially handy when you're migrating an existing app, a `Fragment` (or other UI container) at a time. 59 60!!! caution 61 If you are using an AppCompat (i.e. non-MDC) theme in your app, you should use 62 [AppCompat Theme Adapter](https://github.com/google/accompanist/tree/main/themeadapter-appcompat) 63 instead, as it attempts to bridge the gap between [AppCompat][appcompat] XML themes, and M2 themes in [Jetpack Compose][compose]. 64 65### Customizing the M2 theme 66 67The [`MdcTheme()`][mdctheme] function will automatically read the host `Context`'s MDC theme and pass them to [`MaterialTheme`][materialtheme] on your behalf, but if you want to customize the generated values, you can do so via the [`createMdcTheme()`][createmdctheme] function: 68 69``` kotlin 70val context = LocalContext.current 71val layoutDirection = LocalLayoutDirection.current 72var (colors, typography, shapes) = createMdcTheme( 73 context = context, 74 layoutDirection = layoutDirection 75) 76 77// Modify colors, typography or shapes as required. 78// Then pass them through to MaterialTheme... 79 80MaterialTheme( 81 colors = colors ?: MaterialTheme.colors, 82 typography = typography ?: MaterialTheme.typography, 83 shapes = shapes ?: MaterialTheme.shapes 84) { 85 // Rest of M2 layout 86} 87``` 88 89### Limitations 90 91There are some known limitations with the implementation at the moment: 92 93* This relies on your `Activity`/`Context` theme extending one of the `Theme.MaterialComponents` themes. 94* Text colors are not read from the text appearances by default. You can enable it via the `setTextColors` function parameter. 95* Variable fonts are not supported in Compose yet, meaning that the value of `android:fontVariationSettings` are currently ignored. 96* MDC `ShapeAppearances` allow setting of different corner families (cut, rounded) on each corner, whereas Compose's [Shapes][shapes] allows only a single corner family for the entire shape. Therefore only the `app:cornerFamily` attribute is read, others (`app:cornerFamilyTopLeft`, etc) are ignored. 97* You can modify the resulting `MaterialTheme` in Compose as required, but this _only_ works in Compose. Any changes you make will not be reflected in the `Activity` theme. 98 99--- 100 101## Usage 102 103[](https://search.maven.org/search?q=g:com.google.accompanist) 104 105``` groovy 106repositories { 107 mavenCentral() 108} 109 110dependencies { 111 implementation "com.google.accompanist:accompanist-themeadapter-material:<version>" 112} 113``` 114 115### Library Snapshots 116 117Snapshots of the current development version of this library are available, which track the latest commit. See [here](../using-snapshot-version) for more information on how to use them. 118 119--- 120 121## Contributions 122 123Please contribute! We will gladly review any pull requests. 124Make sure to read the [Contributing](../contributing) page first though. 125 126## License 127 128``` 129Copyright 2022 The Android Open Source Project 130 131Licensed under the Apache License, Version 2.0 (the "License"); 132you may not use this file except in compliance with the License. 133You may obtain a copy of the License at 134 135 https://www.apache.org/licenses/LICENSE-2.0 136 137Unless required by applicable law or agreed to in writing, software 138distributed under the License is distributed on an "AS IS" BASIS, 139WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 140See the License for the specific language governing permissions and 141limitations under the License. 142``` 143 144[compose]: https://developer.android.com/jetpack/compose 145[mdc]: https://github.com/material-components/material-components-android 146[mdctheme]: ../api/themeadapter-material/com.google.accompanist.themeadapter.material/-mdc-theme.html 147[createmdctheme]: ../api/themeadapter-material/com.google.accompanist.themeadapter.material/create-mdc-theme.html 148[materialtheme]: https://developer.android.com/reference/kotlin/androidx/compose/material/MaterialTheme 149[colors]: https://developer.android.com/reference/kotlin/androidx/compose/material/Colors 150[typography]: https://developer.android.com/reference/kotlin/androidx/compose/material/Typography 151[shapes]: https://developer.android.com/reference/kotlin/androidx/compose/material/Shapes 152
