Android listview with Color Border in vertical

Question

I have been struggling for a while to draw vertical border.I want to use a ListView to make a report wheres the results is divided into squares and mixed up.Tried with multiple codes but could not, If any one can suggest the mistakes in my codings would be great.

Horizontal is working fine whereas vertical could not it.

Even with vertical in color do fine.

Current Listview Appears as follows :

Expected Listview format as follows: Vertical and Horizontal Border or Grid needed in between the contents.

Layout: **

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

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFC7C7C7"
    android:orientation="vertical"
    android:divider="@drawable/mydivider"
    android:showDividers="middle"
    android:dividerPadding="22dp"
    android:weightSum="9">



    <LinearLayout
        android:id="@+id/lvcontainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_weight="0.5"
        android:background="#FFC7C7C7"
        android:orientation="horizontal"
        android:padding="1dp"
        android:weightSum="3">

        <TextView
            android:id="@+id/txtproductcompany"
            style="?android:dividerVertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.63"
            android:gravity="left"
            android:text="no"
            android:textColor="#000000"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/txtproductname"
            style="?android:dividerVertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.59"
            android:gravity="left"
            android:padding="3dp"
            android:text="number"
            android:textColor="#000000"
            android:textSize="9sp" />


        <TextView
            android:id="@+id/txtproductprice"
            style="?android:dividerVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="name"
            android:textColor="#000000"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/txtproductprice1"
            style="?android:dividerVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="sun"
            android:textColor="#000000"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/txtproductprice2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="mon"
            android:textColor="#000000"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/txtproductprice3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="tuesday"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice4"
            android:layout_width="56dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="wednesday"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice5"
            android:layout_width="45dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="thursday"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice6"
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="saturday"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice7"
            android:layout_width="33dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="closed"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice8"
            android:layout_width="21dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="calling"
            android:textColor="#000000"
            android:textSize="13sp"
            android:layout_weight="0.60" />
        <TextView
            android:id="@+id/txtproductprice9"
            android:layout_width="21dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="week"
            android:textColor="#000000"
            android:textSize="13sp"
            android:layout_weight="6.22" />
    </LinearLayout>


    <ListView
        android:id="@android:id/list"
        android:layout_height="0dp"
        android:layout_below="@+id/lvcontainer"
        android:layout_weight="8.72"
        android:layout_width="match_parent"
        android:divider="@drawable/separator_line"
        android:dividerHeight="4.0sp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:orientation="vertical"
        android:dividerPadding="10dp"
        android:layout_centerVertical="true"
        android:showDividers="beginning|middle|end"
        android:cacheColorHint="#00000000"
        android:footerDividersEnabled="true"
        android:headerDividersEnabled="true"


        ></ListView>


    <TextView
        android:id="@+id/txtresulttext"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@android:id/list"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="2dp"
        android:layout_weight="0.5"
        android:gravity="left"
        android:text=""
        android:textColor="#FFF55F54"
        android:textSize="20sp"
        android:textStyle="italic|bold"></TextView>




    <LinearLayout
        android:id="@+id/lvbottom"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="1">

        <Button
            android:id="@+id/btnupload"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#1083f5"
            android:gravity="center"
            android:text="UPLOAD"
            android:textColor="#ffffff"
            android:textSize="15sp"
            android:textStyle="bold"
            android:visibility="invisible" />
    </LinearLayout>

</LinearLayout>

**

Mycontroller:

myList = controller.getAllProducts();
        if (myList.size() != 0) {
            ListView lv = getListView();
            ListAdapter adapter = new SimpleAdapter(import2.this, myList,
                    R.layout.display2, new String[]{ "id","number", "outletname","sunday", "tuesday" , "wednesday" ,"thursday", "saturday" , "monday","calling","closed"}, new int[]{
                    R.id.txtproductcompany,R.id.txtproductname,R.id.txtproductprice,R.id.txtproductprice1,R.id.txtproductprice2,R.id.txtproductprice3,R.id.txtproductprice4,R.id.txtproductprice5,R.id.txtproductprice6,R.id.txtproductprice7,R.id.txtproductprice8});
            setListAdapter(adapter);
            lbl.setText("");

        }

code resutls.

Bar in the bottom,

same like this .

Answer 1

Since you want to show a table made of ListView rows, you have to make sure that columns will require the same space in each row.

Or you take an alternative approach and use TableLayout. It will be the better choice if you have a fixed number of rows.

But let's assume you have a varying number of rows. Then your layout for the rows will have to consist of rather rigid cells, so android:width="wrap_content" is not an option for most of the Views.

One way to cope with this is using a set of dimension values for the columns:

dimens.xml

<resources>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="column_id_width">32dp</dimen>
    <dimen name="column_number_width">60dp</dimen>
    <dimen name="column_outletname_width">60dp</dimen>
    <dimen name="column_weekday_width">60dp</dimen>
    <dimen name="column_closed_width">48dp</dimen>
    <dimen name="column_calling_width">48dp</dimen>
    <dimen name="column_week_width">48dp</dimen>
    <dimen name="column_wednesday_width">76dp</dimen>
</resources>

... as well as a style for the individual TextViews

<style name="ListItemStyle" parent="TextAppearance.AppCompat.Body1">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">#000000</item>
    <item name="android:padding">4dp</item>
    <item name="android:gravity">center_horizontal</item>
    <item name="android:background">@drawable/list_item_background</item>
</style>

with a shape drawable as list_item_background:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <stroke android:color="#000000" android:width="1dp"/>
</shape>

The list header:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:background="#aaaaaa"
    android:foreground="@drawable/list_header_foreground"
    android:layout_margin="2dp"
    android:weightSum="1">

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductcompany"
        android:layout_width="@dimen/column_id_width"
        android:layout_height="wrap_content"
        android:text="id3"
        android:background="#ffffff"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductname"
        android:layout_width="@dimen/column_number_width"
        android:layout_height="wrap_content"
        android:text="number"/>


    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="outletname"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice1"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="sunday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice2"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="monday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice3"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="tuesday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice4"
        android:layout_width="@dimen/column_wednesday_width"
        android:layout_height="wrap_content"
        android:text="wednesday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice5"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="thursday"/>

    <!-- friday is missing on purpose? -->

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice6"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="saturday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice7"
        android:layout_width="@dimen/column_closed_width"
        android:layout_height="wrap_content"
        android:text="closed"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice8"
        android:layout_width="@dimen/column_calling_width"
        android:layout_height="wrap_content"
        android:text="calling"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice9"
        android:layout_width="@dimen/column_week_width"
        android:layout_height="wrap_content"
        android:text="WEEK1"/>
</LinearLayout>

and, last not least, the list row

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_margin="1dp"
    android:weightSum="1">

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductcompany"
        android:layout_width="@dimen/column_id_width"
        android:layout_height="match_parent"
        android:text="13" />

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductname"
        android:layout_width="@dimen/column_number_width"
        android:layout_height="match_parent"
        android:text="9003562"/>


    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:text="1rmarket"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice1"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="Sunday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice2"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="Monday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice3"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="Tuesday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice4"
        android:layout_width="@dimen/column_wednesday_width"
        android:layout_height="match_parent"
        android:text="Wednesday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice5"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="Thursday"/>

    <!-- friday is missing on purpose? -->

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice6"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="No"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice7"
        android:layout_width="@dimen/column_closed_width"
        android:layout_height="match_parent"
        android:text="Yes"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice8"
        android:layout_width="@dimen/column_calling_width"
        android:layout_height="match_parent"
        android:lines="2"
        android:text="0001\nDaily"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice9"
        android:layout_width="@dimen/column_week_width"
        android:layout_height="match_parent"
        android:text="WEEK1"/>
</LinearLayout>

Note: you can use an attribute android:foreground with the LinearLayout in the list header if you want that green frame overlaying the child Views. Another shape drawable similar to list_item_background will do the trick.

Please note also that since I don't know your exact requirements, I left some of the attributes related to dividers alone. You may want to get rid of them if the approach based on shape drawables solves your issue.

The picture shows the Android Studio preview of the list header above a ListView placeholder

I changed the Activity layout to use less layout weights, and everything is set to android:visibility="visible" to make sure it all fits on the screen:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#FFC7C7C7"
    android:divider="@drawable/mydivider"
    android:dividerPadding="2dp"
    android:orientation="vertical"
    android:showDividers="middle"
    android:weightSum="1">

    <include
        android:id="@+id/lvcontainer"
        layout="@layout/list_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFC7C7C7" />

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_weight="1"
        android:cacheColorHint="#00000000"
        android:divider="@drawable/separator_line"
        android:dividerHeight="4.0sp"
        android:dividerPadding="10dp"
        android:footerDividersEnabled="true"
        android:headerDividersEnabled="true"
        android:orientation="vertical"
        android:showDividers="beginning|middle|end" />

    <TextView
        android:id="@+id/txtresulttext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="2dp"
        android:gravity="left"
        android:text=""
        tools:text="result"
        android:textColor="#FFF55F54"
        android:textSize="20sp"
        android:textStyle="italic|bold" />


    <LinearLayout
        android:id="@+id/lvbottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1">

        <Button
            android:id="@+id/btnupload"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#1083f5"
            android:gravity="center"
            android:text="UPLOAD"
            android:textColor="#ffffff"
            android:textSize="15sp"
            android:textStyle="bold"
            android:visibility="visible" />
    </LinearLayout>

</LinearLayout>