行动项目通知徽章 Android

小开

最佳答案

通过为 MenuItem创建一个 custom layout，可以在 ActionBar上显示自定义 MenuItem。要设置自定义布局，必须使用菜单项属性 app:actionLayout。

按照以下步骤在 Cart动作项上创建 Badge。请参阅附加的 image以获得结果。

使用 ImageView(用于购物车图标)和 TextView(用于计数值)创建自定义布局

Layout/custom _ action _ item _ layout. xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
style="?attr/actionButtonStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:focusable="true">


<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_action_cart"/>


<TextView
android:id="@+id/cart_badge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="right|end|top"
android:layout_marginEnd="-5dp"
android:layout_marginRight="-5dp"
android:layout_marginTop="3dp"
android:background="@drawable/badge_background"
android:gravity="center"
android:padding="3dp"
android:textColor="@android:color/white"
android:text="0"
android:textSize="10sp"/>


</FrameLayout>

使用 Shape创建可绘制的圆形 badge背景。

可画/徽章 _ 背景. xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">


<solid android:color="@android:color/holo_red_dark"/>
<stroke android:color="@android:color/white" android:width="1dp"/>


</shape>

将 custom layout添加到菜单 item。

Menu/main _ 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/action_cart"
android:icon="@drawable/ic_action_cart"
android:title="Cart"
app:actionLayout="@layout/custom_action_item_layout"
app:showAsAction="always"/>


</menu>

在 主要活动中，添加以下代码:

MainActivity.java:

public class MainActivity extends AppCompatActivity {
................
......................
TextView textCartItemCount;
int mCartItemCount = 10;


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


.....................
............................
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);


final MenuItem menuItem = menu.findItem(R.id.action_cart);


View actionView = menuItem.getActionView();
textCartItemCount = (TextView) actionView.findViewById(R.id.cart_badge);


setupBadge();


actionView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onOptionsItemSelected(menuItem);
}
});


return true;
}


@Override
public boolean onOptionsItemSelected(MenuItem item) {


switch (item.getItemId()) {


case R.id.action_cart: {
// Do something
return true;
}
}
return super.onOptionsItemSelected(item);
}


private void setupBadge() {


if (textCartItemCount != null) {
if (mCartItemCount == 0) {
if (textCartItemCount.getVisibility() != View.GONE) {
textCartItemCount.setVisibility(View.GONE);
}
} else {
textCartItemCount.setText(String.valueOf(Math.min(mCartItemCount, 99)));
if (textCartItemCount.getVisibility() != View.VISIBLE) {
textCartItemCount.setVisibility(View.VISIBLE);
}
}
}
}


..................
..............................


}

产出:

小开

最简单的黑客风格。

        <TextView
android:id="@+id/fabCounter"
style="@style/Widget.Design.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:padding="5dp"
android:text="10"
android:textColor="@android:color/black"
android:textSize="14sp" />

小开

也许这将是一个更快，更容易的解决方案。例如 XML:

<ru.nikartm.support.ImageBadgeView
android:id="@+id/ibv_icon2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="30dp"
android:layout_gravity="center"
android:padding="10dp"
app:ibv_badgeValue="100"
app:ibv_badgeTextSize="12sp"
app:ibv_fixedBadgeRadius="15dp"
app:ibv_badgeTextStyle="bold"
app:ibv_badgeTextColor="#ffffff"
app:ibv_badgeColor="#00ACC1"
app:ibv_badgeLimitValue="false"
android:src="@drawable/ic_shopping_cart" />

或者以程序方式:

imageBadgeView.setBadgeValue(27)
.setBadgeOvalAfterFirst(true)
.setBadgeTextSize(16)
.setMaxBadgeValue(999)
.setBadgeTextFont(typeface)
.setBadgeBackground(getResources().getDrawable(R.drawable.rectangle_rounded))
.setBadgePosition(BadgePosition.BOTTOM_RIGHT)
.setBadgeTextStyle(Typeface.NORMAL)
.setShowCounter(true)
.setBadgePadding(4);

希望这个能帮上忙。

小开

创建自定义布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
style="?attr/actionButtonStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:focusable="true">


<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/notifications_white"/>


<TextView
android:id="@+id/cart_badge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="55dp"
android:layout_marginTop="3dp"
android:background="@drawable/badge_background"
android:gravity="center"
android:padding="3dp"
android:textColor="@android:color/white"
android:text="0"
android:textSize="10sp"
android:visibility="gone"
/>


</FrameLayout>

创建徽章 _ 背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@android:color/holo_red_dark"/>
<stroke android:color="@android:color/white" android:width="1dp"/>
</shape>

创建 main _ menu

<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >


<item
android:id="@+id/action_cart"
android:icon="@drawable/notifications_white"
android:title="Cart"
app:actionLayout="@layout/custom_layout"
app:showAsAction="always"/>
</menu>

在 MainActivty.java 中

         int count = 0;
TextView textCartItemCount;
    

/// build a method inside your MainActivity ////


@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);
    

final MenuItem menuItem = menu.findItem(R.id.action_cart);
    

View actionView = MenuItemCompat.getActionView(menuItem);
textCartItemCount = (TextView) actionView.findViewById(R.id.cart_badge);
    

setupBadge();
    

actionView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onOptionsItemSelected(menuItem);
}
});
    

return true;
}
    

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    

switch (item.getItemId()) {
    

case R.id.action_cart: {
// Do something
return true;
}
}
return super.onOptionsItemSelected(item);
}
    

private void setupBadge() {
///make a button in MainActivty layout
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (count >= 0) {
textCartItemCount.setVisibility(View.VISIBLE);
textCartItemCount.setText(String.valueOf(++count));
} else {
textCartItemCount.setVisibility(View.GONE);`enter code here`
}
    

}
});

小开

这个答案是对 Ferdous Ahmed 给出的答案的编辑，因为我不能评论这个答案，这就是为什么我要发布新的答案。

我只是重新发布 主要活动

通过为 MenuItem 创建自定义布局，可以在 ActionBar 上显示自定义 MenuItem。要设置自定义布局，必须使用菜单项属性 app: actionLayout。

使用 ImageView (用于购物车图标)和 TextView (用于计数值)创建自定义布局

主要活动:

public class MainActivity extends AppCompatActivity {
................
......................
TextView textCartItemCount;
int mCartItemCount = 10;


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


.....................
............................
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);


**FrameLayout actionView =
(FrameLayout)menu.findItem(R.id.action_cart).getActionView();
textCartItemCount = (TextView) actionView.findViewById(R.id.cart_badge);**


setupBadge();


actionView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onOptionsItemSelected(menuItem);
}
});


return true;
}


@Override
public boolean onOptionsItemSelected(MenuItem item) {


switch (item.getItemId()) {


case R.id.action_cart: {
// Do something
return true;
}
}
return super.onOptionsItemSelected(item);
}


private void setupBadge() {


if (textCartItemCount != null) {
if (mCartItemCount == 0) {
if (textCartItemCount.getVisibility() != View.GONE) {
textCartItemCount.setVisibility(View.GONE);
}
} else {
textCartItemCount.setText(String.valueOf(Math.min(mCartItemCount, 99)));
if (textCartItemCount.getVisibility() != View.VISIBLE) {
textCartItemCount.setVisibility(View.VISIBLE);
}
}
}
}


..................
..............................

}

小开

使用 https://github.com/nikartm/Image-Support，将照顾创建徽章更多的选项，如最大计数限制等。

Layout _ menu _ cart. xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout style="?attr/actionButtonStyle"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:focusable="true"
android:clickable="true"
xmlns:tools="http://schemas.android.com/tools">


<ru.nikartm.support.ImageBadgeView
android:id="@+id/cart_menu_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_shopping_cart_black"
tools:ibv_badgeValue="101"
app:ibv_maxBadgeValue="99"
app:ibv_badgeTextSize="7sp"
app:ibv_fixedBadgeRadius="7dp"
app:ibv_badgeTextStyle="bold"
app:ibv_badgeTextColor="#ffffff"
app:ibv_badgeColor="@color/colorAccent"
app:ibv_badgeLimitValue="true" />


</FrameLayout>

Main _ menu. xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_cart"
android:title="Cart"
android:icon="@drawable/ic_shopping_cart_black"
app:actionLayout="@layout/layout_menu_cart"
app:showAsAction="always"/>
</menu>

你的活动

val menuItem = menu.findItem(R.id.menu_cart) as MenuItem
val actionView = menuItem.actionView


actionView.findViewById<ImageBadgeView>(R.id.cart_menu_icon).badgeValue = count

小开

val cartCount = Utility.getPreference(MainApplication.instance.getContext(), Constants.PREF_CART_COUNT)
Log.e("cart_count", cartCount)
if (cartCount.isNotEmpty()) {
val rl = RelativeLayout(this)
val paramsRR = LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
paramsRR.gravity = Gravity.CENTER
rl.layoutParams = paramsRR


val iv = ImageView(this)
iv.loadFromUrl(iconUrl[i])
val params = LinearLayout.LayoutParams(getPixel(24f).toInt(), getPixel(23f).toInt())
params.setMargins(getPixel(10f).toInt(), 0, getPixel(10f).toInt(), 0)
params.gravity = Gravity.CENTER
iv.setPadding(4, 4, 4, 4)
iv.layoutParams = params


val tv = TextView(this)
val paramsRl = LinearLayout.LayoutParams(getPixel(12f).toInt(), getPixel(12f).toInt())
paramsRl.setMargins(getPixel(25f).toInt(), 0, getPixel(10f).toInt(), 0)
params.gravity = Gravity.RIGHT
tv.setPadding(8, 0, 4, 8)
tv.text = cartCount
tv.setTextSize(8f)
tv.setTextColor(Color.parseColor("#E31119"))
tv.setBackgroundResource(R.drawable.badge_background)
tv.layoutParams = paramsRl


rl.addView(iv)
rl.addView(tv)


ll_options_items ?.addView(rl)

小开

你可以使用 材料设计徽章组件:

Https://material.io/develop/android/components/badging

节目内容: implementation "com.google.android.material:material:1.3.0+"

小开

使用 Android 的材料组件(1.3.0)。

val badge = BadgeDrawable.create(context)
BadgeUtils.attachBadgeDrawable(badge, toolbar, R.id.your_menu_item)

小开

按照下面的步骤

实现‘ com.nex3z: 通知徽章: 1.0.4’ 在 build.gradle (app)中实现上述构件
创建菜单文件和一个名为 visitdetails.xml 的资源文件。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:menu="@menu/attendant_menu">


<item
android:id="@+id/action_notifications"
android:title="Search"
android:icon="@drawable/ic_baseline_accessible_24"
app:showAsAction="always"
app:actionLayout="@layout/action_bar_notification" />


</menu>

在布局文件中创建 action _ bar _ notification.xml。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
style="@android:style/Widget.ActionButton">


<ImageView
android:id="@+id/icon_images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_baseline_accessible_24"/>


<com.nex3z.notificationbadge.NotificationBadge
android:id="@+id/badge"
android:layout_width="28dp"
android:layout_height="28dp"
app:nbMaxTextLength="2"
android:layout_toRightOf="@+id/icon_images"
android:textColor="@color/white"
android:layout_alignTop="@+id/icon_images"
android:layout_marginTop="-12dp"
android:layout_marginLeft="-10dp"
/>


</RelativeLayout>

请注意，我正在使用视图绑定。

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="@color/white"
android:orientation="vertical"
tools:context="">


<androidx.appcompat.widget.Toolbar
android:id="@+id/_customers_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white"
android:elevation="4dp"
android:theme="@style/AppTheme.Toolbar"
app:titleTextColor="@color/white"
app:subtitleTextAppearance="@font/roboto_mediumitalic"
app:subtitleTextColor="@color/white"
app:navigationIcon="@drawable/ic_baseline_arrow_back_24"
/>
</RelativeLayout>

注意，工具栏 id 是@+ id/_ customer _ toolbar，我用 setSupportActionBar (binding. CustomersToolbar)绑定它

将这个 setSupportActionBar (binding.CustomersToolbar)添加到 onCreate 中

override fun onCreate(savedInstanceState: Bundle?) {
setSupportActionBar(binding.CustomersToolbar)
}

class UrAvtivityName : AppCompatActivity() {


var item_Notification: MenuItem? = null
var notificationBadgeView: View? = null
var notificationBadge: NotificationBadge? = null


override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setSupportActionBar(binding.CustomersToolbar)
}


override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.visitdetails, menu)
item_Notification = menu!!.findItem(R.id.action_notifications)
notificationBadgeView = item_Notification!!.actionView
notificationBadge = notificationBadgeView!!.findViewById(R.id.badge) as NotificationBadge


notificationBadgeView!!.setOnClickListener {


}


setupBadge()
return true
}


private fun setupBadge() {
        

if (it == 0) {
notificationBadge!!.isVisible = false
return
}
notificationBadge!!.isVisible = true
notificationBadge!!.setText("2")
}
}

小开

你实现这与谷歌材料设计

dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
// ...
}


override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
val badge = BadgeDrawable.create(this)
badge.number = 10
BadgeUtils.attachBadgeDrawable(badge, binding.toolbar, R.id.favorite)
return super.onPrepareOptionsMenu(menu)
}