An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Clean Empty Jetpack Compose App Template
Simple and clean empty Jetpack Compose app example which doesn't have themes.xml and colors.xml.
This article was originally published at vtsen.hashnode.dev on May 07, 2022.
For pure Jetpack Compose app, technically we don't need the themes.xml
and colors.xml
anymore, which are meant for Android View system.
However, I have seen a lot of code out there still have these themes.xml
and colors.xml
defined. Personally, I would remove them to avoid duplication or confusion.
1. Remove themes.xml and colors.xml
Removing themes.xml
and colors.xml
can cause compilation error due to it is still being referenced from AndroidManifest.xml
. You need to modify the AndroidManifest.xml
- Remove
android:theme="@style/Theme.EmptyComposeApp"
in both<application>
and<activity>
<application ... android:theme="@style/Theme.EmptyComposeApp"> <activity ... android:theme="@style/Theme.EmptyComposeApp"> ... </activity></application>
- Replace with
android:theme="@android:style/Theme.Material.Light.NoActionBar"
in<application>
which is the parent style in yourthemes.xml
.
<application ... android:theme="@android:style/Theme.Material.Light.NoActionBar"> ...</application>
The creates an app without the top action bar. The top action bar can be created using
Scaffold
composable function. See this Add Top App Bar Example in this Simple LazyColumn App.
I did try to not adding this android:theme="@android:style/Theme.Material.Light.NoActionBar"
but the ComponentActivity()
creates the top action bar by default which I have no idea to get rid of it using Jetpack Compose.
2. Set Status Bar Color with Compose
Well, the app works, but the default purple color in the status bar is gone.
If you look at the original themes.xml
, it set the status bar color there.
<resources> <style name="Theme.EmptyComposeApp" parent="android:Theme.Material.Light.NoActionBar"> <item name="android:statusBarColor">@color/purple_700</item> </style></resources>
Since this has been removed, we need to implement this in Jetpack Compose. To do that, we need to use the System UI Controller from Accompanist.
- Add
com.google.accompanist:accompanist-systemuicontroller
library:
dependencies { ... implementation "com.google.accompanist:accompanist-systemuicontroller:0.24.1-alpha" ...}
- In
ui\Theme\Theme.kt
, add this to setpurple_700
color which is also theprimaryVariant
color
val systemUiController = rememberSystemUiController()systemUiController.setStatusBarColor( color = colors.primaryVariant)
- The complete code looks like this:
fun EmptyComposeAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) { val colors = if (darkTheme) { DarkColorPalette } else { LightColorPalette } val systemUiController = rememberSystemUiController() systemUiController.setStatusBarColor( color = colors.primaryVariant ) MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content )}
The template project from Android Studio doesn't set navigation bar color. Thus, we're not setting them here in the example above. However, we usually want to set the same color for both navigation and status bars. In that case, you can use systemUiController.setSystemBarsColor()
:
val systemUiController = rememberSystemUiController()systemUiController.setSystemBarsColor( color = colors.primaryVariant)
Since I want to use this example as my own template project. I'm going to change it to use
systemUiController.setSystemBarsColor()
in this app example.
Preview is Not Rendering
There is a bug the preview is not working when System UI controller is used. See issue tracker here.
java.lang.IllegalArgumentException: The Compose View must be hosted in an Activity with a Window!
To workaround with this issue, you need to disable the System UI controller in preview by passing in the useSystemUIController
parameter.
In Theme.kt
:
@Composable fun EmptyComposeAppTheme( ... useSystemUIController: Boolean = true, ...) { ... if (useSystemUIController) { val systemUiController = rememberSystemUiController() systemUiController.setStatusBarColor( color = colors.primaryVariant) } ...}
In MainActivity.kt
:
@Preview(showBackground = true)@Composablefun DefaultPreview() { EmptyComposeAppTheme(useSystemUIController = false) { ... }}
Summary
Now I only have strings.xml
in my resource folder. Cool, isn't it?
I will probably also use this as starting point of any Jetpack Compose project. This diff here shows the changes needed to change the package and project names.
Source Code
GitHub Repository: Demo_CleanEmptyCompose
See Also
Original Link: https://dev.to/vtsen/clean-empty-jetpack-compose-app-template-24aj
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To