Editing XML Style Sheets Changes Buttons in Android

Question

I'm working on an Android app and decided I wanted to change the colors across the whole app, so I used an xml style sheet. This changed my colors, but it didn't change my EditText, TextView, and Button colors, so I had to make an individual style sheet for each element and then call those sheets from within the main color sheet I was using.

However, once I did that, the colors acted appropriately for the three widgets, but the boxes shrunk and disrupted our entire layout. We believe it's because we had overridden the default styles for those, but I thought the way it was written, we were merely overriding the color options.

I'd like to figure out how to change the colors of EditText, TextView, and Button, but not change their formatting.

The Styles.xml for our project:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<color name="oldblue">#33b5e5</color>
<color name="gungrey">#9C9C9C</color>
<color name="textGold">#ffe27e</color>
<color name="backgroundBlack">#000000</color>
<color name="buttonGrey">#222222</color>


<!--
    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.Light">
    <!--
        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>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
            <item name="android:textColor">@color/textGold</item>
            <item name="android:windowBackground">@color/backgroundBlack</item>
            <item name="android:colorBackground">@color/backgroundBlack</item>
            <item name="android:editTextStyle">@style/TextEditStyle</item>
            <item name="android:textViewStyle">@style/TextViewStyle</item>
            <item name="android:buttonStyle">@style/OurButtonStyle</item>
</style>


<!-- Allows us to edit the EditText field -->
<style name="TextEditStyle" parent="android:Widget.EditText"> 
    <item name="android:background">#e3e3e3</item> 
</style>

<!-- Allows us to edit the TextView words (much of the app text) -->
<style name="TextViewStyle" parent="android:Widget.TextView">
    <item name="android:textColor">@color/textGold</item>
</style>

<!-- Allows us to edit the Buttons in the app -->
<style name="OurButtonStyle" parent="android:Widget.Button">
    <item name="android:textColor">@color/textGold</item>
    <item name="android:background">@color/buttonGrey</item>
    <item name="android:padding">10dp</item>
    <!-- This line here helped us fix the issue with the buttons colliding with the textboxes, but ideally, we want to change a single thing and fix all the widgets and not have to use padding here -->


</style>    


</resources>

Our app is using Linear Layout on all of our pages. We would like to keep it this way if possible. Please let me know if you need to see any screenshots or xml code of the individual pages. They're all having the same error, though.

Thanks for any help you can give!

score 0 · Answer 1 · answered Apr 21 '14 at 18:13

0

Instead of android:, try prefacing your parent references with @android:style/.

answered Apr 21 '14 at 18:13

JstnPwll

8,585
2
33
56

Just changed `android:Widget.EditText` to `@android:style/Widget.EditText` and the like, and nothing seemed to change. – user2465164 Apr 21 '14 at 18:18

score 0 · Answer 2 · edited May 23 '17 at 11:58

When you're modifying the background attribute for aButton or EditText, you're replacing the entire background that already exists which is why you're losing all the "formatting".

So with a Button, the default buttons you see are actual images.

For example, btn_default_normal_holo.9.png located in (path-to-sdk)\platforms\android-19\data\res\drawable-xhdpi

btn_default_normal_holo.9.png

One way is to create 9 patch images to create your background. You can refer to the answer by Basim Sherif here. In that question, it asks a similar question to yours. So in this case you can use the existing images and modify the colors.

Otherwise, you will need to set your own styles (drawables and selectors) to "match" the original formatting or using your own formatting.

Also note that since you set the background of your buttons to a color, there aren't any selectors anymore (like changing the color when the button is selected).

Editing XML Style Sheets Changes Buttons in Android

2 Answers2