Изменение значков TabLayout слева, сверху, справа или снизу в com.android.support:design:23.1.0

Я довольно новичок в разработке Android. Так что терпите меня.

Я пытался выровнять значок и текст в одной строке в com.android.support:design:23.1.0 в течение дня.

По-видимому, в com.android.support:design:23.1.0 они изменили положение значка по умолчанию на верхнее, а текст — внизу.

Ранее в com.android.support:design:23.0.1 по умолчанию был значок слева и текст в той же строке, что и значок.

Итак, вот простой способ решить эту проблему (хотя у него могут быть недостатки, idk tbh):

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

И есть лучший способ сделать это (таким образом вы также можете выровнять значки слева, справа, сверху, снизу):

  1. создайте custom_tab.xml в 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. в вашей деятельности 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);

До сих пор я добился того, чтобы значки отображались с любой стороны следующим образом:

Значки TabLayout

PS: аргументами функции setCompoundDrawablesWithIntrinsicBounds являются 4 боковых значка, например:

setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)

comment
посетите этот androidhive.info/2015/09/ может помочь вам   -  person H Raval    schedule 16.12.2015


Ответы (4)


Спасибо Ату за этот хороший совет!

В моем случае я должен добавить линейный макет к центральному заголовку вкладки. Я также добавил несколько пробелов, чтобы получить отступ между значком и текстом.

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>

Код инициализации:

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);
person quent    schedule 13.01.2017
comment
Мне нравится идея с маржой! - person Atu; 16.01.2017
comment
см. stackoverflow.com/questions/36160978/ - person Vahe Gharibyan; 07.10.2017

У меня есть точное решение, которое вы, ребята, хотите.

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:tabInlineLabel="true"
    app:tabPaddingStart="@dimen/default_10dp">

Using below property you can achive desire result.

приложение: tabInlineLabel = "истина"

person Mayuresh Deshmukh    schedule 08.03.2019
comment
tbh, я не открывал Android-студию уже несколько лет. Я не могу воспроизвести его для target:23* сейчас. Я посмотрю, смогут ли другие подтвердить ваш ответ :) - person Atu; 11.03.2019
comment
Если разработчик хочет, чтобы в этот раз текст отображался справа от значка, мы можем использовать это свойство TabLayout. - person Mayuresh Deshmukh; 11.03.2019
comment
это не работает для меня, есть ли специальная библиотека дизайна, которая поддерживает это? - person pseudozach; 26.08.2019
comment
И как я могу изменить позицию только с этим атрибутом? (Пример: изменить слева направо). - person luke cross; 15.02.2020

На самом деле, я нашел более элегантный способ (IMO) сделать это даже без использования пользовательских макетов, а просто используя текущий макет по умолчанию для вкладок. Каждый элемент макета вкладки на самом деле является вертикальным LinearLayout, где 1-й элемент является ImageView, а 2-й элемент — TextView.

Таким образом, метод состоит в изменении ориентации LinearLayout вкладки на Horizontal. После этого значок будет располагаться слева. Теперь, если вы хотите разместить его справа, вы можете удалить ImageView (который является 1-м элементом) и добавить его в LinearLayout, он будет добавлен как последний элемент, расположенный в конце TextView, но вы придется поиграть с параметрами макета, чтобы отобразить его правильно выровненным и размерным.

Таким образом, вместо повторного добавления ImageView в конце LinearLayout вы можете просто добавить рисуемый объект как составной объект TextView. добавьте немного отступа к нему, и вуаля.

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

С этим методом нам не нужен пользовательский макет и не нужно ничего раздувать, мы просто повторно используем существующие представления.

person Raphael C    schedule 17.12.2018
comment
тбх, я не могу сказать, что лучше, лично я хотел бы избежать магических чисел, но в то же время мне нравится идея не надувать и повторно использовать. - person Atu; 19.12.2018
comment
@Atu единственные магические числа здесь: отступ между значком и текстом, который вам все равно придется установить, если вы создадите собственный макет, индекс представлений (текстовое представление и изображение) внутри элемента вкладки. но соглашусь, каждому свой вкус, не говорю что одно лучше другого. - person Raphael C; 19.12.2018
comment
Оно работало завораживающе. На данный момент это лучшее решение, которое я нашел для настройки значков с макетом вкладок. - person Amar; 01.08.2020

Используйте тот же код xml, который дал @juzamn, и просто добавьте эти небольшие корректировки в цикл для всей вкладки.

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);}
person XY-JOE    schedule 29.07.2017