How to set divider between columns in tablelayout? - android

I want to create a table with column dividers. I want to divide my columns with a vertical bar image. To achieve this I have used "android:divider="#drawable/abc" but its not working. Below is my xml file for same:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:stretchColumns="*"
android:padding="5dip"
android:divider="#drawable/tracking_green"
>
<TableRow >
<TextView
android:id="#+id/retaileritem1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="xxxxxxx" />
<TextView
android:id="#+id/retaileritem2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="xxxxxxx" />
<ImageView
android:id="#+id/retailerimage1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/tracking_green" />
</TableRow>


Add android:showDividers="middle"
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:stretchColumns="*"
android:padding="5dip"
android:divider="#drawable/tracking_green"
android:showDividers="middle"
>


This is how I did it !
CODE
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="50dp"
android:text="Salary Details"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:shrinkColumns="0"
android:stretchColumns="1" >
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical" >
<TextView
android:layout_gravity="center_vertical"
android:gravity="left"
android:text="Financial Year"
android:textColor="#android:color/white"
android:textSize="14sp"
android:textStyle="bold" />
<Spinner
android:id="#+id/spnSearchByCity"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:entries="#array/year"
tools:listitem="#android:layout/simple_spinner_dropdown_item" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#d30059"
android:orientation="vertical"
android:paddingTop="50dp" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:text="Month"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:text="Net Salary"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:text="Click"
android:textAppearance="?android:attr/textAppearanceMedium" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:text="Jan"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:text="11305"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/txtDetailsOneId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#000000"
android:text="DETAILS"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:text="Feb"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:text="11405"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="#d30059"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/txtDetailsTwoId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#000000"
android:text="DETAILS"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp" >
<Button
android:id="#+id/btnMainMenuId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:text="MAIN MENU"
android:textColor="#android:color/white"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
Snapshot


It's quite late to answer this question but here is the correct way to it.
For dividers between rows :
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:divider="#color/colorPrimary"
android:showDividers="middle">
and for dividers between columns:
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#color/colorPrimary"
android:showDividers="middle">
Explaination:
The divider tag in <TableLayout> is used to place divider between it's direct childrens i.e Rows.
While the divider tag in <TableRow> is used to place divider between it's direct childrens i.e Columns


What i wanted is a table like this
I added this in my styles.xml
<style name="Divider">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">#color/divider_color</item>
</style>
<style name="Divider_invisible">
<item name="android:layout_width">1dip</item>
<item name="android:layout_height">match_parent</item>
</style>
Then in my table layout
<TableLayout
android:id="#+id/table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:stretchColumns="*" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#92C94A" >
<TextView
android:id="#+id/textView11"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="#style/Divider_invisible" />
</LinearLayout>
<TextView
android:id="#+id/textView12"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/main_wo_colon"
android:textColor="#color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="#style/Divider" />
</LinearLayout>
<TextView
android:id="#+id/textView13"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/side_wo_colon"
android:textColor="#color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="#style/Divider" />
</LinearLayout>
<TextView
android:id="#+id/textView14"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/total"
android:textColor="#color/white"
android:textSize="16sp" />
</TableRow>
<!-- display this button in 3rd column via layout_column(zero based) -->
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#6F9C33" >
<TextView
android:id="#+id/textView21"
android:padding="5dp"
android:text="#string/servings"
android:textColor="#color/white"
android:textSize="16sp" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent" >
<View style="#style/Divider" />
</LinearLayout>
..........
.......
......


since tablelayout does not provide this directly, one posibble way might be a framelayout. place the desired table above another background_table wich only have one row and "match_parent" for height/width. add 3 columns with desired layout_weights. add vertical divider-imageview to second column.
the main table should also use the same layout_weihts +margin in it`s rows to look good.
horizontal divider possibly could be realized by adding an imageview between the "to-be-separated" tablerows.
not tested yet, just an approach
ornay


In a list with a vertical divider use the ImageView as follows:
<ImageView
android:id="#+id/divider"
android:contentDescription="#string/divider"
android:layout_width="1dp"
android:layout_height="65dp"
android:layout_marginTop="8sp"
android:background="#3B3B3B"
/>
To avoid showing a divider when there aren't elements in the list you can delete the android:background="#3B3B3B" line and set it programmatically:
((ImageView) view.findViewById(R.id.divider)).setBackgroundColor(Color.parseColor("#3B3B3B"));


try set the second textview marginleft=1dp. if you don't want divider set marginleft = 0dp

Related

adding a table layout in linear layout

I am trying to add a table inside a linear layout. Inside my linear layout there is textview, spinner. When I try to add a table layout it doesn't align correctly. Below is my code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/cardLayout"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Product"
android:gravity="center"
android:textStyle="bold"
android:textSize="18sp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10sp"
android:layout_margin="10sp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:orientation="vertical">
<Spinner
android:id="#+id/product_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
>
<TableRow android:background="#0079D6" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Product Name" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Sale" />
</TableRow>
<TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
Output
Expected Output
I must be missing something that I don't know. How can I align them equally just like in the above image
Any help would be highly appreciated.

Try using below code:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Product"
android:gravity="center"
android:textStyle="bold"
android:textSize="18sp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<Spinner
android:id="#+id/product_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
/>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_gravity="center"
>
<TableRow android:background="#0079D6" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Product Name" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Sale" />
</TableRow>
<TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>

android:gravity not changing the position of the text in a TextView

I am writing code for an activity that has a table that initially contains 2 rows(see screenshot). I would like the text in those 2 rows to be in the center(not the TextView).
However, setting android:gravity = "center" or android:gravity = "center_horizontal" does not affect the text at all.
What am I missing?
Screenshot
activity_game.xml:
<LinearLayout 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:background="#android:color/white"
android:orientation="horizontal"
android:padding="16dp"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/tl1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TableRow
android:id="#+id/tr_header_p1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/player1_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Player 1"
android:textColor="#000000"
android:textSize="24sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/table_cell_bg"
android:gravity="center"
android:text="Guess"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/table_cell_bg"
android:gravity="center"
android:text="Bulls"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Cows"
android:textColor="#000000"
android:textSize="16sp" />
</TableRow>
</TableLayout>
<TableLayout
android:id="#+id/tl2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TableRow
android:id="#+id/tr_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/player2_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Player 2"
android:textColor="#000000"
android:textSize="24sp" />
</TableRow>
<TableRow
android:id="#+id/tr_header2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/table_cell_bg"
android:gravity="center"
android:text="Guess"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/table_cell_bg"
android:gravity="center"
android:text="Bulls"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Cows"
android:textColor="#000000"
android:textSize="16sp" />
</TableRow>
</TableLayout>

Try this should work,
add android:gravity="center" to your #+id/tr_header_p1 and #+id/tr_header
like,
<TableRow
android:id="#+id/tr_header_p1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp">
and
<TableRow
android:id="#+id/tr_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp">
this might helps you
EDIT 1
or you need to mention the android:layout_weight="1" to your TextView. like
<TextView
android:id="#+id/player2_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="Player 2"
android:textColor="#000000"
android:textSize="24sp" />

Try this:
<LinearLayout 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:background="#android:color/white"
android:orientation="horizontal"
android:padding="16dp"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/tl1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TableRow
android:id="#+id/tr_header_p1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/player1_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Player 1"
android:textColor="#000000"
android:textSize="24sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/table_cell_bg"
android:gravity="center"
android:text="Guess"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/table_cell_bg"
android:gravity="center"
android:text="Bulls"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Cows"
android:textColor="#000000"
android:textSize="16sp" />
</TableRow>
</TableLayout>
<TableLayout
android:id="#+id/tl2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TableRow
android:id="#+id/tr_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:id="#+id/player2_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Player 2"
android:textColor="#000000"
android:textSize="24sp" />
</TableRow>
<TableRow
android:id="#+id/tr_header2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:padding="5dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/table_cell_bg"
android:gravity="center"
android:text="Guess"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/table_cell_bg"
android:gravity="center"
android:text="Bulls"
android:textColor="#000000"
android:textSize="16sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Cows"
android:textColor="#000000"
android:textSize="16sp" />
</TableRow>
</TableLayout>
</LinearLayout>

You can try setting layout_width to wrap_content and then set layout_gravity to center.
That align the entire TextView and not the text inside it

What if you used android:layout_gravity from your TextView which is gonna affect the position of the element according its parent? There's a thread explaining the difference between both below
Gravity and layout_gravity on Android

<TableRow
android:id="#+id/tr_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/table_row_bg"
android:gravity="center_horizontal"
android:padding="5dp">
<TextView
android:id="#+id/player2_name"
android:layout_width="match_parent"
android:gravity="center"
android:text="Player 2"
android:textColor="#000000"
android:textSize="24sp" />
</TableRow>
This is working for me

try for the TableRow parent of TextView
android:gravity="CENTER_HORIZONTAL"
the default layout of a table it's applied to children nodes, as described in documentation here

Replacing TableLayout with ListView?

I am currently using TableLayout inside ScrollView and Multiple ListView inside TableRows for getting following results.
With following XML
<?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:orientation="vertical" >
<include layout="#layout/progress_bar" />
<ScrollView
android:id="#+id/sv"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tr_lbl_topSongs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/app_orange"
android:padding="5dp" >
<TextView
android:id="#+id/tv_lbl_topSongs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Top Songs"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/app_white" />
</TableRow>
<TableRow
android:id="#+id/tr_content_topSongs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" >
<ListView
android:id="#+id/lv_topSongs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:listSelector="#android:color/transparent" >
</ListView>
</TableRow>
<TableRow
android:id="#+id/tr_viewMore_topSongs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#color/app_offwhite"
android:gravity="center_horizontal|center_vertical"
android:padding="5dp" >
<TextView
android:id="#+id/tv_viewMore_topSongs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal|center_vertical"
android:text="View More"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/app_gray" />
</TableRow>
<TableRow
android:id="#+id/tr_lbl_topVideos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/app_orange"
android:padding="5dp" >
<TextView
android:id="#+id/tv_lbl_topVideos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Videos"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/app_white" />
</TableRow>
<TableRow
android:id="#+id/tr_content_topVideos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" >
<ListView
android:id="#+id/lv_topVideos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:listSelector="#android:color/transparent" >
</ListView>
</TableRow>
<TableRow
android:id="#+id/tr_viewMore_topVideos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#color/app_offwhite"
android:gravity="center_horizontal|center_vertical"
android:padding="5dp" >
<TextView
android:id="#+id/tv_viewMore_topVideos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal|center_vertical"
android:text="View More"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/app_gray" />
</TableRow>
<TableRow
android:id="#+id/tr_lbl_topRingtones"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/app_orange"
android:padding="5dp" >
<TextView
android:id="#+id/tv_lbl_topRingtones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Ringtones"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/app_white" />
</TableRow>
<TableRow
android:id="#+id/tr_content_topRingtones"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" >
<ListView
android:id="#+id/lv_topRingtones"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:listSelector="#android:color/transparent" >
</ListView>
</TableRow>
<TableRow
android:id="#+id/tr_viewMore_topRingtones"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_weight="1"
android:background="#color/app_offwhite"
android:gravity="center_horizontal|center_vertical"
android:padding="5dp" >
<TextView
android:id="#+id/tv_viewMore_topRingtones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal|center_vertical"
android:text="View More"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/app_gray" />
</TableRow>
</TableLayout>
</ScrollView>
</LinearLayout>
I done hacks on ListViews for Scroll issues created by Conflict of ScrollView and ListView. Now I realized that this is creating some mess with NavigationDrawer I want to shift to single ListView Approach. Is it possible? Any Example? Thanks in Advance.

Android: making a simple layout

I would like to construct a simple table layout in Android BUT I got some problems with it.
At part 1: there are some text views so I would like to put that TableRow's height to wrap_content.
At part 2: same thing.
It works all still now BUT:
At part 3: there are 2 listview-s and at part 4 there are some buttons.
I would like to do something like this:
let the part 4's height to wrap content but make the part 3 to fill all the empty space on the screen.
Please give me a solution for this, beacause when i probed the part 3 filled out all the emty space till the bottom of the screen. Now I tryed with weight_sum BUT I do not like it because I would let the 4'd row to wrap_content.
<TableLayout 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:background="#android:color/black"
android:weightSum="1.0" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:weightSum="1.0" >
<TextView
android:id="#+id/phone_tab_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:background="#layout/style_right_border"
android:gravity="center"
android:singleLine="true"
android:text="Phone Tab"
android:textColor="#android:color/white"
android:textSize="14dp" />
<TextView
android:id="#+id/pc_tab_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:gravity="center"
android:singleLine="true"
android:text="PC Tab"
android:textColor="#android:color/white"
android:textSize="14dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#layout/style_bottom_border" >
<TextView
android:id="#+id/phone_path_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:background="#layout/style_bott_right_border"
android:gravity="center"
android:paddingBottom="5dp"
android:singleLine="true"
android:text="mnt/sdcard/Movies/dpad/sadas/asda/sda/as"
android:textColor="#android:color/white"
android:textSize="8dp" />
<TextView
android:id="#+id/pc_path_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:gravity="center"
android:paddingBottom="5dp"
android:singleLine="true"
android:text="mnt/sdcard/Movies/dpad/sadas/asda/sda/as"
android:textColor="#android:color/white"
android:textSize="8dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.9"
android:weightSum="1.0" >
<ListView
android:id="#+id/listview_phone_files"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:background="#layout/style_right_border" />
<ListView
android:id="#+id/listview_pc_files"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.1"
android:background="#layout/style_top_border"
android:gravity="center"
android:weightSum="1.0" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="Button" />
<ImageButton
android:id="#+id/button_active_tab_changer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:background="#android:color/transparent"
android:onClick="changeActiveTabButton"
android:src="#drawable/button_change_tab" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="Button" />
</TableRow>

Create a RelativeLayout as parent and place the TableLayouts inside that. That allows you to use alignParentBottom and alignParentTop layaout params.

check it this layout, but please keep your old layout file in backup.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:background="#android:color/black"
android:weightSum="1.0" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:weightSum="1.0" >
<TextView
android:id="#+id/phone_tab_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:singleLine="true"
android:text="Phone Tab"
android:textColor="#android:color/white"
android:textSize="14dp" />
<TextView
android:id="#+id/pc_tab_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:gravity="center"
android:singleLine="true"
android:text="PC Tab"
android:textColor="#android:color/white"
android:textSize="14dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/phone_path_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:paddingBottom="5dp"
android:singleLine="true"
android:text="mnt/sdcard/Movies/dpad/sadas/asda/sda/as"
android:textColor="#android:color/white"
android:textSize="8dp" />
<TextView
android:id="#+id/pc_path_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:gravity="center"
android:paddingBottom="5dp"
android:singleLine="true"
android:text="mnt/sdcard/Movies/dpad/sadas/asda/sda/as"
android:textColor="#android:color/white"
android:textSize="8dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1" >
<ListView
android:id="#+id/listview_phone_files"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ListView
android:id="#+id/listview_pc_files"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.1"
android:gravity="center"
android:weightSum="1.0" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="Button" />
<ImageButton
android:id="#+id/button_active_tab_changer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:background="#android:color/transparent"
android:onClick="changeActiveTabButton"
android:src="#android:drawable/ic_delete" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="Button" />
</TableRow>
</TableLayout>

set tableRow3's android:layout_height to 0, and android:layout_weight to 1. The other tableRows can use android:layout_height="wrap_content".

how to optimize this layout?

I have this xml layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:background="#FFFFFF">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/nektaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="10pt"
android:textAlignment="center"
android:text="example text will not be used" />
<ImageView
android:id="#+id/horilinee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:src="#drawable/horiline" />
<TableRow
android:id="#+id/table"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<Button
android:id="#+id/send"
android:text="أرسل"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<EditText
android:id="#+id/commenttext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="اكتب التعليق هنا"
android:minLines="1"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:scrollHorizontally="true"
android:scrollbars="vertical"
android:layout_weight="1"
android:singleLine="false" />
</TableRow>
<ImageView
android:id="#+id/horilineee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:src="#drawable/horiline" />
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
</TableLayout>
</ScrollView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:id="#+id/tableRow0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom"
android:paddingBottom="10dp"
android:paddingTop="10dp" >
<ImageView
android:id="#+id/horiline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/horiline" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/share" />
<ImageView
android:id="#+id/block"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/block" />
<ImageView
android:id="#+id/thumbdown"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/thumbdown" />
<ImageView
android:id="#+id/thumbup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/thumbup" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<TextView
android:id="#+id/sharetext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="شارك"
android:textSize="12dp" />
<TextView
android:id="#+id/blocktext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="إبلاغ إساءة"
android:textSize="12dp" />
<TextView
android:id="#+id/dislikenumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:textColor="#FF0000"
android:textSize="12dp" />
<TextView
android:id="#+id/likenumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:textColor="#00FF00"
android:textSize="12dp" />
</TableRow>
</TableLayout>
</LinearLayout>
</RelativeLayout>
but it doesn't seems to be working as I want it to be. I need it like the following figure:
The problem with my code is the list view I can't stretch it to the bottom before the tablelayout. The other problem comes if the textview at the top is too long, it appears under the tablelayout and it's visible.
Also the tablelayout at the bottom shifted up when the keyboard is visible, I don't want this to happen.
Any suggestion please?

Have a single ListView in your layout. You can add other views(as shown in your diagram) as headers to the list view using addHeaderView() method. This way you will get the Scrolling effect as you desired.

Thank you all for your support. I came up with a better solution:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_weight="1" >
<TextView
android:id="#+id/nektaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="example text will not be used"
android:textAlignment="center"
android:textSize="10pt" />
</ScrollView>
<ImageView
android:id="#+id/horilinee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="#drawable/horiline" />
<TableRow
android:id="#+id/table"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.5"
android:gravity="bottom" >
<Button
android:id="#+id/send"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:text="أرسل" />
<EditText
android:id="#+id/commenttext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="اكتب التعليق هنا"
android:minLines="1"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:scrollHorizontally="true"
android:scrollbars="vertical"
android:singleLine="false" />
</TableRow>
<ImageView
android:id="#+id/horilineee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="#drawable/horiline" />
<ListView
android:id="#id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:drawSelectorOnTop="false"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="end" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:id="#+id/tableRow0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom"
android:paddingBottom="10dp"
android:paddingTop="10dp" >
<ImageView
android:id="#+id/horiline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/horiline" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/share" />
<ImageView
android:id="#+id/block"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/block" />
<ImageView
android:id="#+id/thumbdown"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/thumbdown" />
<ImageView
android:id="#+id/thumbup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/thumbup" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="bottom" >
<TextView
android:id="#+id/sharetext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="شارك"
android:textSize="12dp" />
<TextView
android:id="#+id/blocktext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="إبلاغ إساءة"
android:textSize="12dp" />
<TextView
android:id="#+id/dislikenumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:textColor="#FF0000"
android:textSize="12dp" />
<TextView
android:id="#+id/likenumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:textColor="#00FF00"
android:textSize="12dp" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>

ScrollView needs to declare :
android:layout_above="#+id/Layout1"
Layout1 is the layout that host tableLayout1
But you will have some issues with ListView into scrollView

As there are only two Layout in your RelativeLayout, use LinearLayout. This will solve the overlap problem. Set the weight of ScrollView to keep the TableLayout at bottom.
The keyboard shift the Bottom table layout because it's mode is set to Resize. You will usually control this behavior through the android:windowSoftInputMode attribute on each definition in your AndroidManifest.xml. Set the value of this to adjustPan.

Categories

Resources