I am using a theme with NoActionBar. Manifest file:
android:theme="#style/Theme.MaterialComponents.Light.NoActionBar"
I am using another Action bar, which I include to the layout:
<include layout="#layout/toolbar" />
However, I always get two Toolbars, and the upper one is the one, which would be there if I did not use NoActionBar theme. I found out, that if I delete this part in styles.xml file, it works as it should - there is no second action bar:
<style name="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
</style>
Of course I would like to keep this in the style.xml file as this helps to set up also the colour of the notification panel.
It seems to me this fails because Theme.MaterialComponents.Light.NoActionBar is an existant theme and you are creating it in the styles.xml so it overrides the existant one.
What I do is to create a new theme setting the one I want to edit as the parent theme:
<style name="AppNoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
</style>
And then set this new theme on the manifest:
android:theme="#style/AppNoActionBar"
This way you'll have the properties of the base theme (Theme.MaterialComponents.Light.NoActionBar) with the custom updates.
Related
I am developing an app and I am using the material design app bar and I want to use that single toolbar/app bar which I have declared in the main activity to each activity in my app.
You can specify whether you need a toolbar or not in your styles.xml file
<style name="MaterialAppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
see custom tab here i want to remove the complete this blue section ,actually i don't want those option and link to displayed in my custom tab. i don't want to show these option in my custom tab. any help ?? . i try to set them to invisible in its layout xml code
The key is in your styles.xml file.
Notice how mine says, NoActionBar
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Just set the styles.xml and activity_main.xml properties to any NoActionBar theme. There is second way within MainActivity place this line above setContentView() method:
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
Check this link for more info:
http://easyandroidtutorials.com/remove-title-bar-android-hide-action-bar/
I am new to Android themes, so this is probably a beginners question but I just can't figure it out.
<style name="MyAppTheme" parent="android:Theme.Material">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
</style>
I want to use the new Material theme, so I used Theme.Material with my own colorPrimary and primaryDark colors to get the action bar the way I want it. But for the context menu (the one that opens when you press the 3-dots icon in the top right corner) I want to use the Theme.Material.Light version. So I want the context menu with black text on a white background instead of white text on a gray background.
How can I do this?
I would advise against using the "Material" theme. It's not supported on older devices. However if you use AppCompat then it will achieve the same effect but with backwards compatibility.
If you create a new Activity using the template it will work as you want. Nevertheless, this is the code:
<!--Application-->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="popupTheme">#style/NewAppTheme.PopupOverlay</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
Add this theme to your Toolbar:
app:popupTheme="#style/myStyle"
Define backgroundcolor and textColor in your custom theme for the pop-up menu:
<style name="myStyle" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">yourBackgroundColor</item>
<item name="android:textColor"yourTextcolor></item>
</style>
If you are using ActionBar then use ActionBar Generator and use the generated files in your res folder.
Hope this helps.
I have a main activity qual touching default colors AppBar color is brown, but I want a secondary activity that the bar is green and one yellow. So that each activity has a different color.
This is what I've tried:
It applies to all activities
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
</style>
I wanted applies only to one but not how it works
<style name="CapAlumnes" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/botoAlumnes</item>
<item name="colorPrimaryDark">#color/botoAlumnes</item>
</style>
This is what I get:
Create different themes in styles with different primary and secondary colors.
Set each one of these themes to your individual activities in the Android manifest file.
<activity name="xyz" theme="styles/ mythemeColorGreen />
<activity name="xyd" theme="styles/ mythemeColorBlue />
In the Activity onCreate:
mToolbar.setBackgroundDrawable(new ColorDrawable(getResources()
.getColor(R.color.botoAlumnes)));
If APK >= 16
mToolbar.setBackground(new ColorDrawable(getResources()
.getColor(R.color.botoAlumnes)));
You can always just use the android:background attribute in your XML layouts.
I know there are a couple of questions about styling the contextual action bar (ActionMode) piece of the action bar, but they don't quite seem to address what I'm after.
I'm using the Toolbar with a light theme and dark action bar. The Toolbar looks like I want it, but the action mode looks like the regular dark theme. What do I need to change in my style to get the dark themed action mode (not just action bar)? It seems I should be able to do this quickly by tapping into Theme.AppCompat since that shows the CAB how I want it, but I don't want the rest of the application to be dark.
I'm only concerned about API 14+ and am using the support Toolbar in place of action bar.
Here is my base style
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:actionModeBackground">#color/colorActionMode</item>
<item name="android:windowActionModeOverlay">true</item>
</style>
Toolbar style
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/abc_primary_text_material_dark</item>
<item name="actionMenuTextColor">#color/abc_primary_text_material_dark</item>
<item name="android:textColorSecondary">#color/abc_primary_text_material_dark</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
Toolbar layout file (setting popupTheme here doesn't seem to have any effect).
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/AppTheme.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="2dp"
android:focusable="false"/>
Here's my Toolbar (which is how I want it)
Here's my ActionMode (which I need to invert)
Here's what I want the ActionMode to look like (which I got by changing my style to inherit from Theme.AppCompat instead of Theme.AppCompat.Light.DarkActionBar. The problem being that the rest of the application goes dark, which I don't want.
Start with overriding attribute actionModeStyle in your base theme:
<item name="actionModeStyle">#style/LStyled.ActionMode</item>
Define LStyled.ActionMode as:
<style name="LStyled.ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="titleTextStyle">#style/LStyled.ActionMode.Title</item>
<item name="subtitleTextStyle">#style/LStyled.ActionMode.Subtitle</item>
</style>
Finally:
<style name="LStyled.ActionMode.Title" parent="#style/TextAppearance.AppCompat.Widget.ActionMode.Title">
<item name="android:textColor">#color/color_action_mode_text</item>
</style>
<style name="LStyled.ActionMode.Subtitle" parent="#style/TextAppearance.AppCompat.Widget.ActionMode.Subtitle">
<item name="android:textColor">#color/color_action_mode_text</item>
</style>
This will override theme specified text color(s) for title & subtitle(if needed).
What's left is the overflow button. Fire up any image editing software that supports color-replacement. Use the overflow menu png from AppCompat's res/drawable-XXXX folder. Paint it white. Next, override actionOverflowButtonStyle in your base theme and specify the png you've just modified:
<item name="actionOverflowButtonStyle">#style/LStyled.OverFlow</item>
<style name="LStyled.OverFlow" parent="#style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/modified_overflow_icon</item>
</style>
There's not much of an explanation/tutorial that I can provide regarding customization of themes. The only way to get a hang of it is to go through [styles][themes].xml files from the framework. Reading the source code also helps - you'll get to know what attributes are being used and where/if they can be customized.
Point of mention:
I want to be able to extend a style to get the same behavior that's
built into the dark theme.
Yes, but this might not be desired. The part above that deals with modifying overflow menu icon can be substituted with an overridden colorControlNormal attribute. TintManager (Link) uses the color value from colorControlNormal to tint the overflow menu drawable (among other drawables). Take a look at the contents of array TINT_COLOR_CONTROL_NORMAL in the source code. But overriding colorControlNormal to fix one drawable may change the overall look & feel of the app for worse.
Check out this blog post which explains how to style the Toolbar to be dark:
http://android-developers.blogspot.ie/2014/10/appcompat-v21-material-design-for-pre.html
<android.support.v7.widget.Toolbar
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”#dimen/triple_height_toolbar”
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
You specify a Toolbar "style". What I think you're missing is the app namespaced "theme" property which applies the style to the Toolbar and all of its children.
Edit: This should work for your specific case
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:actionModeBackground">#color/colorActionMode</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/abc_primary_text_material_dark</item>
<item name="actionMenuTextColor">#color/abc_primary_text_material_dark</item>
<item name="android:textColorSecondary">#color/abc_primary_text_material_dark</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
I just want to add to Vikram's answer, specific to coloring the overflow button and other default controls in the action mode.
The 'colorControlNormal' item that defines the coloring of these buttons in the action mode has to be placed in the action bar theme, not the action mode style. Only then will it be used for overflows, done, close and back buttons within the action mode.
Try to use
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
instead.