web-dev-qa-db-ja.com

下部のナビゲーションバーアイコンの上にバッジを表示する

アプリの下部のナビゲーションビューを実装し、 this のようなアイコンの上部にバッジを表示するすべての場所を調べました。これが実装可能かどうか疑問に思いました。どんな助けも大歓迎です。ありがとうございました。

androidmaterial-designbottomnavigationview
51
heisenberg91

サポートライブラリの下部ナビゲーションバーを使用する場合、メニュー項目にバッジ/通知を表示するのは非常に複雑です。ただし、簡単に解決できる方法があります。 https://github.com/aurelhubert/ahbottomnavigation など

このライブラリは、ボトムナビゲーションバーのより高度なバージョンです。また、このコードスニペットを使用するだけで、メニュー項目にバッジを設定できます。

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

そして、次の結果が得られます

enter image description here

27
Noman Rafique

ストック変数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>

次に、IDでTextViewを見つけ、テキストを設定します。 @drawable/notification_badgeは単なる円形状のドローアブルです

131
Tinashe

私は同じ問題に直面していたので、ライブラリを使用したくありませんでした。

そこで、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>

次に、この2つのメソッドを使用して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");

EDIT：提案による改善の追加 jatin rana

21
ilbose

バッジの追加がネイティブでサポートされるようになりました。最新のマテリアル依存関係を使用して、これをbuild.gradleに追加します

    implementation 'com.google.Android.material:material:1.1.0-alpha06'

レイアウトにこれを追加します

<!-- 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.showBadge(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>
16
Abel

@Tinasheの答えに基づいて、番号なしのベローズとしてバッジショーをしたい： enter image description here

コード：

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

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

my Gist からのソース

6
Agi Maulana

あなたはこの方法を試すことができます：

TextViewをBottomNavigationViewの内側に配置して、（ 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
Arash

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>
0
Morten Holmgaard

サポートライブラリ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/();
0
Fran

このライブラリを使用して、ナビゲーションバーにバッジを追加できます。

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

enter image description here

0
ahmed ewess