CODEWITHSUNDEEP
androidandroid-layoutandroid-button
idclark
idclark

Reputation: 958

Button color won't change after modifying background color

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>

Upvotes: 1

Views: 1592

Answers (3)

Bartek Lipinski
Bartek Lipinski

Reputation: 31468

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

Upvotes: 1

Hulk
Hulk

Reputation: 237

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.

Upvotes: 0

Jai
Jai

Reputation: 486

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>

Upvotes: 1

Related Questions