Android listview with Color Border in vertical - android-layout

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>

Answer 2

As suggested by user 0X0nosugar created three layout. 1.main layout 2. listheader 3.listrow and applied rest matrix as suggested. now working fine

Answer 3

Use Views as borders in your adapter item layout. Use a recycler view instead.