I have the next bad design for Android:
I need to keep More infos with the icon to the right of the black text. If Item 1 of 1 will be a longer string, it'll push the icon+text to the right. My problem which I can't figure out is if the left text it too long to fit in one line, i'd like it for More infos to be pushed until the right edge of its parent and stay there and the left black text should jump to a new line.
But this is not HTML for it to act like that ! :) Any ideas on how I could accomplish this ?
I'm really thinking of asking the designer to change the design.
EDIT
What I've done for it to look like above:
<RelativeLayout ...>
<!--TEXT-->
<TextView
android:id="#+id/list_item_form_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/app_spacing_x0_5"
android:layout_marginTop="#dimen/app_spacing_x3"
android:textColor="#color/app_black"
android:textSize="#dimen/app_text_tiny" />
<!--VIEW DETAILS-->
<TextView
android:id="#+id/list_item_view_details_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="50dp"
android:layout_toRightOf="#id/list_item_form_text"
android:layout_alignTop="#id/list_item_form_text"
android:drawableLeft="#drawable/ic_camera"
android:drawablePadding="#dimen/app_spacing_x0_3"
android:text="#string/f_form_front_view_details" />
</RelativeLayout>
You can achieve that with a LinearLayout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="test"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123444"/>
</LinearLayout>
The key is having the Linear Layout with wrap_content and the first view with weight=1 and width=0dp
Maybe something like this:
<!--TEXT-->
<TextView
android:id="#+id/list_item_form_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:text="Long long long long text Long long long long text"
android:layout_toStartOf="#+id/list_item_view_details_btn"
android:layout_alignParentStart="true"/>
<!--VIEW DETAILS-->
<TextView
android:id="#+id/list_item_view_details_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="50dp"
android:layout_alignParentEnd="true"
android:layout_alignTop="#id/list_item_form_text"
android:text="More infos"/>
The result is:
Related
I'm trying to create a message layout in a chat application.
This message layout should contain:
Message Textview in a rounded rectangle
Message status check icon ImageView within that same rectangle
Message send time TextView outside the rounded rectangle and to its right.
When text is short, the whole layout should align itself to the right.
When the text is long, message TextView is going to expand itself to the left and upon touching the left side of the screen, it expands to a new row.
The problem is: Rounded rectangle stretches to the whole screen regardless of the message being short or long although underlying FrameLayout width is set to wrap_content.
Here is an image of the problem:
The layout I am using is:
<RelativeLayout
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:textSize="10sp"
app:showDate="#{message.postedAt}" />
<RelativeLayout
android:id="#+id/bubble_ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/text_message_time"
android:background="#drawable/rounded_rectangle_bubble_sent"
android:padding="8dp">
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:layout_marginLeft="4dp"
app:setStatusPng="#{message.status}" />
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="2dp"
android:layout_toLeftOf="#id/iv_check"
android:singleLine="false"
android:text="#{message.messageText}"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
The inner RelativeLayout named bubble_ll has its width equals wrap_content.
What I am expecting is:
text_message_time TextView should be attached to the right of the screen due to its layout_alignParentEnd property set true.
bubble_ll stands left of the text_message_time view, due to its layout_toLeftOf property set. And it should have a width of its contents.
I have tried other layouts such as Linear, ConstraintLayout etc.
The LinearLayout approach did not work, since the width is set to wrap_content for TextView always overlaps status info checks and message time make them disappear when the message in the TextView is long.
With ConstraintLayout I could not align bubble to stay still on the right. It stays on the center of the screen horizontally since it is constrained on both horizontal sides of the screen.
Any help will be appreciated.
I have come up with the following layout which is a combination of RelativeLayout and LinearLayout. I hope this serves your purpose. Please change the drawables and the ids if necessary.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/message_container"
android:layout_alignParentRight="true"
android:layout_margin="4dp"
android:text="10:30 am"
android:textSize="10sp" />
<LinearLayout
android:id="#+id/message_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_toLeftOf="#+id/text_message_time"
android:background="#android:color/holo_blue_dark"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:padding="4dp"
android:singleLine="false"
android:text="You have a long message here. This is so long that it takes two lines inside the TextView. No wonder, now its taking three lines and now its four. How long this message can go? I now have that question!!!"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_centerVertical="true"
android:layout_margin="8dp"
android:src="#android:drawable/presence_online" />
</LinearLayout>
</RelativeLayout>
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
I have a LinearLayout which contains two TextViews. Let the first TextView's text be "short text" and the 2nd TextView's text be "(s)".
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text"/>
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
I want the LinearLayout to appear to the user thus:
[[short text][(s)]____________]
where ____ means empty view.
Now if I put a slightly longer string into the first TextView, I want to see this:
[[slightly longer text][(s)]__]
and if I put a much longer string into the first TextView, I want to see this:
[[really long ...ng text][(s)]]
But I can't seem to find a way to keep the first TextView from crowding out the second TextView altogether, like so:
[[really long lo... long text]]
How do I get the behavior I am looking for?
The base of the answer to your question is this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text" />
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
BUT... bare in mind that I changed the width of your LinearLayout from:
android:layout_width="0dp"
android:layout_weight="1"
to
android:layout_width="wrap_content"
and that's a really important part of the answer.
The code I presented works like this:
[[short text][(s)]]
[[slightly longer text][(s)]]
[[really long ...ng text][(s)]]
It manages the ellipsizing correctly, but cannot introduce the "empty view" (____). If I didn't change the LinearLayout's layout_width, the ellipsizing would work correctly ((s) wouldn't be pushed off the screen), but the text alignment wouldn`t be correct. It would look like this:
[[short text ][(s)]]
[[slightly longer text ][(s)]]
[[really long ...ng text][(s)]]
So if the "empty view" is a need for you, you will need to implement it (for example) with nesting your LinearLayout inside another one (and this time "empty view" is gonna be an actual View). Like so:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text" />
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
<View
android:id="#+id/empty_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
This will give you the following behaviour:
[[[short text][(s)]]____________]
[[[slightly longer text][(s)]]__]
[[[really long ...ng text][(s)]]]
I am sorry I know it's simple question but I can't make this happen now.
I want one text always will be in center and another in right.
But when texts is too loo long they come to each other.
Let's say I want second text always be in the right and first text is in center but when one of these texts is too long the centered texts have to move left.
How could I do this?
I write this but it doesn't work properly.
<RelativeLayout
android:id="#+id/workout_footer_text"
android:layout_width="match_parent"
android:layout_height="#dimen/workout_header_height"
android:background="#color/green"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingLeft="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/review_comments_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text_color_white"
android:textSize="#dimen/review_top_text_size"
android:singleLine="true"
android:gravity="center"
android:layout_toLeftOf="#+id/review_write_label"
android:layout_centerInParent="true"
android:layout_gravity="center"/>
<TextView
android:id="#+id/review_write_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text_color_white"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:singleLine="true"
android:layout_marginLeft="20dp"
android:textSize="#dimen/review_top_text_size"
android:layout_centerVertical="true"/>
</RelativeLayout>
Instead of layout_toLeftOf="#+id/review_write_label" in your first TextView, remove that line and add layout_toRightOf="#id/review_comments_label" to your second TextView to make sure the first view stays centered and the second view stays to the right.
Update
Then make the second view's width match parent and set it's gravity to right. This will right justify the text in a container that stretches from the right edge of the centered TextView to the right edge of the parent thanks to the match_parent width.
You can try this:
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:orientation="horizontal">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="text1" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="text2" />
</LinearLayout>
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>