Bottom status bar android

Реализация BottomAppBar. Часть 3: Поведения для Android

BottomAppBar — это один из новых Android Material компонентов, которые были представлены на Google I/O 2018. Благодаря перемещению Navigation Drawer и меню приложения в нижнюю часть экрана, BottomAppBar радикально меняет внешний вид Android приложений.

В первой и второй частях нашей серии статей про BottomAppBar мы познакомились с BottomAppBar и обсудили его атрибуты. Также мы объяснили, как реализовать Navigation Drawer и меню приложения в рамках BottomAppBar.

Поведение

Согласно Material Design, компоненты приложения не являются статичными. Они могут перемещаться или трансформироваться, т.е. иметь какое-то поведение. Material Design также формирует некие рамки для такого поведения. В этой статье мы обсудим детали реализации рекомендуемого поведения для BottomAppBar, которое представлено на странице гайдлайнов для BottomAppBar.

Макет

Первый гайдлайн описывает макет BottomAppBar. Вот что предлагается:

Для разных по смыслу экранов приложения, можно изменять макет и набор пунктов меню в BottomAppBar. Например, можно отображать больше или меньше пунктов меню в зависимости от того, что лучше всего подходит для конкретного экрана.

Основываясь на этом гайдлайне, на главных экранах рекомендуется использовать макет BottomAppBar, показывающий несколько пунктов в меню и центрированную FAB (Floating Action Button). На второстепенных экранах, переход на которые осуществляется с главных, макет BottomAppBar должен состоять из выровненной по правому краю FAB и нескольких дополнительных пунктов в меню. Переходы между этими двумя экранами должны выполняться надлежащим образом. Gif сверху демонстрирует этот гайдлайн.

Теперь давайте посмотрим, как можно реализовать это поведение. У нас есть два xml-файла в папке res/menu для меню каждого экрана:

Когда происходит переход между экранами, например, по нажатию кнопки TOGGLE SCREEN в нашем случае, макет BottomAppBar, включая меню и FAB, должен измениться. Вот базовый код для такого поведения макета BottomAppBar:

Если вы хотите сделать анимированные переходы, нужен дополнительный код. Вы можете изучить исходный код, прикреплённый в конце этой статьи, в котором найдёте анимацию.

Скроллирование

Скроллирование — важный триггер поведения для таких компонентов, как BottomAppBar. На странице гайдлайнов Material Design рекомендуется следующее поведение для этого случая:

При скроллировании BottomAppBar может появиться или исчезнуть:
— Скроллирование вниз скрывает BottomAppBar. Если на нём была FAB, она отсоединяется от панели и остается на экране.
— Скроллирование вверх показывает BottomAppBar и снова присоединяет его к FAB, если она там была.

Ниже приведена демонстрация поведения BottomAppBar при скроллировании.

Чтобы использовать это поведение, BottomAppBar и FAB должны быть прямыми дочерними элементами CoordinatorLayout. Затем мы включаем hideOnScroll и устанавливаем флаги скроллирования для BottomAppBar:

Этого вполне достаточно для реализации такого поведения BottomAppBar.

Возвышение

У каждого компонента в мире Material Design есть возвышение, аналогичное нашему физическому миру. У BottomAppBar возвышение — 8dp, а само содержимое экрана возвышается на 0dp. FAB в статичном состоянии возвышается на 12dp. Два компонента, которые мы ещё вспомним в этой статье, Navigation Drawer и Snackbar, возвышаются на 16dp и 6dp соответственно.

Как правило, Snackbar — это компонент для уведомления пользователя, выскакивающий из нижней части экрана. Но если на экране есть BottomAppBar или Navigation Drawer, поведение Snackbar должно измениться. В этих случаях Snackbar следует показывать над нижними компонентами. Вот демонстрация и соответствующий код для реализации:

Как мы уже упоминали, Navigation Drawer возвышается на 16dp, что означает — согласно гайдлайну —

Меню, выпадающие из BottomAppBar (например, Navigation Drawer), открываются как модальные окна на уровень выше, чем сам BottomAppBar.

Ниже приведена реализация нашего Navigation Drawer:

Navigation Drawer является модальным окном и поэтому следует приведённому выше правилу реализации.

Детали реализации этого поведения выглядят следующим образом. В папке res/menu должен быть создан xml-файл меню для Navigation View, который будет использован в Navigation Drawer:

Затем должен быть создан файл макета для фрагмента, использующего Navigation Drawer:

Этот файл макета содержит Navigation View и другие компоненты, формирующие макет для Navigation Drawer. Чтобы создать этот макет, нам нужен класс фрагмента, расширяющий BottomSheetDialogFragment:

При клике по значку Navigation Drawer создаётся экземпляр этого фрагмента, который показывается в виде модального окна:

Это статья завершает нашу серию статей про BottomAppBar. Найти исходный код этой статьи вы можете на Github. Комментируйте и задавайте вопросы.

Источник

[GUIDE] [NO ROOT REQUIRED] Hide The Status Bar Or Nav Bar With ADB

Breadcrumb

TheFixItMan

Senior Member

To permanently hide Nav Bar for root users only see post 2

Note this only hides the Nav bar — swipe up gesture will show Nav bar and not all apps will honour the hidden status

Requirements
ADB setup on pc — see Here if you need to set it up
Moto USB phone driver installed

How To
Connect phone to laptop/pc via usb cable and make sure usb debugging is enabled
Open a command prompt or terminal window at your adb location (If you have adb in your environmental values then you can run this from anywhere)

The commands you’ll need are:

To only hide the status bar:

To only hide the navigation bar:

To hide both status and nav bar:

Return things to normal:

TheFixItMan

Senior Member

Requirements
Root
Root browser

Note — not all roms will support this change
First check to see if the rom supports expanded desktop which will do the job for you either globally or on a per app basis

Instructions
Set up all your gestures before continuing
Copy build.prop from /system to sd card and rename build.prop-backup using a root browser
Copy build.prop to any folder on internal stoeage
Open build.prop file you have placed in internal storage
Add the following line at the end of build.prop

Salvuchi

Member

I wanted to contribute with my findings. This command: «adb shell settings put global policy_control immersive.status=*» hides the status bar in all apps, but some of them get bugged, for example in Instagram you can’t see the text field when replying on a story, or Twitter doesn’t display the bottom part where you can insert pictures to your post while typing.

I discovered that if you type «adb shell settings put global policy_control immersive.status=apps,» then Instagram works fine without the status bar, and of course you could add twitter after that to exclude twitter.

But this is a bit random, I don’t know exactly why Instagram gets fixed by this and I wonder if there is a way to fix other apps.

mikedolo

Senior Member

TheFixItMan

Senior Member

No — not unless you create your own mod and add it to the settings apk

Use the adb command to return things to normal

Источник

Панель навигации на Android с использованием библиотеки Bottom Bar

Сегодня мы поговорим о том, как создать навигационную панель в Android с помощью библиотеки Bottom Bar. Навигационные панели Android или Bottom Bar – это дополнительное меню над навигационной панелью Android, которое используется для быстрой навигации пользователя по наиболее используемым страницам или разделам приложения, как показано на изображении ниже.

В этом руководстве мы будем использовать библиотеку Bottom Bar, которая имитирует шаблон нижней навигации Material Design от Google.

Создание навигационной панели на Android

Gradle настроит ваш проект и разрешит зависимости. Как только это будет сделано, вам нужно перейти к следующим шагам:

• Перейдите в меню Файл >> Новый >> Новый проект и введите имя вашего приложения.
• Введите домен вашей компании, который мы будем использовать только для идентификации вашего приложения.
• Выберите местоположение проекта и SDK, а на следующем экране выберите Empty Activity, так как мы будем добавлять большую часть кода вручную. Затем нажмите кнопку Далее.
• Выберите название деятельности. Убедитесь, что флажок Файл макета установлен, иначе нам придется генерировать его самостоятельно. Нажмите Готово. Мы использовали MainActivity в качестве имени активности, поскольку это будет наш экран по умолчанию. Это то, что пользователь увидит в первый раз, когда откроет приложение.

Теперь откройте build.gradle вашего проекта и добавьте следующую зависимость.

build.gradle

Добавление нижней панели в макет приложения

Откройте файл activity_main.xml и добавьте следующий код. У нас есть два текстовых представления, одно для отображения имени и другое для отображения Email вошедшего пользователя.

Создание вкладок, отрисовываемых объектов и стилей для нижней панели

navigation_bar_menu.xml

Для трех пунктов меню мы использовали следующие графические элементы.

• Создайте новый XML-файл под названием navigation_bar_menu.xml и добавьте в него код выше.
• Загрузите исходный код этого приложения Android Navigation Bar Menu и добавьте drawables из исходного кода в свои папки drawables.
• Определите дочерний стиль основной темы вашего приложения.

res/values-v21/styles.xml

Чтобы избежать ошибок в версиях до Lollipop, создайте заглушку той же темы.

res/values/styles.xml

Примените тему в AndroidManifest.xml.

AndroidManifest.xml

Добавление функционала в MainActivity

Теперь запустите приложение и нажмите выбор пунктов в навигации Android или на нижней панели. Это отразит выбранный пункт меню в TextView.

Источник

Реализация BottomAppBar. Часть 2: Меню и элемент управления Navigation Drawer

В предыдущей статье мы обсудили основы BottomAppBar, который не так давно представили на Google I/O 2018 как часть Material компонентов для Android. Мы рассмотрели способ реализации BottomAppBar и изучили его атрибуты. Также BottomAppBar может отображать элементы меню и элемент управления Navigation Drawer, которые раньше мы использовали в тулбаре.

Теперь элементы меню и элемент управления Navigation Drawer должны быть частью BottomAppBar. А сейчас давайте посмотрим, как использовать меню и Navigation Drawer при помощи BottomAppBar.

Меню BottomAppBar

Сначала необходимо создать .xml файл в каталоге res/menu для элементов меню, которые должны быть показаны в BottomAppBar. Вот мой файл bottomappbar_menu.xml:

В MainActivity, в которой вы вызываете setSupportActionBar(bottom_app_bar), добавьте следующий код в метод:

Теперь элементы меню должны отображаться в BottomAppBar.

Обработка кликов по элементам меню

Для обработки кликов по элементам меню необходимо добавить следующий код в MainActivity:

Теперь меню в BottomAppBar настроено и должно функционировать правильно:

Элемент управления Navigation Drawer в BottomAppBar

Обычно Navigation Drawer реализуется при помощи NavigationView, расположенного в левой части приложения. С BottomAppBar поведение Navigation Drawer изменилось. Теперь Navigation Drawer представляет собой модальное окно в нижней части приложения.

Сперва необходимо создать само модальное окно:

Файл меню для Navigation Drawer также должен быть расположен в res/menu.

Затем нужно создать класс, расширяющий BottomSheetDialogFragment, который и будет создавать модальное окно:

Следующие строки кода нужно добавить в метод onOptionsItemSelected, который используется для обработки кликов по элементам меню. При клике по значку навигации будет создаваться экземпляр объекта BottomNavigationDrawerFragment и отображаться Navigation View.

Вот код макета MainActivity:

А для кликов по элементам в окне Navigation Drawer вы можете использовать следующий код внутри класса BottomNavigationDrawerFragment:

Полный исходный код этой статьи можно найти на Github. Для тех, кого заинтересовала эта тема, читайте предыдущую часть этой статьи и следующую.

Источник

Bottom status bar android

I don’t have time to maintain this anymore. I basically wrote the whole library in a rush, without tests, while being a serious expert beginner at the time. As a result, there’s a lot of unpredictable moving parts and the tests probably aren’t that great either. Don’t really know, since I haven’t touched this in ages.

I’d recommend you to use the official BottomNavigationView from Google and urge them to implement the features you need. Or use another 3rd party library.

Version 2.0 released!

• Cleaner code and better APIs
• No more unnecessary stuff or spaghetti mess
• Now the look, feel and behavior is defined in XML, as it should be
• No more nasty regressions, thanks to the automated tests
• Everything is a little different compared to earlier, but it’s for the greater good!

A custom view component that mimics the new Material Design Bottom Navigation pattern.

Does it work on my Grandpa Gary’s HTC Dream?

Nope. The minSDK version is API level 11 (Honeycomb).

Gimme that Gradle sweetness, pls?

Maven:

You can add items by writing a XML resource file.

Creating the icons

The icons must be fully opaque, solid black color, 24dp and with no padding. For example, with Android Asset Studio Generic Icon generator, select «TRIM» and make sure the padding is 0dp. Here’s what your icons should look like:

Adding items from XML resource

Define your tabs in an XML resource file.

res/xml/bottombar_tabs.xml:

Then, add the BottomBar to your layout and give it a resource id for your tabs xml file.

layout/activity_main.xml

Setting up listeners

By default, the tabs don’t do anything unless you listen for selection events and do something when the tabs are selected.

MainActivity.java:

If you want to listen for reselection events, here’s how you do it:

Intercepting tab selections

If you want to conditionally cancel selection of any tab, you absolutely can. Just assign a TabSelectionInterceptor to the BottomBar, and return true from the shouldInterceptTabSelection() method.

Changing icons based on selection state

If you want to have different icon when a specific tab is selected, just use state list drawables.

res/drawable/my_tab_icon.xml

res/xml/bottombar_tabs.xml

Those color changing tabs look dope. Howdoidodat?

Just add barColorWhenSelected to each tab. When that tab is selected, the whole BottomBar background color is changed with a nice animation.

res/xml/bottombar_tabs.xml

How do I draw it under the navbar?

First, define a style that is a child of your main application theme:

res/values-v21/styles.xml

You’ll also have to make a stub version of the same theme to avoid crashes in previous API levels than Lollipop:

res/values/styles.xml

Also include the same stub in your values-land-v21.xml to avoid transparent navbar and weird behavior on landscape.

res/values-land-v21.xml:

Apply the theme in AndroidManifest.xml for your Activity.

AndroidManifest.xml:

Finally, set bb_behavior to include the underNavbar flag and you’re good to go!

activity_my_awesome.xml:

What about Tablets?

Specify a different layout for your activity in res/layout-sw600dp folder and set bb_tabletMode to true.

res/layout-sw600dp/activity_main.xml:

How do I hide it automatically on scroll?

activity_main.xml:

You can easily add badges for showing an unread message count or new items / whatever you like.

All customization options

For the BottomBar

Apps using BottomBar

• Nearby : A location-based social networking app with over 5 million users.
• FragNav : An Android Library for managing multiple stacks of Fragments. BottomBar is used in the sample app.
• BottomNavigationBar : BottomBar ported to C# for Xamarin developers
• KyudoScoreBookTeam : BottomBar is used in the KyudoScoreBookTeam app.
• memeham : BottomBar is used in the memeham app.
• NewsCatchr : A newsreader app, which uses this BottomBar library.
• GitSkarios : A Github android App, to visit your repositories, gists and more!
  • Code

Send me a pull request with modified README.md to get a shoutout!

Feel free to create issues and pull requests.

When creating pull requests, more is more: I’d like to see ten small pull requests separated by feature rather than all those combined into a huge one.

About

(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

Источник