Long story short, I have an app in which I applied style attributes directly on activities and fragment's XML files. And now I am refactoring that into a styles.xml file. I barely dare to mess with modifying the theme itself directly, because I already tried something similar before and inheritance became chaos.
So, I have several styles like this in my styles.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<style name="My_DarkMode" parent="Theme.MyApp">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
</style>
<style name="My_DarkMode.MaterialToolbar">
<item name="android:background">#color/purple_500</item>
</style>
<style name="My_DarkMode.TextView">
<item name="android:textColor">#color/white</item>
</style>
<style name="My_DarkMode.HighlightedText">
<item name="android:textColor">#color/yellow_4text</item>
</style>
<style name="My_DarkMode.TabLayout">
<item name="android:background">#color/tab_grey</item>
<item name="tabIndicatorColor">#color/tab_indicator</item>
<item name="tabSelectedTextColor">#color/tab_selected_text</item>
<item name="tabTextColor">#color/tab_text</item>
</style>
<style name="My_DarkMode.FragmentBg">
<item name="android:background">#color/black</item>
</style>
<style name="My_DarkMode.MainBg">
<item name="android:background">#color/activity_grey</item>
</style>
<style name="My_DarkMode.SearchBar">
<item name="android:background">#color/white</item>
<item name="android:textColor">#color/black</item>
</style>
<!-- etcetera... -->
So, I replaced the hardcoded atributes by one of these styles in the XML objects within activities and fragments. This works fine. (please notice that different XML "view objects" might use one or another of all these styles).
And here comes the question:
So, let's imagine that I take all those styles and make a copy of every single one of them, but with different name: instead of naming them My_DarkMode or My_DarkMode.*, I name them My_LightMode, and change completely the color palette for these "LightMode styles" (so, using them like some kind of theme whatsoever).
So, the idea would be switching programatically this:
<!-- It's a little pseudo-code, for summarizing the thing -->
<TextView
style="#style/My_DarkMode.TextView"
android:id="[...]" />
<TextView
style="#style/My_DarkMode.HighligthedText"
android:id="[...]" />
<!-- [...] -->
...into this (but for much more XML elements than this):
<TextView
style="#style/My_LightMode.TextView"
android:id="[...]" />
<TextView
style="#style/My_LightMode.HighlightedText"
android:id="[...]" />
<!-- [...] -->
What would be the proper way to, by Java (y'know, by clicking some button or something like that: I'm not concerned about how to trigger it for this question, but rather which instructions should I use), switching the styles to be applied? Can't I somehow group all those styles into a single theme or something? It looks like I have no choice but to do something similar to this, because if I apply some of this from the theme and let inheritance do its stuff, then the SearchView inherits white letters (with white background; so you can see what I mean by chaos)... but also, my knowledge about Android styles and themes is, indeed, limited.
For the record
I am aware that this approach of mine might not be a good one at all. Among other things: because of my ignorance about how Styles, Themes and style inheritance hierarchy works in Android. (I mean, maybe my XML code would be too WET if I keep this approach? I wonder...) If so, a more clean approach is welcome.
If this was HTML and CSS instead, I would be able to figure this out much more easier for some reason, or so I think...
EDIT:
For real: no matter how much I read docs like Themes or how the theme main color attribute work... the more I read, the more confused I get. Trial and error is not helping much either... recently I tried to remove all styles from XML layouts and start the theme from scratch; and trying what it is inside this link i find out that if I do this:
<item name="colorBackground">#color/purple_500</item>
...colorBackground just doesn't exist! One more of countless times that something didn't work as in the docs... sigh...
So here goes: the "theme from scratch". Forget all style= that I set up earlier: I removed them all.
My themes.xml:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- all these ones were before, I started tweaking
them and see what happens -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/black</item>
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/white</item>
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- <item name="toolbarStyle">#style/My_DarkMode.MaterialToolbar</item> -->
<item name="toolbarStyle">#style/Widget.MaterialComponents.Toolbar.PrimarySurface</item>
<item name="drawerArrowStyle">#style/Theme.MyApp.DrawerArrowStyle</item>
<!-- and here I add new ones I din't knew before
and start playing with them like crazy -->
<item name="colorSurface">#color/activity_grey</item>
<item name="colorOnSurface">#color/white</item>
<item name="colorOnPrimarySurface">#color/yellow_4text</item>
<item name="colorContainer">#color/activity_grey</item>
<item name="colorOnBackground">#color/yellow_4text</item>
<!-- It doesn't exist... sigh... vVv -->
<!-- <item name="colorBackground">#color/black</item> -->
</style>
I am having a really hard time trying to imagine, discover or reach which general theme attributes to tweak for trivialities like having all TextViews showing text with the same color, or why colorSurface or colorContainer paint grey the <NavigationView>, but not the <ConstraintLayout>'s backgrounds?? I am trying to keep everything as similar as it was before, but with a centralized theme that I can switch from a single place programatically.
I read lots of links in "Android Developers" about styles and themes and how they are supposed to work together... but they don't clearly show howto! It would be great if there was a canonical way to join several styles in a single theme or something like that... so, you could apply different styles to different views by just switching the theme, just like it would work, more or less, with CSS classes.
Old:
(before wanting to extract a theme)
New mess:
(removed styles from Layouts and started modifying Theme from scratch)
Related
As much as I learn, I still have a long way to go ...
I'm trying to use Facebook SDK to provide details for a sign up.
I am using a blue, yellow and white theme for my app; the text being white. My style setup is:
<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">#android:color/holo_orange_light</item>
<item name="android:colorBackground">#color/colorMainBackground</item>
<!--<item name="android:actionBarStyle">#style/ThemeActionBar</item>-->
<!--<item name="android:windowActionBarOverlay">true</item>-->
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorLink">#android:color/holo_orange_light</item>
<!-- Support library compatibility -->
<!--<item name="actionBarStyle">#style/ThemeActionBar</item>-->
<!--<item name="windowActionBarOverlay">true</item>-->
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:titleTextColor">#color/yellow</item>
<item name="android:textColorPrimaryInverse">#android:color/black</item>
<item name="android:navigationBarColor">?android:attr/statusBarColor</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
However, when Facebook shows a dialog box, all I get is a white square:
It would appear that Facebook are using my textcolor and hence the white box. Is there a way I can override this? Or have Facebook use the default colour scheme (if there is one).
This is somewhat frustrating me now.
My Manifest entry for Facebook is:
<activity
android:name="com.facebook.FacebookActivity"
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="#string/app_name" />
Thanks in advance
Facing the same issue. It seems FacebookActivity picks up the color from the style you declared in the application tag.
<application
...
android:theme="#style/AppTheme'>
You see it white because in styles.xml you have the accent color to white. for your theme.
<item name="colorAccent">#FFF</item>
Since in my application I need the colorAccent to be another color, I chose to have two AppThemes. One for my activities with whatever colorAccent I need and one for the application that will get used by Facebook.
I tried to add a theme to com.facebook.FacebookActivity but it gets ignored. Something to do with ManifestMerging.
<style name="Theme_Base_App" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
I simply copied the above code to my styles.xml file and I copied
android:theme="#style/Theme_Base_App"
into my manifest file. How do I now change the color of this action bar?
Also, can someone explain me what exactly I am doing by using these lines of code? What is the manifest file for? And what am I doing in the Styles.xml file?
To change your color just set the colorPrimary in your colors.xml file.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">your color</color>
</resources>
Using this style you are defining your custom theme inheriting from AppCompat theme.
<!-- inherit from the material theme -->
<style name="Theme_Base_App" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
</style>
You can refer this link for more info.
The Android Manifest file presents essential information about your app to the Android system. With
android:theme
you are defining a reference to a style resource defining a default theme for all activities in the application. Individual activities can override the default by setting their own theme attributes. For more information, see the Styles and Themes developer guide.
Here you can find more info about Manifest and application element in the Manifest.
I'm new to android development and wanted to make a tabbed application, so I started with google's file form the documentation and I would like to remove the most above part of the action bar (where the logo and the app name stands). I've tried styling it like this:
<resources>
<style name="ThemeHoloWithActionBar" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
<item name="android:actionBarSize">50dip</item>
</style>
<style name="ActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:minHeight">50dip</item>
</style>
hoping that it would push the size of the other bar to 0 but it didn't work.
Edit:
when using:
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
I Can't get the error formatted correctly so I uploaded an image :
http://i.imgur.com/ED7InpD.jpg
If you don’t need the action bar, you can remove it from your entire app or from individual activities. This is appropriate for apps that never used the options menu or for apps in which the action bar doesn’t meet design needs (such as games). You can remove the action bar using a theme such as Theme.Holo.NoActionBar or Theme.DeviceDefault.NoActionBar.
in style.xml add this:
<resources>
<style name="NoActionBar" parent="#android:style/Theme.Holo.NoActionBar">
<!-- Your style here -->
</style>
</resources>
in AndroidManifest.xml add this:
<!-- [...] -->
<application android:name="#style/NoActionBar"
<!-- [...] -->
or try with this:
<!-- [...] -->
<application android:theme="#style/NoActionBar">
<!-- [...] -->
To remove actionbar, you need add:
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
to your AppTheme style file, after remove, then you can not use default actionbar to add tabs.
If you still want to use tabs, then you have to use SlidingTabLayout to make a custom ViewPager title strip. There is Android sample project SlidingTabsBasic, which show detail how to make custom tabs.
I was making an android app in eclipse, using some Holo elements in the UI. It worked fine. Then I deleted the eclipse and sdk folder, and redownloaded it. Didn't touch the app at all in the interim. Now all the holo effects are gone, as you can see in the pictures below. How can I fix this? Thanks.
Before:
After:
Here is my styles.xml:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Black">
<item name="android:editTextStyle">#style/edittext_holo</item>
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<style name="edittext_holo" parent="#android:style/Widget.EditText">
<item name="android:focusable">true</item>
<item name="android:focusableInTouchMode">true</item>
<item name="android:clickable">true</item>
<item name="android:background">#drawable/edit_text_holo_dark</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textColorHint">#FFFFFF</item>
<item name="android:textColorHighlight">#FF0000</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
</style>
</resources>
The problem is that your AppBaseTheme style inherits from android:Theme.Black.
This is the pre-Holo default theme.
Your theme should inherit from a Holo theme (such as android:Theme.Holo). Based on your screenshot, you want Theme.Holo.Light.DarkActionBar, so your styles.xml should look like this:
<style name="AppBaseTheme" parent="android:Theme.Holo">
If you are supporting any SDK version below 14, this should go in the values-14/styles.xml file, as Holo does not exist on pre-14 devices.
For more information, see the Styling the Action Bar and the Styles and Themes documentation.
I have the following preference screen in my app
<PreferenceScreen
xmlns:android="http://schemas.android.com/apk/res/android">
<EditTextPreference
android:key="edittexvalue"
android:id="#+id/edittextvalue"
android:title="Title Here"
android:summary="Summary Here"
android:defaultValue="Some Value"/>
<Preference
android:key="customPref"
android:title="Title Here"
android:summary="Summary Here"/>
</PreferenceScreen>
All of that works just fine however my app i have custom backgrounds and text colors/sizes but i can't figure out how to format the PreferenceScreen I assume you point this at another xml? but can't figure out the code i need and what changes should be made. The main concern is the background color the text is fine i guess but the background just doesn't match the rest of my app. So i'd like to set a custom background color lets say red for now (#ff0000)
I thank anyone that can help me with this problem
You can to apply a theme to it in your manifest, for example
<activity android:name=".Settings"
android:theme="#style/YourStyle"/>
and in your styles.xml (if you dont have one, create it in the values folder)
you can modify whatever you need
For example
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="YourStyle" parent="android:Theme.Light">
<item name="android:listViewStyle">#style/Widget.ListView</item>
<item name="android:windowNoTitle">true</item>
</style>
<style name="Widget" parent="android:Widget">
</style>
<style name="Widget.ListView">
<item name="android:background">#color/white</item>
<item name="android:divider">#color/gray_division</item>
<item name="android:dividerHeight">2dip</item>
</style>
</resources>
I hope this helps