I need a help about to find a theme who fits in this part of my project, but first I believe is nice to explain first the structure of the activities to find the answer:
Example of project style
The main activity (left) don't have any Action Bar, because takes to much space from screen an the Action Bar, polluted the design and is useless in this point.
The main activity, depending on the option of user, can go to 2 others activities, but both of them are kind of the same of the right activity(not eeeequal equal... is just to explain.) that consists in a Action Bar on top with the text of the result, a button back, one fixed part with some informations, and a Tab Layout with 3 tabs, each one, is a fragment.
the problem starts obviously, in this second activity...
I followed this site to build the screen at first: https://www.androidhive.info/2015/09/android-material-design-working-with-tabs/
but, with this site, they use this style:
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
But using this style, with what i need, the result is this error:
android.view.InflateException: Binary XML file line #0: Binary XML file line #0: Error inflating class android.support.design.widget.TabLayout
So, to try to find the answer, i find this site over here: http://geeksmember.blogspot.com.br/2015/10/errorerror-inflating-class.html
Who shows me this solution on styles file:
<style name="AppTheme.Base" parent="android:Theme.Material">
Is a nice solution, is nice because in this moment i can separe the main style from the other style. Ok... buuuuut... when i start the aplication, comes this error:
java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
so... that's my question... because, when i use the "Theme.AppCompat.Light.DarkActionBar" comes the first error again... and i stay on this situation who i can't find a style who doesn't match with my needs...
If anyone needs the style file... (this is the style file for all the activities except the main activity)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base" />
<style name="AppTheme.Base" parent="***I Need a theme here, i know, this is my question*** :)">
<item name="android:colorPrimary">#212121</item>
<item name="android:colorPrimaryDark">#000000</item>
<item name="android:colorAccent">#303030</item>
</style>
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#80CBC4</item>
</style>
</resources>
You have two choices:
Use a different theme for your two activities
To do this, you'd create an "action bar theme" and a "no action bar theme":
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#212121</item>
<item name="colorPrimaryDark">#000000</item>
<item name="colorAccent">#303030</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then, in your manifest, you'd assign the first theme to your app, and the second theme to any screen you didn't want an action bar for:
<application
...
android:theme="#style/AppTheme">
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.NoActionBar">
...
</activity>
</application>
So this way, all screens will have an action bar by default, but any activity that should not have an action bar can be set up by specifying AppTheme.NoActionBar for that single activity.
Use a toolbar widget when you want an action bar
For this approach, you'd create your app theme to have no action bar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#212121</item>
<item name="colorPrimaryDark">#000000</item>
<item name="colorAccent">#303030</item>
</style>
Then, in any activity that should have an action bar, you'd add a Toolbar to your activity's layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
In your activity's onCreate() method, after setting your content view, you'd tell the system to use this toolbar as the action bar:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Related
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.
Just started learning developing android in android studio, and created a custom theme which needs to hide the action bar on a inheriting styling.
On runtime the theme actually does hides the action bar but the preview does not, which makes it a bit difficult creating a layout based on the preview.
I've probably done something wrong or just not understanding how to use theme's and stylings with the preview correctly.
The custom theme I've made
<style name="AppTheme" parent="Theme.AppCompat">
...
</style>
<style name="AppTheme.MainLayout">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
The intention is to use the .MainLayout styling on certain activities instead of the whole application.
How I'am applying the usage in manifest file
<application
...
android:theme="#style/AppTheme">
<activity android:name=".MainActivity"
android:theme="#style/AppTheme.MainLayout">
...
</activity>
</application>
As explained this does hides the action bar on runtime but doe'snt in the preview.
I also tested how the preview does behave on applying the style directly in the layout.xml file.
activity_main.xml
<RelativeLayout
...
android:theme="#style/AppTheme.MainLayout"
</RelativeLayout>
For testing purpose I've added an extra styling in the AppTheme.MainLayout
<item name="android:textColor">#color/colorPrimary</item>
Result
What I am observing on this is:
The preview doesn't hides the action bar but does apply other styling (like the text color) correctly.
To wrap this question up: why is the preview different on not hiding the action bar when using the .MainLayout, and how to fix this?
Thanks in advance.
Edit:
Preview 'settings'
In your Design layout manager try to select Theme (click AppTheme).
Try to change:
<style name="AppTheme" parent="Theme.AppCompat">
to:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
I'm making my app ready for Android 5.0, I'm using the latest compatibility library, here is what my style looks like.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
</resources>
(The ActionBar color is being set programmatically.)
Now, I want the overflow/popup menu to have the dark background like it had in the holo implementation, but I can't get it to work, here is what it looks like:
I have tried setting the popupMenuStyle but it didn't work.
How can I make the popup menu darker?
Stop using the ActionBar. If you want a ToolBar to be set up like an ActionBar, follow this guide on the android-developers blog.
It actually mentions your use case at Dark Action Bar and provides this code:
<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" />
Not a full answer but what I found so far:
In past versions you needed to specify a drawable (Check https://github.com/StylingAndroid/StylingActionBar code and tutorials)
Apparently, now that is a color. To modify it you need to do specify the following theme:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:actionBarPopupTheme">#style/popupNew</item>
</style>
<style name="popupNew" parent="android:ThemeOverlay.Material.Light">
<item name="android:colorBackground">#color/red</item>
</style>
</resources>
This works correctly if the theme applied to the app is just this.
If I add android:actionBarPopupTheme to my existing theme, it doesn't work. I am trying to figure out why.
Solved my problem by using this style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
<item name="actionModeBackground">#color/actionmode_bg</item>
</style>
<style name="AbStyle" parent="Widget.AppCompat.Toolbar">
<item name="elevation">2dp</item>
<item name="displayOptions">homeAsUp|showTitle</item>
<!--showHome-->
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
</style>
I had to use Widget.AppCompat.Toolbar as the parent actionBarStyle
Add the property popupTheme to your toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:theme="#style/Theme.AppCompat.Light"
app:popupTheme="#style/Theme.AppCompat" />
Or define a new style for your toolbar:
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/Theme.AppCompat.Light</item>
<item name="theme">#style/Theme.AppCompat</item>
</style>
This question has already been answered for styling via XML, but I'm adding an explanation here of how to work out the solution to this and similar styling questions yourself.
First, this is the solution when using AppCompat. To your App's style.xml add actionBarPopupTheme to your theme:
<style name="Theme.MyTheme" parent="#style/Base.Theme.AppCompat.Light.DarkActionBar">
...other stuff here
<item name="actionBarPopupTheme">#style/Theme.MyTheme.ActionBarPopupTheme</item>
</style>
<style name="Theme.MyTheme.ActionBarPopupTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#android:color/black</item>
</style>
Here's the steps I took to arrive at this solution (it takes a bit of detective work as the Android documentation is poor):
Open your App's style.xml in Android Studio
On the line where you App's theme is defined, put your screen cursor in the parent theme (e.g. click in #style/Base.Theme.AppCompat.Light.DarkActionBar) then press F4. This should take you to the source code for the style in the appcompat library.
Within this style I saw this line:
< item name="actionBarPopupTheme">#style/ThemeOverlay.AppCompat.Light< /item>
This looked like a possible place to change the theme of the popup. I searched for "actionBarPopupTheme" in the poor
Android developers documentation and found "Reference to a theme that should be used to
inflate popups shown by widgets in the action bar". So this was worth playing with.
I copied the appcompat line containing "actionBarPopupTheme" to my style.xml then in this line replaced the item's theme reference (the bit in bold above) with Theme.MyTheme.ActionBarPopupTheme.
In my style.xml I created my new style named Theme.MyTheme.ActionBarPopupTheme. I used the same parent that was used in the style I copied from the appcompat source (the bit in bold above).
To ensure my new popup style was working, I changed the parent style to ThemeOverlay.AppCompat.Dark then ran and tested the code on a device. The popup style changed, so now I knew my overriding of actionBarPopupTheme was the correct thing to do. Then I changed back to ThemeOverlay.AppCompat.Light.
The next challenge is to work out what item names to override in Theme.MyTheme.ActionBarPopupTheme. I changed the text and background colours. To find the correct item names that change the style of something can be tricky in some cases. One way to find less obvious style item names is to look through the style definitions in the appcompat xml file (the one you opened when pressing F4 in the 2nd step above), continually descending into parent styles (F4 again!) until you find something that may do what you want. Google searches will help here too.
I have used XML to define the Theme of the action bar for my Main activity to be as follows:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light" />
<style name="HomeTheme"
parent="#style/AppTheme">
<item name="android:actionBarStyle">#style/HomeActionBarStyle</item>
</style>
<style name="HomeActionBarStyle"
parent="#android:style/Widget.Holo.ActionBar">
<item name="android:displayOptions">showHome|showTitle</item>
</style>
Then in my Manifest file I have set the Theme of my activity with the defined Theme :
<activity
....
android:theme="#style/HomeTheme"
....
</activity>
everything went file as expected except two thing:
1) the border line of the action bar area is still blue
2) the background color of the action bar area is white not grey.
I am not sure what could be my mistake or this is just a bug in my emulator?
I need to solve the previous two points just to have beautiful GUI
Change
parent="#android:style/Widget.Holo.ActionBar"
to
parent="#android:style/Widget.Holo.Light.ActionBar.Solid"
By default the standard ActionBar has the blue line under it instead of the gray. The solid variant is probably what you're looking for.
I am the using the ActionBarSherlock. I have the displayOption "homeAsUp" in my style.xml file. Now this shows a black arrow next to the title of the Activity. Since my theme is White on a blue blackground, i want to change the color of the black arrow, or maybe use a whole new icon resource in its place. How can i do this ?
Kind Regards.
Further to Eric's answer - I wasted a lot of time getting this right.
Remember that these items must go in the parent application theme, inheriting from Theme.Sherlock or similar.
<!-- CUSTOM APP THEME -->
<style name="AppTheme" parent="Theme.Sherlock">
<item name="android:actionBarStyle">#style/AppTheme.ActionBarStyle</item>
<item name="actionBarStyle">#style/AppTheme.ActionBarStyle</item>
<item name="android:homeAsUpIndicator">#drawable/action_bar_ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">#drawable/action_bar_ic_ab_back_holo_dark</item>
</style>
Do not put them in the custom Action Bar theme inheriting from Widget.Sherlock.ActionBar.
<!-- ACTION BAR THEME -->
<style name="AppTheme.ActionBarStyle" parent="Widget.Sherlock.ActionBar">
<item name="android:icon">#drawable/action_bar_logo</item>
<item name="icon">#drawable/action_bar_logo</item>
<item name="android:displayOptions">showHome</item>
<item name="displayOptions">showHome</item>
</style>
Be careful when you style ActionBarSherlock !
Here is an extract from the web site (ActionBarSherlock Theming):
Due to limitations in Android's theming system any theme customizations must be declared in two attributes. The normal android-prefixed attributes apply the theme to the native action bar and the unprefixed attributes are for the custom implementation. Since both theming APIs are exactly the same you need only reference your customizations twice rather than having to implement them twice.
So in your case you MUST define two item:
<item name="android:homeAsUpIndicator">#drawable/icon</item>
and
<item name="homeAsUpIndicator">#drawable/icon</item>
Then you are sure that ALL your users will have the same L&F