Develop Reference

Aligning views with views outside the RelativeLayout

I am designing a table using RelativeLayout in Android and add entries programmically. The result pleases me so far:
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?

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>

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.

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!

How would I center this for the android

I am trying to center two Text Views horizontally so that are next to each other at the top of the screen. I am doing this because one of the TextViews will be larger than the other. Here is my code
<TableRow
android:layout_gravity="center">
<TextView
android:layout_column="1"
android:padding="3dip"
android:gravity="right"
android:text="open" />
<TextView
android:padding="3dip"
android:gravity="left"
android:text="Ctrl O" />
</TableRow>

So you want your views next to each other and in the center of the screen like this?
| View1|reallylongView2 |
Generally try to avoid table rows unless you actually want to have a table. If you want what I've shown above, the best thing to do would be to have a single text view, particularly since the order of the text might need to change if you ever internationalize your app.
Otherwise try a relative layout parent, with a centered horizontal linear layout child, which in turn contains both of your text views like so:
<RelativeLayout
...
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal" >
<TextView ... />
<TextView ... />
</LinearLayout>
</RelativeLayout>
Otherwise you need to clarify what you're looking for. A screenshot, or ascii art would be helpful.

I didn't quite get your question bit is this what you are looking for:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip"
android:text="open" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="3dip"
android:text="Ctrl O" />
</TableRow>
</TableLayout>

Android and displaying multi-lined text in a TextView in a TableRow

I'm displaying a TableLayout with rows as follows:
<?xml version="1.0" encoding="utf-8"?>
<TableRow
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/one"
android:layout_marginLeft="10dip"
android:textColor="#B0171F" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/one"
android:id="#+id/two"
android:layout_marginLeft="10dip"
android:ellipsize="none"
android:singleLine="false"
android:scrollHorizontally="false"
android:maxLines="10"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
I'm hitting this with everything I can find here and can think of to permit the text to wrap on many lines but to no avail: The text is always forced to a single line, running off the screen. It might matter that I'm working inside a TableRow here, and so far as I can tell this hasn't been treated on this site.
So, how do I force my second TextView to wrap to many lines?

The TextView will wrap the text if the column it's in is set to shrink. Sometimes it does not wrap exactly, if the text ends with ", ...", then it is a little bit longer than exactly n lines.
Here's an example, the TextView with the id question will wrap:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="*">
<TableRow>
<TextView
android:id="#+id/question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>

For the sake of completeness, this is how my TableLayout reads in XML:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:shrinkColumns="0"
android:stretchColumns="0"
android:id="#+id/summaryTable">
</TableLayout>
I later populate this with TableRows.

By code also works:
TableLayout tablelayout = (TableLayout) view.findViewById(R.id.table);
tablelayout.setColumnShrinkable(1,true);
1 is the number of column.

Maybe try as follows:
myTextView.setText(Html.fromHtml("On " + stringData1 + "<br> at " + strinData2);
I know, looks a bit like a "wheelchair" solution, but works for me, though I also fill a text programmatically.

You can also used below code
<TableRow >
<TextView
android:id="#+id/tv_description_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="8dp"
android:text="#string/rating_review"
android:textColor="#color/black"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:maxLines="4"
android:padding="8dp"
android:text="The food test was very good."
android:textColor="#color/black"
android:textColorHint="#color/hint_text_color" />
</TableRow>

Android Listview Row Layout

I'm developing what I thought would be a simple listview row layout, but I'm having some trouble getting my views to line up properly. There are 4 TextViews all using layout_weight within a LinearLayout to size themselves appropriately. What I can't figure out, however, is how to align them consistently so that each TextView begins in the same position as the one above and beneath it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA88">
<TextView
android:id="#+id/quality"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_grade"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_distance"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="2px"
/>
</LinearLayout>
My attempts to use the :gravity tag don't seem to work. Is LinearLayout the wrong approach here?
As an edit, I'm making some headway using specific width values in dips. Now to test if it looks the same across different screens.

The gravity distributes the remainder of space available after minimum constraints not the total space.
So align different row above and below make sure the remaining space is equal on each row. A good way to accomplish this is to hard-code the minimum space each element needs:
android:layout_weight="2"
android:layout_width="1dip"
Make each TextView on every row 1dip width and split the remaining space according to weight.

you can try using RelativeLayout. Try 4 of the TextViews to be placed relatively, 3 can have fixed width in dp and the 4th can take up rest of the available space. that way each textview will start at a fixed position every time.
something like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text_1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 1"/>
<TextView
android:id="#+id/text_2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_1"
android:gravity="left"
android:padding="8dp"
android:text="Text 2"/>
<TextView
android:id="#+id/text_3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_2"
android:gravity="left"
android:padding="8dp"
android:text="Text 3"/>
<TextView
android:id="#+id/text_4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_3"
android:layout_alignParentLeft="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 4"/>
</RelativeLayout>

Android relative layout placement problems

I have been having problems creating a relative layout in XML for a list item to be used for a series of items in a ListView. I have tried for hours and am tearing my hair out trying to get it to look how I want but cannot get everything to appear in the correct spot and not overlap or mis-align. I can get the first image and next two textviews in place but cannot get the last textview and imageview.
I have attached a wireframe style image of how I am trying for it to look and was wondering if someone could help me out?
The ImageView on the right is a set icon of the full height of the row with padding around it?
The two TextViews take up the majority of the width. The Address textview has the possibility of the text being long so it may need to get truncated if it runs out of space, or ideally have the font size shrink?
The next TextView will just hold a small string of max 5 characters.
The last ImageView is a small arrow to imply that this list item is clickable for more infomation. It needs to be centred like shown.
I would like if the icon, last textview, and last image always be in the same place/alignment down the list.
If someone could offer some assistance on this I would be so grateful.
Cheers guys

For anyone interested I managed to get this working. I know how much of a pain it is to go searching for an answer to a problem and it was never completely resolved.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/Icon"
android:layout_margin="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/topLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="20dip"
android:text="Name" />
<TextView
android:id="#+id/bottomLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_below="#+id/topLine"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="15dip"
android:text="Address" />
<TextView
android:id="#+id/distance"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/arrow"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:lines="1"
android:textColor="#color/blacktext"
android:textSize="12dip"
android:text="100m" />
<ImageView
android:id="#+id/arrow"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="5dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/redarrow"/>
</RelativeLayout>

I've done something similar (except the image on left)
It might help you:
<?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:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/TextView01"
android:id="#+id/LinearLayout01"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dip"
android:layout_weight="1"
android:paddingRight="8dip"
android:layout_height="wrap_content"
android:id="#+id/LinearLayout01"
android:orientation="vertical">
<TextView
android:text="#string/Birthday"
android:id="#+id/txtTitlevalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"></TextView>
<TextView
android:text="1960-01-01"
android:id="#+id/txtSubvalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-4dip"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="10"
android:textAppearance="?android:attr/textAppearanceSmall"></TextView>
</LinearLayout>
<TextView
android:text="2"
android:id="#+id/txtNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
<TextView
android:text="weeks"
android:id="#+id/txtUnit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
</LinearLayout>
<!-- <View
android:background="#drawable/black_white_gradient"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:clickable="true"
android:focusable="true"
android:layout_below="#+id/LinearLayout01" /> -->
</LinearLayout>