Я реализовал нижней панели навигации в мое приложение, и я посмотрел везде, чтобы отобразить значки на верхней части иконы, как это Мне было интересно-возможно ли это вообще реализовать. Любая помощь приветствуется. Спасибо.
Если вы просто хотите использовать запас `BottomNavigationView и без сторонних Либ здесь's, как я'ве сделал это:
BottomNavigationMenuView bottomNavigationMenuView =
(BottomNavigationMenuView) navigationView.getChildAt(0);
View v = bottomNavigationMenuView.getChildAt(3);
BottomNavigationItemView itemView = (BottomNavigationItemView) v;
View badge = LayoutInflater.from(this)
.inflate(R.layout.notification_badge, itemView, true);
Затем здесь's в файл макета:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="@+id/notifications.badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:background="@drawable/notification_badge"
android:gravity="center"
android:padding="3dp"
android:text="9+"
android:textColor="@color/white"
android:textSize="11sp" />
</merge>
Тогда просто найди виджет TextViewпо ID и набор текста.
@холст/notification_badge-это просто форма круг катры
Добавление значков нативно поддерживается, с использованием новейших материальных зависимостей добавить в вашу сборку.Gradle в
реализации 'сом.Гугл.андроид.материал:материал:1.1.0-alpha09'
в макет добавить
`` в
<ком.Гугл.андроид.материал.bottomnavigation.BottomNavigationView андроид:идентификатор=с"@+id и/bottom_navigation и" для android:layout_width="и присваиваем себе" ОС android:layout_height=" и?я достопри/actionBarSize&; приложение:меню=" и@меню/bottom_nav_menu и" /> `` затем вы можете просто
Вэл навигации = findViewById, чтобы найти<BottomNavigationView>(Р. ИД.bottom_navigation) навигации.getOrCreateBadge(ИД Р..action_add).количество = 2
ИД р..action_add для вас будет идентификатор пункта меню, который вы хотите поставить значок. Проверьте его из меню Файл вы кормите на BottomNavigationView.
Убедитесь, что ваша тема приложение в тему.MaterialComponents
вы можете проверить это в стилях или манифеста. например мой был в этом
<имя стиля="в AppTheme и" родитель="по теме.MaterialComponents.Свет.DarkActionBar" и> в <!-- Настроить вашу тему здесь. --> <название товара="и colorPrimary" и> цвет@/colorPrimary</п> <товар наименование="и colorPrimaryDark" и> цвет/colorPrimaryDark&ЛТ@;/п> <название товара="и colorAccent" и> цвет@/colorAccent</п> <название товара=на"Андроид:statusBarColor" и инструменты:targetApi=то"леденец" и> цвет@/colorPrimary</п> </стиль и GT;
Редактировать 2:<БР> BottomNavigationView теперь поддерживает Отображение значка изначально, как показано здесь.
Передо мной стоял тот же вопрос, и я не'т хотите использовать библиотеку.
Поэтому я создал пользовательский макет под названием layout_news_badge
:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/badge_frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/badge_text_view"
android:layout_width="19dp"
android:layout_height="19dp"
android:textSize="11sp"
android:textColor="@android:color/white"
android:background="@drawable/news_bottom_nav_bg"
android:layout_gravity="top"
android:layout_marginTop="4dp"
android:layout_marginStart="16dp"
android:gravity="center"
android:padding="2dp"
tools:text="9+" />
</FrameLayout>
Виджет TextView фона(news_bottom_nav_bg
):
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="?attr/colorPrimary" />
</shape>
Затем я создал BottomMenuHelper
с этим 2 методам:
public static void showBadge(Context context, BottomNavigationView
bottomNavigationView, @IdRes int itemId, String value) {
removeBadge(bottomNavigationView, itemId);
BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
View badge = LayoutInflater.from(context).inflate(R.layout.layout_news_badge, bottomNavigationView, false);
TextView text = badge.findViewById(R.id.badge_text_view);
text.setText(value);
itemView.addView(badge);
}
public static void removeBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
if (itemView.getChildCount() == 3) {
itemView.removeViewAt(2);
}
}
Затем, когда я называю это в моей деятельности:
BottomMenuHelper.showBadge(this, mBottomNavigationView, R.id.action_news, "1");
Редактировать 1: Добавлены улучшения по предложению жатин Ранау
При использовании поддержки нижней библиотеке навигации, ее довольно сложен для отображения значка/уведомлений по пунктам меню. Однако есть несколько простых решений, чтобы сделать это. Например https://github.com/aurelhubert/ahbottomnavigation
Эта библиотека является более продвинутой версией нижней панели навигации. И вы можете установить значок на пункт меню просто используя этот фрагмент кода.
bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);
И вы'll получить следующий результат
Обновление: теперь материал бейджа поддержки, Подробнее см. ниже
Ответ
базы на @Tinashe'ы ответ, Я'd, как знак показывают, как показано ниже без номера:
код:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
// position = 2
addBadge(POSITION_HISTORY)
}
/**
* add badge(notification dot) to bottom bar
* @param position to get badge container
*/
@SuppressLint("PrivateResource")
private fun addBadge(position: Int) {
// get badge container (parent)
val bottomMenu = navigation.getChildAt(0) as? BottomNavigationMenuView
val v = bottomMenu?.getChildAt(position) as? BottomNavigationItemView
// inflate badge from layout
badge = LayoutInflater.from(this)
.inflate(R.layout.badge_layout, bottomMenu, false)
// create badge layout parameter
val badgeLayout: FrameLayout.LayoutParams = FrameLayout.LayoutParams(badge?.layoutParams).apply {
gravity = Gravity.CENTER_HORIZONTAL
topMargin = resources.getDimension(R.dimen.design_bottom_navigation_margin).toInt()
// <dimen name="bagde_left_margin">8dp</dimen>
leftMargin = resources.getDimension(R.dimen.bagde_left_margin).toInt()
}
// add view to bottom bar with layout parameter
v?.addView(badge, badgeLayout)
}
badge_layout.xml (badge_size=12dp)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="@dimen/badge_size"
android:layout_height="@dimen/badge_size"
android:background="@drawable/new_notification" />
и холст фон new_notification.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="100dp"/>
<solid android:color="#F44336"/>
</shape>
Как @zxbin ответа. вы можете проверить BadgeView и попробуйте ниже код
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(this);
navigation.setSelectedItemId(R.id.navigation_store);
BottomNavigationMenuView bottomNavigationMenuView =
(BottomNavigationMenuView) navigation.getChildAt(0);
View v = bottomNavigationMenuView.getChildAt(4); // number of menu from left
new QBadgeView(this).bindTarget(v).setBadgeNumber(5);
Источник Мой смысл
Пожалуйста, попробуйте это один раз.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/badge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginStart="10dp"
android:gravity="center"
android:padding="3dp"
app:srcCompat="@drawable/notification_badge" />
</FrameLayout>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorAccent" />
<stroke
android:width="2dp"
android:color="@android:color/white" />
</shape>
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_landing);
addBadgeView();
}
private void addBadgeView() {
try {
BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationBar.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0); //set this to 0, 1, 2, or 3.. accordingly which menu item of the bottom bar you want to show badge
notificationBadge = LayoutInflater.from(LandingActivity.this).inflate(R.layout.view_notification_badge, menuView, false);
itemView.addView(notificationBadge);
notificationBadge.setVisibility(GONE);// initially badge will be invisible
} catch (Exception e) {
e.printStackTrace();
}
}
Примечание: bottomNavigationBar ваш вид снизу бар.
private void refreshBadgeView() {
try {
boolean badgeIsVisible = notificationBadge.getVisibility() != GONE;
notificationBadge.setVisibility(badgeIsVisible ? GONE : VISIBLE);//makes badge visible and invisible
} catch (Exception e) {
e.printStackTrace();
}
}
bottomNavigationBar.setOnNavigationItemSelectedListener(new
BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem)
{
switch (menuItem.getItemId()) {
case R.id.bottom_bar_one:
//while moving to first fragment
notificationBadge.setVisibility(GONE);
break;
case R.id.bottom_bar_two:
//moving to second fragment
break;
case R.id.bottom_bar_three:
//moving to third fragment
break;
}
return true;
}
});
Бейдж была добавлена как часть AndroidX BottomNavigationView по BadgeDrawable. Смотреть дальше
fun setBadge(count: Int) {
if (count == 0) {
bottomNavigationView.removeBadge(R.id.ticketsNavigation)
} else {
val badge = bottomNavigationView.showBadge(R.id.ticketsNavigation)
badge.number = count
badge.backgroundColor = getColor(R.color.badge)
badge.badgeTextColor = getColor(R.color.blackTextColor)
}
}
// Menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/ticketsNavigation"
android:icon="@drawable/vector_drawable_navbar_tickets"
android:title="@string/tickets_title"/>
...
</menu>
@Авель'ы ответ является лучшим, если у вас уже есть сложные темы и Дон'т иметь время, чтобы изменить их все.
Однако, если а) у вас мало времени и если вы не используете Google библиотеки материалов BottomNavigationView бар или б) вы хотите добавить свои собственные значки посмотреть - то принято отвечать выиграл't работа с ком.Гугл.андроид.материал:материал:1.1.0`
Вам потребуется код для другой иерархии, чем принято отвечать
BottomNavigationItemView itemView = (BottomNavigationItemView) ((BottomNavigationMenuView) mBottomNavigation.getChildAt(0)).getChildAt(2);
View badge = LayoutInflater.from(this).inflate(R.layout.navigation_dot, itemView, false);
itemView.addView(badge);
если вы хотите обновить вашу тему и обновление
Ариа.Гугл.андроид.материал:материал:1.1.0-alpha09`
тогда все, что вам нужно сделать, это
mBottomNavigation.getOrCreateBadge(ИД Р..navigation_menu_item_one).setNumber(YOUR_NUMBER);
Удалить и числовые функции присутствуют только в 1.1.0-alpha09 версии (и выше)
Вы можете попробовать этот способ:
Положить виджет TextView внутри BottomNavigationView для подсчета (BottomNavigationView - это так):
<android.support.design.widget.BottomNavigationView android:id="@id/bottomMenu" style="@style/bottomMenu">
<TextView android:id="@id/bottomMenuSelectionsNumber" style="@style/bottomMenuSelectionsNumber"/>
</android.support.design.widget.BottomNavigationView>
И стиль их такой:
<style name="bottomMenu">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">@dimen/toolbarHeight</item>
<item name="android:layout_gravity">center|bottom</item>
<item name="android:background">@color/colorThird</item>
<item name="itemBackground">@drawable/tabs_ripple</item>
<item name="itemIconTint">@drawable/bottom_menu_item_color</item>
<item name="itemTextColor">@drawable/bottom_menu_item_color</item>
<item name="menu">@menu/bottom_menu</item>
</style>
<style name="bottomMenuSelectionsNumber">
<item name="android:text">@string/bottomMenuSelectionsNumber</item>
<item name="android:textSize">@dimen/appSecondFontSize</item>
<item name="android:textColor">@color/white</item>
<item name="android:layout_width">@dimen/bottomMenuSelectionsNumberDim</item>
<item name="android:layout_height">@dimen/bottomMenuSelectionsNumberDim</item>
<item name="android:layout_gravity">right|bottom</item>
<item name="android:layout_marginRight">@dimen/bottomMenuSelectionsNumberMarginR</item>
<item name="android:layout_marginBottom">@dimen/bottomMenuSelectionsNumberMarginB</item>
<item name="android:gravity">center</item>
<item name="android:includeFontPadding">false</item>
<item name="android:background">@drawable/bottom_menu_selections_number_bg</item>
</style>
И bottom_menu_selections_number_bg:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/colorAccent"/>
<corners android:radius="@dimen/cornerRadius"/>
</shape>
Посмотри в разделе документации: https://material.io/develop/android/components/bottom-navigation-view/
ТЛ;ДР: Они не'т обновит правильные методы использовать, чтобы они оставили небольшая ошибка в документации. Чтобы добавить или удалить значок, выполните следующие действия:
`` // удалить bottomNavigationView.removeBadge(ИД Р..action_settings)
// чтобы добавить bottomNavigationView.getOrCreateBadge(ИД Р..action_settings).применить { //если вы хотите изменить другие атрибуты, такие как цвет значка, добавить номер, максимальное количество (в программу добавлен знак плюс, например, 99+) количество = 100 maxCharactersCount = 3 свойство backgroundColor = ContextCompat.хеттолог(контекст, цвет Р..color_red) } ``
С помощью библиотеки поддержки BottomNavigationView сложно. Наиболее простым решением является использование внешних компонентов. Один простой в ручку: https://github.com/roughike/BottomBar Проверка его документации's так же просто, как:
BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);
nearby.setBadgeCount(5);
// Remove the badge when you're done with it.
nearby.removeBadge/();
вы можете использовать эту библиотеку .. чтобы добавить значок на панель навигации
https://github.com/ahmedewess/Badged-BottomNavigationBar