按钮 - 单击更改背景颜色

时间:2014-02-26 14:45:18

标签: android xml android-selector

我的活动中有8个按钮。我正在寻找的是,按钮具有默认背景,当单击按钮时,背景颜色应该更改为其他颜色。这部分非常简单。但是,当我点击任何其他按钮时,第一个按钮的背景颜色应该变回默认颜色。我知道这将使用“选择器状态”完成,但我不太清楚如何实现它。我读的越多,我就越困惑。

现在,我拥有的xml如下:在drawable文件夹中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/blue" android:state_pressed="true"/>
    <item android:drawable="@color/dark_grey" android:state_focused="true"/>  
    <item android:drawable="@drawable/image_border"/>

 </selector>

xml中的drawable / image_border用于定义按钮的形状。下面是image_border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@color/dark_grey" />

    <stroke
        android:width="4dp"
        android:color="@color/light_grey" />

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

</shape>

有人可以帮我解决如何更改xml的行为方式吗?

[编辑1]

以下所有答案都指向类似的解决方案。以下是我所做的更改。但是,当我按下按钮时,它会转到指定的颜色,但会立即变回默认颜色。

button_background_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/image_border_blue" android:state_pressed="true"/>
    <item android:drawable="@color/dark_grey" android:state_focused="true"/>  
    <item android:drawable="@drawable/image_border"/>

 </selector>

image_border_blue.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@color/blue" />

    <stroke
        android:width="4dp"
        android:color="@color/blue" />

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

</shape>

有什么想法吗?

5 个答案:

答案 0 :(得分:14)

使用此选择器&amp;把它放在可绘制的文件夹和&amp;将按钮背景设置为此选择器。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@color/blue" android:state_pressed="true"/>
<item android:drawable="@color/AliceBlue" android:state_focused="true"/>  
<item android:drawable="@color/Azure"/>

 </selector>

您可以使用Color而不是Background。 希望它有所帮助。

答案 1 :(得分:8)

创建名为button_pressed.xml的形状,如下所示....

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

    <solid android:color="@color/blue" />

    <stroke
        android:width="4dp"
        android:color="@color/blue" />

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

</shape>

假设您有idR.id.btnR.id.btn1的拖车按钮,如下所示......

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:background="@drawable/button_pressed"
        android:onClick="onClick"
        android:text="Press Me 1" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:background="@drawable/button_pressed"
        android:onClick="onClick"
        android:text="Press Me 2" />

</LinearLayout>

按如下方式编写onClick()方法...这将允许您保留更改的颜色,直到按下另一个按钮。

Button button;

public void onClick(View v) {

    Drawable dr = getResources().getDrawable(R.drawable.button_pressed);
    dr.setColorFilter(Color.parseColor("#FF0000"), PorterDuff.Mode.SRC_ATOP);

    switch (v.getId()) {
    case R.id.btn:

        if (button == null) {
            button = (Button) findViewById(v.getId());
        } else {
            button.setBackgroundResource(R.drawable.button_pressed);
            button = (Button) findViewById(v.getId());
        }
        button.setBackgroundDrawable(dr);

        break;

    case R.id.btn2:
        if (button == null) {
            button = (Button) findViewById(v.getId());
        } else {
            button.setBackgroundResource(R.drawable.button_pressed);
            button = (Button) findViewById(v.getId());
        }
        button.setBackgroundDrawable(dr);

        break;

    default:
        break;
    }
}

我想,现在你会得到你想做的事。

答案 2 :(得分:8)

我建议你这个选择器。

只需在drawable文件夹中创建一个简单的selector.xml文件,然后将选择器添加到按钮android:background="@drawable/selector"或类似代码:yourButton.setBackground(getResources().getDrawable(R.drawable.selector));

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true"
        android:state_pressed="true" android:drawable="@android:color/holo_blue_light" />
    <item android:state_enabled="true"
        android:state_focused="true" android:drawable="@android:color/holo_green_dark" />
    <item android:state_enabled="true"
        android:state_selected="true" android:drawable="@android:color/holo_purple" />
    <item
        android:drawable="@drawable/yourdrawable" />
</selector>

第一项是pressed,第二项是focused,最后一项是selected州。

答案 3 :(得分:1)

在android中单击相应的颜色按钮时更改布局中的背景颜色

<强> main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#b056ff"
    android:id="@+id/l1">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/b1"
        android:layout_gravity="center"
        android:text="RED"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/b2"
        android:layout_gravity="center"
        android:text="GREEN" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/b3"
        android:layout_gravity="center"
        android:text="BLUE"/>

<强> MyActivity.java

package ram.android.com.cwp1;

import android.app.Activity;
import android.graphics.Color;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

import com.google.android.gms.appindexing.Action;
import com.google.android.gms.appindexing.AppIndex;
import com.google.android.gms.common.api.GoogleApiClient;

/**
 * Created by VENKATESH on 10-Jun-16.
 */
public class MyActivity extends Activity implements View.OnClickListener {
    /**
     * ATTENTION: This was auto-generated to implement the App Indexing API.
     * See https://g.co/AppIndexing/AndroidStudio for more information.
     */
    Button r, g, b;
    LinearLayout ll;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);
        ll = (LinearLayout) findViewById(R.id.l1);
        r = (Button) findViewById(R.id.b1);
        g = (Button) findViewById(R.id.b2);
        b = (Button) findViewById(R.id.b3);
        r.setOnClickListener(this);
        g.setOnClickListener(this);
        b.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.b1:
                ll.setBackgroundColor(Color.RED);
                break;

            case R.id.b2:
                ll.setBackgroundColor(Color.GREEN);
                break;
            case R.id.b3:
                ll.setBackgroundColor(Color.BLUE);
                break;

        }

    }
}

答案 4 :(得分:0)

我知道现在已经很晚了,但我希望有人会觉得有用。 我有一个非常简单的解决方案,我已经在我的应用程序中使用并且工作得很棒。

让我解释一下逻辑,  1.跟踪2个按钮单击 - 单击上一个按钮并单击当前按钮。我正在使用ArrayList  2.对于每个按钮单击继续更新ArrayList中的上一个和当前按钮单击值。 3.更改单击上一个按钮的背景颜色。 4.更改当前按钮的背景颜色。

我希望逻辑简单明了。

这是实施

XML

<Button
            android:onClick="onClickRosterDay"
            android:text="Mon"
            android:textColor="@color/textColorWhite"
            android:background="@color/colorAccent"
            android:id="@+id/rosterMonday"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

为XML中的每个按钮定义了OnClick方法,例如它 onClickRosterDay

Java

 //buttons 

    Button rosterMonday;
    Button rosterTuesday;
    Button rosterWednesday;
    Button rosterThursday;
    Button rosterFriday;
    Button rosterSaturday;

    //ArrayList to track button clicks
    private ArrayList<Button> buttonClickedDay;

    in OnCreate

    buttonClickedDay = new ArrayList<>();
    // to start with these are the default clicks. 
    buttonClickedDay.add(rosterMonday ); //previous button clicked
    buttonClickedDay.add(rosterMonday ); // current button clicked



    public void onClickRosterDay(View v) {
            switch (v.getId()){
                case R.id.rosterMonday:
                    daySelected = "MONDAY";
                    // move current click button to previous button clicked position
                    buttonClickedDay.set(0, buttonClickedDay.get(1)); 
                    // update current clicked position
                    buttonClickedDay.set(1,rosterMonday);
                    break;

                case R.id.rosterTuesday:
                    daySelected = "TUESDAY";
                    buttonClickedDay.set(0, buttonClickedDay.get(1));
                    buttonClickedDay.set(1,rosterTuesday);
                    break;

                case R.id.rosterWednesday:
                    daySelected = "WEDNESDAY";
                    buttonClickedDay.set(0, buttonClickedDay.get(1));
                    buttonClickedDay.set(1,rosterWednesday);
                    break;

                case R.id.rosterThursday:
                    daySelected = "THURSDAY";
                    buttonClickedDay.set(0, buttonClickedDay.get(1));
                    buttonClickedDay.set(1,rosterThursday);
                    break;

                case R.id.rosterFriday:
                    daySelected = "FRIDAY";
                    buttonClickedDay.set(0, buttonClickedDay.get(1));
                    buttonClickedDay.set(1,rosterFriday);
                    break;

                case R.id.rosterSaturday:
                    daySelected = "SATURDAY";
                    buttonClickedDay.set(0, buttonClickedDay.get(1));
                    buttonClickedDay.set(1,rosterSaturday);
                    break;
            }





        if(buttonClickedDay.get(0) != buttonClickedDay.get(1)) {
            // update background color of  previous button clicked    
buttonClickedDay.get(0).setBackgroundColor(this.getResources().getColor(R.color.colorAccent));
            // update background color of  current button clicked      
buttonClickedDay.get(1).setBackgroundColor(this.getResources().getColor(R.color.textBackgroundGreen));
        }
    }