Button color won't change after modifying background color

Question

I'm building my first Android app which is modeled after the default iOS / OS X calculator app. iOS calculator

And the current layout looks like this

enter image description here

In my layout i've modified the background of the number keys, but now when they are clicked the background color won't change to a darker grey like the default behavior. Is this something I need to add to @drawable resource? And is there anyway to modify the layout so that it fills the device screen and not leave empty space at the bottom?

fragment_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity$CalculatorFragment"
    android:orientation="vertical"
    android:background="#ffd3d3d3"
    android:weightSum="1">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/zero"
        android:id="@+id/textView"
        android:fontFamily="helvetica"
        android:textSize="65sp"
        android:textAlignment="gravity"
        android:gravity="end"
        android:textColor="#FFFFFF"
        android:background="#545454"
        android:layout_weight="0.15" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:columnCount="4"
        android:rowCount="4">

        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:fontFamily="helvetica"
            android:text="@string/AC"
            android:id="@+id/AC"
            android:layout_weight="0.25"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp" />
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/plusminus"
            android:fontFamily="helvetica"
            android:id="@+id/plusminus"
            android:layout_weight="0.25"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/percent"
            android:fontFamily="helvetica"
            android:id="@+id/percent"
            android:layout_weight="0.25"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/div"
            android:fontFamily="helvetica"
            android:id="@+id/div"
            android:layout_weight="0.25"
            android:background="#FF9900"
            android:textColor="#FFFFFF"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/nine"
            android:id="@+id/nine"
            android:layout_weight="0.25"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/eight"
            android:id="@+id/eight"
            android:layout_weight="0.25"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/seven"
            android:id="@+id/seven"
            android:layout_weight="0.25"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/mult"
            android:text="@string/mult"
            android:layout_weight="0.25"
            android:background="#FF9900"
            android:textColor="#FFFFFF"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/six"
            android:id="@+id/six"
            android:layout_weight="0.25"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/five"
            android:id="@+id/five"
            android:layout_weight="0.25"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/four"
            android:id="@+id/four"
            android:layout_weight="0.25"
            android:fontFamily="helvetica"
            android:background="#e5e5e5"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/minus"
            android:id="@+id/minus"
            android:layout_weight="0.25"
            android:background="#FF9900"
            android:textColor="#FFFFFF"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/three"
            android:id="@+id/three"
            android:layout_weight="0.25"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/two"
            android:id="@+id/two"
            android:layout_weight="0.25"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/one"
            android:id="@+id/one"
            android:layout_weight="0.25"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/plus"
            android:id="@+id/plus"
            android:layout_weight="0.25"
            android:background="#FF9900"
            android:fontFamily="helvetica"
            android:textColor="#FFFFFF"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="0.5"
            android:text="@string/zero"
            android:id="@+id/zero"
            android:background="#e5e5e5"
            android:fontFamily="helvetica"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/dec"
            android:id="@+id/dec"
            android:layout_weight="0.25"
            android:fontFamily="helvetica"
            android:background="#e5e5e5"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
        <Button
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:text="@string/equal"
            android:id="@+id/equal"
            android:layout_weight="0.25"
            android:background="#FF9900"
            android:fontFamily="helvetica"
            android:textColor="#FFFFFF"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="30sp"/>
    </LinearLayout>
</LinearLayout>

score 1 · Answer 1 · answered Mar 18 '15 at 10:37

using padding option and change relatvilayout

<Relativelayout xmlns:android="http://schemas.android.com/apk/res  /android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity$CalculatorFragment"
android:orientation="vertical"
android:background="#ffd3d3d3"
android:weightSum="1">


<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="@string/zero"
    android:id="@+id/textView"
    android:fontFamily="helvetica"
    android:textSize="65sp"
    android:textAlignment="gravity"
    android:gravity="end"
    android:textColor="#FFFFFF"
    android:background="#545454"
    android:layout_weight="0.15" />
 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:columnCount="4"
    android:rowCount="4"
    android:padding ="5dp">

    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:fontFamily="helvetica"
        android:text="@string/AC"
        android:id="@+id/AC"
        android:layout_weight="0.25"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp" />
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/plusminus"
        android:fontFamily="helvetica"
        android:id="@+id/plusminus"
        android:layout_weight="0.25"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/percent"
        android:fontFamily="helvetica"
        android:id="@+id/percent"
        android:layout_weight="0.25"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/div"
        android:fontFamily="helvetica"
        android:id="@+id/div"
        android:layout_weight="0.25"
        android:background="#FF9900"
        android:textColor="#FFFFFF"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding ="5dp">

    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/nine"
        android:id="@+id/nine"
        android:layout_weight="0.25"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/eight"
        android:id="@+id/eight"
        android:layout_weight="0.25"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/seven"
        android:id="@+id/seven"
        android:layout_weight="0.25"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:id="@+id/mult"
        android:text="@string/mult"
        android:layout_weight="0.25"
        android:background="#FF9900"
        android:textColor="#FFFFFF"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding ="5dp">

    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/six"
        android:id="@+id/six"
        android:layout_weight="0.25"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/five"
        android:id="@+id/five"
        android:layout_weight="0.25"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/four"
        android:id="@+id/four"
        android:layout_weight="0.25"
        android:fontFamily="helvetica"
        android:background="#e5e5e5"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/minus"
        android:id="@+id/minus"
        android:layout_weight="0.25"
        android:background="#FF9900"
        android:textColor="#FFFFFF"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding ="5dp">

    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/three"
        android:id="@+id/three"
        android:layout_weight="0.25"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/two"
        android:id="@+id/two"
        android:layout_weight="0.25"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/one"
        android:id="@+id/one"
        android:layout_weight="0.25"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/plus"
        android:id="@+id/plus"
        android:layout_weight="0.25"
        android:background="#FF9900"
        android:fontFamily="helvetica"
        android:textColor="#FFFFFF"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="0.5"
        android:text="@string/zero"
        android:id="@+id/zero"
        android:background="#e5e5e5"
        android:fontFamily="helvetica"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/dec"
        android:id="@+id/dec"
        android:layout_weight="0.25"
        android:fontFamily="helvetica"
        android:background="#e5e5e5"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:text="@string/equal"
        android:id="@+id/equal"
        android:layout_weight="0.25"
        android:background="#FF9900"
        android:fontFamily="helvetica"
        android:textColor="#FFFFFF"
        style="?android:attr/borderlessButtonStyle"
        android:textSize="30sp"/>
</LinearLayout>

`android:layout_weight` is an invalid param using a `RelativeLayout`, i might be better sticking to a `LinearLayout` — idclark, Mar 20 '15 at 09:05

score 1 · Answer 2 · answered Mar 18 '15 at 10:45

If you want to support background changes on some specific button states (pressed, activated, selected, etc.) you will have to use selector instead of flat color value.

So for example for button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:text="@string/six"
    android:id="@+id/six"
    android:layout_weight="0.25"
    android:background="#e5e5e5"
    android:fontFamily="helvetica"
    style="?android:attr/borderlessButtonStyle"
    android:textSize="30sp"/>

instead of using android:background="#e5e5e5" you should use android:background="@drawable/selector_grey" and add following code as a file to your drawable folder:

selector_grey.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#cccccc" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#e5e5e5" />
        </shape>
    </item>
</selector>

in this example color value #cccccc will be used when button is pressed

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

For button pressed state there are many articles on stack overflow. This can be one to start with : Pressed android button state

And for layout use weight-sum property to divide layout.

edited May 23 '17 at 11:56

Community

1
1

answered Mar 18 '15 at 10:39

Hulk

237
1
13

Button color won't change after modifying background color

3 Answers3