troubles with tables...

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

troubles with tables...

Postby darolla » Sat Nov 01, 2008 4:07 pm

hi,

i'd like to create a table, that has 100% width (fill_parent).

It has 1 tablerow with 2 textviews.

textview1 "left side:" has to be aligned to the left.

textview2 "right value" has to be aligned to the right.

but this doesnt be that simple :(

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <ScrollView android:id="@+id/sv"
  5.  
  6.         xmlns:android="http://schemas.android.com/apk/res/android"
  7.  
  8.         android:layout_width="fill_parent"
  9.  
  10.         android:layout_height="wrap_content"
  11.  
  12.         android:scrollbars="none">
  13.  
  14.  
  15.  
  16.         <TableLayout android:id="@+id/table"
  17.  
  18.                 android:layout_width="fill_parent"
  19.  
  20.                 android:layout_height="wrap_content">
  21.  
  22.  
  23.  
  24.                 <TableRow android:id="@+id/tr1"
  25.  
  26.                         android:layout_width="fill_parent"
  27.  
  28.                         android:layout_height="wrap_content"
  29.  
  30.                         android:layout_gravity="fill_horizontal">
  31.  
  32.                        
  33.  
  34.                         <TextView android:id="@+id/tr1tv1"
  35.  
  36.                                 android:text="left side:"
  37.  
  38.                                 android:layout_gravity="left"
  39.  
  40.                                 android:layout_width="fill_parent"></TextView>
  41.  
  42.  
  43.  
  44.                         <TextView android:id="@+id/tr1tv2"
  45.  
  46.                                 android:text="right value"
  47.  
  48.                                 android:layout_gravity="right"></TextView>
  49.  
  50.                                
  51.  
  52.                 </TableRow>
  53.  
  54.  
  55.  
  56.         </TableLayout>
  57.  
  58.  
  59.  
  60. </ScrollView>
  61.  
  62.  
Parsed in 0.004 seconds, using GeSHi 1.0.8.4


this produces this:

greetings,
darolla
Attachments
device.png
device.png (5.97 KiB) Viewed 602 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Top

Postby darolla » Sat Nov 01, 2008 4:14 pm

now i try to align the right textview using a 250px width for the left one

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <ScrollView android:id="@+id/sv"
  5.  
  6.         xmlns:android="http://schemas.android.com/apk/res/android"
  7.  
  8.         android:layout_width="fill_parent"
  9.  
  10.         android:layout_height="wrap_content"
  11.  
  12.         android:scrollbars="none">
  13.  
  14.  
  15.  
  16.         <TableLayout android:id="@+id/table"
  17.  
  18.                 android:layout_width="fill_parent"
  19.  
  20.                 android:layout_height="wrap_content">
  21.  
  22.  
  23.  
  24.                 <TableRow android:id="@+id/tr1"
  25.  
  26.                         android:layout_width="fill_parent"
  27.  
  28.                         android:layout_height="wrap_content"
  29.  
  30.                         android:layout_gravity="fill_horizontal">
  31.  
  32.                        
  33.  
  34.                         <TextView android:id="@+id/tr1tv1"
  35.  
  36.                                 android:text="left side:"
  37.  
  38.                                 android:layout_gravity="left"
  39.  
  40.                                 android:layout_width="fill_parent"
  41.  
  42.                                 android:width="250px"></TextView>
  43.  
  44.  
  45.  
  46.                         <TextView android:id="@+id/tr1tv2"
  47.  
  48.                                 android:text="right value"
  49.  
  50.                                 android:layout_gravity="right"></TextView>
  51.  
  52.                                
  53.  
  54.                 </TableRow>
  55.  
  56.  
  57.  
  58.         </TableLayout>
  59.  
  60.  
  61.  
  62. </ScrollView>
  63.  
  64.  
Parsed in 0.004 seconds, using GeSHi 1.0.8.4


Well, thats not bad, but rotating the phone destroys my design :(
Attachments
device2.png
device2.png (7.16 KiB) Viewed 594 times
device.png
device.png (5.99 KiB) Viewed 594 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sat Nov 01, 2008 4:15 pm

so please, how can I align the textviews ?

thanks & greetings,
darolla
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby darolla » Sat Nov 01, 2008 4:31 pm

damnit :roll:

it has to be android:stretchColumns="1" inside <TableLayout>

Dont fully understand but this seems to work:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  7.  
  8.         android:id="@+id/table"
  9.  
  10.         android:layout_width="fill_parent"
  11.  
  12.         android:layout_height="wrap_content"
  13.  
  14.         android:stretchColumns="1">
  15.  
  16.  
  17.  
  18.         <TableRow android:id="@+id/tr1">
  19.  
  20.  
  21.  
  22.                 <TextView android:id="@+id/tr1tv1"
  23.  
  24.                         android:text="left side:"
  25.  
  26.                         android:layout_gravity="left"></TextView>
  27.  
  28.  
  29.  
  30.                 <TextView android:id="@+id/tr1tv2"
  31.  
  32.                         android:text="right value"
  33.  
  34.                         android:layout_gravity="right"></TextView>
  35.  
  36.  
  37.  
  38.         </TableRow>
  39.  
  40.  
  41.  
  42. </TableLayout>
  43.  
  44.  
Parsed in 0.002 seconds, using GeSHi 1.0.8.4


Greetings,
DaRolla
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby Quetzalcoatl » Sat Nov 01, 2008 4:33 pm

Is there anyway of determining the screen width? Not sure if it's possible in XML but there must surely be a way at runtime? So you can change the width of the right TextView dependent on the screen width or layout.

Or is it even possible to have 2 separate xml files and using SetContentView on the correct one in your onCreate method at runtime (after detecting whether it's in landscape or portrait)?
Image
Quetzalcoatl
Senior Developer
Senior Developer
 
Posts: 129
Joined: Sat Oct 18, 2008 8:21 pm
Location: near Manchester, UK

Postby Quetzalcoatl » Sat Nov 01, 2008 4:40 pm

This might be helpful, not looked into it myself yet but I'm curious so will have a read myself :)

Device Configuration
Image
Quetzalcoatl
Senior Developer
Senior Developer
 
Posts: 129
Joined: Sat Oct 18, 2008 8:21 pm
Location: near Manchester, UK

Top

Postby darolla » Sat Nov 01, 2008 4:41 pm

alrite, now I want to have a table with 4 textviews, that should be aligned nicely, all the same distance.

this one isnt working at all:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3.  
  4.  
  5. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  6.  
  7.         android:id="@+id/table"
  8.  
  9.         android:layout_width="fill_parent"
  10.  
  11.         android:layout_height="wrap_content"
  12.  
  13.         android:stretchColumns="1">
  14.  
  15.  
  16.  
  17.         <TableRow android:id="@+id/tr1">
  18.  
  19.  
  20.  
  21.                 <TextView android:id="@+id/tr1tv1"
  22.  
  23.                         android:text="AAA"
  24.  
  25.                         android:layout_gravity="left"></TextView>
  26.  
  27.  
  28.  
  29.                 <TextView android:id="@+id/tr1tv2"
  30.  
  31.                         android:text="BBB"
  32.  
  33.                         android:layout_gravity="left|center"></TextView>
  34.  
  35.  
  36.  
  37.                 <TextView android:id="@+id/tr1tv3"
  38.  
  39.                         android:text="CCC"
  40.  
  41.                         android:layout_gravity="right|center"></TextView>
  42.  
  43.  
  44.  
  45.                 <TextView android:id="@+id/tr1tv4"
  46.  
  47.                         android:text="DDD"
  48.  
  49.                         android:layout_gravity="right"></TextView>
  50.  
  51.  
  52.  
  53.         </TableRow>
  54.  
  55.  
  56.  
  57. </TableLayout>
  58.  
  59.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4


nor this:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3.  
  4.  
  5. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  6.  
  7.         android:id="@+id/table"
  8.  
  9.         android:layout_width="fill_parent"
  10.  
  11.         android:layout_height="wrap_content"
  12.  
  13.         android:stretchColumns="1">
  14.  
  15.  
  16.  
  17.         <TableRow android:id="@+id/tr1">
  18.  
  19.  
  20.  
  21.                 <TextView android:id="@+id/tr1tv1"
  22.  
  23.                         android:text="AAA"
  24.  
  25.                         android:layout_gravity="left"></TextView>
  26.  
  27.  
  28.  
  29.                 <TextView android:id="@+id/tr1tv2"
  30.  
  31.                         android:text="BBB"
  32.  
  33.                         android:layout_gravity="center"></TextView>
  34.  
  35.  
  36.  
  37.                 <TextView android:id="@+id/tr1tv3"
  38.  
  39.                         android:text="CCC"
  40.  
  41.                         android:layout_gravity="center"></TextView>
  42.  
  43.  
  44.  
  45.                 <TextView android:id="@+id/tr1tv4"
  46.  
  47.                         android:text="DDD"
  48.  
  49.                         android:layout_gravity="right"></TextView>
  50.  
  51.  
  52.  
  53.         </TableRow>
  54.  
  55.  
  56.  
  57. </TableLayout>
  58.  
  59.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4


who helps me on this?

greetings,
DaRolla
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby Quetzalcoatl » Sat Nov 01, 2008 11:57 pm

Is it not possible to have 2 TableLayouts? one for the left side of the screen and one for the right? Then you could have 2 lots of:

Code: Select all
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/table"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:stretchColumns="1">

     <TableRow android:id="@+id/tr1">

          <TextView android:id="@+id/tr1tv1"
               android:text="AAA"
               android:layout_gravity="left"></TextView>

          <TextView android:id="@+id/tr1tv4"
               android:text="DDD"
               android:layout_gravity="right"></TextView>

     </TableRow>

</TableLayout>


The trouble with using layout_gravity is that it's trying to use that to place it within it's parent container. So if you are saying 'center (or centre for those that can spell :D) ' then it is trying to place it in the centre which it then does but confuses the next one.

So I'd suggest creating something like a FrameLayout and placing 2 TableLayouts inside it, each with two TextViews. It's a bit more messing around but it'll give you more control.
Image
Quetzalcoatl
Senior Developer
Senior Developer
 
Posts: 129
Joined: Sat Oct 18, 2008 8:21 pm
Location: near Manchester, UK

Postby Quetzalcoatl » Sun Nov 02, 2008 12:20 am

Also have a look at table_layout_3.xml from the APIDemos included in the SDK. It looks like you can add some cell padding so that you can separate cells slightly:

Code: Select all
<TableRow>
        <TextView
            android:text="@string/table_layout_3_triple_star"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_3_save"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_3_save_shortcut"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_3_too_long"
            android:padding="3dip" />
    </TableRow>


Allowing you to set the column spacing slightly.
Image
Quetzalcoatl
Senior Developer
Senior Developer
 
Posts: 129
Joined: Sat Oct 18, 2008 8:21 pm
Location: near Manchester, UK

Postby Quetzalcoatl » Sun Nov 02, 2008 12:48 am

Code: Select all
<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="0,1,2,3">

    <TableRow>
        <TextView
            android:text="word1"
            android:padding="3dip" />
        <TextView
            android:text="word2"
            android:padding="3dip"
            android:layout_gravity="center" />
        <TextView
            android:text="word3"
            android:padding="3dip"
            android:layout_gravity="center" />
        <TextView
            android:text="word4"
            android:padding="3dip"
            android:layout_gravity="right" />
    </TableRow>
</TableLayout>


I think the winner here is
Code: Select all
android:stretchColumns="0,1,2,3"
so that each column is stretched as required.

Is this what you required? :D
Attachments
TableLayout.JPG
TableLayout.JPG (27.55 KiB) Viewed 543 times
Image
Quetzalcoatl
Senior Developer
Senior Developer
 
Posts: 129
Joined: Sat Oct 18, 2008 8:21 pm
Location: near Manchester, UK

Postby darolla » Mon Nov 03, 2008 11:25 am

well, thank u mate :)

after taking a closer look I can see that the distance between both center elements is smaller than between the others...

but I think this solution is the best I've seen yet :)

greetings,
DaRolla
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby Quetzalcoatl » Mon Nov 03, 2008 11:29 am

I'm sure you will be able to even them up somewhat with adjusting the padding and layout gravity of the two centre columns :)
Image
Quetzalcoatl
Senior Developer
Senior Developer
 
Posts: 129
Joined: Sat Oct 18, 2008 8:21 pm
Location: near Manchester, UK

Top

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 6 guests