I am trying to add colours to tabs of action bar with the help of following link-https://github.com/thecodepath/android_guides/wiki/ActionBar-Tabs-with-Fragments
I added following statements to style.xml-
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabStyle">#style/MyTheme.ActionBar.TabView</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:background">#12ABEE</item>
<item name="android:actionMenuTextColor">#ffffff</item>
<item name="android:titleTextStyle">#style/myTheme.ActionBar.Text</item>
</style>
<style name="myTheme.ActionBar.Text" parent="#android:style/TextAppearance">
<item name="android:textColor">#ffffff</item>
<item name="android:textStyle">bold</item>
<item name="android:gravity">center</item>
</style>
<style name="MyTheme.ActionBar.TabView" parent="android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#drawable/tab_bar_background</item>
</style>
Also i created tab_bar_background.xml in drawable-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- UNSELECTED TAB STATE -->
<item android:state_selected="false" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom indicator color for the UNSELECTED tab state -->
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#65acee" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
<!-- SELECTED TAB STATE -->
<item android:state_selected="true" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Tab background color for the SELECTED tab state -->
<item>
<shape>
<solid android:color="#cef9ff"/>
</shape>
</item>
<!-- Bottom indicator color for the SELECTED tab state -->
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#5beea6" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
With these steps in place it should show tab with light blue backgroung(#cef9ff) and green bottom line(#5beea6) on selected and blue bottom line and normal background on unselected.But unfortunately while running i see that bottom line appears fine but the background colour of tab appears black both for selected and unselected tabs.I am not able to figure out wht went wrong..
Updating tab_bar_background.xml to this solved my problem
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- UNSELECTED TAB STATE -->
<item android:state_selected="false" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom indicator color for the UNSELECTED tab state -->
<item >
<shape >
<stroke android:color="#e8e8e8" android:width="25dp" />
</shape>
</item>
</layer-list>
</item>
<!-- SELECTED TAB STATE -->
<item android:state_selected="true" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Tab background color for the SELECTED tab state -->
<!-- Bottom indicator color for the SELECTED tab state -->
<item>
<shape >
<stroke android:color="#ffd866" android:width="25dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
Related
Hello Learned Friends,
I am using Material Design Theme but I need to overried its statePressed so that when the button is clicked it changes color (highlighted for a moment) as demonstrated below.
For this I have a drawable which I set on the buttons as follows
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape>
<solid android:color="#color/primaryColor" />
<stroke android:color="#color/primaryDarkColor" android:width="#dimen/stroke_width"/>
<corners android:radius="#dimen/corner_radius" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="#color/secondaryColor" />
<stroke android:color="#color/secondaryLightColor" android:width="#dimen/stroke_width" />
<corners android:radius="#dimen/corner_radius" />
</shape>
</item>
I also got a ThemeOverlay to override the state pressed
<style name="ThemeOverlay.Red.UnitedStates" parent="">
<item name="android:colorPressedHighlight">#color/secondaryColor</item>
</style>
Unfortunately when I click the buttons the highlight doesn't happen.
What could I be missing?
This is Material Theme XML
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryVariant">#color/primaryLightColor</item>
<item name="colorPrimaryDark">#color/primaryDarkColor</item>
You can use just the app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/custom_button_selector"
../>
with:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/red600" android:state_pressed="true"/>
<item android:color="?attr/colorPrimary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>
Normal state:
Pressed state:
I am using radioButton in my app but by default my radioButton color is black and when I select it that turns to color accent color that I have mentioned in my color.xml but I want to change radioButton initial color and selected color to white color. How I am able to do so. I tried background color but it changes background color property. Please help.
First Put this code in style.xml
<!-- custom style -->
<style name="radionbutton"
parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#drawable/rb_drawable</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
</style>
Now make rb_drawable.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="true"/>
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="false"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="true"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="false"/>
</selector>
Now make 2 more files for radio button check/uncheck in drawable folder
radio_unchecked.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
radio_checked.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
</item>
<item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
<shape android:shape="oval">
<solid android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
</item>
</layer-list>
Finally change style of radio button in layout xml
<RadioButton
android:layout_width="wrap_content"
style="#style/radionbutton"
android:checked="false"
android:layout_height="wrap_content"
/>
I want to change the color of my tab, this is my code
action_bar_stacked_background.xml
<!-- STATES WHEN BUTTON IS NOT PRESSED -->
<!-- Non focused states -->
<item android:drawable="#drawable/tab_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="#drawable/tab_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:drawable="#drawable/tab_unselected" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="#drawable/tab_selected" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
My styles.xml
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
<item name="background">#color/background_lista</item>
<item name="actionModeBackground">#color/actionbar_color</item>
<item name="titleTextStyle">#style/MyActionBarTitleText</item>
<item name="subtitleTextStyle">#style/MyActionBarSubtitleText</item>
<item name="homeAsUpIndicator">#drawable/ic_actionbar_back_button</item>
<!-- Support library compatibility -->
<item name="actionBarTabStyle">#style/MyActionBarTabs</item>
Support library compatibility -->
<!-- <item name="background">#drawable/actionbar_background</item> -->
</style>
<style name="MyActionBarTabs" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/action_bar_stacked_background</item>
</style>
My values-v11/styles.xml
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
<item name="background">#color/actionbar_color</item>
<item name="android:actionModeBackground">#color/actionbar_color</item>
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
<item name="android:subtitleTextStyle">#style/MyActionBarSubtitleText</item>
<item name="android:homeAsUpIndicator">#drawable/ic_actionbar_back_button</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTabs</item>
<!-- Support library compatibility -->
<!-- <item name="background">#drawable/actionbar_background</item> -->
</style>
<style name="MyActionBarTabs" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/action_bar_stacked_background</item>
</style>
tab_selected.xml
<!-- draw bottom line to fill the spaces between tabs -->
<item android:top="63dp">
<shape android:shape="rectangle" >
<solid android:color="#898989" />
</shape>
</item>
<!-- leave bottom line only 1px of height, the rest is masked out -->
<item
android:bottom="1px"
android:top="63dp">
<shape android:shape="rectangle" >
<solid android:color="#color/color_background_stacked" />
</shape>
</item>
<!-- draw tab background -->
<item
android:left="#dimen/tab_space"
android:right="#dimen/tab_space">
<shape android:shape="rectangle" >
<corners
android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="0.1dp"
android:topLeftRadius="#dimen/corner_radius"
android:topRightRadius="#dimen/corner_radius" />
<gradient
android:angle="90"
android:endColor="#ccc"
android:startColor="#color/color_background_stacked" />
<stroke
android:width="1px"
android:color="#898989" />
</shape>
</item>
<!-- mask out the bottom line of the tab shape -->
<item
android:left="#dimen/tab_space_plus1"
android:right="#dimen/tab_space_plus1"
android:top="63dp">
<shape android:shape="rectangle" >
<solid android:color="#color/color_underline_stacked" />
</shape>
</item>
and tab_unselected.xml
<item android:top="63dp">
<shape android:shape="rectangle" >
<solid android:color="#898989" />
</shape>
</item>
<item
android:bottom="1px"
android:top="63dp">
<shape android:shape="rectangle" >
<solid android:color="#color/color_background_stacked" />
</shape>
</item>
<item
android:left="#dimen/tab_space"
android:right="#dimen/tab_space">
<shape android:shape="rectangle" >
<corners
android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="0.1dp"
android:topLeftRadius="#dimen/corner_radius"
android:topRightRadius="#dimen/corner_radius" />
<gradient
android:angle="90"
android:endColor="#aaa"
android:startColor="#ddd" />
<stroke
android:width="1px"
android:color="#898989" />
</shape>
</item>
The tabs are shown with grey bcakground and blue underline, I just want to change de underline color. How can I solve it?
Greetings.
actionBarTabStyle attribute should be with the base Application/Activity theme , not under ActionBar style
Create a custom theme like this
<style name="AppTheme" parent="Theme.Base.AppCompat">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTabView</item>
<item name="actionBarTabStyle">#style/MyActionBarTabView</item>
</style>
And, custom ActionBarTab theme like this
<style name="MyActionBarTabView" parent="Widget.AppCompat.Base.ActionBar.TabView">
<item name="android:background">#drawable/action_bar_stacked_background</item>
</style>
Set the AppTheme to whole Application theme or for an Activity . Let me know how it works.
In my project I have a ViewPager that is not linked to the action bar and I'm having problems with setting the font size of the text for the tabs. I'm using ViewPagerIndicator (v2.4.1) in combination with ActionBarSherlock (v4.3.1).
The layout I'm using is:
<com.viewpagerindicator.TabPageIndicator
android:id="#+id/artistIndicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/artistPager"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:minHeight="50dp" />
This is within a LinearLayout inside a ScrollView. The layout works as expected and I see no problems with the interaction between the ScrollView and my ViewPager.
Styling of the ViewPager and tabs is done with the following XML:
<style name="ArtistIndicatorTheme" parent="AppTheme">
<item name="vpiTabPageIndicatorStyle">#style/ArtistInfoTabPageIndicator</item>
</style>
<style name="ArtistInfoTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#drawable/tab_background</item>
<item name="background">#android:color/white</item>
<item name="android:textAppearance">#style/ArtistInfoTabPageIndicator.Text</item>
</style>
<style name="ArtistInfoTabPageIndicator.Text" parent="#style/TextAppearance.TabPageIndicator">
<item name="android:textColor">#drawable/tab_text_color</item>
<item name="android:textSize">#dimen/activity_position_artistinfo_font_size</item>
<item name="android:textStyle">bold</item>
</style>
The background of the tabs is handled by the following XMLs to create a actual tab-style look:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_background_unselected" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_background_selected" />
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_background_unselected" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_background_selected" />
</selector>
And the two shape XMLs for selected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/text_inverted" />
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip">
<shape android:shape="rectangle" >
<solid android:color="#color/text_inverted" />
</shape>
</item>
</layer-list>
and unselected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/text_inverted" />
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip" android:right="2dip">
<shape android:shape="rectangle" >
<solid android:color="#color/text_important" />
</shape>
</item>
</layer-list>
The current font size is set by the following dimension:
<dimen name="activity_position_artistinfo_font_size">15dp</dimen>
Any indication on what I'm doing wrong?
I have implemented Action bar Sherlock with theme.sherlock. The action bar has navigation tab. I have used styles for customizing the action bar. The style xml is shown below
<resources>
<style name="MyTheme" parent="Theme.Sherlock">
<item name= "actionBarStyle">#style/ActionStyle</item>
<item name="actionBarTabTextStyle">#style/MyTabTextStyle</item>
</style>
<style name= "ActionStyle" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#drawable/actionstyle</item>
<item name="background">#drawable/actionstyle</item>
</style>
<style name="MyTabTextStyle" parent="Widget.Sherlock.ActionBar.TabText" >
<item name="android:textColor">#0EBFE9</item>
<item name ="android:textStyle">bold</item>
<item name= "android:textSize">14dp</item>
</style>
</resources>
the drawable action style
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray" />
</shape>
</item>
</layer-list>
I need to
remove the divider between action bar and navigation tab
show blue divider below the navigation tab
All you have to do is setting the background property of your xml. You can set the "color" transparent to remove it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip">
<shape android:shape="rectangle">
<solid android:color="#color/action_bar_color" />
</shape>
</item>
</layer-list>
Afterwards apply it in your theme:
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
<item name="background">#drawable/action_bar_background</item>
</style>