하단 내비게이션 바 아이콘 상단에 배지 표시

하단 내비게이션 바 아이콘 상단에 배지 표시

---

나는 내 응용 프로그램에서 바닥 탐색 뷰를 구현하고 내가 좋아하는 아이콘의 상단에 배지 표시 할 경우 모든 보았다 이 난이도 구현할 수 있는지 궁금 해서요. 도움을 주시면 감사하겠습니다. 감사합니다.

---

지원 라이브러리 하단 탐색 모음을 사용할 때 메뉴 항목에 배지 / 알림을 표시하는 것은 매우 복잡합니다. 그러나이를 수행하는 쉬운 솔루션이 있습니다. https://github.com/aurelhubert/ahbottomnavigation 과 같은

이 라이브러리는 하단 탐색 모음의 고급 버전입니다. 그리고이 코드 조각을 사용하여 메뉴 항목에 배지를 설정할 수 있습니다.

bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);

그리고 다음과 같은 결과를 얻을 수 있습니다.

---

재고를 사용하고 BottomNavigationView타사 라이브러리 를 사용 하지 않으 려면 다음 과 같이합니다.

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);

다음은 레이아웃 파일입니다.

<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>

그런 다음 TextViewID로 찾고 텍스트를 설정하십시오. @drawable/notification_badge그냥 원 모양의 드로어 블입니다.

---

배지 추가는 현재 기본적으로 지원되며 최신 재료 종속성을 사용하여 빌드에 추가합니다.

    implementation 'com.google.android.material:material:1.1.0-alpha09'

레이아웃에 이것을 추가하십시오

<!-- The rest of your layout here ....-->

  <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:menu="@menu/bottom_nav_menu"
            />

그럼 당신은 그냥

     val navBar  = findViewById<BottomNavigationView>(R.id.bottom_navigation)
     navBar.getOrCreateBadge(R.id.action_add).number = 2

R.id.action_add는 배지를 붙이려는 메뉴 항목의 ID입니다. BottomNavigationView에 제공하는 메뉴 파일에서 확인하십시오.

앱 테마가 Theme.MaterialComponents에 있는지 확인하십시오.

스타일이나 매니페스트에서 확인할 수 있습니다. 이 예에서는 내 것이

     <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:statusBarColor" tools:targetApi="lollipop">@color/colorPrimary</item>
    </style>

---

편집 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이 두 가지 방법으로을 만들었습니다 .

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 : 제안 jatin rana로 개선 추가

---

@Tinashe의 답변을 바탕으로 번호없이 다음과 같이 배지를 표시하고 싶습니다.

암호:

    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);

내 요점의 출처

---

이제 BadgeDrawable의 AndroidX BottomNavigationView의 일부로 배지가 추가되었습니다. 문서보기

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>

---

이 방법으로 시도 할 수 있습니다.

계산을 위해 BottomNavigationView 안에 TextView를 넣습니다 ( BottomNavigationView 는 FrameLayout입니다 ).

    <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>

---

한번 시도해주세요.

1) 배지 용 xml 파일 생성 (ex. notification_badge_view.xml)

<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>

2) 알림 도트 모양의 드로어 블 파일 생성 (예 : badge_circle.xml)

<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>

3) 활동 onCreate 메서드에서 BottomNavigationView에 배지보기를 추가합니다.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_landing);

         addBadgeView();

    }

4) 그리고 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는 하단 막대보기입니다.

5) 다음과 같은 방법으로 배지를 표시하거나 숨기려면 새로 고침

private void refreshBadgeView() {
        try {
            boolean badgeIsVisible = notificationBadge.getVisibility() != GONE;
            notificationBadge.setVisibility(badgeIsVisible ? GONE : VISIBLE);//makes badge visible and invisible 
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

6) 그리고 다음 줄을 따라 특정 하단 바 페이지를 클릭 할 때 미세하게 숨 깁니다.

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;
            }
        });

---

지원 라이브러리 BottomNavigationView를 사용하는 것은 어렵습니다. 쉬운 해결책은 외부 구성 요소를 사용하는 것입니다. 다루기 쉬운 한 가지는 다음과 같습니다 : https://github.com/roughike/BottomBar 문서를 확인하는 것은 다음 과 같이 쉽습니다.

BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);
nearby.setBadgeCount(5);

// Remove the badge when you're done with it.
nearby.removeBadge/();

---

이미 복잡한 테마 세트가 있고 모두 변경할 시간이없는 경우 @Abel의 답변이 가장 좋습니다.

그러나 a) 시간이 부족하고 Google Material 라이브러리 BottomNavigationView Bar를 사용하는 경우 또는 b) 사용자 정의보기 배지를 추가하려는 경우 수락 된 답변이 작동하지 않습니다. com.google.android.material:material: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);

테마를 업데이트하고 업데이트하려면

com.google.android.material:material:1.1.0-alpha09

대신에해야 할 일은

mBottomNavigation.getOrCreateBadge(R.id.navigation_menu_item_one).setNumber(YOUR_NUMBER);

제거 및 번호 기능은 1.1.0-alpha09 버전 (이상)에만 있습니다.

---

이 라이브러리 ..를 사용하여 탐색 모음에 배지를 추가 할 수 있습니다.

https://github.com/ahmedewess/Badged-BottomNavigationBar

참조 URL : https://stackoverflow.com/questions/42682855/display-badge-on-top-of-bottom-navigation-bars-icon