image change in ImageView when its clicked

Question

I have created a ButtonBarLayout with 5 ImageView inside it, I want to change image when it's clicked and focused, just like Instagram.

P.S I even used selector.xml as below, but it doesn't work

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true">
        <bitmap android:src="@drawable/ic_active"/>
    </item>

    <item>
        <bitmap android:src="@drawable/ic_normal"/>
    </item>
</selector>

I want something like this, but not like this.

and my conclusion was like this, this looks simple but what if 5? Is there any other simple way to create something like this with only a litle code.

public void onClick(View v){
    switch (v.getId()){
        case R.id.imga:
            ivA.setImageResource(R.drawable.ic_a_white);
            ivB.setImageResource(R.drawable.ic_b_black);
            ivC.setImageResource(R.drawable.ic_c_black);
            break;
        case R.id.imgb:
            ivB.setImageResource(R.drawable.ic_b.white);
            ivA.setImageResource(R.drawable.ic_a_black);
            ivC.setImageResource(R.drawable.ic_c_black);
            break;
        case R.id.imgc:
            ivC.setImageResource(R.drawable.ic_c_whtie);
            ivA.setImageResource(R.drawable.ic_a_black);
            ivB.setImageResource(R.drawable.ic_b_black);
    }
}

@AbdulKawee i know it works, but when i click the other image, the first image doesn't return to normal image before its clicked. public void onClick(View v){switch (v.getId()){ case R.id.iv1; iv1.setImageResource(R.drawable.ic_active)}}; like this. — MNFS, Jun 12 '17 at 09:05
you only want to change image when its clicked, and when user is not clicking it stays to normal?? is that ?? — Abdul Kawee, Jun 12 '17 at 09:07
@AbdulKawee yes, change image when its clicked and focused in that image, its like intagram you know — MNFS, Jun 12 '17 at 09:08
Check the answer below I have shared, it is exactly what you want — Abdul Kawee, Jun 12 '17 at 09:11

jack jay · Answer 1 · 2017-06-12T09:23:41.347

0

You are setting drawable in bitmaps, i don't know whether they works with it or not but i do this as,

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

Also apply this selector to background property of ImageView else there will be some space left at borders.

edited Jun 12 '17 at 09:23

answered Jun 12 '17 at 09:04

jack jay

2,493
1
14
27

its working when clicked, but when i click other imge, the image i clicked before is doesn't change to normal image before its clicked – MNFS Jun 12 '17 at 09:17
you should define `state_selected` and `state_pressed` and provide a default drawable at last. – jack jay Jun 12 '17 at 09:21
ohhk you need to state what drawable it should show when it is pressed and when it is not. – jack jay Jun 12 '17 at 09:24
its already change beefore i clicked, i upload the image, please see the white icon not the red one – MNFS Jun 12 '17 at 09:43
try the selector by assigning it to src property. – jack jay Jun 12 '17 at 10:11

Abdul Kawee · Accepted Answer · 2017-06-14T06:13:44.790

0

Try this

btn_selector.xml

<item android:drawable="@drawable/selector_image" android:state_selected="true"></item>
<item android:drawable="@drawable/selector_image" android:state_pressed="true"></item>
<item android:drawable="@drawable/normalImage"></item>

</selector>

Now to your Button

android:background="@drawable/btn_selector"

I don't get it why this isn't working for you, but here is another way of doing it. Suppose you have 3 imageButtons ,img1, img2, img3. Now onClick of imagebutton do this

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

                img1.setImageResource(R.drawable.ic_a_white); 
                img2.setImageResource(R.drawable.normal);
                img3.setImageResource(R.drawable.normal);
             }
        });

And then on 2nd button

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

                img2.setImageResource(R.drawable.ic_a_white); 
                img1.setImageResource(R.drawable.normal);
                img3.setImageResource(R.drawable.normal);
            }
        });

edited Jun 14 '17 at 06:13

answered Jun 12 '17 at 09:10

Abdul Kawee

2,687
1
14
26

i hope i can make bottom bar like instagram, its working but when i clicked the other image, the first image i clicked doesn't return to normal image, its like instagram you know and i use ImageView not button – MNFS Jun 12 '17 at 09:22
but its not focused, i imagin like tablayout, when icon fragment "A" was clicked then the page "A" is open and the icon was change too. and if i click icon fragment "B" then the page "B" is open and the icon was change and icon fragment "A" is back to normal – MNFS Jun 12 '17 at 09:51
This should be working and if its not working then there is and alternative way, simple on click of button A, change image of button A, and also the images of all the buttons to default, on click of B, change b image and replace all other buttons to default image – Abdul Kawee Jun 12 '17 at 10:05
public void onClick(View v){ switch (v.getId()){ case R.id.imga: ivA.setImageResource(R.drawable.ic_a_white); break; case R.id.imgb: ivB.setImageResource(R.drawable.ic_b.white); ivA.setImageResource(R.drawable.ic_a_black); break; ... } } **like this one** – MNFS Jun 12 '17 at 23:06
I have edited the answer, kindly check it, and if solved your problem do accept and rate it, so it may help others in future. – Abdul Kawee Jun 14 '17 at 06:14
thank you, i appreciate it, and its same like my conclusion above – MNFS Jun 14 '17 at 07:02

Fakhriddin Abdullaev · Answer 3 · 2017-06-12T09:37:16.953

0

Try this code

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_pressed="true" 
        android:drawable="@drawable/ic_active" />
   <item android:state_focused="true" 
        android:drawable="@drawable/ic_focus" />
   <item android:state_pressed="false"
        android:drawable="@drawable/ic_focus" />
</selector>

edited Jun 12 '17 at 09:37

answered Jun 12 '17 at 09:11

Fakhriddin Abdullaev

4,169
2
35
37

its working when clicked, but when i click other imge, the image i clicked before is doesn't change to normal image before its clicked. – MNFS Jun 12 '17 at 09:20
not like that, please see the correct and the wrong image i upload :), thank you – MNFS Jun 12 '17 at 10:03

image change in ImageView when its clicked

3 Answers3