Android: Comment créer TabLayout avec drawable pour compte textview?

Question

• Je suis en train d'utiliser la nouvelle TabLayout dans la bibliothèque de conception android
• Je voulais créer un TextView ayant drawable en arrière-plan sur un onglet de TabLayout.

• Par exemple

  Je recherche Los Angeles en zone Rechercher dans j'obtenir le nombre de livres, de films, Place dans le TextView.

Exemple d'image:

Answer 1

Salut Nikhil vous devez utiliser l'affichage personnalisé pour onglet définir la valeur de comptage sur le changement de résultat de recherche en utilisant le bus d'événements. savoir sur bus Evet reffer EventBus: Events for Android

search_tab_layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:gravity="center" 
    android:background="@color/app_blue"> 

    <!-- Menu Item Image --> 
    <TextView 
     android:id="@+id/tabTitle" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toLeftOf="@+id/count" 
     android:text="Book" 
     android:textSize="12sp" 
     android:paddingTop="16dp" 
     android:paddingBottom="16dp" 
     android:paddingRight="8dp" 
     android:layout_centerVertical="true" 
     android:textColor="@color/white" 
     app:customTypeface="mayriad_pro_regular"/> 

    <TextView 
     android:id="@+id/count" 
     android:layout_width="18dp" 
     android:layout_height="18dp" 
     android:text="0" 
     android:gravity="center" 
     android:textSize="10sp" 
     android:background="@drawable/cart_circle" 
     android:textColor="@color/app_blue" 
     app:customTypeface="mayriad_pro_semi_bold"/> 

</LinearLayout> 

Declare onglet veiws onCreate

tab1 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null); 

tab2 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null); 

tab3 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null); 

En onCreateOptionMenu utiliser EventBus au feu événement sur la recherche

@Override 
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { 
     inflater.inflate(R.menu.menu_search, menu); 
     SearchManager searchManager = (SearchManager) getActivity().getSystemService(Context.SEARCH_SERVICE); 
     SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView(); 
     if (null != searchView) { 
      searchView.setSearchableInfo(searchManager 
        .getSearchableInfo(getActivity().getComponentName())); 
      searchView.setIconifiedByDefault(false); 
     } 

     SearchView.OnQueryTextListener queryTextListener = new SearchView.OnQueryTextListener() { 
      public boolean onQueryTextChange(String newText) { 
       // this is your adapter that will be filtered 
       EventBus.getDefault().post(new SearchViewFilterEvent(newText)); 
       return true; 
      } 

      public boolean onQueryTextSubmit(String query) { 
       //Here u can get the value "query" which is entered in the search box. 
       return false; 
      } 
     }; 
     searchView.setOnQueryTextListener(queryTextListener); 
     MenuItemCompat.setOnActionExpandListener(menu.getItem(0), new MenuItemCompat.OnActionExpandListener() { 
      @Override 
      public boolean onMenuItemActionExpand(MenuItem menuItem) { 
       adapter.setIsHideWashAndFold(true); 
       tabLayout.removeTabAt(0); 
       adapter.notifyDataSetChanged(); 
       llSpinner.setVisibility(View.GONE); 
       tabLayout.getTabAt(0).setCustomView(tab); 
       tabLayout.getTabAt(1).setCustomView(tab2); 
       tabLayout.getTabAt(2).setCustomView(tab3); 
       return true; 
      } 

      @Override 
      public boolean onMenuItemActionCollapse(MenuItem menuItem) { 
       adapter.setIsHideWashAndFold(false);    adapter.notifyDataSetChanged(); 
       llSpinner.setVisibility(View.VISIBLE); 
       initView(); 
       return true; 
      } 
     }); 

     new Handler().post(new Runnable() { 
      @Override 
      public void run() { 
       final View v = getActivity().findViewById(R.id.menu_search); 

       if (v != null) { 
        v.setOnLongClickListener(new View.OnLongClickListener() { 
         @Override 
         public boolean onLongClick(View v) { 
          return false; 
         } 
        }); 
       } 
      } 
     }); 
    } 

Answer 2

Se référer ce lien Ajouter icônes + texte à TabLayout https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-icons-text-to-tablayout

Et ce

https://gist.github.com/kevinpelgrims/8685c8e1a68e3cd9cff9

@Override 
public CharSequence getPageTitle(int position) { 
    // Generate title based on item position 
    Drawable image = context.getResources().getDrawable(imageResId[position]); 
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 
    // Replace blank spaces with image icon 
    SpannableString sb = new SpannableString(" " + tabTitles[position]); 
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
    return sb; 
} 

Answer 3

Oui, vous pouvez réaliser ceci, vous devez définir une vue personnalisée dans chaque onglet. Configurez d'abord votre viewpager avec l'adaptateur après tabLayout.setupWithViewPager (viewPager); après cet appel cette méthode et ajoutez votre mise en page personnalisée ce que vous voulez

private void setCustomIndicator() { 
     for (int i = 0; i < tabLayout.getTabCount(); i++) { 
      View tab = LayoutInflater.from(this).inflate(R.layout.layout_custom_tab, null); 
      TextView textName = (TextView) tab.findViewById(R.id.txtName); 
      TextView textViewNo = (TextView) tab.findViewById(R.id.txtNo); 
      if(i != 0){ 
       textName.setTextColor(ContextCompat.getColor(this, R.color.colorBlueLight)); 
       textViewNo.setBackgroundResource(R.drawable.round_blue_custom_tab); 
      } 

      textName.setText("One"+i); 
      textViewNo.setText(""+i); 
      tabLayout.getTabAt(i).setCustomView(tab); 
     } 
    } 

et après fond de changement dans setOnTabSelectedListener

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       if (tab.getCustomView() != null) { 
        changeCustomIndicator(tab.getPosition()); 
       } 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 
      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 
      } 
     }); 
private void changeCustomIndicator(int pos) { 
    for (int i = 0; i < tabLayout.getTabCount(); i++) { 
     View tab = tabLayout.getTabAt(i).getCustomView(); 
     TextView textName = (TextView) tab.findViewById(R.id.txtName); 
     TextView textViewNo = (TextView) tab.findViewById(R.id.txtNo); 
     if(pos == i){ 
      textName.setTextColor(ContextCompat.getColor(this, R.color.white)); 
      textViewNo.setBackgroundResource(R.drawable.round_red_custom_tab); 
     }else { 
      textViewNo.setBackgroundResource(R.drawable.round_blue_custom_tab); 
      textName.setTextColor(ContextCompat.getColor(this, R.color.colorBlueLight)); 
     } 
    } 
    viewPager.setCurrentItem(pos); 
} 

Answer 4

usage public TabLayout.Tab setCustomView (int layoutResId) Créer une Mise en page avec TextView et Button utilisez ceci dans la vue personnalisée.

acceptés utilisation TabLayout.Tab publique setCustomView (int layoutResId)

Créer une mise en page avec TextView et Button Utilisez cette vue personnalisée.

Pour référence:

setCustomView

Example

Espérons que cela est utile pour vous.