Switching Image of Imageview using onClickListener - android

I am making a music player app in which there is an image of the play button and once clicked it switch to pause.png and song start playing. Clicking again on the button will change the image to play.png and pause the sound. This pattern continues.
This question has been previously answered first click change to new image and second click change to old image, android
But the checked answer doesn't work because boolean variable used to switch need to be declared final. And once declared final I cannot change the value of the variable.

boolean showingFirst = true; //Declare globally
image1.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
if(showingFirst){
image1.setImageResource(R.drawable.img1);
showingFirst = false;
}else{
image1.setImageResource(R.drawable.img2);
showingFirst = true;
}
}
});

You can do this in this way using tag attribute of ImageView:
iv.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(iv.getTag().equals("playing")){
iv.setImageResource(R.mipmap.play);
iv.setTag("paused");
} else {
iv.setImageResource(R.mipmap.pause);
iv.setTag("playing");
}
}
});
And your ImageView declaration in xml file will be like below:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#mipmap/pause"
android:tag="playing"
android:id="#+id/iv"/>

Related

Rating bar in android - Reset value

I am using rating bar to mark a field as favorite. The user should be able to unmark it some time in future. But once i set it, the on-click listener is not working on that item.
XML code
<RatingBar
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numStars="1"
android:stepSize="1"
android:id="#+id/fav"/>
JAVA code
fav.setOnClickListener(new View.OnClickListener(){ //fav is a ratingbar
public void onClick(View view){
favRest = !favRest; //A boolean variable which is set/reset each time it is clicked
if(favRest)
{ fav.setRating(1.0f);
addFav(uname,hotelName);
}
else{
fav.setRating(0.0f);
removeFav(uname,hotelName);
}
}
});
Once you rate, its not possible to clear rate using touch on RatingBar. You can only change rate value from 1.0 to 5.0.
To clear/reset rate value, you have to use other action like adding a Clear/Reset Button.
In Button click listener, you can reset rating value by using setRating(0.0)
resetButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Reset
ratingBar.setRating(0.0);
}
});
UPDATED:
In your RatingBar, you are using android:numStars="1" and android:stepSize="1". So once you rate 1 its not possible to rate 0 by using touch on RatingBar
From my point of view:
You can use ImageView instead of RatingBar
Add two different icons for favorite and unfavorite in res/drawable folder
Set desired icon to ImageView as per checking favRest value.
Try This:
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:id="#+id/fav" />
imageview = (ImageView) findViewById(R.id.fav);
fav.setOnClickListener(new View.OnClickListener(){ //fav is a ratingbar
public void onClick(View view){
favRest = !favRest; //A boolean variable which is set/reset each time it is clicked
if(favRest)
{
imageview.setImageResource(R.drawable.icon_favorite);
addFav(uname,hotelName);
}
else
{
imageview.setImageResource(R.drawable.icon_unfavorite);
removeFav(uname,hotelName);
}
}
});
Hope this will help~

Android Studio - Change image when in different state

I want to have a favorite button on my app like in Gmail
So, when the user click on the star, the star became yellow, and when the user clicked it again, it turn back to normal
How can i make this happen with my custom image?
i have two images
when its not favorited (heart-grey.png)
and when its favorited (heart-red.png)
You can use visibilty to do this.You have to define the xml to have both images at the same postion(It can be done using Relative layout).
final ImageView play = (ImageView) findViewById(R.id.play);
final ImageView play2 = (ImageView) findViewById(R.id.play2);
play.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Drawable playImage = play.getDrawable();
if (playImage.isVisible()){
play.setVisibility(View.GONE);
play2.setVisibility(View.VISIBLE);
mediaPlayer.start(); }
}
});
play2.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Drawable playImage2 = play2.getDrawable();
if (playImage2.isVisible()){
play2.setVisibility(View.GONE);
play.setVisibility(View.VISIBLE);
mediaPlayer.pause();
}
If your star is an ImageButton you can do something like this :
starSelected.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//add a condition to detect if it is already a favorite or not
if(starSelected.getDrawable() == R.drawable.theimage2) {
starSelected.setImageResource(R.drawable.thenewimage);
}else{
starSelected.setImageResource(R.drawable.thenewimage2);
}
}
});
Hope it helps
In your java code create a boolean flag:
boolean isSelected = false
Set an onClickListener inside your onCreate for the star (ImageView, Button whatever it is). Inside onClick, check for the flag like this:
if (isSelected) {
// change image src to unselected
isSelected = false;
} else {
// change image src to selected
isSelected = true;
}
and also you can save the boolean state with SharedPreferences to make sure you get the correct state every time.

Android ImageButton's image to be replaced with another image

I have an ImageButton and I want that onClick would replace it with another image (flip back and forth) and on a long press, would replace it to another image.
How can I do that?
I don't feel like reading long documentaries for this.
Set onClickListeners for your button then change the drawable. Since you don't have any code, the following is based on a dynamic ImageButton that only outlines how to perform the action you want. I suggest you define your ImageButton in your XML layout first and then use
iBtn = (ImageButton) findViewById(R.id.btnID);
ImageButton iBtn = new ImageButton(this);
iBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
iBtn.setImageDrawable(getResources().getDrawable(R.drawable.img1);
}
});
iBtn.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
iBtn.setImageDrawable(getResources().getDrawable(R.drawable.img2);
return true;
}
});
If you're going to learn Android (or any language or platform really), you should really get comfortable reading the documentation provided, as it will give you answers to many basic questions, such as how to use various methods and classes.
That aside, you need to set both an OnClickListener and an OnLongClickListener for your button. Then inside those listeners, you'll need to set the image using the setImageResource() method. That method requires a drawable image, which you should have saved in your drawable folder (if not, put it there!)
You didn't post your existing code, so here's a generic example.
ImageButton button = (ImageButton) findViewById(R.id.img_button);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
button.setImageResource(R.drawable.pic1);
}
});
button.setOnLongClickListener(new OnLongClickListener() {
public boolean onLongClick(View v) {
button.setImageResource(R.drawable.pic2);
return true; // <-- This must be true.
}
});
You could read further about how to use any buttons in the button guide, you'll just be swapping for ImageButton where appropriate.
Add ImageButton to your layout :
<ImageButton
android:id="#+id/img_btn1"
android:src="#drawable/imgc"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
and then add this code to your Activity Oncreate() method
ImageButton imageButton;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageButton = (ImageButton) findViewById(R.id.img_btn1);
imageButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
imageButton.setImageResource(R.drawable.imga);
}
});
imageButton.setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
imageButton.setImageResource(R.drawable.imgb);
return true;
}
});
}
change imga , imgb, imgc names according to your images taht are placed in drawable folder

Changing imagebutton image(from gallery) with longclick

I've searched the forums, but not have found any specific or understandable answers for my problem.
I'd like to change my Imagebutton image to a picture, selected from the gallery. Prefferrably the image should stay changed after closing the application.
My XML for the button is here:
<ImageButton
android:id="#+id/eat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:adjustViewBounds="true"
android:background="#drawable/eat"
android:clickable="true"
android:longClickable="true"
android:scaleType="fitCenter" />
The java code for playing the sound is here with the OnClick method.
ImageButton eat = (ImageButton) findViewById (R.id.eat);
eat.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mp1.start();
}
});
I would like to add the OnLongClick method here too, (since to OnClick is allready taken and the image replacing should be a little different), but havent found the right way. Can You please guide me a little bit?
You need to return true from image's onLongClickListener.
Like this:
eat.setOnLongClickListener(new OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
//do something
return true;
}
});
eat.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mp1.start();
}
});
This will not cause the image's onClickListener to be called as it means that the action has already been handled in longClickListener.

Button click to change background image of clicked button

I am trying to change the background image of a button that is clicked. The button whose image I am trying to toggle is the same button that is clicked. I ultimately want the program to test the current background image and change it to the other picture given the result of the test.
final Button testButton = (Button) findViewById(R.id.buttonTestButton);
testButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//toggle picture
if (testButton.equals(getResources().getDrawable(R.drawable.fakepicture))) {
testButton.setBackgroundResource(R.drawable.alternatepicture);
}
else {
testButton.setBackgroundResource(R.drawable.fakpicture);
}
}//end void onClick
});//end test button on click listener
try
testButton.getBackground().equals(getResources().getDrawable(R.drawable.fakepicture));
However ToggleButton might suit your case better.
As others have said, your equals method is comparing the button itself with the image, but you need to compare the background drawables.
I recommend loading the images drawables you want to use and then using their references later to make things more clear, something like this:
final Drawable first = getResources().getDrawable(
android.R.drawable.arrow_up_float);
final Drawable second = getResources().getDrawable(
android.R.drawable.arrow_down_float);
final Button testButton = (Button) findViewById(R.id.toggleButton);
testButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if (testButton.getBackground().equals(first)) {
testButton.setBackgroundDrawable(second);
} else {
testButton.setBackgroundDrawable(first);
}
}
});
as the other friends answered , it is preferable to use the ToggleButton in Android ,
and in your case, if you want to keep your code , so your method should be like this :
final Button testButton = (Button) findViewById(R.id.buttonTestButton);
int status = 0;//GLOBAL VARIABLE : the status of the Button ( 0 or 1 )
testButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//toggle picture
if (status == 0) {
testButton.setBackgroundResource(R.drawable.alternatepicture);
status=1 ; // change the status to 1 so the at the second clic , the else will be executed
}
else {
testButton.setBackgroundResource(R.drawable.fakpicture);
status =0;//change the status to 0 so the at the second clic , the if will be executed
}
}//end void onClick
});//end test button on click listener
You can simply use ToggleButton: Android ToggleButton and use StateList for the changing of the background: StateList using the check attribute.
You can use Buttons or Image buttons..
private ImageButton mod1,mod2;
mod1 = (ImageButton) findViewById(R.id.mod1);
mod2 = (ImageButton) findViewById(R.id.mod2);
mod1.setOnClickListener(this);
mod2.setOnClickListener(this);
public void onClick(View v) {
mod1.getDrawable().clearColorFilter();
mod2.getDrawable().clearColorFilter();
switch (v.getId()) {
case R.id.mod1:
mod1.getDrawable().setColorFilter(0xfff47521,PorterDuff.Mode.SRC_ATOP);
break;
case R.id.mod2:
mod2.getDrawable().setColorFilter(0xfff47521,PorterDuff.Mode.SRC_ATOP);
break;
}
}

Categories

Resources