Add imageview in listview with a raw file

Question

I want to make a soundboard. For this, I have made a listview with a xml file (for the name and the sound).

For first, I have made a listview with the title of the sound. When we click on it, the sound is played.

MainActivity:

 mSoundPlayer = new SoundPlayer(this);
        Sound[] soundArray = SoundStore.getSounds(this);

        ListView listView = (ListView) findViewById(R.id.listView);

        final ArrayAdapter<Sound> adapter =
                new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, soundArray);

        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                Sound sound = (Sound) parent.getItemAtPosition(position);
                mSoundPlayer.playSound(sound);
            }
        });

I use a xml file for indexing the name of sounds and the sounds.

File : arrays.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="labels">
        <item>First sound</item>
        <item>Second soung</item>
    </string-array>

    <integer-array name="ids">
        <item>@raw/a1</item>
        <item>@raw/a2</item>
    </integer-array>
</resources>

And for the last, my layout :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    android:paddingBottom="0dp"
    tools:context="com.clemb.sardboard.MainActivity">

    <ListView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/listView"
        android:numColumns="auto_fit"
        android:gravity="center"
        android:columnWidth="100dp"
        android:verticalSpacing="5dp"
        android:stretchMode="columnWidth"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
</RelativeLayout>

I just want to know how to add a picture before the name of the sound. And can i do it in my array.xml ?

Thank you.

score 0 · Answer 1 · answered Jan 13 '16 at 18:19

0

You need to create a custom array adapter. Custom Array adapter and Codepath - Custom ArrayAdapter are some examples.

And can i do it in my array?

Not in xml. There is ArrayList for this purpose.

answered Jan 13 '16 at 18:19

Piyush

1,744
1
15
28

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

I think this question can be answered in this post: How to add an icon to a listview in a fragment

In your scenario, you'd just need to make the appropriate changes to use in an activity, rather than a fragment. Conceptually it should be the same. You're customizing the layout for each list item to include an imageview.

edited May 23 '17 at 12:04

Community

1
1

answered Jan 13 '16 at 18:19

D Ta

864
6
17

score 0 · Accepted Answer · edited May 23 '17 at 10:27

You can add images to your array.xml, take a look here Storing R.drawable IDs in XML array

To set the image before the name you need to create your own ArrayAdapter to use with your ListView

SoundItemAdapter adapter =
        new SoundItemAdapter(this, android.R.layout.sound_item, soundArray);

listView.setAdapter(adapter);

... ArrayAdapter

public class SoundItemAdapter extends ArrayAdapter<Sound> {
    private ArrayList<Sound> sounds;
    private int soundItemLayoutId;
    private Context context;

    public SoundItemAdapter(Context context, int soundItemLayoutId, ArrayList<Sound> sounds) {
        super(context, soundItemLayoutId, sounds);
        this.context=context;
        this.soundItemLayoutId = soundItemLayoutId;
        this.sounds = sounds;

    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolderItem viewHolder;
        if(convertView==null){
            convertView = LayoutInflater.from(context).inflate(soundItemLayoutId, parent, false);
            //set up a ViewHolder to avoid calling findViewById() on every call to getView == smoother scroll
            viewHolder = new ViewHolderItem();
            viewHolder.name = (TextView) convertView.findViewById(R.id.name);
            viewHolder.image = (ImageView) convertView.findViewById(R.id.image);
            // store the holder with the view.
            convertView.setTag(viewHolder);
        } else {
             // return the viewHolder
            viewHolder = (ViewHolderItem) convertView.getTag();
        }

        Sound sound = sounds.get(position);
        if (sound != null) {
            viewHolder.name.setText(sound.name);
            viewHolder.image.setImageDrawable(ContextCompat.getDrawable(context,sound.image));
        }
        return convertView;
        }


    class ViewHolderItem {
        TextView name;
        ImageView image;
    }
}

sound_item.xml

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


    <ImageView
        android:layout_width="56dp"
        android:layout_height="match_parent"
        tools:src="@android:drawable/ic_media_play"
        android:id="@+id/image" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="start|center"
        android:textAppearance="?android:attr/textAppearanceMedium"
        tools:text="Sound Name"
        android:id="@+id/name"
        android:layout_weight="1" />
</LinearLayout>

Add imageview in listview with a raw file

3 Answers3