There is this useful information and everything works well:
http://docs.appcelerator.com/platform/latest/#!/guide/Android_Themes
The image is also very helpful:
The problem is that I want to have white or very light gray in the top bar. When I set this as "android:textColorPrimary", however, the text is white in the top bar, but in all alerts for instance as well making it invisible/very difficult to read.
How can I set the text color of the bar to white and theme the alert messages and other text in the default text color (dark gray)?
The themeAndroid.xml in app/platform/android/res/values looks like this
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="materialTheme" parent="#style/Theme.AppCompat.Light">
<item name="colorPrimary">#2e7d32</item>
<item name="colorPrimaryDark">#005005</item>
<item name="colorAccent">#80d8ff</item>
<item name="colorSwitchThumbNormal">#49a7cc</item>
<item name="android:colorButtonNormal">#49a7cc</item>
<item name="android:textColorPrimary">#DADADA</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
</style>
If you want to style the color of the actionbar font you need to extend your theme like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.MyThemeActionbar" parent="Theme.AppCompat">
<item name="colorPrimary">#FF0000</item>
<item name="colorPrimaryDark">#000000</item>
<item name="actionBarStyle">#style/CustomTheme.ActionBarStyle</item>
<item name="actionBarTheme">#style/Theme.ActionBarTheme</item>
<!-- tab -->
<item name="actionBarTabTextStyle">#style/TabStyle</item>
<item name="android:actionBarTabTextStyle">#style/TabStyle</item>
</style>
<style name="Theme.ActionBarTheme" parent="style/Widget.AppCompat.Light.ActionBar">
<!-- actionbar arrow -->
<item name="colorControlNormal">#ffffff</item>
</style>
<style name="CustomTheme.ActionBarStyle" parent="style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<!-- actionbar -->
<item name="elevation">0dp</item>
<item name="android:actionMenuTextColor">#FFFFFF</item>
<item name="android:titleTextStyle">#style/CustomTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/CustomTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="CustomTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<!-- actionbar font -->
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="TabStyle" parent="style/Widget.AppCompat.Light.ActionBar.TabText">
<!-- tab font -->
<item name="android:textColor">#ffffff</item>
</style>
</resources>
Then you can set the font color and the primary color to a different value and leave other thinks to the default values
Related
How to increase the text size of RadioGroup in AlertDialog made using setSingleChoiceItems?
This is what we tried but did not work.
<style name="DialogButtonStyle" parent="Widget.Material3.Button.TextButton.Dialog" tools:keep="#style/DialogButtonStyle">
<item name="android:textColor">#color/orange</item>
</style>
<!-- AlertDialog theme on both light and night mode -->
<style name="AppDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog" tools:keep="#style/AppDialog">
<!-- Background color -->
<!--<item name="colorSurface">#color/colorWhite_Primary</item>-->
<!-- Message color -->
<item name="colorOnSurfaceVariant">#color/white_black</item>
<item name="buttonBarPositiveButtonStyle">#style/DialogButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/DialogButtonStyle</item>
<item name="materialAlertDialogBodyTextStyle">#style/AppDialog.Body</item>
<item name="alertDialogStyle">#style/MaterialAlertDialog.App</item>
</style>
<style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.Material3" tools:keep="#style/MaterialAlertDialog_App">
<item name="shapeAppearance">#style/ShapeAppearance.App.MediumComponent</item>
<item name="shapeAppearanceOverlay">#null</item>
</style>
<style name="AppDialog.Body" parent="#style/MaterialAlertDialog.MaterialComponents.Title.Text">
<item name="android:textAppearance">#style/AppDialog.Body.Appearance</item>
</style>
<style name="AppDialog.Body.Appearance" parent="#style/TextAppearance.MaterialComponents.Subtitle1">
<item name="android:textSize">34sp</item>
</style>
I found the answer here, it should be checkedTextViewStyle instead of materialAlertDialogBodyTextStyle. It's a shame that Material 2 documentation is better than Material 3.
styles.xml
<resources>
<style name="CustomTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/CustomBar</item>
<item name="actionBarStyle">#style/CustomBar</item>
</style>
<style name="CustomBar" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/black</item>
<item name="android:src">#drawable/home</item>
<item name="background">#color/black</item>
<item name="src">#drawable/home</item>
</style>
</resources>
The Above code doesn't work as android:src is not found, however i wish to achieve the intended effect of this.
I have a company logo that i want to use as the action bar main image, but don't want to use static image for full background colouring. The logo image, #drawable/home has a transparent background.
How would i style the action bar to include an image as well as a background colour?
I don`t know that we have src, here is the code what worked for me:
to set the image this is what I use:
<item name="android:background">#drawable/headerflowerimage</item>
Please find the whole code here:
<!-- the theme applied to the application or activity -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/SActionBar</item>
<!--- Support library compatibility-->
<item name="actionBarStyle">#style/SActionBar</item>
<item name="android:actionBarTabStyle">#style/STabBars</item>
<!-- Support library compatibility -->
<item name="actionBarTabStyle">#style/STabBars</item>
</style>
<!-- ActionBar tabs styles -->
<style name="STabBars" parent="#style/Widget.AppCompat.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">#color/tabbar_background</item>
<item name="android:backgroundStacked">#color/background_material_light</item>
<item name="android:actionBarTabTextStyle">#color/greyrish_s</item>
<!-- Support library compatibility -->
<item name="background">#color/tabbar_background</item>
<item name="backgroundStacked">#color/background_material_light</item>
<item name="actionBarTabTextStyle">#color/greyrish_s</item>
</style>
<!-- ActionBar styles -->
<style name="SActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/headerflowerimage</item>
<item name="android:titleTextStyle">#style/sTitleColor</item>
<item name="android:displayOptions">showTitle</item>
<!-- Support library compatibility -->
<item name="background">#drawable/headerflowerimage</item>
<item name="titleTextStyle">#style/sTitleColor</item>
<item name="displayOptions">showTitle</item>
</style>
How can I change the default logo icon of an ActionBar to be a custom image? Similar as how it works on Whatsapp?
The ActionBar uses the android:logo attribute of your manifest, if one is provided. That lets you use separate drawable resources for the icon (Launcher) and the logo (ActionBar, among other things).
So you should add this tag into manifest like ..
<application
android:logo="#drawable/custom_image"
Update :
You can use ActionBar.setLogo() for runtime. Two versions are there setLogo(int resId) and setLogo(Drawable logo).
Read Define custom Logo for ActionBar (different than Logo) in XML? which will help you to define some styles also.
The simplest technique is to use setIcon(R.drawable.icon_name) Similarly you can do with the Title and you can also set the date in the action bar subtitle.
ActionBar ab= getActionBar();
ab.setTitle("Aries");
ab.setSubtitle(dateFormat.format(date));
ab.setIcon(R.drawable.aries3d);
You need to customize the ActionBarSherlock. Include an xml called "styles_mytheme.xml" in values folder:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.Styled" parent="#style/Theme.Sherlock.Light">
<item name="actionBarStyle">#style/CustomActionBarStyle</item>
<item name="android:actionBarStyle">#style/CustomActionBarStyle</item>
<item name="android:actionBarItemBackground">#drawable/overflow_selector</item>
<item name="android:itemBackground">#drawable/overflow_selector</item>
<item name="android:actionBarWidgetTheme">#style/CustomActionOverflowDropDownText</item>
<item name="actionBarWidgetTheme">#style/CustomTitleColorBar</item>
<item name="android:icon">#drawable/ic_nav_home_back</item>
<item name="android:homeAsUpIndicator">#drawable/ic_nav_back</item>
<item name="icon">#drawable/ic_nav_home_back</item>
<item name="dropDownListViewStyle">#style/DropDownStyles</item>
<item name="android:dropDownListViewStyle">#style/DropDownStyles</item>
</style>
<style name="CustomActionBarStyle" parent="#style/Widget.Sherlock.ActionBar">
<!-- define background for action bar (sets default for all parts of action bar - main, stacked, split) -->
<item name="android:background">#drawable/navigation</item>
<item name="background">#drawable/navigation</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<!-- Style for the color title bar -->
<style name="CustomTitleColorBar" parent="#style/TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">12sp</item>
</style>
<style name="CustomActionOverflowDropDownText" parent="Widget">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#style/TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="My_Theme" parent="Theme.Sherlock">
<item name="android:popupMenuStyle">#style/MyApp.PopupMenuStyle</item>
<item name="popupMenuStyle">#style/MyApp.PopupMenuStyle</item>
</style>
<style name="MyApp.PopupMenuStyle" parent="Widget.Sherlock.ListPopupWindow">
<item name="android:popupBackground">#drawable/navigation</item>
</style>
<style name="DropDownStyles" parent="Widget.Sherlock.ListView.DropDown">
<item name="android:divider">#null</item>
<item name="android:listSelector">#drawable/overflow_selector</item>
</style>
</resources>
Now include this xml in the code:
setTheme(Theme.Styled);
Now change these three lines, when you change these three lines, the icon will change:
<item name="android:icon">#drawable/ic_nav_home_back</item>
<item name="android:homeAsUpIndicator">#drawable/ic_nav_back</item>
<item name="icon">#drawable/ic_nav_home_back</item>
if(getSupportActionBar() != null) {
getSupportActionBar().setDisplayUseLogoEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setIcon(R.drawable.add_contact);
}
I'm trying to change the background color to black in styles.xml. The background changes fine but the actionbar got dirty. Some part of the actiobar background stays the same while the other portion turns black. I don't want the actionbar to change color. Please help
<style name="Theme.ApplicationTheme" parent="#style/Theme.Sherlock">
<item name="android:background">#000000</item> <!-- This line is changing the actionbar color -->
<item name="actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
</style>
<style name="Widget.MyApplicationTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#2d2d2d</item>
<item name="background">#2d2d2d</item>
</style>
Add following two additional items:
<item name="android:windowBackground">#000000</item>
<item name="android:colorBackground">#000000</item>
So that your style would look like:
<style name="Theme.ApplicationTheme" parent="#style/Theme.Sherlock">
<item name="android:background">#000000</item> <!-- This line is changing the actionbar color -->
<item name="android:windowBackground">#000000</item>
<item name="android:colorBackground">#000000</item>
<item name="actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
</style>
I am having problem setting the drawable for the divider. My style.xml looks like this:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="HCLTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/HCLActionBarStyle</item>
<item name="actionBarStyle">#style/HCLActionBarStyle</item>
<item name="android:actionBarTabBarStyle">#style/HCLActionBarTabBarStyle</item>
<item name="android:actionBarTabStyle">#style/HCLActionBarTabStyle</item>
</style>
<style name="HCLActionBarStyle" parent="android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/hcl_actionbar_drawable</item>
<item name="background">#drawable/hcl_actionbar_drawable</item>
<item name="android:titleTextStyle">#style/HCLActionBarTitle</item>
</style>
<style name="HCLActionBarTabBarStyle" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/divider</item>
<item name="android:dividerPadding">0dp</item>
</style>
<style name="HCLActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#drawable/action_bar_tab_style</item>
</style>
<style name="HCLActionBarTitle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
In the HCLActionBarTabBarStyle I'm setting the #drawable/divider as the tab divider. This drawable is a 9patch image, a vertical black line.
Before i set the divider drawable in the xml I'm getting the normal white divider like this:
After i set the drawable in the styles.xml i get this:
So as you can see the divider just gets wider, and its not the black vertical line from the 9patch image. I'm not even sure what the drawable for the divider has to be? A picture or layer list, or can it be a color? In fact i tried all of these 3 but with no success.
Use the property of "actionBarDivider" on the custom style.
Something like below
<style name="AppTheme" parent="AppBaseTheme">
<!-- You app specific customization -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionMenuTextColor">#color/menu_state_list</item>
<item name="android:actionBarTabStyle">#style/tabStyle</item>
<item name="android:actionBarTabTextStyle">#style/tabTextColor</item>
<!-- Set it like this -->
<item name="android:actionBarDivider">#drawable/verticle_marker_thin</item>
</style>
create tab divider picture
in styles add an item shown below
<item name="android:actionBarTabBarStyle">#style/customTabBar</item>
code for devider in action bar tab indicator
<style name="customTabBar" parent="#style/Widget.AppCompat.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<!-- give your divider here -->
<item name="android:divider">#drawable/tabindicator</item>
<item name="android:dividerPadding">0dp</item>
where #drawble/tabindicator is a picture in drawble