Images in ListView items not filling height

Issue

After creating a list view with XML drawables on the side of each list item, for some reason the image views are not appearing the way that was expected. For each item, only a small horizontal line appears at the top of each list item rather than the drawable also filling up the height of each list view item. What needs to be done in order to fix the height of the image?

drawable/ic_red.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="20dp" />
    <solid android:color="@color/red"/>
</shape>

drawable/ic_yellow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="20dp" />
    <solid android:color="@color/yellow"/>
</shape>

drawable/ic_green.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="20dp" />
    <solid android:color="@color/green"/>
</shape>

fragment_helloworld.xml

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

    <ListView
        android:id="@+id/list_helloworld"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

listitem_helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <ImageView
        android:id="@+id/item_img"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingStart="5dp"
        android:paddingEnd="5dp"/>

    <TextView
        android:id="@+id/item_colourtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
        android:layout_toEndOf="@id/item_img"/>

</RelativeLayout>

FragmentHelloWorld.java

public class FragmentHelloWorld extends android.support.v4.app.Fragment {

    public FragmentHelloWorld() {
    }

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.fragment_helloworld, container, false);

        // Array of strings for ListView
        String[] listviewTitle = new String[]{
                "Item 1",
                "Item 2",
                "Item 3"
        };
        // Array of images for ListView
        int[] listviewImage = new int[]{
                R.drawable.ic_red,
                R.drawable.ic_yellow,
                R.drawable.ic_green
        };

        List<HashMap<String, String>> aList = new ArrayList<>();

        for (int i = 0; i < 3; i++) {
            HashMap<String, String> hm = new HashMap<>();
            hm.put("listview_title", listviewTitle[i]);
            hm.put("listview_image", Integer.toString(listviewImage[i]));
            aList.add(hm);
        }

        String[] from = {"listview_image", "listview_title"};
        int[] to = {R.id.item_img, R.id.item_colourtitle};

        SimpleAdapter simpleAdapter = new SimpleAdapter(getActivity().getBaseContext(), aList, R.layout.listitem_helloworld, from, to);
        ListView list_helloworld = (ListView) v.findViewById(R.id.list_helloworld);
        list_helloworld.setAdapter(simpleAdapter);
}

Solution

You may want to take a look at this post here

Or you may try specifying a rectangular shape to the drawables and use LinearLayout , that would be simple.

Answered By - Debdeep