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
.)
Я посмотрел на этот ответ, но он не говорит, как изменить цвет...
9 ответов
Цвет индикатора вкладки устанавливается с помощью селектора, который можно найти здесь и который выглядит следующим образом:
<!-- 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>
Все элементы рисования, которые использует селектор, окрашены в светло-голубой цвет. Вы можете заменить эти рисунки на свои собственные перекрашенные версии. Оригиналы выглядят так (оригиналы маленькие, ссылки включены):
- tab_unselected_holo
- tab_selected_holo
- tab_unselected_focused_holo
- tab_selected_focused_holo
- tab_unselected_pressed_holo
- tab_selected_pressed_holo
Вы захотите скопировать вышеупомянутый селектор в свой собственный проект вместе с рисованными объектами. Затем вы захотите перекрасить рисунки в любой цвет, какой хотите. Затем вы захотите установить селектор в качестве фона для индикаторов вкладок. Вы можете сделать это следующим образом (после настройки вкладок):
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);
}
Возможно, существует более простой способ сделать это, установив собственный макет индикатора клиента с помощью селектора фона, но это то, что мне сработало проще всего.
Вы можете использовать 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" />
Вот как я изменил свои вкладки,
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" />
Надеюсь, это поможет кому-нибудь.
Если кто-то спотыкается об этом, есть онлайн-инструмент для быстрого создания отрисовок (9 патчей) для вкладок. Просто выберите цвет и нажмите кнопку. Вот и все...
Благодаря Джеффу Гилфелту
Генератор стилей панели действий Android позволяет легко создавать простой, привлекательный и удобный стиль панели действий для вашего приложения Android. Он сгенерирует все необходимые девять патч-ресурсов, а также соответствующие XML-файлы и стили, которые вы можете скопировать прямо в ваш проект.
http://jgilfelt.github.io/android-actionbarstylegenerator/
Вы можете использовать фильтр,
Это будет применено к области, которая не прозрачна
tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).getBackground().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);
Одна строка кода - не нужно менять состояния.
Цвет акцента используется по умолчанию в качестве активного цвета вкладки. Вы можете установить / изменить его в style.xml
файл:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorAccent">@color/myAccentColor</item>
</style>
Мой способ решить эту проблему - использовать setBackgroundResource. Во-первых, вы должны создать точно такой же фон
line_label_1_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"/>
затем setbackgroudResource с использованием 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" />
Я нашел другое решение, открою styles.xml и изменил одну строку:
res -> values -> styles.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>
Просто используйте что-то вроде
tabHost.setSelectedTabIndicatorColor(Color.WHITE);