Abzeichen auf BottomNavigationView

Question

Ich versuche, ein Abzeichen an den BottomNavigationView Artikel hinzuzufügen, ohne jede Bibliothek, aber irgendwie die BottomNavigationView ist nicht das Abzeichen zeigt (custom_view)

main_view.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="com.hrskrs.test.MainActivity"> 

    <FrameLayout 
    android:id="@+id/container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

    <android.support.design.widget.BottomNavigationView 
    android:id="@+id/bottom_navigation" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    app:itemBackground="@color/colorPrimary" 
    app:itemIconTint="@color/colorAccent" 
    app:itemTextColor="@color/colorPrimaryDark" 
    app:menu="@menu/bottom_navigation_main" /> 
</RelativeLayout> 

bottom_navigation_menu .xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 
    <item 
    android:id="@+id/item_test" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action1" 
    app:showAsAction="always" /> 

    <item 
    android:enabled="true" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action2" 
    app:showAsAction="ifRoom" /> 

    <item 
    android:enabled="true" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action3" 
    app:showAsAction="ifRoom" /> 
</menu> 

Aktivität erstreckte sich von AppCompatActivity:

@Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
    menu = bottomNavigationView.getMenu(); 
    menu.clear(); 
    getMenuInflater().inflate(R.menu.bottom_navigation_main, menu); 
    MenuItem item = menu.findItem(R.id.item_test); 
    item = MenuItemCompat.setActionView(item, R.layout.custom_view); 
    RelativeLayout badgeWrapper = (RelativeLayout) MenuItemCompat.getActionView(item); 

    TextView textView = (TextView) badgeWrapper.findViewById(R.id.txtCount); 
    textView.setText("99+"); 

    return super.onCreateOptionsMenu(menu); 
    } 

custom_view.xml:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    style="@android:style/Widget.ActionButton" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@android:color/transparent" 
    android:clickable="true" 
    android:gravity="center" 
    android:orientation="vertical"> 

    <ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:contentDescription="Notification Icon" 
    android:gravity="center" 
    android:src="@mipmap/ic_launcher" /> 

    <TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/txtCount" 
    android:gravity="right" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/ic_badge" 
    android:text="55" 
    android:textColor="#ffffffff" 
    android:textSize="12sp" /> 
</RelativeLayout> 

Istead von (badge) custom_view zeigt sie sehen das Produkt selbst nur:

Unten können Sie aus dem Debug-Modus sehen, dass die view zugegriffen wird der richtige und es wird richtig eingestellt. Aber irgendwie ist die BottomNavigationView nicht für ungültig erklärt werden:

Answer 1

@hrskrs Sie eine höhere Erhebung auf txtCount oder badgeWrapper selbst hinzufügen. BottomNavigationView scheint eine höhere Höhe als die Ansichten auf dem Bildschirm zu haben.

Ich kämpfte mit Abzeichen auf BottomNavigationView angezeigt. Mein Abzeichen (ohne Textwert), das Teil des Zeichenobjekts ist, wurde grau, wenn der Benutzer auf ein anderes Objekt klickte oder die gleiche Farbe wie im Farbton verwendete (falls nicht definiert, ist colorPrimary). Ich denke, dass Sie auf das gleiche Problem stoßen werden, das ich mit der Färbung des Abzeichens/des Zählers auf dem BottomNavigationView Farbemblem konfrontierte, da tönte Farbe auf den Gegenstand selbst angewendet wird und Ihr badgeWrapper Teil von MenuItem wird den Farbton nehmen (wird grau wenn du auf einen anderen Gegenstand tippst, den du nicht willst, denke ich).

überprüfen meine Antwort hier aus: Is there a way to display notification badge on Google's official BottomNavigationView menu items introduced in API 25?

ich eine ImageView für ein Abzeichen verwendet, aber Sie können Ihre badgeWrapper RelativeView statt der Image haben.

Answer 2

Ich schaffte es, BottomNavigationView mit dem Abzeichen zu machen. Hier ist mein Code (Kotlin).

Dies ist die Platte (von BottomNavigationView geerbt)

/** Bottom menu with badge */ 
class AdvancedBottomNavigationView(context: Context, attrs: AttributeSet) : BottomNavigationView(context, attrs) { 

    private companion object { 
     const val BADGE_MIN_WIDTH = 16   // [dp] 
     const val BADGE_MARGIN_TOP = 5   // [dp] 
     const val BADGE_MARGIN_LEFT = 15  // [dp] 
    } 

    @Inject internal lateinit var uiCalculator: UICalculatorInterface 

    private val bottomMenuView: BottomNavigationMenuView 

    init { 
     // Get access to internal menu 
     val field = BottomNavigationView::class.java.getDeclaredField("mMenuView") 
     field.isAccessible = true 
     bottomMenuView = field.get(this) as BottomNavigationMenuView 

     App.injections.presentationLayerComponent!!.inject(this) 

     @SuppressLint("CustomViewStyleable") 
     val a = context.obtainStyledAttributes(attrs, R.styleable.advanced_bottom_navigation_bar) 
     val badgeLayoutId = a.getResourceId(R.styleable.advanced_bottom_navigation_bar_badge_layout, -1) 
     a.recycle() 

     initBadges(badgeLayoutId) 
    } 

    /** 
    * [position] index of menu item */ 
    fun setBadgeValue(position: Int, count: Int) { 
     val menuView = bottomMenuView 
     val menuItem = menuView.getChildAt(position) as BottomNavigationItemView 

     val badge = menuItem.findViewById(R.id.bottom_bar_badge) 
     val badgeText = menuItem.findViewById(R.id.bottom_bar_badge_text) as TextView 

     if (count > 0) { 
      badgeText.text = count.toString() 
      badge.visibility = View.VISIBLE 
     } else { 
      badge.visibility = View.GONE 
     } 
    } 

    /** 
    * Select menu item 
    * [position] index of menu item to select 
    */ 
    fun setSelected(position: Int) = bottomMenuView.getChildAt(position).performClick() 

    private fun initBadges(badgeLayoutId: Int) { 
     // Adding badges to each Item 
     val menuView = bottomMenuView 
     val totalItems = menuView.childCount 

     val oneItemAreaWidth = uiCalculator.getScreenSize(context).first/totalItems 

     val marginTop = uiCalculator.dpToPixels(context, BADGE_MARGIN_TOP) 
     val marginLeft = uiCalculator.dpToPixels(context, BADGE_MARGIN_LEFT) 

     for (i in 0 until totalItems) { 
      val menuItem = menuView.getChildAt(i) as BottomNavigationItemView 

      // Add badge to every item 
      val badge = View.inflate(context, badgeLayoutId, null) as FrameLayout 
      badge.visibility = View.GONE 
      badge.minimumWidth = uiCalculator.dpToPixels(context, BADGE_MIN_WIDTH) 

      val layoutParam = FrameLayout.LayoutParams(
       FrameLayout.LayoutParams.WRAP_CONTENT, 
       FrameLayout.LayoutParams.WRAP_CONTENT) 
      layoutParam.gravity = Gravity.START 

      layoutParam.setMargins(oneItemAreaWidth/2 + marginLeft, marginTop, 0, 0) 
      menuItem.addView(badge, layoutParam) 
     } 
    } 
} 

Es ist attr.XML-Datei mit den Optionen für diese Komponente:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <declare-styleable name="advanced_bottom_navigation_bar"> 
     <attr name="badge_layout" format="reference|integer" /> 
    </declare-styleable> 
</resources> 

Hintergrund für Abzeichen von ziehbar Ordnern:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape> 
      <solid android:color="#ff0000" /> 
      <corners android:radius="10dp" /> 
     </shape> 
    </item> 
</selector> 

Abzeichen selbst:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 
    android:id="@+id/bottom_bar_badge" 
    android:layout_height="20dp" 
    android:layout_width="20dp" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:background="@drawable/bcg_badge" 
    > 
<TextView 
    android:id="@+id/bottom_bar_badge_text" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="1" 
    android:textSize="10sp" 
    android:textColor="@android:color/white" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:textAlignment="center" 
    android:layout_gravity="center"/> 
</FrameLayout> 

Und dies ist ein Beispiel dafür, wie es zu benutzen in Ihrem code:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
    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" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="su.ivcs.ucim.presentationLayer.userStories.mainScreen.view.MainActivity"> 

    <su.ivcs.ucim.presentationLayer.common.advancedBottomNavigationView.AdvancedBottomNavigationView 
     android:id="@+id/bottom_navigation" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     app:itemBackground="@android:color/white" 
     app:itemIconTint="@color/main_screen_tabs_menu_items" 
     app:itemTextColor="@color/main_screen_tabs_menu_items" 
     app:menu="@menu/main_screen_tabs_menu" 
     app:badge_layout = "@layout/common_badge" 

     app:layout_constraintTop_toBottomOf="@+id/fragmentsContainer" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" 
     /> 

</android.support.constraint.ConstraintLayout> 

Ich hoffe das hilft dir.