onClick() to change the button border color

Question

In my app I have a round corner button with border. Now what I want to do is change the border color when the button gets clicked.

I have tried some of solutions which related to my post nothing takes effect on my button.

I am here to looking for help.

round_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:color="#606060" android:width="2dp" />
            <solid android:color="#FFFFFF"/>
            <size android:width="30dp" android:height="30dp"/>
        </shape>
    </item>
</selector>

activity_main.xml

<Button
            android:id="@+id/push_button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAllCaps="false"
            android:background="@drawable/round_button"
            android:text="Ok" />

round_button.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_normal"></item>
    <item android:drawable="@drawable/button_pressed" android:state_pressed="true"></item>
    <item android:drawable="@drawable/button_pressed" android:state_selected="true"></item>
</selector>

Now I have added drawable files but nothing is changed.

you should create two drawable and then create a selector using those drawables. something like this https://stackoverflow.com/a/14024007/3136282 — Arshad, May 11 '18 at 14:28
You don't need to incomodate the onClick() method. A state-selector is all you need. — Phantômaxx, May 11 '18 at 14:37

propoLis · Accepted Answer · 2018-05-14T12:16:00.237

Please try this:

Your gray rounded drawable background (gray_round_button.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:color="@color/gray" android:width="2dp" />
            <solid android:color="@color/white"/>
            <size android:width="30dp" android:height="30dp"/>
        </shape>
    </item>
</selector>

Your green rounded drawable background (green_round_button.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:color="@color/green" android:width="2dp" />
            <solid android:color="@color/white"/>
            <size android:width="30dp" android:height="30dp"/>
        </shape>
    </item>
</selector>

Activity:

    Activity {

     private static int borderColor = Color.GRAY;

           onCreate(){

           pushButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {

              Drawable bgDrawable = getBackgroundDrawable(R.drawable. gray_round_button);

              if (borderColor == Color.GRAY) {
                  borderColor = Color.GREEN;
                  bgDrawable = getBackgroundDrawable(R.drawable. green_round_button);
                } else if (borderColor == Color.GREEN) {
                  borderColor = Color.GRAY;
                  bgDrawable = getBackgroundDrawable(R.drawable. gray_round_button);
                }

                button.setBackground(bgDrawable);
                }
            });
    }//onCreate

        public Drawable getBackgroundDrawable(int resourceId) {

        Drawable backgroundDrawable;

        if (android.os.Build.VERSION.SDK_INT >= 21) {
            backgroundDrawable = getResources().getDrawable(resourceId, getTheme());
        } else {
            backgroundDrawable = getResources().getDrawable(resourceId);
        }

        return backgroundDrawable;
    }
  }

and xml layout:

<Button
    android:id="@+id/push_button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textAllCaps="false"
    android:background="@drawable/gray_round_button"
    android:text="Ok" />

Reply to your comment for 5 buttons.

When click on all buttons, backgrounds of 1,3,4th buttons will change but backgrounds of 2,5th buttons will not change:

attrs.xml:

<declare-styleable name="CustomBorderButton">
    <attr name="isChangeable" format="boolean" />
</declare-styleable>

xml:

 <yourPackage.CustomBorderButton
            android:id="@+id/push_button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAllCaps="false"
            android:background="@drawable/gray_round_button"
            android:text="Ok"
            app:isChangeable="true" />

        <yourPackage.CustomBorderButton
            android:id="@+id/push_button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAllCaps="false"
            android:background="@drawable/gray_round_button"
            android:text="Ok"
            app:isChangeable="false" />

        <yourPackage.CustomBorderButton
            android:id="@+id/push_button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAllCaps="false"
            android:background="@drawable/gray_round_button"
            android:text="Ok"
            app:isChangeable="true" />

        <yourPackage.CustomBorderButton
            android:id="@+id/push_button4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAllCaps="false"
            android:background="@drawable/gray_round_button"
            android:text="Ok"
            app:isChangeable="true" />

        <yourPackage.CustomBorderButton
            android:id="@+id/push_button5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAllCaps="false"
            android:background="@drawable/gray_round_button"
            android:text="Ok"
            app:isChangeable="false" />

CustomBorderButton.java:

public class CustomBorderButton extends Button {

    private static int borderColor = Color.GRAY;

    public CustomBorderButton(Context context) {
        this(context, null);
    }

    public CustomBorderButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomBorderButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        boolean isChangeableColor = false;

        if (attributeSet != null) {
        TypedArray typedArray = getContext().getTheme().obtainStyledAttributes(attributeSet, R.styleable.CustomBorderButton, 0, 0);
        isChangeableColor = typedArray.getBoolean(R.styleable.CustomBorderButton_isChangeable, false);
        typedArray.recycle();
    }

        onClickFunction(isChangeableColor);
    }


    private void changeColors(){

      Drawable bgDrawable = getBackgroundDrawable(R.drawable. gray_round_button);

      if (borderColor == Color.GRAY) {
          borderColor = Color.GREEN;
          bgDrawable = getBackgroundDrawable(R.drawable. green_round_button);
        } else if (borderColor == Color.GREEN) {
          borderColor = Color.GRAY;
          bgDrawable = getBackgroundDrawable(R.drawable. gray_round_button);
        }

        setBackground(bgDrawable);
    }

    private void onClickFunction(boolean isChangeableColor) {

        this.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            if(isChangeableColor){
                changeColors();
            }
             }
            }
        });
    }

 public Drawable getBackgroundDrawable(int resourceId) {

    Drawable backgroundDrawable;

    if (android.os.Build.VERSION.SDK_INT >= 21) {
        backgroundDrawable = getResources().getDrawable(resourceId, getContext().getTheme());
    } else {
        backgroundDrawable = getResources().getDrawable(resourceId);
    }

    return backgroundDrawable;
}
}

Reply to your comment for 7 buttons.

When click on all buttons, backgrounds of buttons can change:

xml:

<yourPackage.CustomBorderButton
        android:id="@+id/push_button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAllCaps="false"
        android:background="@drawable/gray_round_button"
        android:text="Ok" />

    <yourPackage.CustomBorderButton
        android:id="@+id/push_button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAllCaps="false"
        android:background="@drawable/gray_round_button"
        android:text="Ok" />

    <yourPackage.CustomBorderButton
        android:id="@+id/push_button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAllCaps="false"
        android:background="@drawable/gray_round_button"
        android:text="Ok" />

    <yourPackage.CustomBorderButton
        android:id="@+id/push_button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAllCaps="false"
        android:background="@drawable/gray_round_button"
        android:text="Ok" />

    <yourPackage.CustomBorderButton
        android:id="@+id/push_button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAllCaps="false"
        android:background="@drawable/gray_round_button"
        android:text="Ok" />

<yourPackage.CustomBorderButton
        android:id="@+id/push_button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAllCaps="false"
        android:background="@drawable/gray_round_button"
        android:text="Ok" />

<yourPackage.CustomBorderButton
        android:id="@+id/push_button7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAllCaps="false"
        android:background="@drawable/gray_round_button"
        android:text="Ok" />

CustomBorderButton.java:

    public class CustomBorderButton extends Button {

    private static HashSet<Integer> selectedDays = new HashSet<>();

    public CustomBorderButton(Context context) {
        this(context, null);
    }

    public CustomBorderButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomBorderButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {

                int id = view.getId();
                boolean isSelected = selectedDays.contains(id);

                Drawable bgDrawable;

                if (isSelected) {
                    bgDrawable = getBackgroundDrawable(R.drawable.gray_round_button);
                    selectedDays.remove(id);
                } else {
                    bgDrawable = getBackgroundDrawable(R.drawable.green_round_button);
                    selectedDays.add(id);
                }

                setBackground(bgDrawable);
            }
        });
    }

    public Drawable getBackgroundDrawable(int resourceId) {

        Drawable backgroundDrawable;

        if (android.os.Build.VERSION.SDK_INT >= 21) {
            backgroundDrawable = getResources().getDrawable(resourceId, getContext().getTheme());
        } else {
            backgroundDrawable = getResources().getDrawable(resourceId);
        }

        return backgroundDrawable;
    }
}

I did not get any errors but there is nothing changed after applying this code ,After clicked on the button color change is not applied . — Nikson, May 14 '18 at 07:44
I have tried the updated code ,Now also I did not get any errors but it's not worked ...But Thanks for your efforts . — Nikson, May 14 '18 at 08:04
But I tried the same code you posted here I have not changed anything unfortunately it's not worked for me — Nikson, May 14 '18 at 08:19
This time also I didn't get any errors and the color also not get changed — Nikson, May 14 '18 at 13:21
Set the size of the buttons yourself , I clicked on the color changes — propoLis, May 14 '18 at 13:45
I have created a separate application and this code is worked there ,but in my current project this is not working ,Need to spend sometime to find the root cast of the problem . — Nikson, May 14 '18 at 14:04

onClick() to change the button border color

1 Answers1