Joehamir Joehamir - 5 months ago 59
Android Question

Android Studio ListView Item Favorite ImageButton Features

Android Studio ListView Item Favorite ImageButton Features

Hi guys,

Please help me.

I have listview item with heart ImageButton. (@drawable/heart)

I want to change the (@drawable/heart) into (@drawable/heartred) after i click the click.

It means it is mark as favorite.

I also want to display those item with red heart in my favorite tab.

below is the image and code.

enter image description here

fragment_fragment_one.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.magicstarme.virtualsongbook.FragmentOne">

<!-- TODO: Update blank fragment layout -->
<!--<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/hello_blank_fragment_one" />-->

<TabHost
android:id="@+id/tabHost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"></TabWidget>

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">

<ListView
android:id="@+id/slListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:listSelector="@android:color/transparent"
android:cacheColorHint="@android:color/transparent"/>

</LinearLayout>

<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="This is tab 2" />
</LinearLayout>

<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="This is tab 3" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>

</FrameLayout>


fragment_fragment_one_slview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:paddingRight="5dip"
android:orientation="vertical"
android:layout_weight="3
">
<FrameLayout
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17dp"
android:textStyle="bold" />

</FrameLayout>

<FrameLayout
android:id="@+id/framelayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/artist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:layout_gravity="left|top"/>

<TextView
android:id="@+id/volume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:layout_gravity="right|top"/>

</FrameLayout>

</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:layout_toStartOf="@+id/relativeLayout3">

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:padding="5dp">

<ImageButton
android:id="@+id/mic"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/mic"
android:layout_gravity="left|top"
android:background="#ffffff" />


</FrameLayout>

</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#cccccc"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true">

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:background="#cccccc">

<TextView
android:id="@+id/number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17dp"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal|top" />

</FrameLayout>

</LinearLayout>
</LinearLayout>


FragmentOne.class

package com.magicstarme.virtualsongbook;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TabHost;
import android.widget.ToggleButton;

import java.util.ArrayList;


/**
* A simple {@link Fragment} subclass.
* Activities that contain this fragment must implement the
* {@link FragmentOne.OnFragmentInteractionListener} interface
* to handle interaction events.
* Use the {@link FragmentOne#newInstance} factory method to
* create an instance of this fragment.
*/
public class FragmentOne extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";

// TODO: Rename and change types of parameters
private String mParam1;
private String mParam2;

private OnFragmentInteractionListener mListener;

public FragmentOne() {
// Required empty public constructor
}

/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*
* @param param1 Parameter 1.
* @param param2 Parameter 2.
* @return A new instance of fragment FragmentOne.
*/
// TODO: Rename and change types and number of parameters
public static FragmentOne newInstance(String param1, String param2) {
FragmentOne fragment = new FragmentOne();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
}

public static boolean heart_selected = false;

public static int position = -1;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View rootView = inflater.inflate(R.layout.fragment_fragment_one, container, false);

TabHost host = (TabHost) rootView.findViewById(R.id.tabHost);
host.setup();

//Tab 1
TabHost.TabSpec spec = host.newTabSpec("SONG LIST");
spec.setContent(R.id.tab1);
spec.setIndicator("SONG LIST");
host.addTab(spec);

ArrayList<FragmentOne_slResults> slResults = GetSearchResults();
final ListView sllv = (ListView) rootView.findViewById(R.id.slListView);
sllv.setAdapter(new FragmentOne_Adapter(getActivity(), slResults));

//Tab 2
spec = host.newTabSpec("NEW SONGS");
spec.setContent(R.id.tab2);
spec.setIndicator("NEW SONGS");
host.addTab(spec);

//Tab 3
spec = host.newTabSpec("FAVORITES");
spec.setContent(R.id.tab3);
spec.setIndicator("FAVORITES");
host.addTab(spec);

return rootView;
}

//SONG LIST
private ArrayList<FragmentOne_slResults> GetSearchResults(){
ArrayList<FragmentOne_slResults> results = new ArrayList<FragmentOne_slResults>();

FragmentOne_slResults slr = new FragmentOne_slResults();
slr.setId("1");
slr.setTitle("Song Title 1 Song Title 1 Title 2");
slr.setArtist("Artist 1");
slr.setVolume("Vol 1");
slr.setNumber("1");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("2");
slr.setTitle("Song Title 2 Song Title 2 Title 2");
slr.setArtist("Artist 2");
slr.setVolume("Vol 2");
slr.setNumber("2");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("3");
slr.setTitle("Song Title 3");
slr.setArtist("Artist 3");
slr.setVolume("Vol 3");
slr.setNumber("3");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("4");
slr.setTitle("Song Title 2");
slr.setArtist("Artist 2");
slr.setVolume("Vol 2");
slr.setNumber("4");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("5");
slr.setTitle("Song Title 2 Song Title 2 Title 2");
slr.setArtist("Artist 3");
slr.setVolume("Vol 3");
slr.setNumber("5");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("6");
slr.setTitle("Song Title 2");
slr.setArtist("Artist 2");
slr.setVolume("Vol 2");
slr.setNumber("6");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("7");
slr.setTitle("Song Title 2 Song Title 2 Title 2 Song Title 2 Song Title 2 Title 23 tle 2 Song Title 2 Song Title 2 Title 2");
slr.setArtist("Artist 3");
slr.setVolume("Vol 3");
slr.setNumber("7");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("8");
slr.setTitle("Song Title 2");
slr.setArtist("Artist 2");
slr.setVolume("Vol 2");
slr.setNumber("8");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("9");
slr.setTitle("Song Title 3");
slr.setArtist("Artist 3");
slr.setVolume("Vol 3");
slr.setNumber("9");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("10");
slr.setTitle("Song Title 2");
slr.setArtist("Artist 2");
slr.setVolume("Vol 2");
slr.setNumber("10");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("11");
slr.setTitle("Song Title 3");
slr.setArtist("Artist 3");
slr.setVolume("Vol 3");
slr.setNumber("11");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("12");
slr.setTitle("Song Title 2");
slr.setArtist("Artist 2");
slr.setVolume("Vol 2");
slr.setNumber("12");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("13");
slr.setTitle("Song Title 3");
slr.setArtist("Artist 3");
slr.setVolume("Vol 3");
slr.setNumber("13");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("14");
slr.setTitle("Song Title 2");
slr.setArtist("Artist 2");
slr.setVolume("Vol 2");
slr.setNumber("14");
results.add(slr);

slr = new FragmentOne_slResults();
slr.setId("15");
slr.setTitle("Song Title 3");
slr.setArtist("Artist 3");
slr.setVolume("Vol 3");
slr.setNumber("15");
results.add(slr);


return results;
}

// TODO: Rename method, update argument and hook method into UI event
public void onButtonPressed(Uri uri) {
if (mListener != null) {
mListener.onFragmentInteraction(uri);
}
}

@Override
public void onAttach(Context context) {
super.onAttach(context);
if (context instanceof OnFragmentInteractionListener) {
mListener = (OnFragmentInteractionListener) context;
} else {
throw new RuntimeException(context.toString()
+ " must implement OnFragmentInteractionListener");
}
}

@Override
public void onDetach() {
super.onDetach();
mListener = null;
}

/**
* This interface must be implemented by activities that contain this
* fragment to allow an interaction in this fragment to be communicated
* to the activity and potentially other fragments contained in that
* activity.
* <p/>
* See the Android Training lesson <a href=
* "http://developer.android.com/training/basics/fragments/communicating.html"
* >Communicating with Other Fragments</a> for more information.
*/
public interface OnFragmentInteractionListener {
// TODO: Update argument type and name
void onFragmentInteraction(Uri uri);
}
}


FragmentOne_Adapter.class

package com.magicstarme.virtualsongbook;

import android.content.Context;
import android.media.Image;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.ToggleButton;

import java.util.ArrayList;

/**
* Created by Joe on 6/29/2016.
*/
public class FragmentOne_Adapter extends BaseAdapter {
private static ArrayList<FragmentOne_slResults> oneslArrayList;

private LayoutInflater mInflater;
private boolean[] isFavorite;

public FragmentOne_Adapter(Context context, ArrayList<FragmentOne_slResults> slresults) {
oneslArrayList = slresults;
mInflater = LayoutInflater.from(context);
}

public int getCount() {
return oneslArrayList.size();
}

public Object getItem(int position) {
return oneslArrayList.get(position);
}

public long getItemId(int position) {
return position;
}

public View getView(final int position, View convertView, ViewGroup parent) {
final ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.fragment_fragment_one_slview, null);
holder = new ViewHolder();

holder.txtTitle = (TextView) convertView.findViewById(R.id.title);
holder.txtArtist = (TextView) convertView.findViewById(R.id.artist);
holder.txtVolume = (TextView) convertView.findViewById(R.id.volume);
holder.txtNumber = (TextView) convertView.findViewById(R.id.number);

holder.buttonHeart = (ImageButton) convertView.findViewById(R.id.heart);

convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}

holder.txtTitle.setText(oneslArrayList.get(position).getTitle());
holder.txtArtist.setText(oneslArrayList.get(position).getArtist());
holder.txtVolume.setText(oneslArrayList.get(position).getVolume());
holder.txtNumber.setText(oneslArrayList.get(position).getNumber());

if (oneslArrayList.get(position).isFavorite) {
holder.buttonHeart.setImageResource(R.drawable.heartred);
}
holder.buttonHeart.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {
// Toggle the favorites status of the imageButton and the data.
boolean isFavorite = !oneslArrayList.get(position).isFavorite;
oneslArrayList.get(position).setIsFavorite(isFavorite);
holder.buttonHeart.setImageResource(isFavorite ? R.drawable.heartred : R.drawable.heart);
}
});

return convertView;
}

static class ViewHolder {
TextView txtTitle;
TextView txtArtist;
TextView txtVolume;
TextView txtNumber;
ImageButton buttonHeart;
ToggleButton btnFavorite;
ImageView btnHeart;
}
}


FragmentOne_Result.class

package com.magicstarme.virtualsongbook;

/**
* Created by Joe on 6/29/2016.
*/
public class FragmentOne_slResults{
private String id = "";
private String title = "";
private String artist = "";
private String volume = "";
private String number = "";
boolean isFavorite;

public void setId(String id) {
this.id = id;
}
public String getId() {
return id;
}

public void setTitle(String title) {
this.title = title;
}
public String getTitle() {return title;}

public void setArtist(String artist) {
this.artist = artist;
}
public String getArtist() {
return artist;
}

public void setVolume(String volume) {
this.volume = volume;
}
public String getVolume() {
return volume;
}

public void setNumber(String number) {this.number = number;}
public String getNumber() {return number;}

public void setIsFavorite(boolean isFavorite) {this.isFavorite = isFavorite;}
//public String getFavorite() {return favorite;}
}

Answer
Instead of imagebutton use Toggle for favourite

<ToggleButton
    android:id="@+id/tgbFav"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:background="@drawable/fav_checked"
    android:textOff=""
    android:textOn=""/>

fav_checked.xml

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

for favourite list to display once toggle is clicked update the database or flag this item as favourite so you can list all the favourite item .. Hope this helps you

inside your adaptor

[ur fav toggle].setChecked(favorites[position]);
    [ur fav toggle].setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Boolean fav;
            if (favorites[position] == true) {
                favorites[position] = false;
            } else {
                favorites[position] = true;
            }
        }
    });
public View getView(final int position, View convertView, ViewGroup parent) {
    final ViewHolder holder;
    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.fragment_fragment_one_slview, null);
        holder = new ViewHolder();

        holder.txtTitle = (TextView) convertView.findViewById(R.id.title);
        holder.txtArtist = (TextView) convertView.findViewById(R.id.artist);
        holder.txtVolume = (TextView) convertView.findViewById(R.id.volume);
        holder.txtNumber = (TextView) convertView.findViewById(R.id.number);

        holder.buttonHeart = (ToggleButton) convertView.findViewById(R.id.heart);

        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }

    holder.txtTitle.setText(oneslArrayList.get(position).getTitle());
    holder.txtArtist.setText(oneslArrayList.get(position).getArtist());
    holder.txtVolume.setText(oneslArrayList.get(position).getVolume());
    holder.txtNumber.setText(oneslArrayList.get(position).getNumber());

        holder.buttonHeart.setChecked(oneslArrayList.get(position).isFavorite);
    holder.buttonHeart.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {
            boolean isFavorite = !oneslArrayList.get(position).isFavorite;
            oneslArrayList.get(position).setIsFavorite(isFavorite);
        }
    });

    return convertView;
}

i have updated getView of adaptor