set background color for imageview doesn't work

Question

I am trying to change ImageView background when clicked(like Duolingo)

Here is my code from fragment :

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    ViewGroup rootView = (ViewGroup) inflater.inflate(
            R.layout.frag_repeat, container, false);
    final int[] a1 = {0};
    final int[] a2 = {0};
    final int[] a3 = {0};
    final int[] a4 = {0};


    TypedArray itemsIcon = getResources().obtainTypedArray(R.array.nav_drawer_icons);



    ImageView wer1 = (ImageView) rootView.findViewById(R.id.imageView);

    ImageView wer2 = (ImageView) rootView.findViewById(R.id.imageView2);

    ImageView wer3 = (ImageView) rootView.findViewById(R.id.imageView23);

    ImageView wer4 = (ImageView) rootView.findViewById(R.id.imageView43);
    TextView textView1 = (TextView) rootView.findViewById(R.id.textView711);


    textView1.setText(ss[i]);
    wer1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            a1[0] = 1;
            a2[0] = 0;
            a3[0] = 0;
            a4[0] = 0;
        }
    });
    wer2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            a2[0] = 1;
            a1[0] = 0;
            a3[0] = 0;
            a4[0] = 0;
        }
    });
    wer3.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            a3[0] = 1;
            a2[0] = 0;
            a1[0] = 0;
            a4[0] = 0;
        }
    });
    wer4.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            a4[0] = 1;
            a2[0] = 0;
            a3[0] = 0;
            a1[0] = 0;
        }
    });
    if(a1[0] > 0){
        wer3.setBackgroundColor(Color.parseColor("#FFFFFF"));
        wer2.setBackgroundColor(Color.parseColor("#FFFFFF"));
        wer1.setBackgroundColor(Color.parseColor("#42A5F5"));
        wer4.setBackgroundColor(Color.parseColor("#FFFFFF"));
    } else  if(a2[0] > 0){

        wer1.setBackgroundColor(Color.parseColor("#FFFFFF"));
        wer3.setBackgroundColor(Color.parseColor("#FFFFFF"));
        wer2.setBackgroundColor(Color.parseColor("#42A5F5"));
        wer4.setBackgroundColor(Color.parseColor("#FFFFFF"));
    }else  if(a3[0] > 0){
        wer1.setBackgroundColor(Color.parseColor("#FFFFFF"));
        wer2.setBackgroundColor(Color.parseColor("#FFFFFF"));
        wer3.setBackgroundColor(Color.parseColor("#42A5F5"));
        wer4.setBackgroundColor(Color.parseColor("#FFFFFF"));
    } else if(a4[0] > 0){
        wer1.setBackgroundColor(Color.parseColor("#FFFFFF"));
        wer2.setBackgroundColor(Color.parseColor("#FFFFFF"));
        wer4.setBackgroundColor(Color.parseColor("#42A5F5"));
        wer3.setBackgroundColor(Color.parseColor("#FFFFFF"));
    }
    if(i1 == 1){
        wer1.setImageResource(itemsIcon.getResourceId(i, -1));


    } else if(i1 == 2){
        wer2.setImageResource(itemsIcon.getResourceId(i, -1));

    } else if(i1 == 3){
        wer3.setImageResource(itemsIcon.getResourceId(i, -1));

    } else if(i1 == 4){
        wer4.setImageResource(itemsIcon.getResourceId(i, -1));

    }

    return rootView;
}

But ImageView background doesn't change! I have CardViews inside RelativeLayout and inside RelativeLayout I have ImageView.

score 0 · Answer 1 · answered Oct 23 '15 at 10:06

0

Please share xml file. Maybe you don't set background for ImageView in xml

answered Oct 23 '15 at 10:06

BaDo

540
8
19

solved it, but why if(a1> 0) and others doesn't return true? – Alash Party Oct 23 '15 at 10:13
What do u mean? When a1>0, other views don't change backgroud properly? – BaDo Oct 23 '15 at 10:20
no no a1>0 doesn't return true even i clicked imgView wer1(it's also for others) – Alash Party Oct 23 '15 at 10:22
dont set BackgroundColor and BackgroundResource in the same time, should use BackgroundResource for whole cases. You can create the button from image file – BaDo Oct 23 '15 at 10:30

score 0 · Answer 2 · answered Oct 23 '15 at 11:02

Each of your onClick listeners is just toggling values in an array. I suspect what you really want is to invoke the setBackground color code inside each handler.

From your code, I think what you are trying to do is this:

Whichever button was clicked - change it's background color from white to #42A5F5.
For the other three buttons not clicked, change the background color back to white.

I don't know what the name of your class is (I'll refer to it as "YourClass"). But make your 4 ImageViews member variables.

class YourClass extends Fragment // I'm guessing this is the declaration, it doesn't matter - use whatever you have now
{
    ImageView _wer1;
    ImageView _wer2;
    ImageView _wer3;
    ImageView _wer4;

Then inside onCreateView, assign each one of these member variables exactly where you assign the local variables:

    _wer1 = (ImageView) rootView.findViewById(R.id.imageView);
    _wer2 = (ImageView) rootView.findViewById(R.id.imageView2);
    _wer3 = (ImageView) rootView.findViewById(R.id.imageView23);
    _wer4 = (ImageView) rootView.findViewById(R.id.imageView43);

Now set each of your click listeners to invoke a "ToggleBackgroundColors". Notice that there's a different index value passed to this function in each callback handler.

_wer1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            YourClass.this.ToggleBackgroundColors(0); 
        }
    });

_wer2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            YourClass.this.ToggleBackgroundColors(1);
        }
    });

_wer3.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            YourClass.this.ToggleBackgroundColors(2);
        }
    });

_wer4.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            YourClass.this.ToggleBackgroundColors(3);
        }
    });

Then implement ToggleBackgroundColors:

void ToggleBackgroundColors(int which)
{
    int highlight = Color.parseColor("#42A5F5");

    ImageView [] views = {_wer1, _wer2, _wer3, _wer4};
    for (int x = 0; x < views.length; x++)
    {
        int background = (which == x) ? highlight : Color.WHITE;
        views[x].setBackgroundColor(background);
    }
}

score 0 · Answer 3 · answered Oct 23 '15 at 13:10

In your onClickListener, you can also set colorFilter on your imageView when you onClick it.

Consider using the onTouchListener instead though as you would like the imageView to change color when you touch the button and not when you click on it.

ImageView iv = (ImageView)findViewById(resIdOfImageToFilter);
iv.setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);

set background color for imageview doesn't work

3 Answers3