Develop Reference

Move View to "next line" if it doesn't fit

So, idea in this: I have two TextViews, first can expand whatever it wants, second always 5 chars (time). Problem is in that first TextView can easily push second out of the screen.
So, what I need is something like adjustable LinearLayout, or maybe some GridLayout that will move second TextView on some sort of second line if it doesn't fit parent.
For example you can watch at message bubbles in Viber and WhatsApp. Thanks for any advise.
Update 1
Here is XML that i have now (Only message part)
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/messageBox"
android:layout_gravity="center_vertical"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
android:text='#{mess.message}'/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|end"
android:gravity="center_vertical|end"
android:paddingLeft="8dp"
android:textSize="12sp"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:text='#{Utils.parseMillsToHoursAndMins(mess.date)}'/>
</LinearLayout>
Update 2
So I added layout_weight to first TextView, that helped with my first problem, but now I have new one. This two TextViews are in LinearLayout which is in another LinearLayout with another TextView. Parent LinearLayout have width set to wrap_content so if top TextView will be bigger than 2 TextViews it will cause child LinearLayout to be less than it's parent, and 2nd TextView (from that 2) wouldn't be in the end of parent. But when child LinearLayout is bigger, all appears to be OK. I know it's complicated, so this is XML
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="0dp"
android:id="#+id/contentPanel"
app:bringToFront="#{true}"
android:orientation="vertical"
android:background="#{(mess.isMine?#drawable/chat_bubble_right:#drawable/chat_bubble_left)}">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text='#{!mess.authorRole.equals("Client")?(mess.authorRole + " - " + mess.author):mess.author}'
android:textColor='#{mess.authorRole.equals("Lawyer")?#color/colorPrimary:mess.authorRole.equals("Admin")?#color/red:#color/green}'
android:textSize="12sp"
android:id="#+id/author"
android:fontFamily="sans-serif-medium"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/messageBox">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_weight="0.7"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
android:text='#{mess.message}'/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:textSize="12sp"
android:gravity="bottom|end"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
app:checkFit="#{false}"
android:text='#{Utils.parseMillsToHoursAndMins(mess.date)}'/>
</LinearLayout>
</LinearLayout>

The new approach for achieving such behaviour is using ConstraintLayout with Flow. Here is an example of usage:
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/socialsButtonsFlow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:flow_horizontalGap="8dp"
app:flow_verticalGap="4dp"
app:flow_wrapMode="aligned"
app:flow_horizontalStyle="spread_inside"
app:constraint_referenced_ids="vkButton,twitterButton,facebookButton,youtubeButton,instagramButton,odnoklassnikiButton,tiktokButton"
app:layout_constraintEnd_toEndOf="#id/socialsLabel"
app:layout_constraintStart_toStartOf="#+id/socialsLabel"
app:layout_constraintTop_toBottomOf="#+id/socialsLabel" />
For small screens it looks like this:

I am not sure this will help you or not but:
Use: https://github.com/ApmeM/android-flowlayout
<org.apmem.tools.layouts.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</org.apmem.tools.layouts.FlowLayout>
Inside FlowLayout you can put your view's and it will auto move to next line if not fit.

if your textviews in linearlayout you can add weightSum method

Button size and padding within RelativeLayout

I'm attempting to create a a Heading + button similar to the Google Music App, e.g. where there is a "Songs" Header on the Left and then on the right there is a Button with the text "X more"..
I've using a RelativeLayout for the TextView and Button
My problem is that the button is taking up the size of the layout that contains the text the height is all wrong and the padding doesn't seem to do anything.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
[REMOVED for clarity]
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/list_foreground"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/photo_button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#color/actionbar_background"
android:padding="10dp"
android:text="test" />
</RelativeLayout>
What am I doing wrong here?

RelativeLayouts are designed to have children in the layout "relative" to each other. In other words, if you want the Button to the right of the Textview, you need to tell it.
Because you are aligning relative to the parent LEFT / RIGHT, it appears that things are "kind of" working.
You may be better off with a LinearLayout, depending on your needs. LinearLayouts use "orientation" not RelativeLayouts.
You should look over some tutorials (like this one: http://mobile.tutsplus.com/tutorials/android/android-layout/) but ultimately you will probably put your button in first and then your text view so that the textview content will wrap appropriately.

To get the same effect as the Music App I ended up using a RelativeLayout but instead of a Button I'm using another TextView, this is giving the impression it's a button but it gives me more scope to format the background etc. I think just setup a OnClickListener in the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/photo_title">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/more_photo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#color/actionbar_background"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="10 MORE"
android:textColor="#color/button_text"
android:textSize="12sp" />
</RelativeLayout>

Right align TextView using gravity in RelativeLayout

I am trying to get an editText to sit on the right edge of my layout, with a button to its left, as follows:
<RelativeLayout
android:id="#+id/FindClientLayout"
android:layout_width="#dimen/third_width"
android:layout_height="#dimen/half_height"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="true"
android:layout_alignParentTop="false"
android:layout_below="#id/HeaderLayout"
android:layout_margin="#dimen/fragment_separation"
android:layout_toRightOf="#id/scrollViewRecommend"
android:background="#drawable/login_border" >
<TextView
android:id="#+id/textViewFindClient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/find_client"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/Black" />
<EditText
android:id="#+id/editTextClient"
android:layout_width="#dimen/input_text_width"
android:layout_height="wrap_content"
android:gravity="center_vertical|right"
android:inputType="text"/>
<Spinner
android:id="#+id/spinnerClientList"
android:layout_width="#dimen/input_text_width"
android:layout_height="wrap_content"
android:layout_below="#id/editTextClient"/>
<Button
android:id="#+id/buttonDoFind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_toLeftOf="#id/editTextClient"
android:text="#string/find" />
</RelativeLayout>
The button is invisible, and the result looks like this:
I assume the button is invisible because the editText is left-aligned and overlays it or pushes it out of the layout frame. Why is are the editText and spinner left aligned rather than right-aligned? Also, why is the editText not centered vertically?

Edit you xml file like this and check for result
<TextView
android:id="#+id/textViewFindClient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/find_client"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/Black" />
<EditText
android:id="#+id/editTextClient"
android:layout_width="#dimen/input_text_width"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:inputType="text"/>
<Spinner
android:id="#+id/spinnerClientList"
android:layout_width="#dimen/input_text_width"
android:layout_height="wrap_content"
android:layout_below="#id/editTextClient"/>
<Button
android:id="#+id/buttonDoFind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_toLeftOf="#id/editTextClient"
android:text="#string/find" />
this should solve your problem which is , you are using gravity to place the edittext on right but gravity is actually use to position the content of view not the view itself.
If you still face problem leave a comment

android:gravity="center_vertical|right"
indicates the content in the edittext will be right aligned and in center_vertical postion
If you want to right align you can use alignParentRight="true" or toRightOf="id_to_which_it_relate_to"

You can't align RelativeLayout child views with just gravity.
Try to use android:layout_centerVertical="true" and android:layout_alignParentRight="true" instead

align Button to left of RelatativeLayout and TextView to right. Keep the EditText in between TextView and Button.

How to get a layout where one text can grow and ellipsize, but not gobble up the other elements on the layout

I've read some of the other posts here such as Two TextViews side by side, only one to ellipsize? but I'm still having an issue with my layout.
I have a list item layout, and I want each item in the list to look like this:
| (Expanding TextView #1) (TextView #2) (Image) |
TextView #2 and Image must always be visible.
Right now I'm using the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainItem"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:background="#drawable/myBackground"
android:onClick="onClick"
android:longClickable="true">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_gravity="center_vertical|left"
android:gravity="center_vertical|left"
android:layout_toLeftOf="#+id/myImage"
android:layout_alignParentLeft="true">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="14dp"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="0"/>
<TextView
android:id="#+id/testView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView
android:id="#+id/myImage"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true"
android:paddingRight="14dp"
android:onClick="onClick"
android:src="#drawable/myIcon"/>
</RelativeLayout>
I've read from the other posts that adding a layout_weight="1" to TextView#1 will force TextView #2 to be shown, and it does, but the problem is that this forces TextView #2 to be right-aligned because it causes TextView #1 to expand even when it doesn't have to.
I'm pretty stumped on this now... could anyone help? :)
UPDATE
I was able to fix this by using a TableLayout and the shrink & stretch column properties. By playing around with that it finally worked the way I wanted it to.

This will truncate (if needed) the text in the first TextView, keep the text in the second TextView as is, and align and keep as is the text in the third TextView.
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="2">
<TableRow>
<TextView
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:layout_height="wrap_content"
android:maxLines="1"/>
<TextView
android:layout_height="wrap_content"
android:gravity="end"
android:maxLines="1"/>
</TableRow>
</TableLayout>

If I were you I'd probably switch the row from LinearLayout to RelativeLayout, that way you can align image to the parent right, butt textview2 right up next to it and just align textview1 with the parent left and it can resize without affecting the other two fields.

Centering a TextView while keeping it to the right of a button?

I'm pretty sure I've done this before, but I've forgotten how.
Here's the problem:
I've got a button and a textview, and I want the textview to be centered, while the button is on the left side.
No problem? Just put them in a relativelayout, make the textview centerinparent, and the button alignparentleft.
But now I'm going to dynamically change the text, so it can potentially be written on top of the button! I'll just add toRightOf="#id/button" on the textview. No, now it's no longer centered.
I wish I could provide a screenshot, but it seems the computer is out of memory and can't do that.
Here's some code: http://pastebin.com/3N70Vjre (Since I can't paste xml...?)
<RelativeLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<Button
android:id="#+id/leftbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="text!"
/>
<TextView
android:id="#+id/toptext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_toRightOf="#id/leftbutton"
android:layout_centerInParent="true"
android:textSize="16sp"
android:textStyle="bold"
android:text="Text!"
android:singleLine="true"
/>
</RelativeLayout>

Try this (unfortunately I'm at work so can't jump into Eclipse to get you some code) -
Change the layout_width of the TextView to fill_parent.
Set the gravity of the TextView to center (so the text centers inside the TextView)
Set the layout_weight of the Button to 1 and the layout_weight of the TextView to 2. Note that you may have to fudge with these numbers to get the layout you're looking for.
This should center the text of the TextView after the Button, though it will not center the TextView itself. You can accomplish that by replacing the TextView with a container (Linear/Relative Layout) and doing the same method as above on the Layout instead of the TextView. You would then put your TextView inside the container and set the container's gravity to "center".
Hope this helps point you in the right direction :)

You can try this (pseudo-code):
<RelativeLayout>
<Button>
<LinearLayout toLeftOf="toptext" type="horizontal">
<TextView gravity="center">
</LinearLayout>
</RelativeLayout>
You might have to have the LinearLayout as width="fill_parent". Not sure if that will work nor not. You can subsequently try some of the things listed here: http://thinkandroid.wordpress.com/2010/01/14/how-to-position-views-properly-in-layouts/

Try declaring the TextView first, then aligning the button to the left of the text view. Keep in mind you may run into issues if the TextView becomes too wide.
EDIT: I see, so you're trying to do something sort of like the iPhone's header with back/next buttons (similar anyway). Try this modification. I still believe you're going to run into issues if the TextView gets large enough to hit the Button, though.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
>
<TextView
android:id="#+id/toptext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_alignParentCenter="true"
android:textSize="16sp"
android:textStyle="bold"
android:text="Text!"
android:singleLine="true"
/>
<Button
android:id="#+id/leftbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="text!"
/>
</RelativeLayout>
Try this FrameLayout instead. This may do more what you're expecting:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/toptext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold"
android:text="Text!"
android:singleLine="true"
/>
<Button
android:id="#+id/leftbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text!"
/>
</FrameLayout>