how to split listview row into three columns and one of the column into vertically two in android

Question

I need to list contacts in a list view to show image, Contact name, Number and call icon for each row item.

Each row should split into three columns. First column will have contact image, and second column to be vertically divided into two, first one for Contact name, and second one for Number. and the last column will have a icon/image.

i tried below. but not getting required format. is this possible to do with Listview as we trtied below (instead of gridview)?

<?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/listView_all_cont"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#a556f4"
        android:scrollbars="horizontal"/>


    <ImageView
        android:id="@+id/imgView_contImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:src="@drawable/no_image" />

    <TextView
        android:id="@+id/txtView_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtView_number"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:textColor="#ffffff"
        android:textSize="14sp" />

</LinearLayout>

can somebody help here?

Answer 1

You can have your Activity or Fragment layout like this,

main_layout.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/listView_all_cont"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#a556f4"
        android:scrollbars="horizontal"/>


</LinearLayout>

List item layout list_item.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:paddingBottom="8dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="8dp">

    <ImageView
        android:id="@+id/user_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_action_name"/>

    <ImageView
        android:id="@+id/action_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_action_name"/>

    <TextView
        android:id="@+id/name_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/action_image"
        android:layout_toRightOf="@+id/user_image"
        android:padding="5dp"
        android:text="XYZ"/>

    <TextView
        android:id="@+id/number_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/name_tv"
        android:layout_toLeftOf="@+id/action_image"
        android:layout_toRightOf="@+id/user_image"
        android:padding="5dp"
        android:text="12345"/>

</RelativeLayout>

You can try RecycleView too

Answer 2

Yes it is possible with ListView. I suggest you that learn about RecyclerView. RecyclerView give more instead of ListView. You just create one item_row.xml and inflate that row item in your Adapter. Try this code.

item.row.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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="105dp">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".3">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".7"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="Text1"
                android:paddingLeft="10dp"
                android:gravity="center_vertical"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="Text1"
                android:paddingLeft="10dp"
                android:gravity="center_vertical"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".2">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>