[英]How to change color of Selected Tab
How to change color of tab when its selected, see below screen shot:如何在选中时更改选项卡的颜色,请参见下面的屏幕截图:
i am showing Orange color in ActionBar, in a same way i wanna show orange color in place of light blue.我在 ActionBar 中显示橙色,以同样的方式我想显示橙色而不是浅蓝色。
To show Orange color in ActionBar background, i am using below code:要在 ActionBar 背景中显示橙色,我使用以下代码:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.MyAppTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">@style/Theme.MyAppTheme.ActionBar</item>
</style>
<style name="Theme.MyAppTheme.ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#FF4444</item>
</style>
</resources>
I really recommend you to use the Actionbar Style Generator .我真的建议您使用Actionbar Style Generator 。
With that tool you can easily theme your graphic elements in your toolbar.使用该工具,您可以轻松地将工具栏中的图形元素设为主题。
Just add the following 2 attributes in your tab layout. 只需在选项卡布局中添加以下2个属性即可。
app:tabSelectedTextColor="@color/color_primary_text"
app:tabTextColor="@color/color_secondary_text"
Whole tablayout in xml looks like below xml中的整个tablayout如下所示
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:background="@color/button_background"
android:fillViewport="true"
app:tabBackground="@drawable/fixed_bottom_button"
app:tabIndicatorColor="@color/color_primary_text"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/color_primary_text"
app:tabTextColor="@color/color_secondary_text" />
put this function and call it to yout Activity and pass tabhost as a parameter把这个函数调用到你的 Activity 并将 tabhost 作为参数传递
public static void setTabColor(TabHost tabhost) {
for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++) {
tabhost.getTabWidget().getChildAt(i)
.setBackgroundResource(R.drawable.header_blank); // unselected
}
tabhost.getTabWidget().setCurrentTab(0);
tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab())
.setBackgroundResource(R.drawable.tab_selected_new); // selected
// //have
// to
// change
}
call this as following way将其称为以下方式
setTabColor(tabHost);
tabHost.setOnTabChangedListener(new OnTabChangeListener() {
@Override
public void onTabChanged(String arg0) {
setTabColor(tabHost);
}
});
hope this is useful to you希望这对你有用
Style your custom theme like below. 如下所示设置您的自定义主题。
<item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item>
after that 之后
<style name="Widget.TabWidget">
<item name="android:textAppearance">@style/TextAppearance.Widget.TabWidget</item>
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
</style>
<style name="TextAppearance.Widget.TabWidget">
<item name="android:textSize">14sp</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">@android:color/tab_indicator_text</item>
</style>
Or you can use following code. 或者您可以使用以下代码。
tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.RED);
or 要么
tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#4E4E9C"));
Hope it helps you . 希望它能帮到你。
myTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener(){
@Override
public void onTabChanged(String tabId) {
int tab = myTabHost.getCurrentTab();
View view = myTabHost.getTabWidget().getChildAt(tab).setBackgroundColor(Color.CYAN);
}
});
use this code in order to change the color of selected tab:-使用此代码来更改所选选项卡的颜色:-
tabLayout.setTabTextColors(Color.parseColor("color_for_unselected_tab"), Color.parseColor("color_for_tab"));
for tab-indicator
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#627179")));
要更改标签栏背景:
actionBar.setStackedBackgroundDrawable(new ColorDrawable(yourOwnColor));
Create an selector file which consist your desire color apply on tab xml like below:创建一个包含您想要的颜色的选择器文件,应用于选项卡 xml,如下所示:
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) Josh Clemm 2010
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item android:state_selected="true" android:state_focused="false"
android:state_pressed="false" android:drawable="@drawable/dm_tab_highlight" />
<!-- Inactive tab -->
<!-- <item android:state_selected="false" android:state_focused="false" -->
<!-- android:state_pressed="false" android:drawable="@drawable/tabbarbg" /> -->
<!-- Pressed tab -->
<item android:state_pressed="true" android:drawable="@drawable/dm_tab_highlight" />
</selector>
You can use this code and set icon alpha , it look like one is selected and other are disable.您可以使用此代码并设置图标 alpha ,看起来一个被选中,另一个被禁用。
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 1:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 2:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(255);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(128);
break;
case 3:
tabLayoutUserProfileTabs.getTabAt(0).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(1).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(2).getIcon().setAlpha(128);
tabLayoutUserProfileTabs.getTabAt(3).getIcon().setAlpha(255);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
you can use like this你可以这样使用
tab_background_select.xml tab_background_select.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="@drawable/tab_background" />// for selected
<item android:drawable="@drawable/tab" /> // for normal
</selector>
you can use this code and set the background of your item_tab xml file您可以使用此代码并设置 item_tab xml 文件的背景
tab_selection.xml tab_selection.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false"
android:drawable="@drawable/tab_bg_selected" />
<item android:state_selected="false" android:state_pressed="false"
android:drawable="@drawable/tab_bg_unselected" />
<item android:state_pressed="true"
android:drawable="@drawable/tab_bg_pressed" />
</selector>
Use this line app:tabSelectedTextColor="@color/colorPrimaryDark" in your xml在您的 xml 中使用这一行app:tabSelectedTextColor="@color/colorPrimaryDark"
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabMode="scrollable"
android:layout_alignParentBottom="true"
app:tabSelectedTextColor="@color/colorPrimaryDark"
app:tabIndicatorColor="@color/colorPrimaryDark"
>
</com.google.android.material.tabs.TabLayout>
// you can change tab text and indicator using this // 您可以使用此更改选项卡文本和指示器
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="@color/gray2"
app:tabSelectedTextColor="@color/orange2"
app:tabIndicatorColor="@color/orange2"/>
</com.google.android.material.appbar.AppBarLayout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.