Eliminar salto de línea en TabLayout

Acabo de agregar el nuevo componente TabLayout a mi aplicación. Como sabrá, hay dos modos diferentes para la app:tabMode="scrollable" tabs app:tabMode="scrollable" y app:tabMode="fixed" .

Cuando uso la app:tabMode="fixed" recibo el siguiente resultado:

enter image description here

No hay margen / relleno en el lado izquierdo y derecho, pero el texto está envuelto.

Pero cuando uso la app:tabMode="scrollable" obtengo el siguiente resultado:

enter image description here

El texto no está cerrado, pero aquí hay un margen extraño en el lado derecho y no puedo deshacerme de él.

También intenté establecer la tabGravity en cualquiera de las app:tabGravity="center" o app:tabGravity="fill" pero no app:tabGravity="fill" ningún cambio.

Sería bueno si alguno de ustedes, chicos y chicas inteligentes, consiguieran una solución para mí.

Saludos, Lukas

Una solución aquí es inflar un diseño personalizado para cada pestaña, lo que le dará más control sobre la apariencia de cada pestaña. Esto se hace con el método setCustomView () .

Tenga en cuenta que se verá diferente en diferentes resoluciones de pantalla.

Siempre es difícil hacer que se vea perfecto en todos los dispositivos, pero al menos el uso de este método le da más control, ya que puede usar diferentes archivos xml de diseño personalizado para diferentes resoluciones / tamaños de pantalla.

Un enfoque sería hacer que el tamaño de la fuente sea lo más grande posible sin cortarse en cada tamaño de pantalla.

Obtuve un ejemplo simple de trabajo, que restringe el texto en cada pestaña a una línea, sin embargo, en este ejemplo simple también hace que el texto largo en las tabs laterales se elipsifique sin cambiar el tamaño de la fuente. El siguiente paso sería determinar el tamaño de fuente óptimo para cada tamaño de pantalla y crear un xml de diseño de pestaña específico para cada uno.

Aquí está el archivo custom_tab.xml, con android:singleLine="true" especificado:

 < ?xml version="1.0" encoding="utf-8"?>    

Aquí está el diseño de MainActivity:

      

Aquí está el código de actividad, que incluye FragmentPagerAdapter:

 public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); // Get the ViewPager and set it's PagerAdapter so that it can display items ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), MainActivity.this); viewPager.setAdapter(pagerAdapter); // Give the TabLayout the ViewPager TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); tabLayout.setupWithViewPager(viewPager); // 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)); } } class PagerAdapter extends FragmentPagerAdapter { String tabTitles[] = new String[] { "Aufzeichnung", "Berichte", "Neue Aufgabe", }; Context context; public PagerAdapter(FragmentManager fm, Context context) { super(fm); this.context = context; } @Override public int getCount() { return tabTitles.length; } @Override public Fragment getItem(int position) { switch (position) { case 0: return new BlankFragment(); case 1: return new BlankFragment(); case 2: return new BlankFragment(); } return null; } @Override public CharSequence getPageTitle(int position) { // Generate title based on item position return tabTitles[position]; } public View getTabView(int position) { View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null); TextView tv = (TextView) tab.findViewById(R.id.custom_text); tv.setText(tabTitles[position]); return tab; } } } 

Y aquí está el resultado con el código de arriba:

enter image description here

Tenga en cuenta que si elimina android:singleLine="true" , se ve así, similar a cómo se ve en su pregunta:

enter image description here

Aquí hay un truco rápido, mucho más corto que usar setCustomView() : use el atributo android:theme en su TabLayout :

  

Luego en tu tema XML:

  

Tenemos que hacerlo de esta manera, porque desafortunadamente el atributo android:singleLine se ignora en la app:tabTextAppearance establecido en el TabLayout. app:tabTextAppearance realmente solo es útil para cambiar el tamaño del texto.

Mostrar “…” en los títulos de las tabs no proporcionará una buena experiencia de interfaz de usuario. Sugiero que establezca tabmode para que se pueda desplazar y que los títulos de las tabs ocupen todo el espacio que deseen.

   

Si se trata de una opción, puedes centrar las tabs con RelativeLayout y configurar android: layout_centerHorizontal = “true”

Esto le dará un margen igual en el lado izquierdo y derecho.

p.ej

     

En su diseño XML, si está usando TextView , use android:maxLines="1" o android:singleLine="true" Vea si esto funciona. Y si no es TextView , por favor ponga su xml aquí.

Resolvió mi problema asignando estilo a la aplicación: tabTextAppearance

  

estilo:

  

Puede establecer textSize también.

 float myTabLayoutSize = 360; if (DeviceInfo.getWidthDP(this) >= myTabLayoutSize ){ tabLayout.setTabMode(TabLayout.MODE_FIXED); } else { tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); } 

Con este código, puedes eliminar el relleno predeterminado. Para mí, trabajó para hacer textos un poco más largos dentro de una línea

  

Desde aquí: http://panavtec.me/playing-with-the-new-support-tablayout