Вкладки Android Tablayout с уведомлением, например whatsApp

Ответ 1

Моим решением этой проблемы было использование https://github.com/jgilfelt/android-viewbadger и установка индивидуального представления для каждой вкладки:

На моих вкладках есть только значки, поэтому я использовал ImageView, но я считаю, что вы можете использовать любой другой вид, установите флажок https://github.com/jgilfelt/android-viewbadger/blob/master/README.markdown:

private BadgeView badge;

Tab tab = tabLayout.getTabAt(position);
ImageView imageView = new ImageView(context);
tab.setCustomView(imageView);
badge = new BadgeView(context, imageView);

Ответ 2

ОБНОВЛЕНИЕ: ОБНОВЛЕНИЕ

В новейшем выпуске Material Components команда Android теперь предлагает официальный BadgeDrawable для использования на TabLayout для достижения запрошенного результата. Это часть обновления v1.1.0-alpha07. https://github.com/material-components/material-components-android/releases/tag/1.1.0-alpha07

Использование очень простое и может быть сделано следующим образом:

tabLayout.getTabAt(0).showBadge().setNumber(1);

Смотрите интеграцию в демонстрационном приложении компонентов материала: https://github.com/material-components/material-components-android/commit/111cd001f5302bd6899f181ab7ccea2fd4002f63#diff-bf3e9a8a208f0ecab05088823fba99c4R239

СТАРЫЙ ОТВЕТ

Я попробовал некоторые из вышеупомянутых решений, но они не дали должных результатов. Если вы внимательно посмотрите на реализацию TabLayout, вы поймете, что TabView попытается получить textView и iconView из CustomView, если они будут применены.

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

Поэтому вам понадобится макет badged_tab.xml

<?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="wrap_content">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginTop="4dp">

        <ImageView
            android:id="@android:id/icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:scaleType="centerInside" />

        <TextView
            android:id="@android:id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:gravity="center"
            android:maxLines="2" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/badgeCotainer"
        android:layout_width="wrap_content"
        android:layout_height="16dp"
        android:layout_marginStart="12dp"
        android:background="@drawable/notifications_background"
        android:gravity="center"
        android:minWidth="16dp"
        android:visibility="gone">

        <TextView
            android:id="@+id/badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:textColor="#fff"
            android:textSize="10sp" />
    </LinearLayout>
</RelativeLayout>

И какой-то фон уведомлений:

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

При добавлении своей вкладки программно просто позвоните

tab.setCustomView(R.layout.badged_tab);

А затем вы можете в любое время показать/скрыть/установить значок пропуска через:

if(tab != null && tab.getCustomView() != null) {
    TextView b = (TextView) tab.getCustomView().findViewById(R.id.badge);
    if(b != null) {
        b.setText(notifications + "");
    }
    View v = tab.getCustomView().findViewById(R.id.badgeCotainer);
    if(v != null) {
        v.setVisibility(View.VISIBLE);
    }
}

Ответ 3

Я бы предложил вам посмотреть этот сайт:

https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library

Вы можете выполнять итерацию через разные вкладки с помощью этого метода и настраивать пользовательские представления по своему желанию:

  // Iterate over all tabs and set the custom view
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(pagerAdapter.getTabView(i));
    }

public View getTabView(int position) {
    // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
    View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
    TextView tv = (TextView) v.findViewById(R.id.textView);
    tv.setText(tabTitles[position]);
    ImageView img = (ImageView) v.findViewById(R.id.imgView);
    img.setImageResource(imageResId[position]);
    return v;
}

}

Ответ 4

Я не знаю, почему, но ни один из вышеперечисленных ответов не работал у меня: (

У меня есть собственное решение, которое сделает тот же tablayout, что и whatsapp с этим значком:)

Сначала создайте пользовательскую вкладку Layout as custom_tab

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:padding="12dp">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Calls"
        android:textColor="@drawable/tab_text_color_selector"
        android:textSize="@dimen/large_text" />

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginLeft="6dp"
        android:background="@drawable/badge_background"
        android:gravity="center"
        android:text="99"
        android:textColor="@color/colorPrimary"
        android:textSize="@dimen/medium_text" />

</LinearLayout>

</RelativeLayout>

Второе значение badge_background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item xmlns:android="http://schemas.android.com/apk/res/android">
    <shape android:shape="oval">
        <solid android:color="@drawable/tab_text_color_selector" />
    </shape>
</item>
</layer-list>

Третий a tab_color_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/colorTextPrimary"android:state_selected="true" />
<item android:color="@color/colorAccent"/>
 </selector>

Четвертый в вашей деятельности

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setOffscreenPageLimit(3);
    setupViewPager(viewPager);

    //Initializing the tablayout
    tabLayout = (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setupWithViewPager(viewPager);

    try
    {
        setupTabIcons();
    }
    catch (Exception e)
    {
        e.printStackTrace();
    }

Fifth Определить setupTabIcons и методы prepareTabView

  private void setupTabIcons()
{

    for(int i=0;i<tabTitle.length;i++)
    {
        /*TabLayout.Tab tabitem = tabLayout.newTab();
        tabitem.setCustomView(prepareTabView(i));
        tabLayout.addTab(tabitem);*/

        tabLayout.getTabAt(i).setCustomView(prepareTabView(i));
    }
    }

 String[] tabTitle={"LOL!","[email protected]","LOL#"};
int[] unreadCount={1,3,3};

private View prepareTabView(int pos) {
    View view = getLayoutInflater().inflate(R.layout.custom_tab,null);
    TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
    TextView tv_count = (TextView) view.findViewById(R.id.tv_count);
    tv_title.setText(tabTitle[pos]);
    if(unreadCount[pos]>0)
    {
        tv_count.setVisibility(View.VISIBLE);
        tv_count.setText(""+unreadCount[pos]);
    }
    else
        tv_count.setVisibility(View.GONE);


    return view;
    }

Я мог бы оставить что-то во время ответа на этот вопрос. Просто пингуйте меня, я был бы рад помочь: D

Ответ 5

просто используйте этот трюк:

BadgeView bv1 = new BadgeView(this, ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(0));

Ответ 6

Я предлагаю использовать CustomView для вкладок. Вы можете создать новый вид со значком и установить его на своих вкладках.

tab.setCustomView(R.layout.badged_tab);

Ответ 7

Это старая идея, но в наши дни она намного проще. Я использую Kotlin, AndroidX, используя следующий виджет как TabLayout:

com.google.android.material.tabs.TabLayout

и внутри моего файла приложения Gradel:

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

Чтобы установить простой значок, просто напишите..

yourTabLayout?.getTabAt(currentTabPosition)?.apply{
                        orCreateBadge
                        badge?.isVisible = true
                    }

Затем просто установите isVisible = false, чтобы скрыть, например:

private fun changeYourTabMethod(newTabPosition : Int) {
    // do some stuff and then hide the badge...
    yourTabLayout?.getTabAt(newTabPosition)?.apply{
        badge?.isVisible = false
    }
}

Ответ 8

Есть и простой способ. Просто добавьте специальные символы. Это будет выглядеть как whatsapp.

➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏ ➏ ➓ ➒ ➓ ➓

tabLayout.addTab(tabLayout.newTab().setText("News " + ➊));