In meanwhile, here is an Android library for enabling edge-to-edge content and insetting views using simple Kotlin DSL.
- Configure transparent colors of the status and navigation bars in
res/values/styles.xmlby extending a theme without the action bar likeTheme.MaterialComponents.Light.NoActionBarorTheme.Design.Light.NoActionBaror similar.
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
...
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:statusBarColor">@color/statusBar</item>
<item name="android:navigationBarColor">@color/navigationBar</item>
</style>
<color name="statusBar">@android:color/transparent</color>
<color name="navigationBar">@android:color/transparent</color>
</resources>☝️ Note that fully transparent navigation bar can cause contrast issues to the navigation icons for API level [23..29). Check Navigation Bar Transparency wiki page for more details.
- Remove
android:fitSystemWindowsattribute everywhere from layouts, if present. - Fit top and bottom views of each fragment or activity as needed.
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
edgeToEdge {
appbar.fit { Edge.Left + Edge.Top + Edge.Right }
recycler.fit { Edge.Bottom }
}
...
}See sample app for more edge-to-edge examples.
repositories {
mavenCentral()
}
dependencies {
implementation 'de.halfbit:edge-to-edge:<version>'
}The library is implemented around WindowInsets class. Each time WindowInsets are dispatched through out the view hierarchy, the library fits views according to the declared fitting rules.
Edge-to-Edge library fits each view to one or more device edges by modifying its padding, margin or height attribute with the values taken from the current WindowInsets. Padding and margin attributes preserve their original values defined in layout and inset values are added to them. The library "auto-detects" the attrbitute to modify, which can be overridden by using fitPadding, fitMargin or fitHeight convenience functions.
- Easiness of use - padding, margin or height can be adjusted to any edge with a single line of code.
- Convenient default parameters for common elements like recycler view, scroll view, floating actions button etc.
- Ability to remove fitting rules, which comes handy when working with transitions in
ConstraintLayout. - Demo app with edge-to-edge examples (any kind of contribution is welcome).
Copyright 2020 Sergej Shafarenka, www.halfbit.de
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent