Let's start with the fun part, here's the graphic of the trouble. Horizontally, everything is beautiful.
The middle button, I'd like to to be aligned with the other three. Here are the basics:
overall, it's a relativelayout
inside this relativelayout, it's a horizontal linear layout, containing the three buttons
the "sinking" of the middle button is 100% correlated with it being a dual line of text, if I change it to a single line, it aligns properly
the specified height of the buttons has nothing to do with the sinking, even at more than double their current size (from current 70 to 170) the exact same behavior (and size of behavior) is displayed
The "custom_button" background has no effect, if I change them all to no background, stock looking buttons, the same positioning occurs
And here's the XML (of just the linearlayout within the relativelayout):
<LinearLayout
android:id="#+id/wideButtons"
android:layout_below="#+id/buttonClockFinish"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="horizontal">
<Button
android:id="#+id/buttonLog"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginRight="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="View Log" />
<Button
android:id="#+id/buttonLocation"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="Location\nD1-RS" />
<Button
android:id="#+id/buttonHelp"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginLeft="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="Help" />
</LinearLayout>
So why on earth is it not aligning?
I was just about to post this question, and did one final experiment. I added a THIRD line of text to the button. This pushed it down even further. But what I realized it had in common was that the text of the top line of the middle button remained perfectly aligned with the text of the two buttons to either side of it.
So it wasn't that it was having trouble with an interior margin, unable to squish the text against the top border. The alignment was of the TEXT, not the button graphic. All along I had thought that there was some mystery :padding that I was not nulling out, but with three lines of button text it was quite happy to have just about 1dp or so of padding.
The solution was to add
android:layout_gravity="center_vertical"
to that button. I added it to the rest of them too, just for consistency.
Lesson: When you think things aren't aligning, perhaps they actually are, but maybe you're looking at the wrong thing.
Related
I am creating a dialog with two buttons aligned right in relation to the parent ConstraintLayout.
Everything is fine, until the text of the buttons becomes very long. When the text of either or both buttons is lengthy, the buttons extend beyond the bounds of the parent, causing clipping of the text, as shown in the image below. I would like to handle cases where there is longer text.
i.e. The desired behavior would be
buttons should wrap text when text is long
buttons should stay within bounds of parent and obey parent padding
buttons should stay aligned right of parent
When button text is short, the layout works as intended:
When button text is long:
Cancel text is truncated when cancel button text is long. This is happening because the button itself is being pushed past the parent's boundaries.
Cancel text pushed beyond parent boundaries when ok button's text is long, again, because the button is pushed beyond the parent's boundaries.
Layout code
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/dialog_padding"
android:paddingLeft="#dimen/dialog_padding"
android:paddingRight="#dimen/dialog_padding"
android:paddingTop="#dimen/dialog_padding">
<TextView
android:id="#+id/dialog_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dialog_text_margin"
tools:text="Dialog title" />
<TextView
android:id="#+id/dialog_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dialog_text_margin"
app:layout_constraintTop_toBottomOf="#id/dialog_title"
tools:text="Dialog text content" />
<Button
android:id="#+id/cancel_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#id/ok_btn"
app:layout_constraintTop_toBottomOf="#id/dialog_content"
tools:text="Dismiss" />
<Button
android:id="#+id/ok_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/dialog_content"
tools:text="Accept" />
</android.support.constraint.ConstraintLayout>
Things that I've tried to no avail:
adding app:layout_constraintStart_toStartOf="parent" to the cancel button causes the buttons to no longer be aligned right, and so that solution is incorrect
constraining the end of the dismiss button to the start of the accept button causes buttons to no longer be aligned right
using layout_width="0dp" for the buttons and using app:layout_constrainedWidth="true" has no effect
Here are two screen shots of what I think you are trying to accomplish.
First, with some short text:
Now with some long text:
I took a few liberties with the layout and introduced a guideline at 33% of the width that the button are constrained to. You didn't specify how much the button could expand horizontally, so I made this assumption.
The XML for this layout follows. I set the width of the buttons to 0dp or match_constraints so their size would adjust. The buttons have also been placed into a packed chain that groups the two buttons together. The horizontal bias is set to 0.5 now, but increasing it will move the group to the right if it starts to creep left on you.
The ConstraintLayout documentation has some good descriptions of these features and how to use them.
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<TextView
android:id="#+id/dialog_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dialog_text_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Dialog title" />
<Button
android:id="#+id/cancel_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/ok_btn"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/dialog_title"
tools:text="Dismiss" />
<Button
android:id="#+id/ok_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/cancel_btn"
app:layout_constraintTop_toTopOf="#+id/cancel_btn"
tools:text="Accept" />
The title is a little provocative, but I observe some behaviour thats inexplicable for me.
I have three sets of views, each having one TextView tvX and one Spinner spX, X=A,B,C. The textview is a title, or prompt, for the spinner, so I want the Spinner layout_toRightOf it's respective TextView. Since they refer to each other, I also layout_alignBaseline the Spinner to the TextView. This works properly. Now I want the three sets stacked such that the TextViews have aligned right edges (each has a trailing colon, these should be aligned), and the Spinners have aligned left edges. So in the stack of
+----------+----------+
| tvA:|spA |
+----------+----------+
| tvB:|spB |
+----------+----------+
| tvC:|spC |
+----------+----------+
the B and C views get attributes referring to A and B, respectively; namely layout_below and layout_alignLeft/Right.
It now happens that tvB and tvC have texts that are longer than tvA's. I would have guessed the RelativeLayout indents tvA such that there is space for the longer texts of tvB and tvC, and such that they are right-aligned. What happens instead is that the whole left column gets the width of tvA's text, and tvB and tvC get broken into two lines each. I tentatively tried to rearrange things to make tvB the anchor, and layout_above tvA. This results in tvA completely disappearing. It would not be a proper solution anyway, as in another language the relative lengths of the texts might be the other way! If I add characters to tvA to make it longest, tvB and tvC do not get broken anymore, but the colons still do not get aligned! In fact it looks as if tvB gets centered beneath tvA, and tvC centered beneath tvC.
It sort of looks best if I left-align the tvX and right-align the spX. But even in that situation something strange happens: The Spinners do no obey the attribute layout_width="wrap_content" anymore, they expand instead to fill all the space left over by the TextViews. The ragged alignment in the middle still looks bad, that's why I want the alignment to happen in the middle.
Android Studio displays the resulting layout while editing the XML, and it also displays the Views edges if the cursor is in the XML definition of the View. There I can nicely observe how the layout hints in the attributes get ignored! On the actual phone the same thing happens.
Here is the XML code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/indented_margin"
android:layout_marginBottom="5dp">
<TextView
android:id="#+id/device_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="#string/settings_sb_device" />
<Spinner
android:id="#+id/device"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:spinnerMode="dropdown"
android:layout_toRightOf="#id/device_title"
android:layout_alignBaseline="#id/device_title" />
<TextView
android:id="#+id/can_speed_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_below="#id/device_title"
android:layout_alignRight="#id/device_title"
android:text="#string/settings_sb_speed" />
<Spinner
android:id="#+id/can_speed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:spinnerMode="dropdown"
android:layout_toRightOf="#id/can_speed_title"
android:layout_alignBaseline="#id/can_speed_title"
android:layout_alignLeft="#id/device"
android:entries="#array/can_speeds" />
<TextView
android:id="#+id/baudrate_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_below="#id/can_speed_title"
android:layout_alignRight="#id/can_speed_title"
android:text="#string/settings_sb_baudrate" />
<Spinner
android:id="#+id/baudrate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:spinnerMode="dropdown"
android:layout_toRightOf="#id/baudrate_title"
android:layout_alignBaseline="#id/baudrate_title"
android:layout_alignLeft="#id/can_speed"
android:entries="#array/baudrates" />
</RelativeLayout>
I have searched the sets of available attributes for the involved views, but could not find a clue. Can anybody explain this behaviour? What have I overlooked?
Use a GridLayout for this with columnCount as 2
For example:
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:alignmentMode="alignBounds"
app:columnCount="2"
app:orientation="vertical"
>
For the left side Tv + colon, use a RelativeLayout or even a LinearLayout will work for that matter.
<LinearLayout
android:gravity="center"
android:orientation="horizontal"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_gravity="fill_horizontal|fill_vertical"
app:layout_row="0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
tools:text="Label"
android:maxLines="2"
android:ellipsize="end"
android:textColor="#color/black"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
tools:text=":"
android:textColor="#color/black"/>
</LinearLayout>
It seem to me that a GridLayout would fit your needs way better...
In my user interface, I have a fragment with a RelativeLayout. At the bottom of this RelativeLayout, I have two buttons: one should be on the left, the other on the right, with empty space between them. The left one has static text (but because the app will be translated, I don't know what width it will be). The text in the right one can change arbitrarily.
Since I already have a RelativeLayout, I started out trying to lay them out inside the RelativeLayout like this:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/right" />
But this has the problem that if the text in the right-hand button is too long, it will overlap the left-hand button.
I next tried to constrain the left-hand edge of the right-hand button by adding android:layout_toRightOf="#+id/button_left", but with this, the right-hand button would always fill the available width. When the text in the right-hand button is short, I want it to shrink to leave a gap between it and the left-hand button.
I next tried to use a LinearLayout, so I could set layout_gravity on the buttons, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:drawableLeft="#drawable/pass"
android:text="#string/right" />
</LinearLayout>
Still no joy. I expected this to work, but the right-hand button stays just to the right of the left-hand button, instead of sticking to the right edge of the screen. I can see in the layout editor that the LinearLayout correctly fills the width of the screen, but the button stubbornly stays next to its friend.
I tried adding android:layout_weight="1" to the right-hand button too, but again, that made it always expand to fill the available space.
Next, I tried to add an empty View between the buttons, to expand and force the right button to the right, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</LinearLayout>
This works fine when the text is short, just like my original RelativeLayout did, but now when the text on the right-hand button is long, its width is limited by the width of the screen, not the available space, so it extends off the right-hand edge of the screen. Again, I can see in the layout editor that the LinearLayout has the correct width, but the button is extending ourside its parent's bounds. This happens even if the button has android:layout_width="match_parent". Oddly enough, increasing the layout_gravity on the right-hand button makes it smaller until it fits inside the available space, but of course that also makes it fill the space when the text is small.
I can't believe it's this hard to get this right. I've seen half a dozen similar questions on SO, but they all have easy workarounds. If the button text is fixed, you can set the margin to a fixed width by hand. If the expanding widget is a TextView instead of a Button, you can just let it expand and use android:gravity to move the text inside the widget, but you can't do that with a button because the background and borders are visible on the screen.
It turns out that adding the LinearLayout was the wrong approach. Using android:layout_toRightOf="#+id/button_left" android:layout_alignParentRight="true" works fine with a TextView, because that can soak up the available space without changing its appearance. Instead of trying to change the layout, I just need to use something that can expand to fill the available space and contain the Button: a FrameLayout. Here's the working code, which still goes inside my root RelativeLayout:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/button_left" >
<Button
android:id="#+id/Turn_button_pass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</FrameLayout>
Now, the FrameLayout always takes up all the space to the right of the left-hand button, and lays out the right-hand button inside that space using android:layout_gravity="right".
This answer only adds one extra layout, but if someone has a way to do it only using the existing RelativeLayout, to minimise the number of ViewGroups in the layout, I'll accept that as a solution.
IF you can live with the constraint, that the right button only can take up to up half of the available space, this could be a solution for you:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A short text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="A very long text which is limited to one half of the available space" />
</RelativeLayout>
</LinearLayout>
You could just use a TextView and make it look like a button. Create a dummy button, extract the background and set that background to the textfield programmatically.
(Not tested but should give it the apperance of a button)
Drawable d = button1.getBackground();
textView1.setBackground(d);
then you just set the onClickListener and that should yield what you're looking for. The TextView would take the place of the "button_right" in your first layout.
**Edit
Your xml would look something like this
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<TextView
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:maxEms="10"
android:text="TextView" />
I have a left-aligned TextView and a right-aligned button side-by-side. I want the button to take up as much space as it needs on the right (depending on the text that goes in it) and the left text to fill as much as it can and ellipsize on any overflow.
|Long title that may or may not ellipsi... <Button with text>|
I've read and tried lots of other posts that seem to have similar problems, none of which have worked for me. I've tried both using a LinearLayout with weights as well as a RelativeLayout with layout_toLeftOf assigned, none of which is resulting in what I need.
This is my LinearLayout code (with unnecessary parts taken out) where I give the left TextView a layout_weight of 1 and the button a layout_weight of 0. This should give the right-side button all the space it needs and give the TextView the rest, but instead the left title stops showing up and the right button gets smushed to the side and cut off. I've tried replacing the widths of both the Text and button to 0dip as I've seen suggested, which doesn't change anything.
<LinearLayout
android:layout_height="#dimen/title_bar_height"
android:layout_width="fill_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:layout_gravity="left|center_vertical"
android:gravity="left|center_vertical"
android:textSize="22sp"
android:lines="1"/>
<include layout="#layout/action_buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
Replacing the layout_weight of the TextView with 0 actually allows the right-side button to properly fit on the screen fully, but the left text still does not show up. If I have both layout_weights set to 0 for the TextView and button and I then change the TextView's width from 0dip to wrap_content, everything shows up but the button instead is squished to fill the remaining space (and the text inside is truncated).
Here is my attempt with a RelativeLayout:
<RelativeLayout
android:layout_height="#dimen/title_bar_height"
android:layout_width="wrap_content">
<include layout="#layout/action_buttons"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#layout/action_buttons"
android:gravity="center_vertical"
android:scaleType="center"
android:textSize="22sp"
android:ellipsize="end"
android:lines="1"/>
</RelativeLayout>
Everything aligns fine and shows up, except that the left TextView (when it's too long) overlaps and appears on top of the button rather than truncating and ellipsizing. Shouldn't android:layout_toLeftOf"#layout/action_buttons" specify that the TextView should stay to the left boundary of the button?
I've tried seemingly everything I can find on this site related to this issue, and I still can't get a solution. Any help would be greatly appreciated!
This will do the trick for 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="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="left|center_vertical"
android:singleLine="true"
android:text="Some really long textttttttttt tooooooooooo make the ellipsize work in the preview"
android:textSize="22sp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Text" />
</LinearLayout>
Here's what it looks like when run:
And again with a button with more text:
I'm still a bit of an Android noob, forgive me if this is simple and I'm just not seeing it.
There are two portions of text in a view that spans the entire width horizontally, but is only as high as one line of text. The left side must always be displayed in full, but should take no more horizontal space than it needs. The right side should be pushed over by the left side and fill up the remainder of the screen width. If the right side text is smaller than this width, the text should be right-aligned horizontally. If the text is greater than the width, it should scroll horizontally.
The text on the right side will be updated frequently and should slide up with new text when the app tells it (explaining the TextSwitcher in the layout).
I have tried two different layout styles. In both situations, I can get the left side to "push" the layout, the right side to scroll, but I can't figure out how to get the right side to right align. It is always left aligned. Here is a picture showing what is happening...
http://img10.imageshack.us/img10/5599/androidlayout.png
In addition (but less important), in my layout code I have android:fadingEdge="none" on the TextViews, but it still has a faded edge on the left and right side when it scrolls. Why is that?
Here are the two layouts I created, which yield the results shown, but not the results I want.
Using a horizontal LinearLayout...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayoutStatusBar"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="2px"
android:background="#555555"
>
<TextView
android:id="#+id/TextViewTimer"
android:textSize="18px"
android:textColor="#FFFFFF"
android:layout_gravity="left"
android:layout_weight="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0px"
android:layout_marginRight="3px"
android:text="Left Side"
>
</TextView>
<TextSwitcher
android:id="#+id/TextSwitcherDetails"
android:inAnimation="#anim/push_up_in"
android:outAnimation="#anim/push_up_out"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="3px"
android:layout_marginRight="0px"
>
<TextView
android:id="#+id/TextViewDetails1"
android:textSize="18px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:fadingEdge="none"
android:text="Right Side 1"
>
</TextView>
<TextView
android:id="#+id/TextViewDetails2"
android:textSize="18px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:fadingEdge="none"
android:text="Right Side 2 - This is a really long text this is long and fun and fun and long"
>
</TextView>
</TextSwitcher>
</LinearLayout>
So how do I get that text on the right side to right-align. Thanks!
EDIT:
I found the problem... There were a few things wrong. First, I discovered the difference between gravity and layout_gravity. I needed to use gravity to right-align the text.
I can't add any more links, so copy and paste the link below
thinkandroid.wordpress.com/2010/01/14/how-to-position-views-properly-in-layouts/
However, that didn't give me exactly the layout I wanted, because long lines of text will be right-aligned before scrolling and the front part of the message cannot be read until it loops around. What I needed to do was use three "columns" of views, with the weight on the middle (empty) view to be "1" while the others "0" so that it pushes the right-most text as far as possible to the right, while still maintaining left-alignment.
Next, I discovered that the width of a TextSwitcher is the same as the largest child TextView. This is a problem when switching from a long line to a short line using setText() because the middle column won't push the small text over to the edge. The solution is to use two setText()s. One to cause the fade-out animation, then push a runnable to run after the animation to set the text again to cause the fade-in animation of the new line.
Now my only problem is that when the fade-out animation runs on a long line of text, if it is in mid-scroll, it resets to the X=0 position before fading, so the effect is that it scrolls, jumps to the origin position, then fades out. Anybody know how to fix that?
(I removed the RelativeLayout code above since that was wrong, since this post is really long.)
Here is the working layout code...
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayoutStatusBar"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2px"
android:background="#333333"
>
<TextView
android:id="#+id/TextViewTimer"
android:textSize="18px"
android:textColor="#FFFFFF"
android:layout_gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginLeft="1px"
android:layout_marginRight="4px"
android:text="Left Side"
>
</TextView>
<View
android:id="#+id/ViewSpacer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
></View>
<TextSwitcher
android:id="#+id/TextSwitcherDetails"
android:inAnimation="#anim/push_up_in"
android:outAnimation="#anim/push_up_out"
android:layout_gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginRight="1px"
>
<TextView
android:id="#+id/TextViewDetails1"
android:textSize="18px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:fadingEdge="none"
>
</TextView>
<TextView
android:id="#+id/TextViewDetails2"
android:textSize="18px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:fadingEdge="none"
>
</TextView>
</TextSwitcher>
</LinearLayout>
I found the problem! There were a few things wrong. First, I discovered the difference between gravity and layout_gravity. I needed to use gravity to right-align the text.
http://thinkandroid.wordpress.com/2010/01/14/how-to-position-views-properly-in-layouts/
However, that didn't give me exactly the layout I wanted, because long lines of text will be right-aligned before scrolling and the front part of the message cannot be read until it loops around. What I needed to do was use three "columns" of views, with the weight on the middle (empty) view to be "1" while the others "0" so that it pushes the right-most text as far as possible to the right, while still maintaining left-alignment.
Next, I discovered that the width of a TextSwitcher is the same as the largest child TextView. This is a problem when switching from a long line to a short line using setText() because the middle column won't push the small text over to the edge. The solution is to use two setText()s. One to cause the fade-out animation, then push a runnable to run after the animation to set the text again to cause the fade-in animation of the new line.
Unfortunately, horizontally scrolling the text looks terrible when the text switches every five to ten seconds. So I'm just letting it run off the screen.