Иконка со счётчиком в верхнем тулбаре: пример разнообразия подходов к одной задаче

В жизни каждого разработчика бывает момент, когда, увидев интересное решение в чужом приложении, хочется реализовать его в своём. Это же логично и должно быть довольно просто. И наверняка заботливые люди из «корпорации добра» написали по этому поводу какой-нибудь гайд или сделали обучающее видео, где на пальцах показано, как вызвать пару нужных методов для достижения желаемого результата. Зачастую бывает именно так.

Но бывает и совсем по-другому: ты видишь реализацию чего-то в каждом втором приложении, а когда доходит до реализации того же у себя — оказывается, что лёгких решений для этого, как ни странно, до сих пор нет…

Так и случилось со мной, когда возникла необходимость добавить в верхнюю панель иконку со счётчиком. Я был очень удивлён, когда выяснилось, что для реализации такого привычного и востребованного элемента UI нет простого решения. Но так бывает, к сожалению. И я решил обратиться к знаниям всемирной сети. Вопрос размещения иконки со счётчиком в верхнем тулбаре, как выяснилось, волновал довольно многих. Проведя на просторах интернета некоторое время, я нашёл массу разных решений. В целом все они рабочие и имеют право на жизнь. Более того, результат моего исследования наглядно показывает, как по-разному можно подойти к решению задач в Android.

В этой статье я расскажу о нескольких реализациях иконки со счётчиком. Здесь представлено 4 примера. Если мыслить чуть шире, то речь пойдёт о практически любом кастомном элементе, который мы хотим разместить в верхнем тулбаре. Итак, начнём.

Решение первое

Каждый раз при необходимости отрисовки или обновлении счётчика на иконке нужно создавать Drawable на основе файла разметки и отрисовывать его на тулбаре в качестве иконки.

Создаём в res/layouts файл разметки badge_with_counter_icon:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="@dimen/menu_item_icon_size"
  >
 
     <ImageView
        android:id="@+id/icon_badge"
        android:layout_width="@dimen/menu_item_icon_size"
        android:layout_height="@dimen/menu_item_icon_size"
        android:scaleType="fitXY"
        android:src="@drawable/icon"
        android:layout_alignParentStart="true"/>
    
     <TextView
        android:id="@+id/counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/icon_badge"
        android:layout_alignTop="@+id/icon_badge"
        android:layout_gravity="center"
        android:layout_marginStart="@dimen/counter_left_margin"
        android:background="@drawable/counter_background"
        android:gravity="center"
        android:paddingLeft="@dimen/counter_text_horizontal_padding"
        android:paddingRight="@dimen/counter_text_horizontal_padding"
        android:text="99"
        android:textAppearance="@style/CounterText" />

</RelativeLayout>

Здесь сам счётчик мы привязываем к левому краю иконки и указываем фиксированный отступ: это нужно для того, чтобы при увеличении длины текста значения счётчика основная иконка у нас не перекрывалась сильнее — это некрасиво.

В res/values/dimens добавляем:

<dimen name="menu_item_icon_size">24dp</dimen>
<dimen name="counter_left_margin">14dp</dimen>
<dimen name="counter_badge_radius">6dp</dimen>
<dimen name="counter_text_size">9sp</dimen>
<dimen name="counter_text_horizontal_padding">4dp</dimen>

Размер иконки в соответствии с гайдом по Material Design.

В res/values/colors добавляем:

<color name="counter_background_color">@android:color/holo_red_light</color>
<color name="counter_text_color">@android:color/white</color>

В res/values/styles добавляем:

<style name="CounterText">
  <item name="android:fontFamily">sans-serif</item>
  <item name="android:textSize">@dimen/counter_text_size</item>
  <item name="android:textColor">@color/counter_text_color</item>
  <item name="android:textStyle">normal</item>
</style>

Создаём в res/drawable/ ресурс counter_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
  <solid android:color="@color/counter_background_color"/>
  <corners android:radius="@dimen/counter_badge_radius"/>
</shape>

В качестве иконки берём свою картинку, называем её icon и укладываем в ресурсы.

В res/menu создаём файл menu_main.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/action_counter_1"
        android:icon="@drawable/icon"
        android:title="icon"
        app:showAsAction="ifRoom"/>

</menu>

Создаём класс, конвертирующий разметку в Drawable:

LayoutToDrawableConverter.java

package com.example.counters.counters;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class LayoutToDrawableConverter {
 
  public static Drawable convertToImage(Context context, int count, int drawableId) {
    
     LayoutInflater inflater = LayoutInflater.from(context);
     View view = inflater.inflate(R.layout.badge_with_counter_icon, null);
     ((ImageView) view.findViewById(R.id.icon_badge)).setImageResource(drawableId);
     TextView textView = view.findViewById(R.id.counter);
     if (count == 0) {
        textView.setVisibility(View.GONE);
     } else {
        textView.setText(String.valueOf(count));
     }
    
     view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
                  View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
     view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    
     view.setDrawingCacheEnabled(true);
     view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
     Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
     view.setDrawingCacheEnabled(false);
     return new BitmapDrawable(context.getResources(), bitmap);
  }
}

Далее, в нужной нам Activity добавляем:

  private int mCounterValue1 = 0;

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        MenuItem menuItem = menu.findItem(R.id.action_with_counter_1);
        menuItem.setIcon(LayoutToDrawableConverter.convertToImage(this, mCounterValue1, R.drawable.icon));
        return true;
}

@Override
public boolean onOptionsItemSelected(final MenuItem item) {
  switch (item.getItemId()) {
     case R.id.action_counter_1:
        updateFirstCounter(mCounterValue1 + 1);
        return true;
     default:
        return super.onOptionsItemSelected(item);
  }
}


private void updateFirstCounter(int newCounterValue){
    mCountrerValue1 = newCounterValue;
    invalidateOptionsMenu();
}

Теперь при необходимости обновления счётчика вызываем метод updateFirstCounter, передавая в него актуальное значение. Здесь я повесил увеличение значения счётчика при нажатии на иконку. С остальными реализациями буду поступать так же.

Нужно обратить внимание на следующее: мы формируем изображение, которое потом скармливаем элементу меню — все необходимые отступы формируются автоматически, нам их учитывать не надо.

Решение второе

В этой реализации мы формируем иконку на основе многослойного элемента, описанного в LayerList, в котором в нужный момент отрисовываем непосредственно сам счётчик, оставляя иконку без изменений.

Здесь и далее я буду постепенно добавлять ресурсы и код для всех реализаций.

В res/drawable/ создаём ic_layered_counter_icon.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
  <item
     android:drawable="@drawable/icon" android:gravity="center" />
 
  <item
     android:id="@+id/ic_counter" android:drawable="@android:color/transparent" />

</layer-list>

В res/menu/menu_main.xml добавляем:

<item
  android:id="@+id/action_counter_2"
  android:icon="@drawable/ic_layered_counter_icon"
  android:title="layered icon"
  app:showAsAction="ifRoom"/>

В res/values/dimens добавляем:

<dimen name="counter_text_vertical_padding">2dp</dimen>

Создаём файл CounterDrawable.java:

package com.example.counters.counters;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;

public class CounterDrawable extends Drawable {
 
  private Paint mBadgePaint;
  private Paint mTextPaint;
  private Rect mTxtRect = new Rect();
 
  private String mCount = "";
  private boolean mWillDraw;
 
  private Context mContext;
 
  public CounterDrawable(Context context) {
    
     mContext = context;
    
     float mTextSize = context.getResources()
                              .getDimension(R.dimen.counter_text_size);
    
     mBadgePaint = new Paint();
     mBadgePaint.setColor(ContextCompat.getColor(context.getApplicationContext(), R.color.counter_background_color));
     mBadgePaint.setAntiAlias(true);
     mBadgePaint.setStyle(Paint.Style.FILL);
    
     mTextPaint = new Paint();
     mTextPaint.setColor(ContextCompat.getColor(context.getApplicationContext(), R.color.counter_text_color));
     mTextPaint.setTypeface(Typeface.DEFAULT);
     mTextPaint.setTextSize(mTextSize);
     mTextPaint.setAntiAlias(true);
     mTextPaint.setTextAlign(Paint.Align.CENTER);
  }
 
  @Override
  public void draw(Canvas canvas) {
    
     if (!mWillDraw) {
        return;
     }
     float radius = mContext.getResources()
                            .getDimension(R.dimen.counter_badge_radius);
     float counterLeftMargin = mContext.getResources()
                                       .getDimension(R.dimen.counter_left_margin);
    
     float horizontalPadding = mContext.getResources()
                                       .getDimension(R.dimen.counter_text_horizontal_padding);
     float verticalPadding = mContext.getResources()
                                     .getDimension(R.dimen.counter_text_vertical_padding);
    
     mTextPaint.getTextBounds(mCount, 0, mCount.length(), mTxtRect);
     float textHeight = mTxtRect.bottom - mTxtRect.top;
     float textWidth = mTxtRect.right - mTxtRect.left;
    
     float badgeWidth = Math.max(textWidth + 2 * horizontalPadding, 2 * radius);
     float badgeHeight = Math.max(textHeight + 2 * verticalPadding, 2 * radius);
    
     canvas.drawCircle(counterLeftMargin + radius, radius, radius, mBadgePaint);
     canvas.drawCircle(counterLeftMargin + radius, badgeHeight - radius, radius, mBadgePaint);
     canvas.drawCircle(counterLeftMargin + badgeWidth - radius, badgeHeight - radius, radius, mBadgePaint);
     canvas.drawCircle(counterLeftMargin + badgeWidth - radius, radius, radius, mBadgePaint);
     canvas.drawRect(counterLeftMargin + radius, 0, counterLeftMargin + badgeWidth - radius, badgeHeight, mBadgePaint);
     canvas.drawRect(counterLeftMargin, radius, counterLeftMargin + badgeWidth, badgeHeight - radius, mBadgePaint);
    
     // for API 21 and more:
     //canvas.drawRoundRect(counterLeftMargin, 0, counterLeftMargin + badgeWidth, badgeHeight, radius, radius, mBadgePaint);
    
     canvas.drawText(mCount, counterLeftMargin + badgeWidth / 2, verticalPadding + textHeight, mTextPaint);
  }
 
  public void setCount(String count) {
     mCount = count;
    
     mWillDraw = !count.equalsIgnoreCase("0");
     invalidateSelf();
  }
 
  @Override
  public void setAlpha(int alpha) {
     // do nothing
  }
 
  @Override
  public void setColorFilter(ColorFilter cf) {
     // do nothing
  }
 
  @Override
  public int getOpacity() {
     return PixelFormat.UNKNOWN;
  }
}

Этот класс будет заниматься отрисовкой счётчика в верхнем правом углу нашей иконки. Самый простой способ отрисовки бэкграунда счётчика — просто отрисовать прямоугольник со скругленными углами, вызвав canvas.drawRoundRect, но данный способ подходит для версии API выше 21-й. Хотя и для более ранних версий API это делается не особо сложно.

Далее, в нашей Activity добавляем:

private int mCounterValue2 = 0;
private LayerDrawable mIcon2;

private void initSecondCounter(Menu menu){
  MenuItem menuItem = menu.findItem(R.id.action_counter_2);
  mIcon2 = (LayerDrawable) menuItem.getIcon();
 
  updateSecondCounter(mCounterValue2);
}

private void updateSecondCounter(int newCounterValue) {
 
  CounterDrawable badge;
 
  Drawable reuse = mIcon2.findDrawableByLayerId(R.id.ic_counter);
  if (reuse != null && reuse instanceof CounterDrawable) {
     badge = (CounterDrawable) reuse;
  } else {
     badge = new CounterDrawable(this);
  }
 
  badge.setCount(String.valueOf(newCounterValue));
  mIcon2.mutate();
  mIcon2.setDrawableByLayerId(R.id.ic_counter, badge);
}

Добавляем код в onOptionsItemSelected. С учётом кода для первой реализации этот метод будет выглядеть так:

@Override
public boolean onOptionsItemSelected(final MenuItem item) {
  switch (item.getItemId()) {
     case R.id.action_counter_1:
        updateFirstCounter(mCounterValue1 + 1);
        return true;
     case R.id.action_counter_2:
        updateSecondCounter(++mCounterValue2);
        return true;
     default:
        return super.onOptionsItemSelected(item);
  }
}

Вот и всё, вторая реализация готова. Как и в прошлый раз, обновление счётчика я повесил на нажатие по иконке, но его можно инициализировать откуда угодно, вызвав метод updateSecondCounter. Как видно, мы отрисовываем счётчик на канвасе руками, но можно придумать и что-то более интересное — всё зависит от вашей фантазии или от пожелания заказчика.

Решение третье

Для элемента меню используем не изображение, а элемент с произвольной разметкой. Затем находим компоненты этого элемента и сохраняем ссылки на них.

В данном случае нас интересует ImageView иконки и TextView счётчика, но на деле это может быть и что-то более кастомное. Тут же прикручиваем обработку нажатия на данный элемент. Это необходимо сделать, так как для кастомных элементов в тулбаре метод onOptionsItemSelected не вызывается.

Реализация

Создаём в res/layouts файл разметки badge_with_counter.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
 
  <RelativeLayout
     android:layout_width="@dimen/menu_item_size"
     android:layout_height="@dimen/menu_item_size">
    
     <ImageView
        android:id="@+id/icon_badge"
        android:layout_width="@dimen/menu_item_icon_size"
        android:layout_height="@dimen/menu_item_icon_size"
        android:layout_centerInParent="true"
        android:scaleType="fitXY"
        android:src="@drawable/icon" />
    
     <TextView
        android:id="@+id/counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/icon_badge"
        android:layout_alignTop="@+id/icon_badge"
        android:layout_gravity="center"
        android:layout_marginStart="@dimen/counter_left_margin"
        android:background="@drawable/counter_background"
        android:gravity="center"
        android:paddingLeft="@dimen/counter_text_horizontal_padding"
        android:paddingRight="@dimen/counter_text_horizontal_padding"
        android:text="99"
        android:textAppearance="@style/CounterText" />
  </RelativeLayout>

</FrameLayout>

В res/values/dimens добавляем:

<dimen name="menu_item_size">48dp</dimen>

Добавляем в res/menu/menu_main.xml:

<item
  android:id="@+id/action_counter_3"
  app:actionLayout="@layout/badge_with_counter"
  android:title="existing action view"
  app:showAsAction="ifRoom"/>

Далее, в нашей Activity добавляем:

private int mCounterValue3 = 0;

private ImageView mIcon3;
private TextView mCounterText3;

private void initThirdCounter(Menu menu){
  MenuItem counterItem = menu.findItem(R.id.action_counter_3);
  View counter = counterItem.getActionView();
 
  mIcon3 = counter.findViewById(R.id.icon_badge);
  mCounterText3 = counter.findViewById(R.id.counter);
 
  counter.setOnClickListener(v -> onThirdCounterClick());
  updateThirdCounter(mCounterValue3);
}

private void onThirdCounterClick(){
  updateThirdCounter(++mCounterValue3);
}

private void updateThirdCounter(int newCounterValue) {
 
  if (mIcon3 == null || mCounterText3 == null) {
     return;
  }
 
  if (newCounterValue == 0) {
     mIcon3.setImageResource(R.drawable.icon);
     mCounterText3.setVisibility(View.GONE);
  } else {
     mIcon3.setImageResource(R.drawable.icon);
     mCounterText3.setVisibility(View.VISIBLE);
     mCounterText3.setText(String.valueOf(newCounterValue));
  }
}

В onPrepareOptionsMenu добавляем:

initThirdCounter(menu);

Теперь, с учётом предыдущих изменений, этот метод выглядит так:

@Override
public boolean onPrepareOptionsMenu(final Menu menu) {
 
  // the second counter
  initSecondCounter(menu);
  // the third counter
  initThirdCounter(menu);
 
  return super.onPrepareOptionsMenu(menu);
}

Готово! Обратите внимание, что для нашего элемента мы взяли разметку, в которой самостоятельно указали все необходимые размеры и отступы — в данном случае система за нас этого делать не будет.

Решение четвёртое

То же самое, что и в предыдущем варианте, но здесь мы создаём и добавляем наш элемент прямо из кода.

В Activity добавляем:

private int mCounterValue4 = 0;

private void addFourthCounter(Menu menu, Context context) {
 
  View counter = LayoutInflater.from(context)
                               .inflate(R.layout.badge_with_counter, null);
  counter.setOnClickListener(v -> onFourthCounterClick());
  mIcon4 = counter.findViewById(R.id.icon_badge);
  mCounterText4 = counter.findViewById(R.id.counter);
  MenuItem counterMenuItem = menu.add(context.getString(R.string.counter));
  counterMenuItem.setActionView(counter);
  counterMenuItem.setShowAsActionFlags(MenuItem.SHOW_AS_ACTION_ALWAYS);
  updateFourthCounter(mCounterValue4);
}

private void onFourthCounterClick(){
  updateFourthCounter(++mCounterValue4);
}

private void updateFourthCounter(int newCounterValue) {
 
  if (mIcon4 == null || mCounterText4 == null) {
     return;
  }
 
  if (newCounterValue == 0) {
     mIcon4.setImageResource(R.drawable.icon);
     mCounterText4.setVisibility(View.GONE);
  } else {
     mIcon4.setImageResource(R.drawable.icon);
     mCounterText4.setVisibility(View.VISIBLE);
     mCounterText4.setText(String.valueOf(newCounterValue));
  }
}

В данном варианте добавление нашего элемента в меню нужно делать уже в onCreateOptionsMenu

С учётом предыдущих изменений этот метод теперь выглядит так:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.menu_main, menu);
  MenuItem menuItem = menu.findItem(R.id.action_counter_1);
 
  // the first counter
  menuItem.setIcon(LayoutToDrawableConverter.convertToImage(this, mCounterValue1, R.drawable.icon));
 
  // the third counter
  addFourthCounter(menu, this);
  return true;
}

Готово!

На мой взгляд, последние два решения — самые простые и элегантные, к тому же самые короткие: мы просто выбираем необходимую нам разметку элемента и закидываем её в тулбар, а содержание обновляем как при работе с обычной View.

Казалось бы, почему мне просто не описать данный подход и не остановиться на этом? Причин тут две:

• во-первых, мне хочется показать, что у одной задачи может быть несколько решений;
• во-вторых, каждый из рассмотренных вариантов имеет право на жизнь.

Помните, я писал, что можно относиться к этим решениям не только как к реализации иконки со счётчиком, а использовать их в каком-то очень сложном и интересном кастомном элементе для тулбара, для которого одно из предложенных решений окажется наиболее подходящим? Приведу пример.

Из всех рассмотренных способов самый спорный — первый, так как он довольно сильно нагружает систему. Его использование может быть оправдано в том случае, когда у нас есть требование скрыть детали формирования иконки и передавать в тулбар уже сформированное изображение. Однако следует учитывать, что при частом обновлении иконки таким способом мы можем нанести серьёзный удар по производительности.

Второй способ нам подойдёт тогда, когда нужно отрисовать что-то на канвасе самостоятельно. Третья и четвёртая реализации наиболее универсальны для классических задач: поменять значение текстового поля вместо формирования отдельного изображения будет вполне удачным решением.

Когда возникает необходимость реализовать какую-то непростую графическую фичу, я обычно говорю себе: «Нет ничего невозможного — вопрос лишь в том, сколько времени и сил нужно потратить на реализацию».

Теперь у вас есть несколько вариантов для достижения поставленной задачи и, как видно, сил и времени на реализацию каждого варианта нужно совсем немного.

Автор: Pablitto

Источник