tablelayout that don't show all - android

This is a menu with tablelayout that have tree tablerows, one with two textview, other two listview, and finally a button to start the game...
and my problem is that the last tablerow with the button to start don't show in the device. i dont have any idea to fix this, help!!
My tablelayout:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff02fdff"
android:gravity="center_vertical|center_horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:shrinkColumns="*"
android:stretchColumns="*">
<TableRow android:gravity="center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:background="#ff02057d"
android:text="#string/nivel"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ff02fdff"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textView2"
android:layout_margin="10dp"
android:background="#ff02057d"
android:text="#string/dibujo"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ff02fdff"
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow android:gravity="center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:choiceMode="singleChoice"
android:layout_margin="10dp"
android:layout_weight="1"
android:id="#+id/listView"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<ListView
android:choiceMode="singleChoice"
android:layout_margin="10dp"
android:layout_weight="1"
android:id="#+id/listView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:gravity="center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/inicio"
android:layout_margin="10dp"
android:background="#ff02057d"
android:gravity="center"
android:text="#string/bt_1"
android:textAppearance="#android:style/TextAppearance.Large"
android:textColor="#ff02fdff"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>

Related

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.

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.

How to include blank view in Layout

i design a login view. I want to insert a fragment layout which is placed at the center of parent view. I hard code to input some fragment layout to make this effect. But, does there exist better way to do this.
This is my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="2"
android:orientation="horizontal">
<FrameLayout
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
<FrameLayout
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="2">
</FrameLayout>
<FrameLayout
android:id="#+id/login_frame"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
</FrameLayout>
</LinearLayout>
Thanks you.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical">
<TableRow
android:id="#+id/row1"
android:layout_marginTop="25dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtUserName"
android:layout_marginLeft="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="Username"
android:textSize="16sp" />
</TableRow>
<TableRow
android:id="#+id/row2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:inputType="text"
android:id="#+id/editUsername"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_weight="2"
android:singleLine="true"
android:layout_marginLeft="50dp"
android:layout_marginTop="2dip"
android:layout_marginRight="50dp"
android:padding="10dp"/>
</TableRow>
<TableRow
android:id="#+id/row3"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/txtPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:layout_marginLeft="50dp"
android:text="password"
android:textSize="16sp" />
</TableRow>
<TableRow
android:id="#+id/row4"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:inputType="textPassword"
android:id="#+id/editPassword"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_weight="2"
android:layout_marginTop="2dip"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
android:padding="10dp"
android:password="true"
android:singleLine="true"/>
</TableRow>
<TableRow
android:id="#+id/row5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/chkRememberPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="52dp"
android:padding="10dp"
android:textSize="15sp"
android:text="rememberme"
/>
</TableRow>
<TableRow
android:id="#+id/row6"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/login"
android:layout_width="100dp"
android:layout_height="35dp"
android:text="login"
android:textStyle="bold"
android:layout_marginLeft="102dp"/>
</TableRow>

Android: when wrap_content doesn't just wrap its content?

I have a following xml layout in my project (incidentally, if you notice something else that is also seemingly wrong/not so good yet, I'd appreciate you let me know about it!) and my problem is the attribute "wrap_contents" doesn't work at the last TextView ("EEE", txt4). Is there any regulation I overlook?
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TableLayout
android:id="#+id/Table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="AAA"
android:textColor="#color/white" />
<Spinner
android:id="#+id/spn1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/array1" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/edt1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="BBB"
android:textColor="#color/white" />
<Spinner
android:id="#+id/spn2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:entries="#array/Tounyuhou" />
<EditText
android:id="#+id/edt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5"
android:inputType="numberSigned"/>
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="CCC" android:textColor="#color/white"
android:gravity="center_vertical|center_horizontal"
android:textSize="18sp"/>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txt3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:text="DDD"
android:textColor="#color/white" />
<EditText
android:id="#+id/edt3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right|center_vertical">
</EditText>
<TextView
android:id="#+id/txt4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="EEE"
android:textColor="#color/white"
android:gravity="center_vertical|center_horizontal"
android:textSize="20sp"/>
</TableRow>
</TableLayout>
</merge>

here you define all the rows in same layout , but with different number of views, like row1 contain 2 , row2 contain 4 then row3 contain 3 views,
so it gives problem,
so my suggetion take different tablelayout for third row.
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TableLayout
android:id="#+id/mainTable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TableRow
android:id="#+id/mainTable_tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<TableLayout
android:id="#+id/Table"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="AAA"
android:textColor="#color/white" />
<Spinner
android:id="#+id/spn1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/array1" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/edt1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="BBB"
android:textColor="#color/white" />
<Spinner
android:id="#+id/spn2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:entries="#array/Tounyuhou" />
<EditText
android:id="#+id/edt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5"
android:inputType="numberSigned"/>
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="CCC" android:textColor="#color/white"
android:gravity="center_vertical|center_horizontal"
android:textSize="18sp"/>
</TableRow>
</TableLayout>
</TableRow>
<TableRow
android:id="#+id/mainTable_tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<TableLayout
android:id="#+id/Table2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TableRow
android:id="#+id/table2_tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txt3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:text="DDD"
android:textColor="#color/white" />
<EditText
android:id="#+id/edt3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right|center_vertical">
</EditText>
<TextView
android:id="#+id/txt4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="EEE"
android:textColor="#color/white"
android:gravity="center_vertical|center_horizontal"
android:textSize="20sp"/>
</TableRow>
</TableLayout>
</TableRow>
</TableLayout>
</merge>

How to set divider between columns in tablelayout?

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

Categories

Resources