{"id":20492585,"url":"https://github.com/redmadrobot/edge-to-edge-decorator","last_synced_at":"2025-07-17T00:06:07.978Z","repository":{"id":75660519,"uuid":"299983623","full_name":"RedMadRobot/edge-to-edge-decorator","owner":"RedMadRobot","description":"Edge to edge decorator - is a utility class that is responsible for coloring the statusBar and navigationBar to maintain edge to edge (e2e) mode.","archived":false,"fork":false,"pushed_at":"2020-10-23T18:50:12.000Z","size":47736,"stargazers_count":47,"open_issues_count":1,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-20T17:11:14.257Z","etag":null,"topics":["android","android-ui","edge-to-edge","insets","windowinsets"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RedMadRobot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-30T16:33:22.000Z","updated_at":"2025-02-12T12:11:17.000Z","dependencies_parsed_at":"2023-06-08T08:00:38.726Z","dependency_job_id":null,"html_url":"https://github.com/RedMadRobot/edge-to-edge-decorator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RedMadRobot/edge-to-edge-decorator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Fedge-to-edge-decorator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Fedge-to-edge-decorator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Fedge-to-edge-decorator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Fedge-to-edge-decorator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RedMadRobot","download_url":"https://codeload.github.com/RedMadRobot/edge-to-edge-decorator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedMadRobot%2Fedge-to-edge-decorator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265553216,"owners_count":23787036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-ui","edge-to-edge","insets","windowinsets"],"created_at":"2024-11-15T17:29:42.905Z","updated_at":"2025-07-17T00:06:07.954Z","avatar_url":"https://github.com/RedMadRobot.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# edge-to-edge-decorator\n\n## Описание\n\n**Edge-to-edge-decorator** - это класс-утилита, которая отвечает за окрашивание `statusBar` и `navigationBar` для поддержания **edge-to-edge (e2e)** режима.  \n\nКонцепция основана на [WindowPreferencesManager](https://github.com/material-components/material-components-android/blob/master/catalog/java/io/material/catalog/windowpreferences/WindowPreferencesManager.java)\nиз [приложения-каталога материальных комнонентов](https://github.com/material-components/material-components-android/tree/master/catalog).\n\n## Проблема\n\nС выходом Android 10, компания Google представила жестовую навигацию и edge-to-edge режим. Этот режим означает, что\nконтент отрисовывается под системными компонентами `statusBar` и `navigationBar`, и телефон становится\nвизуально более безрамочным, добавляется поддержка вырезов для камер, а сами компоненты окрашиваются в прозрачный цвет.\n\nДля того, чтобы добавить поддержку edge-to-edge в ваше приложение, нужно сделать 2 вещи:\n\n### 1. Добавить поддержку системных отступов (insets)\n\nВы получаете размер системных компонентов и вставляете их\nкак `padding` в верстку для ваших компонентов. Insets поддерживается всеми версиями Android OS,\nчто позволяет реализовать концепцию edge-to-edge для всех пользователей.\n\nПодробности можно почитать или посмотреть в [докладе Константина Цховребова](https://habr.com/ru/company/oleg-bunin/blog/488196/).  \nДля реализации можно использовать библиотеку от Chris Banes [Insetter](https://github.com/chrisbanes/insetter).\n\n### 2. Активировать режим edge-to-edge для `statusBar` и `navigationBar`. По факту вам нужно сделать их прозрачными\n\nТут существует одна проблема, которая находится глубоко в системе и исправить её после релиза OS уже нельзя.\nЭто изменение цвета иконок в системных компонентах (`statusBar` и `navigationBar`) со светлого на темный.\nПоэтому нужно учитывать следующие правила, в зависимости от версии Android:\n\n* до 6.0 версии android иконки `statusBar` и `navigationBar` всегда светлые и перекрасить их в темный цвет нельзя.  \nФлаг `View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR` доступен с 23 API.\nЕсли у вас контент всегда темного цвета, то проблем не будет.\nУтилита, чтобы сохранить контрастность иконок на фоне контента, добавляет на системные компоненты наложение черного фона с 50% прозрачности;\n\n* с версии 6.0 можно задать, белыми или черными будут иконки в `statusBar`.  \nОднако `navigationBar` будет вести себя как в предыдущих версиях, поэтому наложение можно убрать только для `statusBar`.\nФлаг `View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR` доступен с 26 API.\n\n* с версии 8.0 можно выбрать белый или черный цвет иконок для обоих компонентов.\nПоэтому наложения можно убрать полностью.\n  \nПодробнее про edge-to-edge и жестовую навигацию можно почитать в статье, которую написал [Chris Banes](https://medium.com/androiddevelopers/gesture-navigation-going-edge-to-edge-812f62e4e83e).\n\n### Пример работы утилиты\n\n| \u003cimg src=\"images/sample_21_api.gif\" width=\"200\" /\u003e | \u003cimg src=\"images/sample_25_api.gif\" width=\"200\" /\u003e | \u003cimg src=\"images/sample_28_api.gif\" width=\"174\" /\u003e | \u003cimg src=\"images/sample_30_api.gif\" width=\"178\" /\u003e |\n|:--------------------------------------------------:|:--------------------------------------------------:|:--------------------------------------------------:|----------------------------------------------------|\n|             Android 5.0 (API level 21)             |             Android 7.1 (API level 25)             |              Android 9 (API level 28)              |              Android 11 (API level 30)             |\n\n## Как подключить?\n\n### 1. Подключение библиотеки\n\n```groovy\ndependencies {\n    implementation(\"com.redmadrobot:edge-to-edge-decorator:1.0.0\")\n}\n```\n\n### 2. Тема приложения должна наследоваться от MaterialComponents\n\nДля определение атрибутов темы приложения в простом режиме необходимо, чтобы тема вашего приложения\nнаследовалась от `Theme.MaterialComponents.*`.\n\nТакже стоит явно указать нужный цвет фона для `AppBarLayout` и `background` приложения:\n\n```xml\n\u003citem name=\"colorPrimary\"\u003e@color/colorPrimary\u003c/item\u003e \u003c!-- or colorPrimarySurface --\u003e\n\u003citem name=\"android:windowBackground\"\u003e@color/windowBackground\u003c/item\u003e\n```\n\nИли указать свои значения программно в параметрах `appBarColorAttr` и `backgroundColorAttr`.\n\n### 3. Выключение режима edge-to-edge\n\nЕсли на каком-то экране вы захотите выключить режим edge-to-edge (параметр `isEdgeToEdgeEnabled = false`),\nто в теме приложения следует указать цвета `statusBar` и `navigationBar`:\n\n```xml\n\u003citem name=\"android:statusBarColor\"\u003e@android:color/black\u003c/item\u003e\n\u003citem name=\"android:navigationBarColor\"\u003e@android:color/black\u003c/item\u003e\n```\n\n### 4. Включить или выключить флаг дополнительной контрастности для `NavigationBar`\n\n```xml\n\u003citem name=\"android:enforceNavigationBarContrast\" tools:targetApi=\"q\"\u003efalse\u003c/item\u003e\n```\n\nПодробнее про флаг `enforceNavigationBarContrast` можно почитать в статье, которую написал [Chris Banes](https://medium.com/androiddevelopers/gesture-navigation-going-edge-to-edge-812f62e4e83e).\n\n### 5. Настройка утилиты под особенности проекта\n\nНастройка параметров и активация режима edge-to-edge\n\n```kotlin\nEdgeToEdgeDecorator\n    .updateConfig {\n        // custom config\n        isEdgeToEdgeEnabled = true\n        appBarColorAttr = R.color.colorPrimary\n        backgroundColorAttr = R.color.windowBackground\n    }\n    .apply(context, window)\n```\n\n### 6. Profit!\n\n## Настройки edge-to-edge-decorator\n\nУтилита может работать в 3-х режимах:\n\n1. Простой (работа по умолчанию).\n    * Цвет `statusBar` и `navigationBar` - прозрачный;\n    * Цвет иконок `statusBar` определяется по цвету `AppBarLayout`. Параметр `appBarColorAttr` (по умолчанию `R.attr.colorPrimarySurface`)\n    * Цвет иконок `navigationBar` определяется по цвету фона вашего приложения. Параметр `backgroundColorAttr` (по умолчанию `android.R.attr.windowBackground`).\n    * Активируется режим edge-to-edge.  \n    В `window.decorView.systemUiVisibility` устанавливаются флаги `View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_STABLE`)\n\n2. Кастомный - на экране нет `AppBarLayout` и/или под `navigationBar` должен отрисовываться другой контент, например `BottomNavigationMenu`.\n    * Цвет `statusBar` и `navigationBar` - прозрачный;\n    * Цвет иконок `statusBar` определяется по цвету, указанному в параметре `contentUnderStatusBarCustomColor`.\n    * Цвет иконок `navigationBar` определяется по цвету, указанному в параметре `contentUnderNavBarCustomColor`.\n    * Активируется режим edge-to-edge.\n\n3. Режим дополнителькой контрастности.  \nЕсли на экране цвет контента определить нельзя, то для `statusBar` и `navigationBar` можно указать конкретный цвет вместо прозрачного.\nПараметры `statusBarEdgeToEdgeColor` и `navBarEdgeToEdgeColor`.\n\nДля всех режимов можно указать свои цвета для поддержания совместимости на устройствах с более поздними версиями Android OS.  \nПараметры `statusBarCompatibilityColor` и `navBarCompatibilityColor`.\n\n### Утилита имеет dsl интерфейс для редактирования параметров\n\nПример:\n\n```kotlin\noverride val edgeToEdgeCompatibilityManager = EdgeToEdgeDecorator.updateConfig {\n    // custom config\n    isEdgeToEdgeEnabled = true\n    appBarColorAttr = R.color.colorPrimary\n    backgroundColorAttr = R.color.windowBackground\n}\n```\n\n### Полное описание параметров можно найти в классе [DefaultConfig](https://github.com/RedMadRobot/edge-to-edge-decorator/blob/5776dcd5bb126bdb157f7d08d6f3fa6cfe6f4e88/edge-to-edge-decorator/src/main/java/com/redmadrobot/e2e/decorator/EdgeToEdgeDecorator.kt#L147)\n\n```kotlin\nclass DefaultConfig {\n\n    /**\n     * Флаг отвечает за включение/выключение edge-to-edge режима.\n     */\n    var isEdgeToEdgeEnabled = true\n\n    /**\n     * В простом edge-to-edge режиме. Цвет иконок statusBar устанавливается в соответствии\n     * с цветом [com.google.android.material.appbar.AppBarLayout].\n     *\n     * Значение по умолчанию равно [R.attr.colorPrimarySurface].\n     *\n     * В этом случае цвет самого statusBar равен параметру [statusBarEdgeToEdgeColor],\n     * по умолчанию [statusBarEdgeToEdgeColor] равен [Color.TRANSPARENT].\n     *\n     * Также в простом режиме используется [backgroundColorAttr]\n     *\n     * @see backgroundColorAttr\n     * @see statusBarEdgeToEdgeColor\n     */\n    @AttrRes\n    var appBarColorAttr = R.attr.colorPrimarySurface\n\n    /**\n     * В простом edge-to-edge режиме. Цвет иконок navigationBar устанавливается в соответствии\n     * с цветом [android.R.attr.windowBackground]\n     *\n     * Значение по умолчанию равно [android.R.attr.windowBackground]\n     *\n     * В этом случае цвет самого navigationBar равен параметру [navBarCompatibilityColor],\n     * по умолчанию [navBarCompatibilityColor] равен [Color.TRANSPARENT].\n     *\n     * Также в простом режиме используется [appBarColorAttr]\n     *\n     * @see appBarColorAttr\n     * @see navBarCompatibilityColor\n     */\n    @AttrRes\n    var backgroundColorAttr = android.R.attr.windowBackground\n\n    /**\n     * Если не подходит простой режим, например, для случаев, когда на экране нет\n     * [com.google.android.material.appbar.AppBarLayout], можно активировать кастомный режим edge-to-edge.\n     *\n     * Для этого нужно передать конкретный цвет контента под statusBar, например, [R.color.windowBackground]\n     *\n     * @see contentUnderNavBarCustomColor\n     */\n    @ColorRes\n    var contentUnderStatusBarCustomColor: Int? = null\n\n    /**\n     * Если не подходит простой режим, например, под navigationBar должен отрисовываться другой контет\n     * или [BottomNavigationMenu], можно активировать кастомный режим edge-to-edge.\n     *\n     * Для этого нужно передать конкретный цвет контента под navigationBar, например, [R.color.bottomMenu]\n     *\n     * @see contentUnderStatusBarCustomColor\n     */\n    @ColorRes\n    var contentUnderNavBarCustomColor: Int? = null\n\n    /**\n     * Если под statusBar контент не сплошного цвета, а, например, картинка,\n     * то можно активировать режим дополнительной контрастности.\n     *\n     * По умолчанию используется [Color.TRANSPARENT]\n     *\n     * @see navBarEdgeToEdgeColor\n     */\n    @ColorInt\n    var statusBarEdgeToEdgeColor = Color.TRANSPARENT\n\n    /**\n     * Если под navigationBar контент не сплошного цвета, а, например, картинка,\n     * то можно активировать режим дополнительной контрастности.\n     *\n     * По умолчанию используется [Color.TRANSPARENT]\n     *\n     * @see statusBarEdgeToEdgeColor\n     */\n    @ColorInt\n    var navBarEdgeToEdgeColor = Color.TRANSPARENT\n\n    /**\n     * Цвет иконок для statusBar можно менять только с 23 API. Для Android с API ниже 23\n     * используется цвет, который будет хорошо контрастировать с белыми иконками.\n     *\n     * По умолчанию, для сохранения эффекта edge-to-edge, используется черный цвет с 50% прозрачностью.\n     *\n     * @see navBarCompatibilityColor\n     */\n    @ColorInt\n    var statusBarCompatibilityColor = ColorUtils.setAlphaComponent(Color.BLACK, 128)\n\n    /**\n     * Цвет иконок для navigationBar можно менять только с 26 API. Для Android с API ниже 26\n     * используется цвет, который будет хорошо контрастировать с белыми иконками.\n     *\n     * По умолчанию, для сохранения эффекта edge-to-edge, используется черный цвет с 50% прозрачностью.\n     *\n     * @see statusBarCompatibilityColor\n     */\n    @ColorInt\n    var navBarCompatibilityColor = ColorUtils.setAlphaComponent(Color.BLACK, 128)\n}\n```\n\n## Зависимости\n\nУтилита использует следующие зависимости:\n\n```kotlin\nimplementation(\"org.jetbrains.kotlin:kotlin-stdlib:1.4.10\") // Kotlin\nimplementation(\"com.google.android.material:material:1.2.1\") // Material components\n```\n\n## Feedback\n\nЕсли вы столкнулись с какими-либо ошибками или у вас есть полезные предложения\nпо улучшению этой библиотеки, не стесняйтесь создавать\n[issue](https://github.com/RedMadRobot/edge-to-edge-decorator/issues).\n\n## LICENSE\n\n\u003eTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n\u003eOR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n\u003eMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\n\u003eIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\n\u003eCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\n\u003eTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\n\u003eSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredmadrobot%2Fedge-to-edge-decorator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredmadrobot%2Fedge-to-edge-decorator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredmadrobot%2Fedge-to-edge-decorator/lists"}