i'm making a recipe application and would like to create a favourite button where the user will click on the grey star button and it will change into a yellow star button(i have a picture of a grey star and a yellow star), the selected favourites will then display in a list once you click on the favourites link on the home screen
I have the following code in a layout
<ImageButton android:id="@+id/favouritebtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="@drawable/staroff"
android:background="#00ffffff"
android:onClick="onToggleStar"
android:clickable="true"/>
Can anyone help me in how to write the code so that when i click on the star it will turn yellow and add to the favourite list
UPDATE
FavouriteBtn.java
import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
public class FavouriteBtn extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.recipe);
final ImageButton imgButton =(ImageButton)findViewById(R.id.favbtn);
imgButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
boolean isFavourite = readState();
if (isFavourite) {
imgButton.setBackgroundResource(R.drawable.staroff);
isFavourite = false;
saveState(isFavourite);
} else {
imgButton.setBackgroundResource(R.drawable.staron);
isFavourite = true;
saveState(isFavourite);
}
}
});
}
private void saveState(boolean isFavourite) {
SharedPreferences aSharedPreferences = this.getSharedPreferences(
"Favourite", Context.MODE_PRIVATE);
SharedPreferences.Editor aSharedPreferencesEdit = aSharedPreferences
.edit();
aSharedPreferencesEdit.putBoolean("State", isFavourite);
aSharedPreferencesEdit.commit();
}
private boolean readState() {
SharedPreferences aSharedPreferences = this.getSharedPreferences(
"Favourite", Context.MODE_PRIVATE);
return aSharedPreferences.getBoolean("State", true);
}
}
recipe.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/jbsbackground2"
android:orientation="vertical" >
<ImageView
android:id="@+id/iv_detail"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="@drawable/barbecuedporkribs" />
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="10dp"
android:layout_below="@+id/iv_detail"
android:background="#3D3C3A" />
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/button1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/iv_detail"
android:layout_marginTop="5dp"
android:text="Recipe"
android:layout_toLeftOf="@id/favourites"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView2"
android:layout_marginTop="2dp"
android:text="TextView"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="italic" />
<TextView
android:id="@+id/tvFavourite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add To Favourites (click star)"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold"
android:layout_above="@+id/tvName"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<ImageButton
android:id="@+id/favbtn"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/staroff"
android:background="#00ffffff"
android:onClick="onClick"
android:clickable="true"/>
<TextView
android:id="@+id/tvTD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ingredients"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:id="@+id/tvIngredients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/tvTD"
android:layout_marginTop="2dp"
android:text="TextView"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="italic" />
<TextView
android:id="@+id/tvK"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/tvIngredients"
android:layout_marginTop="5dp"
android:text="Preparation"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="@+id/tvPreparation"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/tvK"
android:layout_marginTop="2dp"
android:text="TextView"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="italic" />
</LinearLayout>
</ScrollView>
Use ToggleButton in your XML:
<ToggleButton
android:layout_width="180dp"
android:layout_height="180dp"
android:id="@+id/myToggleButton"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textOn=""
android:textOff=""/>
And in your Activity:
ToggleButton toggleButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toggleButton = (ToggleButton) findViewById(R.id.myToggleButton);
toggleButton.setChecked(false);
toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.img_star_grey));
toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked)
toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(getApplicationContext(),R.drawable.img_star_yellow));
else
toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.img_star_grey));
}
});
}