Android app layout background shows through controls in layout

Question

I have an Android app with a GridView where each item is a LinearLayout of two Buttons and two TextViews. When I set the LinearLayout's background color to white, the buttons are grey. However, if I change the background color, the surface of the buttons also get tinted with that color. How can I prevent this?

Example with strong color:

enter image description here

Buttons should be light gray, not reddish-gray.

Grid item layout XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"
    android:background="@drawable/grid_cell_max">

    <Button
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="+"
        android:includeFontPadding="false"
        android:paddingBottom="4dp"
        android:paddingTop="4dp"
        android:id="@+id/buttonPlus"
        android:layout_gravity="center_vertical"
        android:textSize="24sp"
        android:gravity="center_vertical|center_horizontal" />

    <Button
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="-"
        android:textSize="24sp"
        android:includeFontPadding="false"
        android:paddingBottom="4dp"
        android:paddingTop="4dp"
        android:id="@+id/buttonMinus"
        android:layout_gravity="center_vertical"
        android:gravity="center_vertical|center_horizontal" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="8dp"
        android:paddingTop="1dp"
        android:paddingBottom="2dp"
        android:orientation="vertical">
        <TextView
            android:id="@+id/buildingTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lines="1"
            android:shadowDx="1"
            android:shadowDy="1"
            android:shadowRadius="2"
            android:shadowColor="@android:color/darker_gray"
            android:ellipsize="end"
            android:textSize="15sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/buildingInfo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11sp"
            android:lines="2"
            android:ellipsize="end"
            android:lineSpacingExtra="-2dp"/>
    </LinearLayout>
</LinearLayout>

drawable/grid_cell_max.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape= "rectangle"  >
    <solid android:color="#ffe6ffe3"/>
    <stroke android:width="1dp"  android:color="#c0c0c0"/>
</shape>

I tried that, but it ruins the 3D effect of button and shows only a big grey rectangle. — Arthur, Feb 04 '15 at 09:13
Added an image from the Android Studio layout editor to demonstrate the problem. — Arthur, Feb 04 '15 at 10:57
what about making a customized background to buttons like the one **grid_cell_max.xml** — Muhammed Refaat, Feb 04 '15 at 11:22
This answer says it's quite some work to do that: http://stackoverflow.com/questions/18070008/android-button-background-color — Arthur, Feb 04 '15 at 11:33

score 2 · Accepted Answer · answered Feb 06 '15 at 11:56

Unfortunately, I don't think there's an easy way to do this. The way I resolved this issue was:

Use Android holo colors generator to generate new resources:
- Make sure to select the color you need for your button (under 'Theme Name')
- Make sure to switch 'Colored Button' to 'Yes'
Download the archive and unpack it.
Merge only the drawable folders from the unpacked project into yours (only the button image resources and the button selector xml file - located in drawable)
Set the background of your buttons to:

android:background="@drawable/apptheme_btn_default_holo_light"

You'll now have a opaque button with the color you selected from the android holo colors generator.

If you want all your app buttons to behave the same way, you'll have to update the app theme. To do this, follow the steps above and afterwards update your 'styles.xml' file:

<style name="AppTheme" parent="android:Theme.Holo.Light">
   <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>

<style name="ButtonAppTheme" parent="android:Widget.Holo.Light.Button">
   <item name="android:background">@drawable/apptheme_btn_default_holo_light</item>
</style>

Also, if you do this, you can remove the button background from xml. I couldn't find another solution if you want to keep the 'Theme.Holo.Light' app theme.

Thanks, this solution is partly working. Normal buttons look good now, but the generator creates a transparent image for the disabled state so the background color still shows through disabled buttons. Do you know any way to get rid of that? — Arthur, Feb 06 '15 at 15:31
You could generate a new set of images, with a darker grey color and replace the disabled/disabled_focused, with the new normal/normal_focused — Spiri, Feb 06 '15 at 19:44

Android app layout background shows through controls in layout

1 Answers1