tablayout - tabcontrol android studio

Cómo aumentar el tamaño del icono de las pestañas en TabLayout

Question

Estoy intentando aumentar el tamaño del icono de las pestañas en mi aplicación. Los tamaños de los íconos se han arreglado, se probaron de muchas maneras pero nada funciona, finalmente se intentó lo siguiente pero no se modificó el tamaño. Por favor, si alguien me puede decir la manera correcta, me alegraría. Gracias de antemano.

Aquí está mi código,

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.my1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.feed_s));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.add_ds1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.history_ds));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

style.xml

<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
    <item name="android:layout_width">50dp</item>
    <item name="android:layout_height">50dp</item>
</style>

tablayout.xml

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:theme="@style/AppTheme.ActionBar"/>

Answer 1

Como se indica en la documentación, puede crear un nuevo diseño con un ImageView con android:id="@android:id/icon" y configurarlo como la vista personalizada para la pestaña. El TabLayout colocará automáticamente el ícono en el ImageView interno con android:id/icon

Luego, en su código puede llamar al setIcon(R.drawable.yourIcon) mientras crea la pestaña.

Luego puede aplicar su diseño personalizado dentro de un bucle for:

mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.searchpin));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.discussionpin));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.userpin));

for (int i = 0; i < mTabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = mTabLayout.getTabAt(i);
    if (tab != null) tab.setCustomView(R.layout.view_home_tab);
}

Aquí está el xml:

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

    <ImageView
        android:id="@android:id/icon"
        android:layout_width="@dimen/tab_icon_size"
        android:layout_height="@dimen/tab_icon_size"
        android:layout_centerInParent="true"/>

</RelativeLayout>

Answer 2

Este es un TabLayout personalizado que puede ayudar mucho!

public class TabView extends TabLayout {

public TabView(Context context) {
    super(context);
    init();
}

public TabView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    int padding = 10;

    int[] icons = new int[]{R.drawable.ic_tel, R.drawable.ic_speaker, R.drawable.ic_camera, R.drawable.ic_home};

    for (int i = 0; i < icons.length; i++) {
        ImageView imageView = new ImageView(getContext());
        imageView.setBackgroundColor(Color.TRANSPARENT);
        imageView.setImageResource(icons[i]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setPadding(padding, padding, padding, padding);
        if (i==3){
            addTab(newTab().setCustomView(imageView), i , true);
        } else {
            addTab(newTab().setCustomView(imageView), i);
        }
    }

}

}

Answer 3

Hola, enfrenté el mismo problema antes y esta es la mejor solución que pude encontrar:

Debe usar (setCustomView), antes que nada, hacer un nuevo archivo de diseño le permite nombrarlo (customtab.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:id="@+id/icon"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

Luego, y para cada pestaña, haga esto: (use el mismo diseño .xml)

View view1 = getLayoutInflater().inflate(R.layout.customtab, null);
view1.findViewById(R.id.icon).setBackgroundResource(R.drawable.my1);
tabLayout.addTab(tabLayout.newTab().setCustomView(view1));


View view2 = getLayoutInflater().inflate(R.layout.customtab, null);
view2.findViewById(R.id.icon).setBackgroundResource(R.drawable.my2);
tabLayout.addTab(tabLayout.newTab().setCustomView(view2));


View view3 = getLayoutInflater().inflate(R.layout.customtab, null);
view3.findViewById(R.id.icon).setBackgroundResource(R.drawable.my3);
tabLayout.addTab(tabLayout.newTab().setCustomView(view3));

...

Answer 4

No es necesario tomar ninguna vista xml. Cree el tiempo de ejecución de viewview y agregue la imagen como vista

    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        ImageView imageView = new ImageView(context);
        imageView.setImageResource(drawableImage);
        tabLayout.getTabAt(i).setCustomView(imageView);
    }

Feliz codificacion

Answer 5

Si desea cambiar dentro de todas las pantallas, me refiero a la aplicación completa, puede intentar esto: Cree un archivo dentro de la carpeta de diseño llamada: design_layout_tab_icon.xml y pegue debajo del código

<?xml version="1.0" encoding="utf-8"?>
<ImageView
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@android:id/icon"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="center_horizontal"
       android:scaleType="fitCenter"
       tools:src="@mipmap/ic_launcher"/>

No cambies la identificación, déjala y en tu pantalla la barra de pestañas tiene la altura que deseas y viola !!! Se aplicará a todos los lugares.

Answer 6

    View view5 = getLayoutInflater().inflate(R.layout.custom_icon, null);
    view5.findViewById(R.id.iconImg).setBackgroundResource(R.drawable.ambulance);
    icon_text=(TextView)view5.findViewById(R.id.icon_text);
    icon_text.setText("Blood Bank");
    tabLayout.addTab(tabLayout.newTab().setCustomView(view5));

    tabLayout.getTabAt(0).setIcon(tabIcons[0]).setCustomView(view1);