TabWidget цвет нижней строки текущей вкладки

У меня есть TabWidget, для которого я включил и установил stripLeft и stripRight...

mTabHost.getTabWidget().setStripEnabled(true);
mTabHost.getTabWidget().setRightStripDrawable(R.drawable.redline);
mTabHost.getTabWidget().setLeftStripDrawable(R.drawable.redline);

Как вы можете видеть на изображении ниже, это не меняет цвет нижней строки текущей выбранной вкладки (TAB 2).

введите здесь описание изображения

Как я могу изменить цвет нижней строки выбранной в данный момент вкладки, которая в данный момент по умолчанию имеет синий цвет? (Я предполагаю, что синий цвет устанавливается в стиле AppTheme по умолчанию в styles.xml.)

Я посмотрел на это ответ, но он не говорит, как изменить цвет...


android android-tabs
person neo108    schedule 06.02.2013    source источник

Ответы (9)


arrow_upward
77
arrow_downward

Цвет индикатора вкладки задается селектором, который можно найти здесь и выглядит так:

<!-- AOSP copyright notice can be found at the above link -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
</selector>

Все чертежи, которые использует селектор, окрашены в этот голубой цвет. Вы можете заменить эти чертежи своими собственными перекрашенными версиями. Оригиналы выглядят так (оригиналы маленькие, ссылки прилагаются):

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

TabHost host = (TabHost)view.findViewById(R.id.tab_host);
TabWidget widget = host.getTabWidget();
for(int i = 0; i < widget.getChildCount(); i++) {
    View v = widget.getChildAt(i);

    // Look for the title view to ensure this is an indicator and not a divider.
    TextView tv = (TextView)v.findViewById(android.R.id.title);
    if(tv == null) {
        continue;
    }
    v.setBackgroundResource(R.drawable.your_tab_selector_drawable);
}

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

person Michael Celey    schedule 01.04.2013
comment
Эй, @MCeley, спасибо за твой ответ, чувак. Я тоже пытаюсь выполнить эту работу прямо сейчас, и что касается tab_unselected_holo, tab_selected_holo и т. Д., Все они в формате png, поэтому, чтобы заменить их, мне придется сделать свои собственные с разными цветами, но я не знаю размер PNG по умолчанию, и я не знаю, хорошо ли это работает. - person Michael Nana; 17.07.2013
comment
Просто загрузите изображения, ссылки на которые есть в моем посте, и сделайте их соответствующими этим размерам. - person Michael Celey; 17.07.2013
comment
Откатил ответ на то, что было изначально. Хотя android-holo-colors.com — это полезный сайт для создания целых тем, которые также изменят цвета вкладок, этот вопрос не касался создания темы. - person Michael Celey; 02.10.2013
comment
Можете ли вы сделать это без рисунков, но вместо этого с цветами? Я чувствую, что таким образом было бы намного проще редактировать тему, если бы я хотел, или я что-то упускаю? - person Nikola K.; 04.04.2015
comment
это безумие, это просто долбаный цвет индикатора и столько работы - person Tomasz Mularczyk; 02.07.2015
comment
Спасибо. Я подписан на это, чтобы иметь изображение. В приложении я использую Theme.Holo.Light.NoActionBar.Fullscreen, и это не позволяет мне использовать желтый цвет внизу вкладки. Он отображает только светло-голубой. Любое предложение! - person CoDe; 13.10.2015
comment
Извините @Shubh, но у меня ничего не выходит из головы. Я бы порекомендовал опубликовать это как отдельный вопрос и посмотреть, может ли кто-нибудь помочь вам с этим. - person Michael Celey; 13.10.2015
comment
Google умеет делать простые вещи сложными - person fnc12; 03.01.2016
comment
Как вы показываете индикатор вверху (а не внизу)? - person hadez30; 08.03.2016
comment
Вероятно, вам придется создать новый макет для каждого элемента виджета вкладки. Вероятно, вы могли бы сделать это с помощью тем, но есть несколько разных подходов, которые могут сработать. Это немного выходит за рамки этого вопроса/ответа, поэтому я бы рекомендовал опубликовать новый вопрос, чтобы получить более подробные ответы. - person Michael Celey; 10.03.2016
comment
Почему мы не можем просто использовать следующий атрибут, чтобы изменить цвет индикатора выбора? app:tabIndicatorColor="@color/theme_color". - person Rahul Raveendran; 28.10.2016
comment
@RahulRaveendran Этот вопрос / ответ был написан до того, как появилась библиотека поддержки дизайна, и эта функциональность была добавлена ​​​​на платформу. Я бы предложил написать ответ, в котором описано, как использовать вкладки библиотеки дизайна и как легко установить цвет, поскольку это было бы более подходящим и современным способом ведения дел. - person Michael Celey; 22.11.2016

arrow_upward
23
arrow_downward

Для этой цели вы можете использовать app:tabIndicatorColor. Он изменит цвет линии индикатора выбранной вкладки в соответствии с вашими требованиями.

<android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@android:color/white"
                    app:tabMode="fixed" />
person Nidhi    schedule 24.06.2016
comment
Я думаю, что он использует TabHost и TabWidget, а не TabLayout. - person James; 04.10.2016

arrow_upward
12
arrow_downward

Вот как я изменил свои вкладки,

private void changetabs(TabWidget tabWidget) {
    // Change background
    for(int i=0; i < tabWidget.getChildCount(); i++)
        tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_selector);
}

и мой tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

Hope it will help some one.

person Basim Sherif    schedule 01.08.2013
comment
Когда будут называться 'changetabs'?? - person Name is Nilay; 29.01.2015

arrow_upward
10
arrow_downward

Если кто-то наткнется на это, существует онлайн-инструмент для быстрого создания рисунков (9 патчей) для вкладок. Просто выберите цвет и нажмите кнопку Вот так ...

Благодаря Джеффу Гилфельту

Генератор стилей панели действий Android позволяет легко создать простой, привлекательный и цельный пользовательский стиль панели действий для вашего приложения Android. Он сгенерирует все необходимые девять ресурсов патчей, а также связанные XML-рисунки и стили, которые вы можете скопировать прямо в свой проект.

http://jgilfelt.github.io/android-actionbarstylegenerator/

person Ash    schedule 18.06.2014
comment
Это, безусловно, самый простой способ сделать это. СПАСИБО ДЖЕФФ! :D - person Sean Beach; 28.08.2014
comment
Здорово! Действительно простой способ изменить цвет нижней строки tabwidget. - person imthegiga; 19.10.2014
comment
Пытался использовать это, но он не меняет цвета вкладок, а только цвета панели вкладок; какие-либо предложения? - person John; 08.06.2015
comment
Да, я устал добавлять его, но он меняет только цвета индикатора вкладок, а не панель вкладок и цвета индикатора вкладок (цвет панели вкладок по умолчанию просто прозрачный) - person John; 09.06.2015

arrow_upward
6
arrow_downward

Вы можете использовать фильтр.
Он будет применен к непрозрачной области.

tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).getBackground().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);

Одна строка кода - нет необходимости менять состояния.

person Alexey O.    schedule 22.06.2015
comment
Так хорошо, но как изменить TextColor? После установки индикатора (TAB_A) - person Criss; 29.05.2016
comment
Вы только что спасли мой день. Я не понимаю, почему это не помечено как правильный ответ. - person Nivil Boban; 30.06.2017

arrow_upward
5
arrow_downward

Акцентный цвет используется по умолчанию в качестве активного цвета вкладки. Вы можете установить/изменить его в style.xml файле:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">

    <item name="colorAccent">@color/myAccentColor</item>

</style>
person dzikovskyy    schedule 26.10.2015
comment
Действительно просто и не нужно добавлять какие-либо дополнительные XML-файлы - person Jcorretjer; 02.01.2018

arrow_upward
2
arrow_downward

Мой способ решить эту проблему — использовать setBackgroundResource. Во-первых, вы должны создать точно такой же фон

line_label

<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
    <shape>
        <size android:height="50dp"/>
        <solid android:color="@android:color/transparent"/>
        <stroke android:color="@color/myColor" android:width="6dp"/>
    </shape>
</item>
pressed.xml

<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
    <shape>
        <size android:height="50dp"/>
        <solid android:color="@android:color/transparent"/>
        <stroke android:color="@color/myColor" android:width="6dp"/>
    </shape>
</item>

line_label_1.xml

<item>
    <shape>
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

а затем создайте tab_selector.xml следующим образом

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/line_label_1_pressed" android:state_selected="true"/>
<item android:drawable="@drawable/line_label_1"/>

then setbackgroudResource using tab_selector.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/tab_selector"
android:gravity="center_horizontal|center_vertical" />
person Ted_Liang    schedule 10.02.2014

arrow_upward
0
arrow_downward

Я нашел другое решение, откройте styles.xml и измените одну строку:

разрешение -> значения -> стили.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@android:color/holo_orange_light</item> <!-- set the color in this line -->
    <item name="windowNoTitle">true</item>
</style>

person skajar    schedule 20.09.2017

arrow_upward
-2
arrow_downward

Просто используйте что-то вроде

tabHost.setSelectedTabIndicatorColor(Color.WHITE);
person Nick Fedorov    schedule 01.10.2015