Develop Reference

Textviews in tablerow - alignment going weird after rotation (and one textview before as well)

I'm making an app that lets you use a Nintendo 3DS as a game controller for android. I'm trying to build a UI for setting the keymap.
I'm using a tablelayout, with two table rows. The first contains 3 textviews to indicate which column belongs to which device, and the second contains a listview, with the button labels on it.
Screenshot
As you can see, in the screenshot, in the top tablerow, the left and right textviews are centered perfectly, but the arrow in the middle is not. What makes this extra puzzling, is that the center textview xml tag is almost identical to the left and right's tags. (code below).
Now, the second problem. When I rotate my screen landscape, the alignment is the same as before. But after switching back to portrait, the alignment gets even worse:
Here is my tablelayout xml:
<TableLayout
android:id="#+id/settings_keymap_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow
android:id="#+id/settings_keymap_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EEEEEE"
android:paddingBottom="1dp"
android:paddingTop="1dp">
<TextView
android:id="#+id/settings_keymap_header_left_textview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"
android:gravity="center"
android:text="3DS"
android:textAlignment="center"
android:textAllCaps="false"
android:textAppearance="?android:attr/textAppearanceListItem"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="normal" />
<TextView
android:id="#+id/settings_keymap_header_arrow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="10"
android:gravity="center"
android:text="->"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceListItem"
android:typeface="monospace" />
<TextView
android:id="#+id/settings_keymap_header_right_textview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"
android:gravity="center"
android:text="Android"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceListItem"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="normal" />
</TableRow>
<TableRow
android:id="#+id/settings_keymap_list_row"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/keymap_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="100"
android:scrollbars="vertical"
tools:layout_editor_absoluteX="217dp" />
</TableRow>
</TableLayout>

I fixed it - I had to set the textview heights to wrap_content and make sure the fonts were all the same size.

Aligning columns headings on custom listview checkboxes

I'm using a tablelayout where each row has a number of checkboxes, and am using a custom adapter. The columns do expand evenly across the screen. On the parent layout I also have a series of "check/uncheck all" type checkboxes and they line up perfectly with the listview checkboxes. My issue is that I can't get column headings for the checkboxes to line up with the columns. They have a creep, either too much or too little, let alone working across both phone and tablet devices. My suspicion is that the problem may be caused by the text associated with the leftmost checkboxs, the only ones that have any text associated with them.
This is the xml for the check/uncheck all checkboxes and lines up fine.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox1"
android:layout_height="match_parent"
android:layout_weight="1"
android:width="60dp"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="Ck all"
android:textSize="15dp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/checkBoxI"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false" />
<CheckBox
android:id="#+id/checkBoxII"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false" />
etc.
This is for column headings and does not line up.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_height="match_parent"
android:layout_weight="1"
android:width="60dp"
android:gravity="center"
android:background="#color/light_blue"/>
<TextView
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:gravity="center"
android:text="I"/>
<TextView
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:text="I"/>
etc
This is another attempt that also does not line up.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_height="match_parent"
android:width="60dp"
android:layout_weight="1"
android:text=""
android:gravity="center"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"/>
<TextView
android:id="#+id/keycode"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:text="I"
android:textStyle="bold" />
<TextView
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="II"
android:textStyle="bold" />
etc.
I've tried many different combinations of text alignment, and even tried to force the column widths which of course wouldn't work across devices. I've spent all day on this and still have no clue. Any help appreciated.

Ok, it was my stupidity. I had forgotten that I had left LinearLayouts around the table rows as I was cutting and pasting. After removing those Linearlayouts things lined up as expected. I did have to give the first column a textsize parm though, otherwise the variable width of the text associated with the leftmost checkbox messed up the alignment of the rest of the columns. I just had to make the textsize larger than any of the text in that column.

Android studio move check box to right of table cell

I have created a table view inside of a list view in Android studio (see following code) and for various reasons I have used a text view and a checkbox as separate elements rather than just having the checkbox and attaching the text. The problem is the text is on the left of the screen/table but the checkbox is essentially centred where as I want it to be at the far right hand side.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_above="#+id/Button1"
android:id="#+id/scrollView"
android:background="#drawable/list">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/Maths"
android:id="#+id/Maths"
android:layout_column="1"
android:textColor="#ffffff" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/MathsCheck"
android:layout_column="2"
android:buttonTint="#00ffff"
android:onClick="MathsClicked"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/History"
android:id="#+id/History"
android:layout_column="1"
android:textColor="#ffffff"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/HistoryCheck"
android:layout_column="2"
android:onClick="HistoryClicked"
android:buttonTint="#00ffff" />
</TableRow>
</TableLayout>
</ScrollView>
There are in reality a lot more of these text view and checkboxes but you get the idea. I have tried using padding and margins but that doesn't really work as it will work ok on some devices displays but I have to hard code it which isn't ideal. I've also tried the gravity feature which for some reason doesn't seem to do anything.
Any help appreciated

Is there a particular reason why you are using a TableLayout?
If not, the desired output (TextViews left-aligned, Checkboxes right-aligned) can be easily achieved with a RelativeLayout within a vertical LinearLayout.
Your XML would then look like this (including only the relevant parts, all other attributes of your code will remain unchanged):
<ScrollView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_alignParentLeft="true" />
<CheckBox
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
Edit:
If you want to place multiple checkboxes next to each other, you can do so by making their position reference each other, like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_alignParentLeft="true" />
<CheckBox
android:id="#+id/checkbox1"
android:layout_alignParentRight="true" />
<CheckBox
android:id="#+id/checkbox2"
android:layout_toLeftOf="#id/checkbox1" />
<CheckBox
android:id="#+id/checkbox3"
android:layout_toLeftOf="#id/checkbox2" />
</RelativeLayout>
Note that you have to define the rightmost checkbox first, and the leftmost last.
Given the width of the checkboxes is identical (which they is in most cases), they will perfectly align.

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!

Adding ScrollView to RelativeLayout changes position of wigdets

The following is the XML of my layout. It explicitly states that the title, time and description TextViews should be under the image of the alarm. However, as the screen shot shows, the TextViews have moved into the ImageView. Why does this happen and how can I fix this? The problem only started happening when I added the scrollview.
XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_alarm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/alarm"
android:layout_centerInParent="true"
android:contentDescription="#string/content_description_layout_alarm"/>
<TextView
android:id="#+id/lbl_alarm_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_below="#+id/img_alarm"
android:layout_alignLeft="#+id/img_alarm"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_below="#+id/img_alarm"
android:layout_alignRight="#+id/img_alarm"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/lbl_alarm_title"
android:layout_alignLeft="#+id/lbl_alarm_title"
android:layout_alignRight="#+id/lbl_alarm_time"
android:maxLines="1"
android:ellipsize="marquee"
android:text="#string/empty"
/>
<Button
android:id="#+id/btn_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lbl_alarm_description"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="#string/stop_layout_alarm"
android:gravity="center" />
</RelativeLayout>
</ScrollView>
Image

Cute app :)
hmm... not sure why it's doing it, looks like you have the right code, without busting out eclipse. but i've also had some weird bugs with relativelayout that i didn't understand and didn't have time to debug.
i do know of an alternative way you can accomplish what you're looking for -
have a scrollview that encases a linearlayout instead of a relative layout. Do these things:
For the linearlayout, you can set orientation = vertical so that it's still a top down order.
For the part where you need two textviews where one is aligned to the right and the other is aligned to the right, you need another inner linearlayout with its orientation=horizontal. then have one element align parent left, and the other align parent right. add a weightSum=1 attribute to this linearlayout and have each of the two textviews layout_width=0.5 so that each is half the width of the screen
Apply a weightSum=1 attribute to your outer most linearlayout, and see each element inside so that it's layout_weight sum adds up to 1. layout_weight will allow an element to take up that much % of real estate on the screen. like if you set your imageView to have android:layout_weight=0.8 then it'll take up 80% of the screen... since mathematically, (layout_weight/weightSum) = (.08/1) = 80%
try to use that mechanism instead, and if should work :) if it's confusing i can give code
example
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<ImageView
android:id="#+id/img_alarm"
android:layout_width="match_parent"
android:layout_height="0dip"
android:src="#drawable/alarm"
android:layout_weight="0.7"
android:contentDescription="#string/content_description_layout_alarm"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<TextView
android:id="#+id/lbl_alarm_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:text="#string/empty"
/>
<TextView
android:id="#+id/lbl_alarm_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:text="#string/empty"
/>
</LinearLayout>
<TextView
android:id="#+id/lbl_alarm_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.1"
android:maxLines="1"
android:ellipsize="marquee"
android:text="#string/empty"
/>
<Button
android:id="#+id/btn_stop"
android:layout_weight="0.1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dip"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="#string/stop_layout_alarm"
android:gravity="center" />
</LinearLayout>
</ScrollView>
i hope this deserves at least an upvote for the effort :D