Changing the color of an image Android Studio by clicking

Question

I was wondering if someone of you know how to change the color of an image in Android by coding.

For example:

Facebook's toolbar has a grey icon:

but after clicking on it, it becomes blue:

Is there any way to make this transition by coding? Or it is just changing the icon/drawable with a new image.

Thank you.

Answer 1

Here, I tried to solve your problem

MainActivity.java

public class MainActivity extends AppCompatActivity {

    FrameLayout simpleFrameLayout;
    TabLayout tabLayout;
    TabLayout.Tab firstTab;
    TabLayout.Tab secondTab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); // get the reference of FrameLayout and TabLayout
        simpleFrameLayout = (FrameLayout) findViewById(R.id.simpleFrameLayout);
        tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout);


        // Create a new Tab named "First"
        firstTab = tabLayout.newTab();
        firstTab.setText("First"); // set the Text for the first Tab
        firstTab.setIcon(R.drawable.code_red); // set an icon for the

        // first tab
        tabLayout.addTab(firstTab); // add  the tab at in the TabLayout

        // Create a new Tab named "Second"
        secondTab = tabLayout.newTab();
        secondTab.setText("Second"); // set the Text for the second Tab
        secondTab.setIcon(R.drawable.video_white); // set an icon for the second tab
        tabLayout.addTab(secondTab); // add  the tab  in the TabLayout
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

                // get the current selected tab's position and replace the fragment accordingly
                Fragment fragment = null;
                switch (tab.getPosition()) {
                    case 0:
                        firstTab.setIcon(R.drawable.code_blue);
                        secondTab.setIcon(R.drawable.video_white);
                        fragment = new Fragment_first();
                        break;
                    case 1:
                        firstTab.setIcon(R.drawable.code_red);
                        secondTab.setIcon(R.drawable.video_blue);
                        fragment = new Fragment_second();
                        break;
                }
                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction ft = fm.beginTransaction();
                ft.replace(R.id.simpleFrameLayout, fragment);
                ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
                ft.commit();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });
    }
}

Answer 2

Finally, I have got the solution. What I have done, is to create a new bigger ImageView to set a "fake" background, so everytime that you click on the first ImageButton, you set the back ground of the second one.

The results are the followings:

• Before than pushing the button:

• After it

Here is the code that you need to obtain this behavior:

XML:

 <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:weightSum="1">

        <ImageView
            android:layout_marginTop="5dp"
            android:layout_marginLeft="10dp"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:id="@+id/background_1_perfil"
            />

        <ImageButton
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="15dp"
            android:background="@drawable/bandera_1"
            android:id="@+id/bandera1_perfil"
            android:layout_weight="1.47" />

Java:

final ImageButton bandera_1 = (ImageButton) findViewById(R.id.bandera1_perfil);
                final ImageView fondo_bandera_1 = (ImageView) findViewById(R.id.background_1_perfil);
                bandera_1.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (background_1 == false) {
                            fondo_bandera_1.setBackgroundResource(R.drawable.fondodegradado);
                            background_1 = true;
                        } else {
                            fondo_bandera_1.setBackgroundColor(Color.parseColor("#ffffff"));
                            background_1 = false;
                        }
                    }
                });

Answer 3

You can change the tint using setColorFilter

imageView.setColorFilter(ContextCompat.getColor(context,R.color.blue));

Answer 4

This is all about the color of the icon. If you want, you can do this according to the color you wish to download from the site (Black-White)

https://material.io/icons/

Answer 5

You can just change the image on each click, or this might also be useful to you.

final ToggleButton test = (ToggleButton) findViewById(R.id.TEST);
    test.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            test.setBackgroundColor(Color.parseColor("#FFFFFF")); // changes background color of "toggle button" widget to white when clicked!

        }

    });

So to break it down; when the toggle button is clicked the background color of the toggle button will change to white A.K.A "#FFFFFF" <- dont forget the " "! Heres a picture of whats happening

Of course there are a few more options than just background.

PS I would comment in case this isn't what your looking for but my rep is too low :-) Let me know if this was useful! Happy coding!