This is driving my nuts and it's probably really simple.
I know how to change a theme in my app. I think I just need to change this line in AndroidManifest.xml:
android:theme="#style/AppTheme"
You just change AppTheme to whatever themes you have in values/styles.xml.
However, my styles.xml file is boring:
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<style name="AppTheme" parent="AppBaseTheme">
</style>
I.e. I don't think there is a theme?
Where do I download themes? What do I need.. presumably a styles.xml and some assets (e.g. images). I'm mainly a back-end programmer and I just want something that looks a little more interesting than the default theme.
Thanks.
You can't download pre-written themes for android that i know of. You can use some snippets from the internet and make a styles.xml for yourself. For example the code below is a custom theme:
<resources>
<!-- Base application theme is the default theme. -->
<style name="Theme" parent="android:Theme">
</style>
<!-- Variation on our application theme that has a translucent
background. -->
<style name="Theme.Translucent">
<item name="android:windowBackground">#drawable/translucent_background</item>
<item name="android:windowNoTitle">true</item>
<item name="android:colorForeground">#fff</item>
</style>
<!-- Variation on our application theme that has a transparent
background; this example completely removes the background,
allowing the activity to decide how to composite. -->
<style name="Theme.Transparent">
<item name="android:windowBackground">#drawable/transparent_background</item>
<item name="android:windowNoTitle">true</item>
<item name="android:colorForeground">#fff</item>
</style>
<style name="TextAppearance.Theme.PlainText" parent="android:TextAppearance.Theme">
<item name="android:textStyle">normal</item>
</style>
</resources>
Put this thing in the styles.xml file in the values folder. Change the colorForeground etc to create your own theme. Add your own images in the drawable folder and reference them here and so on.
Related
I am trying to understand the theming and styling system of Android and basically attempt to do the simplest thing - change the default color of TextView texts.
According to the source code of TextView the default style would be:
<item name="textViewStyle">#style/Widget.TextView</item>
Looking at this style I discover the following:
<style name="Widget.TextView">
<item name="textAppearance">?attr/textAppearanceSmall</item>
....
</style>
It seems that the default textAppearance is set to textAppearanceSmall (from the theme).
I look into themes.xml for the referenced textAppearanceSmall and find this:
<item name="textAppearanceSmall">#style/TextAppearance.Small</item>
Aha - it references this TextAppearance.Small:
<style name="TextAppearance.Small">
<item name="textSize">14sp</item>
<item name="textColor">?textColorSecondary</item>
</style>
Ok, we are getting somewhere - maybe? By default TextView uses the color "textColorSecondary".
First immediate question: Why is it references so weirdly? (questionmark but not like '?attr/textColorSecondary')?
I go back to the themes.xml file and discover this:
<item name="textColorSecondary">#color/secondary_text_dark</item>
At this point I am pretty sure that I have to override textColorSecondary in my custom AppTheme like so:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#00CC00</item>
</style>
This does of course not work... the question is - why?
BTW: All the files I am looking at (theme.xml & styles.xml) reside in my Android SDK directory:
C:\AndroidSDK\platforms\android-26\data\res\values
Try this:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:textColor">#color/white</item>
</style>
Android Studio 2.1 preview 3
This is just a question, as I am confused as I have seen many alternatives in doing this.
I have created a new android project and my Activity extends AppCompatActivity
public class MainActivity extends AppCompatActivity {
I want to have the transparent statusbar on devices running 21 and over.
So in my values/styles I have the following
<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>
</resources>
And in my values-21/styles I have the following
<resources>
<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>
<!-- Make the statusbar transparent -->
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
My Manifest I select the theme
android:theme="#style/AppTheme"
Just some questions
Is this the correct way, or is there any better way to do this?
Would values-21/styles inherit all the colors in values/styles so I would have to repeat this?
It's the right way. May I suggest you to organize your style better?
values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="CommonTheme">
</style>
<style name="CommonTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
values-v21/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="CommonTheme">
<!-- All customization of the theme for this version -->
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
So you don't need to repeat the common values of the style for every api level.
I will try to answer it giving some references
Maintaining Compatibility
To avoid duplication of code, define your styles inside res/values/,
modify the styles in res/values-v21/ for the new APIs, and use style
inheritance, defining base styles in res/values/ and inheriting from
those in res/values-v21/
So you should try to avoid code duplication in your style.xml at different folders res/values/ and res/values-v21/ by using style inheritance.
Style Inheritence
If you want to inherit from styles that you've defined yourself, you
do not have to use the parent attribute. Instead, just prefix the name
of the style you want to inherit to the name of your new style,
separated by a period.
If you want to inherit a style that you've defined yourself you can skip adding a parent attribute and inherit from it using a dot or period notation.
With this, you can define a base theme BaseTheme in res/values/ with different colors and inherit from it as BaseTheme.StyledStatusBar without specifying a parent attribute.
<resources>
<style name="BaseTheme.StyledStatusBar"></style>
<!-- Base application theme. -->
<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
In values-21/, add item android:windowTranslucentStatus to BaseTheme.StyledStatusBar
<resources>
<style name="BaseTheme.StyledStatusBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
In manifest, select the theme
android:theme="#style/BaseTheme.StyledStatusBar"
1) Is this the correct way, or is there any better way to do this?
Yes. That's the correct/recommended way of having different values for different API versions.
2) Would values21/styles inherit all the colors in values/styles so I would have to repeat this?
I'm not sure I fully follow this question. Both styles you showed will inherit from Theme.AppCompat.Light.NoActionBar so your colors should be declared again, but I'll present two better alternatives:
Alternative 1, a little bit better:
Use a BaseTheme that is common for both. To view the code for it, please check #mimmo-grottoli answer.
Alternative 2, much better:
If the only different on the two themes is the android:windowTranslucentStatus that was introduced in KitKat (API level 19), you can put it all in the same theme in values/styles, like the following:
<resources>
<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>
<!-- Make the statusbar transparent -->
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
The Android Framework ignores XML parameters that it does not recognize. That means that on JellyBean or ICS, the device will ignore windowTranslucentStatus while correctly applying the colors and in KitKat and up, it will correctly apply windowTranslucentStatus.
That tricky is valid for all XML in Android (even layouts), the IDE might give you warnings about API level, but in XML they're always safe to use.
Different folders of values/styles are made to give a unique style when your app is running on a specific version of Android.
So yes you are right when saying that the newer version inherits from the older one. When adding items in your latest version of styles you keep the latest version up to date to the latest APIs.
To conclude, your way is the very commun way, it's an organized and a clean way to keep your app updated.
Is this the correct way, or is there any better way to do this?
Yes. That's the right way of having different values for different API versions.
Would values-21/styles inherit all the colors in values/styles so I would have to repeat this?
Yes
technically <item name="android:windowTranslucentStatus">true</item> won't give you fully transparent statusbar.
If you want it to by fully transparent, you can use <item name="android:statusBarColor">#android:color/transparent</item>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:buttonStyle">#style/button_style</item>
</style>
<style name="button_style" parent="#android:style/Widget.Button">
<item name="android:background">#drawable/simple_button</item>
</style>
</resources>
And I've verified that simple_button works - if I manually assign it to a button's background, it shows up in the app.
Do you have only one styles.xml file? Check this.
Generally has a number of styles.xml files. (ex> values/styles.xml, values-v21/styles.xml, etc...) and Check your device information.
Try using
<item name="buttonStyle">#style/button_style</item>
instead of:
<item name="android:buttonStyle">#style/button_style</item>
Android Studio 1.1.0. SDK 22 Installed&Compiled, SDK 17 Target (I suppose it's not relevant, because issue occurs also on preview in IDE).
I started playing with Holo theme action bar styling and ran into an issue, involving background color. This is my styles.xml:
<resources>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:background">#ff0d3200</item>
<item name="android:actionBarStyle">#style/BarTheme</item>
</style>
<style name="BarTheme" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#443322</item>
</style>
</resources>
And this is output. I want app title's background color to be the same as action bar's. As I've said, it's the same on the preview, so I don't think it's because my phone(SDK17) or emulator. Overflow button behaves the same way, there just isn't any in this case.
I tried setting android:titleTextStyle in BarTheme to this style:
<style name="TitleTheme" parent="android:TextAppearance.Holo">
<item name="android:background">#443322</item>
</style>
But it didn't change a thing. What do I do to overcome this?
try ,
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">value</item>
<item name="android:titleTextStyle">#style/TitleColor</item>
</style>
<style name="TitleColor" parent="android:TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">value</item>
</style>
Due to David's input I solved my problem myself. I had to set windowBackground, instead of background in AppTheme. I'm not sure what is the exact difference, but it works properly. Remember not to change attribute in your BarTheme, because it won't work with windowBackground. Therefore correct styles.xml file is:
<resources>
<color name="bcColor">#ff0d3200</color>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:windowBackground">#color/bcColor</item>
<item name="android:actionBarStyle">#style/BarTheme</item>
</style>
<style name="BarTheme" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#443322</item>
</style>
</resources>
Note that color has to be defined as resource in this case and cannot be hardcoded. The clean way to do this is create colors.xml in values folder and define all colors there.
Hello I'm making a custom theme for my app. I want to have a custom ActionBar and background for the rest of the app (below the ActionBar). I'm wondering how to do the background. Right now I have:
<style name="MyTheme" parent="android:Theme.Holo">
<item name="android:actionBarStyle">#style/dActionBar</item>
</style>
<style name="dActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#4C721D</item>
<item name="android:textColor">#FFFFFF</item>
</style>
Would I just have to do <item name-"android:background"></item> in MyTheme or would I have to create another style? After I create this do I need to put it in the res/styles folder? Also what are the API restrictions on this, if any?
Don't forget to apply your theme to your application in your AndroidManifest.xml.
<application android:theme="#style/CustomActivityTheme" ... />
You can find all the information about styling the Actionbar here.
To style your ActionBar with a nice Holo-look, try this website
Hope this helps!
Try to use below code in your Style.xml file
<resources>
<style name="Theme.Sample" parent="Theme.AppCompat">
<item name="android:colorBackground">#color/primary_material_dark</item>
<item name="actionBarTheme">#color/colorGray</item>
</style>
</resources>
Just need to use android:colorBackground as a name of item to define the background color like as below:
<item name="android:colorBackground">#color/primary_material_dark</item>
Hope you get your answer,Thanks.