Android bottom navigation view height

[BottomNavigationView] Bottom Navigation View Sizing #431

Comments

GuanacoDevs commented Jul 12, 2019

In order to try to keep consistency across devices densities I use Smallest Width folders.
For the BottomNavigationView I set a height of 56dp , an itemIconSize of 24dp and a textSize of 12sp .
In order to test it I change the Smallest Width Available in my device, as I the sw size, the bnb overlaps the icon with the text, seems like the parent view of each item is not resizing accordingly as you can see from the screenshot with «Show Layout Bounds» enabled, while the icon and text sizes looks I expect.
In the screenshot I’m using:

• sw360dp as a baseline:
  • bnb height: 56dp
  • icon: 24dp
  • text size: 12sp
• sw480dp:
  • bnb height: 74.67dp
  • icon: 32dp
  • text size: 16sp
• sw720dp:
  • bnb height: 112dp
  • icon: 48dp
  • text size: 24sp

Is there anyway to access the design_bottom_navigation_item to modify its layout params? as by looking a the screenshots, seems like it has a fixed height, that causes the icon/text overlaping.

or how can I avoid this?

The text was updated successfully, but these errors were encountered:

GuanacoDevs commented Aug 6, 2019 •

@wcshi indicated in #499 that a fixed height would make the icons and tex looked «squished» as I’m showing in my screenshots, I changed the height to wrap_content as indicated but the issue persists.

This issue is clearly visible without modifying the device density on tablets 600dp, 720dp & 768dp, physical and emulated.

GuanacoDevs commented Aug 6, 2019

This is my layout

h4h13 commented Aug 7, 2019

For me, it was working before but after updating to the latest version it started adding padding at the bottom.

wcshi commented Aug 13, 2019

@GuanacoDevs please provide a sample app, not just the xml layout to ensure that we are running the code in the exact condition as you, thank you.

GuanacoDevs commented Aug 13, 2019

@wcshi I think that my issue is related to me providing different dimens.xml for smallest width where I set the values for each one of my dimensions so I can have the same look accross devices and there must be some padding/margin/height that I’m not overriding.
I’ll try to submit a demo app ASAP

wcshi commented Aug 15, 2019

Why do you need to provide different dimens.xml? Are you using px or dp?

GuanacoDevs commented Aug 15, 2019 •

@wcshi I’m using dp
I’m not using hdpi , xdpi , xxdpi , xxxdpi , instead I’m using the «Smallest Width» qualifier, the screenshots provided are sw360dp , sw420dp , sw480dp , sw540dp , sw600dp , sw720dp , sw1080dp . I override all system dimensions that I can override. Changes as I change densities are more noticeable in the notification bar, navigation bar and AdView, as those, I can’t nor try to override.
Since devices are getting bigger screen densities(even the emulators nowaday, don’t show hdpi , xdpi , xxdpi , xxxdpi anymore as they used to. ) I thought that placing different «Smallest Width» would give me more consistency on how the app looks across different densities.
So far bnb is the only widget I can’t make it work, as you will notice from the screenshots I have removed the labels, because is just ugly.
Tried using the «Catalog» app and change the dimensions, but got lost trying to apply «smallest width» qualifier and then change my device’s densities.
Those screenshots are from a Xperia Z5P changing the density from the developer options.
I have tried looping over the children of the bnb and changing its params with no luck.

wcshi commented Aug 16, 2019

What’s the density of the last screenshot?

GuanacoDevs commented Aug 16, 2019

That’s a 1080(I don’t really think that it might be used. )
Attached are some screenshots(1080,720,360) with «Show Layout Bounds» enabled and you can see that is the BottomNavigationMenuView the one that is squeezing the views as the density grows.

I have tried changing the params.height at runtime, doesnt work, although in the Layout Inspector it shows that the height has been adjusted in the screen it does not.

wcshi commented Aug 16, 2019

I am confused by what you want. Please attach a mock of what you want visually. Do you want the BottomNavigationView to reduce in height to match the height of the BottomNavigationItemView icons?

GuanacoDevs commented Aug 16, 2019 •

All I want is the BottomNavigationView looks the same at 1080 as in 360.
As you can see from my screenshots(all but the 600, it has a different ratio), my widgets look the same dimensions, the only thing that changes is the vertical spacing between them as the System Navigation and Notification bar shrinks.

And actually the NavigationView changes with densities change as the height is set to 56dp , seems like is the BottomNavigationMenuView the one that shrinks. I also tried to styled the bnmv , but I could not find a Material style to inherit from, nor an atribute to apply the style to.

GuanacoDevs commented Aug 16, 2019

This is the bnb style:

I have not been able to find a way to style the BottomNavigationMenuView from xml.

Источник

Bottom Navigation Views

Bottom navigation provide easy navigation for switching between 3 to 5 different views. It was recently added to the Material Design spec, which provides an alternative between tabs and navigation drawers. This widget was also added to v25 of the support design library.

Simply declare a BottomNavigationView instance and make sure to set alignParentBottom=true to ensure that the view is placed on the bottom layout:

Next, similar to how menu items in the Toolbar, declare the tabbed items and the icons that will be displayed in a res/menu/menu_bottom_navigation.xml file:

You can create the icons by choosing them from the New -> Vector Asset :

Next, you can choose the Action and find the heart symbol:

Save the file as ic_favorite_white_24dp.xml . You can change the fill color after importing the vector drawable by modifying the fillColor :

You can repeat this process for the other icons. You can also download the icons directly from this GitHub repo too.

Finally, you will need to set the navigation select handler manually:

Note: as of com.google.android.material:material:1.4.0 , setOnNavigationItemSelectedListener has been deprecated. Use setOnItemSelectedListener instead.

You can use the bottom navigation drawer to swap Fragments:

The bottom navigation view also can be customized with several different options, including: app:itemBackground , app:itemIcontint , and app:ItemTextColor :

• app:itemBackground — The background for the bottom navigation’s items
• app:itemIconTint — The tinting for the bottom navigation’s items’ icons
• app:itemTextColor — The text color for the bottom navigation’s items’ text

When a bottom navigation menu item is selected, it is in a checked state. You can create a state list drawable to render different icons depending on whether the menu item is selected:

Источник

Урок 17. Android Navigation. Знакомство с BottomNavigationView. Как добавить фрагменты в панель Bottom Navigation.

На прошлом уроке мы работали с анимацией переходов между экранами. На этом уроке познакомимся с нижней панелью навигации BottomNavigationView, которая позволяет переходить между экранами – пунктами назначения навигации, а также наглядно информирует пользователя о том, на каком экране он находится. Разберемся, как добавить Bottom Navigation в андроид приложение и как добавить в BottomNavigationView новые фрагменты.

Создаем проект

С одной стороны, создать простое приложение с панелью навигации можно, не написав ни одной строчки кода. Достаточно воспользоваться готовым макетом Bottom Navigation Activity на этапе создания проекта в Android Studio. При этом создается проект приложения с нижней панелью навигации BottomNavigationView на главном экране, в которой отображается три пункта. При нажатии каждого из них меняются экраны приложения. Это все хорошо, скажете вы, но если нужно добавить или убрать экраны и пункты для них? Или добавить нижнюю навигацию в существующее приложение?

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

Неоходимые библиотеки

Если открыть файл сборки build.gradle, в секции dependencies можно увидеть подключенные библиотеки из пакета androidx.navigation (с ktx для проектов на kotlin) которые нам уже знакомы по предыдущим урокам на тему навигации в приложении. Если вы добавляете нижнюю навигацию в существующее приложение, то начинать нужно с добавления этих библиотек в ваш проект.

Граф навигации

В папке res есть папка navigation, в которой размещен все тот же граф навигации, его вы помните по предыдущим урокам. Без него, как вы понимаете, не обходится здесь и нижняя панель навигации.

Добавление экранов

Нажмите кнопку New Destination вверху и выберите Create New Destination. На экране добавления фрагментов выберите шаблон Fragment (with ViewModel). Добавьте один за другим два фрагмента – четвертый и пятый экран. Я их так и назову: FourthFragment и FifthFragment.

Вы можете выбрать при добавлении просто Fragment blank. Но связка Fragment + ViewModel предоставляет преимущества сохранения состояния экрана при изменении конфигурации – например, при повороте устройства. Подробнее об этом мы говорили в Уроке 6.

В граф навигации добавилось два фрагмента. Переименуйте их идентификаторы в соответствии с именами других пунктов назначения: navigation_fourth и navigation_fifth. Переименование всегда лучше делать через рефакторинг, нажатием комбинации Shift + F6 – это гарантирует изменение всех возможных связей.

Можно было оставить идентификаторы как было, но более правильно с точки зрения Code Convention, чтобы названия однотипных элементов были логически похожими. Да и находить их будет легче потом.

Также измените значение параметра android:label — оно используется для заголовка экрана. Впишите сюда текст, который вы хотите видеть в заголовке соответствующего экрана, желательно сохранить его затем в строковых ресурсах. Для сохранения нажмите желтую лампочку и выберите пункт «Extract string resourse», а затем придумайте название строки, которая сохранится в файле res/values/strings.xml.

На этом добавление экранов закончено. Но, если запустить приложение сейчас, они не будут отображаться, и нижняя панель навигации никак не изменится. Что ж, идем дальше.

Хост навигации

Если мы откроем папку layout, то увидим макеты всех фрагментов – пунктов назначения, и макет главного активити.

Макет activity_main.xml содержит компонент fragment – это хост навигации, в котором отображаются фрагменты – пункты назначения. Он связан с графом навигации через параметр app:navGraph.

BottomNavigationView

Также здесь присутствует и компонент BottomNavigationView. Это и есть нижняя панель навигации. Компонент BottomNavigationView является частью библиотеки компонентов материального дизайна. Эта библиотека должна быть импортирована в файле сборки модуля:

Обычно она уже есть в проекте по умолчанию.

Рассмотрим компонент BottomNavigationView боле подробно. Он содержит идентификатор nav_view, и имеет значение ширины – 0dp. Это рекомендуемое значение для всех элементов, ширина которых регулируется ограничениями, заданными корневым элементом разметки ConstraintLayout. Мы видим эти ограничения ниже, они привязывают панель к нижней части родителя, который, в свою очередь, занимает весь экран.

Высота BottomNavigationView задана по контенту, но можно установить фиксированную нужного вам размера.

Далее идут два параметра layout_marginStart и layout_marginEnd. Они регламентируют отступ слева и справа, но поскольку значения здесь равны нулю, они ни на что не влияют, и их можно удалить.

Параметр android:background содержит ссылку на атрибут windowBackground и делает фон панели такой же, как фон экрана. Если вы хотите получить цвет панели, такой как на гайдлайнах сайта material.io, то замените параметр android:background=»?android:attr/windowBackground» таким:

Кстати, на сайте material.io можно найти много полезных рекомендаций как по дизайну, так и по реализации компонентов визуального интерфейса. На странице Bottom Navigation, например, указано, что рекомендованное число элементов панели нижней навигации должно быть от трех до пяти. Подписи должны быть максимально короткими и состоять, по возможности, из одного слова.

На вкладе implementation дается пример реализации нижней панели без графа навигации, а также примеры кастомизации и оформления фона и цвета пунктов нижней панели, добавления пунктам бейджей и т.д.

Добавление пунктов меню

Но вернемся к нашему проекту и компоненту BottomNavigationView в макете activity_main.xml.

Нас интересует последний параметр:

Он ссылается на файл bottom_nav_menu.xml в папке res/menu. Этот файл содержит описание пунктов меню нижней панели навигации. Следовательно, добавлять новые пункты следует здесь.

Добавим пару элементов для четвертого и пятого фрагментов. Их идентификаторы должны совпадать с идентификаторами пунктов назначения в графе навигации. Также укажите соответствующие строковые ресурсы в качестве названия пунктов в android:title.

Добаление идентификаторов в контроллер навигации

Осталось добавить идентификаторы пунктов навигации в конфигурацию контроллера навигации в классе MainActivity.

Переменная класса АppBarConfiguration содержит набор идентификаторов пунктов навигации и передается вместе с контроллером – хостом навигации – в функцию setupActionBarWithNavController. Это нужно для того, чтобы система считала каждый из пунктов назначения пунктом верхнего уровня. В противном случае каждый фрагмент будет отображать стрелку возврата назад в тулбаре слева, как это отображается на дочерних активити и фрагментах.

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

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

Рефакторинг

Теперь можно навести порядок в проекте. Дело в том, что изначально в проекте фрагменты каждого экрана со своими ViewModel расположены в отдельных папках по имени каждого пункта меню нижней панели навигации, и все это лежит в папке ui. Новые же добавленные фрагменты попали просто в главный пакет. Нужно создать в папке ui новые пакеты по имени добавленных экранов. Затем нужно перенести туда добавленные фрагменты вместе с их привязанными ViewModel. Делается это простым перетаскиванием в дереве проекта, с открытием окна рефакторинга, в котором нужно подтвердить операцию.
Теперь вы знаете, как добавить Bottom Navigation в приложение.

На этом наш урок закончен. Вопросы задавайте в комментариях. Исходный код проекта можно скачать по ссылке.

Источник