last - implementation com android support design

Cambiar los iconos de TabLayout en la izquierda, arriba, derecha o abajo en com.android.support:design:23.1.0

Question

Soy bastante nuevo en el desarrollo de Android. Así que tengan paciencia conmigo.

He estado intentando alinear el ícono y el texto en la misma línea en com.android.support:design:23.1.0 por un día.

Al parecer, en com.android.support:design: 23.1.0 , han cambiado la posición predeterminada del icono a la parte superior y el texto en la parte inferior.

Anteriormente en com.android.support:design: 23.0.1 el valor predeterminado era el icono a la izquierda y el texto en la misma línea que el icono

Así que aquí hay una manera fácil de resolverlo (aunque podría tener inconvenientes, idk tbh):

change the version in your app''s build.gradle. ex: 23.1.0 to 23.0.1 and build.

Y hay una mejor manera de hacerlo (de esta manera también puedes alinear los iconos de la izquierda, derecha, arriba, abajo):

1. crear un custom_tab.xml en res / layout

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAlignment="center"/>

2. en tu actividad java

TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); //tab label txt
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);

Hasta ahora he logrado que los íconos aparezcan en cualquier lado como este:

Los argumentos de la función PS: setCompoundDrawablesWithIntrinsicBounds son 4 iconos laterales como este:

setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)

Answer 1

En realidad, he encontrado una forma más elegante (IMO) para hacer esto sin siquiera usar diseños personalizados, y solo usando el diseño predeterminado actual para tablayouts. Cada elemento de diseño de pestaña es, de hecho, un LinearLayout vertical, siendo el primer elemento un ImageView y el segundo el TextView.

Así que el método consiste en cambiar la orientación LinearLayout de la pestaña a Horizontal. Después de eso, el icono se posicionará a la izquierda. Ahora, si desea colocarlo a la derecha, puede eliminar ImageView (que es el primer elemento) y agregarlo a LinearLayout, se agregará como el último elemento ubicado al final de TextView, pero Tendrá que jugar con los parámetros de diseño para mostrarlo alineado y dimensionado correctamente.

Entonces, en lugar de volver a agregar ImageView al final de LinearLayout, puedes agregar el dibujo como un dibujo compuesto al TextView. Añadir un poco de relleno a la misma, y ​​listo.

LinearLayout tabItemLayout = (LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(tabIndex);
tabItemLayout.setOrientation(LinearLayout.HORIZONTAL);
ImageView iconView = (ImageView) tabItemLayout.getChildAt(0);
TextView textView = (TextView) tabItemLayout.getChildAt(1);
// remove the icon view
tabItemLayout.removeView(iconView);
// add the icon as compound drawable
textView.setCompoundDrawablesWithIntrinsicBounds(null, null, iconView.getDrawable(), null);
// set some padding
float DP = Resources.getSystem().getDisplayMetrics().density;
int padding = (int)(10 * DP);
textView.setCompoundDrawablePadding(padding);

Con este método, no necesitamos un diseño personalizado y no necesitamos inflar nada, solo reutilizamos las vistas existentes.

Answer 2

Gracias Atu por este buen consejo!

En mi caso, tengo que agregar un diseño lineal para centrar el título de tablayout. También he añadido algunos caracteres de espacio para obtener un margen entre el icono y el texto.

custom_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/tabContent"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:gravity="center"/>
</LinearLayout>

Código de inicialización:

LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText("  "+getApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);
mTabLayout.getTabAt(i).setCustomView(tabContent);

Answer 3

Use el mismo código xml proporcionado por @juzamn y solo agregue estos pequeños ajustes al bucle para toda la pestaña

for (int i = 0; i < tabLayout.getTabCount(); i++ ) {
 yourlinearlayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.title_text, null);
 tab_text = (TextView) yourlinearlayout.findViewById(R.id.tabContent);
        tab_text.setText("  " + tab_titles[i]);
 tab_text.setCompoundDrawablesWithIntrinsicBounds(tabicons[i], 0, 0, 0);
    tabLayout.getTabAt(i).setCustomView(tab_text);}