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

Question

Я хочу реализовать значок с уведомлением android.support.design.widget.TabLayout. Я приложил все усилия для его реализации, но не смог.

Любая помощь будет значительно оценена.

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

Answer 2

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

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; 
} 

} 

Answer 3

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

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

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

Answer 4

просто использовать этот трюк:

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

Answer 5

я попробовал некоторые из вышеперечисленных решений, но они не дали правильных результатов. Если вы присмотритесь к реализации 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); 

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

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

Answer 6

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

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

сделать первый пользовательский вкладка Layout в 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> 

Третьем 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(); 
    } 

Пятый Определение 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!","LOL@","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