I'm trying to choose suitable layout for my situation. It will contain three elements: picture, text, button. His task is to be in one line when text is little, and be in two lines if there is big text.
The left side of the picture is tied to the left border of parent. The text on the left is bound to the right edge of the picture, and expands to the right border of parent. The picture is centered vertically relative to the text. RelativeLayout copes with these tasks. But the button has a special behavior.
The button has its right side tied to the right border of parent. But the left side is the trigger: if it reaches the right border of the text, the button goes down below the text, and the layout is now in two rows (visually).
concept picture
Is there such an layout? What would you choose? Thanks for your help.
P.S. recently I discovered Barrier in ConstraintLayout, perhaps there is a similar trigger, but which pushes the elements when there is not enough space for them... Current code id:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
app:srcCompat="#f00"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/image"
android:layout_centerVertical="true"
android:layout_marginStart="48dp"
android:fontFamily="sans-serif"
android:text="some very very very very very very very very very very very very very very long text"
android:textColor="#F00"
android:textSize="24sp"/>
</RelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:text="Button"
android:textColor="#000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/relativeLayout"/>
</android.support.constraint.ConstraintLayout>
Related
I have 2 views in a layout - TextView and Button. TextView is aligned/anchored to the left side and the button is to the right side.
What I'm trying to achieve is the natural "wrap behavior" of the Button. When TextView will be wide enough so that there won't be space for the button (in the same line), it should move below the TextView, while still anchored to the right.
Here are 3 scenarios for the layout which I want to achieve:
I was trying to make this with FlexBoxLayout, but the button appears on the left side after wrapping.
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="space_between"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text text"
android:gravity="start"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:text="Button"
/>
</com.google.android.flexbox.FlexboxLayout>
So how can I do that? It doesn't need to be FlexBox, I can use any layout, even 3rd party.
Use justifyContent="flex_end" in the parent and set layout_flexGrow to the children like this works for me.
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="wrap_content"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_end">
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="blah blah"
app:layout_flexGrow="1" />
<TextView
android:id="#+id/textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="( . )( . )"
app:layout_flexGrow="0" />
</com.google.android.flexbox.FlexboxLayout>
No need for a 3rd party layout.
ConstraintLayout should be more than enough - with a small tweak in code.
Your TextView will have straightforward constraints, set to parent layout (start, top, end).
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text text text text text text" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/text" />
</android.support.constraint.ConstraintLayout>
In the code, just check the width of the TextView and compare it with the width of the parent (basically check it should overlap with the button).
If it does change(you will have to do this in code but this is the principle):
app:layout_constraintTop_toTopOf="#+id/text"
to
app:layout_constraintTop_toBottomOf="#+id/text"
If you need to do this dynamically ConstraintLayout has neat feature "Keyframe animations" that creates awesome looking animations when you are changing constraints.
Doesn't seem like there is a way to do it with Flexbox. I would just do it programmatically when you've inflated the resource (in onCreateView() or something like that). The parent of both of the views would be a RelativeLayout, with the Button aligned to the TextView top when the widths combined don't exceed the width of the RelativeLayout, and aligned to the bottom of the TextView when the widths are larger than that.
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>
I have an arbitrary length textview+icon (icon+text) that needs centering on the screen. On the same row, there is a button aligned to the right side of the screen. (X)
| icon+text | X |
Using a LinearLayout I can center it with the view, but the button on the right shifts it left.
With a relative layout, I can achieve what I want but if the text is too long the button overlaps the text.
What's the right way to do this? I haven't used constraintLayout before, would that solve it?
I suggest you to use a constraint layout,
Example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".YourActivity">
<TextView
android:id="#+id/my_text_view"
android:text="My Long Text That must not overlap the button"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/my_btn"
app:layout_constraintTop_toTopOf="#+id/my_btn"
app:layout_constraintBottom_toBottomOf="#+id/my_btn"/>
<Button
android:id="#+id/my_btn"
android:layout_marginTop="16dp"
android:text="My Nice Button "
android:layout_marginEnd="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/my_text_view"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
Example Output:
You can set it like this,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:drawableLeft="#mipmap/ic_launcher"
android:text="Click" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:gravity="center"
android:text="TextView" />
</LinearLayout>
just use a Relative Layout.
Center your Textview
and put toRightOf=txtViewsName on the button.
//UPDATED Forcing Widths in DP to ensure text is always centered and never overlaps button.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#mipmap/ic_launcher"
android:maxWidth="230dp"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:text="My text to show test abcdefghyijkldkf here" />
<Button
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
You will need to adjust the button width and textview maxwidth to match your design, and confirm on preview all resolutions, but dp should cover you pretty well in this case.
NOTE*
This simply answers your issue, but does not do any funny behavior, i.e. if text grows too much ignore center command and start moving to the left, this does not do that. If that is your desire, please update your question.
//Centering Text in left view and using weight to ensure text area takes proper percentage of the space (based on your comments, not the layout you are looking for, but I'll leave it in case it helps someone else).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:drawableLeft="#mipmap/ic_launcher"
android:gravity="center"
android:text="My text to show here" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="Button" />
</LinearLayout>
for best practice i think ConstraintLayout is the best solution for designing and yes of course it helps you for what are you looking for.
for more info check this Build a Responsive UI with ConstraintLayout and this
ConstraintLayout.
Since your ImageButton on right has a fixed width (let's say 40dp for the purpose of this example) you can achieve the desired result by adding a margin of the same width at the end of your TextView to ensure that they're not overlapping. To keep the TextView centered on the screen you have to add the same margin at the start as well:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textview"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/button"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textview"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
If you want to center the text within the TextView use android:gravity="center":
If the ImageButton's width was wrap_content then this approach wouldn't work, because there is no way to constraint the end of the TextView both to the end of the parent (so it's centered on the screen) and to the start of the ImageButton (so they don't overlap if the text gets long) at the same time.
In the end I ended up using RelativeLayout per Sam's suggestion with maxWidth and margin set on the TextView.
I'm trying to build the following layout on Android without any success.
I want a text to be displayed on my screen. It can take the whole width, but must be centered horizontally.
On the same line, on the right side of the screen I want to display a small layout. It shouldn't impact the horizontal centering of the main text and the main text shouldn't be visible behind the layout displayed on the right.
I cannot use a hard color for my layout background as it's displayed on a transparent background over a bitmap...
Any idea on how to achieve this ?
I can either use a RelativeLayout in which case the main text isn't centered based on the middle of the screen (it takes the right layout width into account)
Or the text is displayed behind the right layout...
Edit:
Here is one of my test
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:layout_centerInParent="true"
android:fontFamily="sans-serif"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:singleLine="true"
android:textColor="?android:attr/textColorPrimary"
android:textSize="17sp"
android:text="very looooooooooooooooooooooooooooooooong text"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:padding="3dp"
android:visibility="visible" >
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:filter="true"
android:src="#drawable/device_access_time" />
<Spinner
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
</RelativeLayout>
RelativeLayouts adhere to the principle of z-indexes, so if you put the right-aligned layout first, the centered text view will be drawn correctly on top.
I wanted to make two equally-sized radio buttons with a custom background, text, and an image to the right of the text. Because of how different these are from a standard "Button", I made them using a clickable "RelativeLayout".
The text and the image are of different heights, but I want each one to be centered vertically in the button. I also want the combination of the text+image to be centered horizontally in the button. This second part is what I'm having trouble with; it's off-center, close to the left side. In the image below, the left side is what I want, but the right side is what's happening. The image on one of the buttons (the one with the longer text) is resized to be smaller, too... Though there is still plenty of space on the right side of the button.
Here is my code:
<LinearLayout
android:baselineAligned="false"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/my_button"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/button_textview"
android:text="#string/button_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/button_imageview"
android:layout_centerVertical="true"
android:src="#drawable/my_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_textview">
</ImageView>
</RelativeLayout>
<RelativeLayout
... same thing for the second button ...
</RelativeLayout>
</LinearLayout>
What am I doing wrong?
Use this as your button:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="MyButton"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/my_image"/>
</LinearLayout>
Now, you can place it in other parent views. To apply layout attributes to above button, place those attributes in the outer <LinearLayout> tag of above button.
Alternative:
You can set custom images to be drawn on sides(Left,Right,Top,Bottom) of a TextView using attributes like:
android:drawableLeft="#drawable/my_image"
Turns out the solution was adding
android:paddingRight="0dip"
strangely enough, even though I didn't put any padding there in the first place.