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:

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>

Answer 1

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

1. 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'

2. Download the archive and unpack it.

3. 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)

4. 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.