Aligning views with views outside the RelativeLayout

Question

I am designing a table using RelativeLayout in Android and add entries programmically. The result pleases me so far:

Table using RelativeLayout

The layout code is

<RelativeLayout
    android:id="@+id/table_relativelayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
  <TextView
      android:id="@+id/column1_header"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true"
      android:text="@string/column1_header"
      style="?android:attr/listSeparatorTextViewStyle"
      android:layout_weight="1.0"
      />
  <TextView
      android:id="@+id/column2_header"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_alignBaseline="@id/column1_header"
      android:text="@string/column1_header"
      android:textSize="14sp"
      android:textStyle="bold"
      android:textAllCaps="true"
      android:textColor="@color/textColor"
      />
  <TextView
      android:id="@+id/column3_header"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_alignBaseline="@id/column1_header"
      android:text="@string/column3_header"
      android:textSize="14sp"
      android:textAllCaps="true"
      android:textStyle="bold"
      android:paddingRight="8dip"
      />

  <TextView
      android:id="@+id/example_column1_entry"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignLeft="@id/column1_header"
      android:text=""
      android:paddingLeft="8dip"
      android:visibility="gone"
      />
  <TextView
      android:id="@+id/example_column2_entry"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignRight="@id/column2_header"
      android:text=""
      android:visibility="gone"
      />
  <TextView
      android:id="@+id/example_column3_entry"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignRight="@id/column3_header"
      android:paddingRight="8dip"
      android:text=""
      android:visibility="gone"
      />

</RelativeLayout>

However, as more entries are added, scrolling becomes necessary. So I wrap the whole thing in a ScrollView (as per this answer)

<ScrollView
  android:id="@+id/table_scrollview"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:scrollbars="vertical"
  android:fillViewport="true"
  >
    ...
</ScrollView>

This of course has the result that the header row is hidden if I scroll down. I'd much rather have it outside the ScrollView but then I don't know how to align the entries with the header. Any ideas?

I had a hard time achieving quite the same look with a ListView. If you know how to, I'd be interested. — heiner, Mar 12 '15 at 11:43

klimat · Answer 1 · 2015-03-12T11:52:15.170

Try with something like this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <LinearLayout 
       android:id="@+id/header"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:layout_alignParentTop="true">
    <TextView
      android:id="@+id/column1_header"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true"
      android:text="@string/column1_header"
      style="?android:attr/listSeparatorTextViewStyle"
      android:layout_weight="1.0"
      />
  <TextView
      android:id="@+id/column2_header"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_alignBaseline="@id/column1_header"
      android:text="@string/column1_header"
      android:textSize="14sp"
      android:textStyle="bold"
      android:textAllCaps="true"
      android:textColor="@color/textColor"
      />
  <TextView
      android:id="@+id/column3_header"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_alignBaseline="@id/column1_header"
      android:text="@string/column3_header"
      android:textSize="14sp"
      android:textAllCaps="true"
      android:textStyle="bold"
      android:paddingRight="8dip"
      />
</LinearLayout>
<ScrollView 
    android:layout_below="@id/header"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <LinearLayout
       android:id="@+id/scroll_view_container"
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

       <rows>

    </LinearLayout>

</ScrollView>
<RelativeLayout>

JacksOnF1re · Answer 2 · 2015-03-12T12:45:12.320

you don't want to do this with xml. Because you simply can't reference views inside of an relativeLayout from the outside and vice versa, to align things. I had to deal with exactly your issue, as I implemented a in size selfadjusting tableView. The trick is to add all your textViews for one row into a ViewGroup (LinearLayout e.g, because easy to use with addView) and calculate the width of every row header in forehand. Than set the size of the viewGroups programmaticaly. That's the key. This way, you can easily change your row header later and keep beeing flexible. Moreover you are not limited to a fixed size of columns.

calculate the width of the header
set the size of the (e.g) LinearLayouts for every row
add all TextViews to the LinearLayouts

This should hopefully help you. Answers to all the upcoming question for calculation sizes etc, should you find yourself on stackoverflow.

Greets, Steve.

score 0 · Accepted Answer · answered Mar 12 '15 at 13:07

0

OK, I found a solution: I'll have the three header TextViews outside of the ScrollView, as suggested by several commenters, and three additional "header" TextViews with the same parameters plus android:visibility="invisible" inside the ScrollViews. Those invisible TextViews will be used to align the visible entries.

Thanks for your answers!

answered Mar 12 '15 at 13:07

heiner

598
6
11

That's not realy a "solution". Now you have some header, which are useless, but take space on the screen. But if it works, great. Happy coding. – JacksOnF1re Mar 12 '15 at 17:34
I think you missunderstood: It does not take space on the screen since I add the first entry on top of it, not below. Its invisible, and as soon as the first visible entry is added I could in fact delete it forever. – heiner Mar 12 '15 at 21:19

Aligning views with views outside the RelativeLayout

3 Answers3