Develop Reference

How to align buttons next to text that should flow on 2 lines?

So I want to have a title with 2 buttons next to it. These buttons should stick to the left next to the text, and when the text becomes too long, it should flow on 2 lines.
I was able to replicate this by giving the textView a maxwidth, but this causes the textview to take that maxwidth, even if it reflows on 2 lines. Therefore my buttons don't align next to the text anymore.
Like this:
How can I make my textView take the width it needs, not the one I tell it to use as maxWidth?

Here comes the perfectly working answer using ConstraintLayout (as I love this layout).
This is the code.
<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" >
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text"
android:layout_marginTop="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:maxWidth="300dp">
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:maxWidth="300dp"
android:text="Some layout is going to be created and whatever I do it won't cross the limit."
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"/>
</android.support.constraint.ConstraintLayout>
<ImageView
android:layout_height="40dp"
android:background="#365987"
android:layout_width="40dp"
android:layout_marginStart="5dp"
android:id="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"/>
<ImageView
android:id="#+id/image1"
android:layout_height="40dp"
android:background="#e85f11"
android:layout_width="60dp"
android:layout_marginStart="5dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintLeft_toRightOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Outputs:
Whatever the text is, it will not cross the maxwidth. And with less width than maxwidth, it's width will be wrap_content.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:text="Male:"
android:textColor="#111111"
android:textSize="12dp" />
<ImageView
android:id="#+id/iv_male"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/block_user" />
<ImageView
android:id="#+id/iv_female"
android:layout_width="#dimen/_42sdp"
android:layout_height="#dimen/_42sdp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="10dp"
android:src="#drawable/blocked_user" />
</LinearLayout>
<TextView
android:id="#+id/tv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is something Demo Content"
android:layout_marginLeft="#dimen/_15sdp"
android:textColor="#111111"
android:textSize="12dp" />
</LinearLayout>
So you can just add content below the linear layout complete
I Hope it Helps you and you will get your solution.

Try this code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="2"
android:paddingEnd="100dp"
android:text="Simple textdfddfdf dfdfdfdfdf dfdf Sample Text Sample Text" />
<LinearLayout
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/zero"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Here, You have to pass android:paddingEnd="100dp". This you can manage from dimens.xml
I hope. This will help full

You should use ConstraintLayout
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Let's take an instance of that Planner part of the image.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/constraintLayout"
<!-- Other attributes -->
<TextView
android:id="#+id/text"
android:layout_width = "xxxdp"
android:layout_height = "xxxdp"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintLeft_toLeftOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/text"
app:layout_constraintTop_toTopOf="#+id/text"
<!-- Other attributes --> />
<ImageView
android:id="#+id/image1"
app:layout_constraintBottom_toBottomOf="#+id/text"
app:layout_constraintLeft_toRightOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
<!-- Other attributes --> />
Definition of Attributes used.
layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.

Android CardView center horizontally

I have read several answers on how to align a card view horizontally. I am trying to achieve the following:
Desired Result
This is so far the code I have written (I have followed around 20 answers from different posts, none which have helped me. The problem is the margin or space on the left and the right, I need that space, but the card view expands the whole width.
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/mProjectCDCNumCardView"
android:layout_marginStart="7dp"
android:layout_marginTop="7dp"
android:text="DETAIL"
android:textColor="#000"
android:textSize="16sp" />
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mProjectCDCNumCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="13dp"
card_view:cardCornerRadius="2dp"
card_view:contentPaddingLeft="50dp"
card_view:contentPaddingRight="#dimen/activity_horizontal_margin"
card_view:contentPaddingTop="20dp"
card_view:contentPaddingBottom="#dimen/activity_vertical_margin"
android:background="#drawable/cardview_normal"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textView8">
<EditText
android:id="#+id/mProjectCDCNumEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/editborder"
android:hint="Project Number"
android:inputType="textPersonName"
android:padding="10dp" />
</android.support.v7.widget.CardView>
<TextView
android:id="#+id/mProjectAddressLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/editborder"
android:layout_below="#id/mProjectCDCNumCardView"
android:ems="16"
android:padding="10dp"
android:hint="Location"
android:textColor="#000"
android:textSize="18sp"
android:drawableRight="#drawable/left_arrow"/>
</RelativeLayout>
Thanks!

little late to the party here but I really like using ConstraintLayouts. It is super easy to center Views in them.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="200dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
... Content ...
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
This code will center CardView inside of the ConstraintLayout that has the same width as parent. The CardView has width of 200dp and thanks to the constraints it will be centered horizontaly in the Layout.
More info about ConstraintLayout.

You just add android:layout_marginStart and android:layout_marginEnd to your cardview.

The height attribute of your layout must be match_parent.

In your CardView component, add a LinearLayout component.
Add android:gravity="center_horizontal" property to your LinearLayout.
In your LinearLayout component add your EditText component.
<android.support.v7.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardUseCompatPadding="true"
app:cardElevation="4dp"
app:cardCornerRadius="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<EditText
android:id="#+id/mProjectCDCNumEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/editborder"
android:hint="Project Number"
android:inputType="textPersonName"
android:padding="10dp" />
</LinearLayout>

android nested LinearLayout sizing

I am trying to achieve the following layout for my expandable listview.
Layout
Problem:
On android previewer the layout looks as expected:
refer to first image in attachment below.
However, when I run it on an emulator or a device the second TextView is not displayed.
refer to second image in attachment below
I have to set the height of the second ImageView (ivGroupIndicator) to match parent in order for the second TextView to display. But this stretches the expandable arrow icon.
refer to last image in attachment below
Images
Here is my layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:src="#drawable/ci_hand_cursor"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:layout_weight="0.8">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dhelhi Belhi"
android:fontFamily="sans-serif"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/colorPrimaryText"
android:paddingBottom="2dp"/>
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="20-September-2017"
android:fontFamily="sans-serif"
android:textSize="14sp"
android:textColor="#color/colorSecondaryText"
android:paddingBottom="5dp"/>
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:background="#drawable/group_indicator"
android:layout_gravity="center"/>
</LinearLayout>
What am i missing here?

This should do the trick:
Use 0dp as height/width when using weights
Weight can just be 1 (not 0.8)
Use equal weights on the 2 text views so they share equal vertical space
Set gravity to center_vertical on text views so the text is centered.
set scale type on image so it doesn't stretch.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/ci_hand_cursor" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="Dhelhi Belhi"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="20-September-2017"
android:textColor="#color/colorSecondaryText"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/group_indicator"
android:scaleType="centerInside" />
</LinearLayout>

The problem maybe is that you set the height of the parent layout to 50dp. Try to set it to wrap content, and use height=0dp and weight=1 for the vertical LinearLayout

Frame Layout fixed elements on wrap_content height

I have the next design:
Actual design app
CODE:
<LinearLayout
android:id="#+id/edit_name"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#99000000"
android:weightSum="1">
<FrameLayout
android:background="#color/tabIndicator"
android:layout_width="310dp"
android:layout_gravity="center"
android:clickable="true"
android:layout_height="wrap_content"
android:minHeight="136dp"
android:layout_weight="0.75">
<TextView
android:id="#+id/close_circle"
android:elevation="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="X"
android:background="#drawable/oval_corner"
android:backgroundTint="#color/colorPrimary"
android:layout_gravity="top|bottom|right"
android:layout_alignParentEnd="true"
android:paddingLeft="8dp"
android:paddingTop="3dp"
android:paddingRight="8dp"
android:paddingBottom="3dp"
android:textColor="#color/tabIndicator"
android:textStyle="bold"
android:layout_margin="2dp"
android:translationZ="2dp">
</TextView>
<TextView
android:id="#+id/textDescLarga"
android:layout_width="match_parent"
android:layout_height="208dp"
android:text="#string/text_placeholder_benefit"
android:textStyle="normal"
android:textSize="12dp"
android:textColor="#color/textDefault"
android:layout_gravity="bottom|center"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:maxLines = "12"
android:scrollbars="vertical">
</TextView>
<ImageView
android:id="#+id/imageMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/placeholder_benefit"
android:layout_gravity="top|left">
</ImageView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textTitulo"
android:layout_gravity="center"
android:layout_marginBottom="0dp"
android:text="Nombre hotel"
android:textAlignment="center"
android:textStyle="bold"
android:textSize="19dp"
android:textColor="#color/cardview_dark_background"/>
</FrameLayout>
PROBLEM:
When I need auto height, on the text, whether increases or decreases, I tried Fragment Layout layout_height: wrap_content but text overlap image.
What am I doing wrong? Is there another way to do this?
Thanks

FrameLayout renders it's children in a stack - one on top of the other unless you use layout_gravity to position them. FrameLayout is typically used with the entire available screen space - the layout_height and layout_width are set to match parent.
Your issue is because you have the layout_height set to wrap content, it will overlay widgets one on top of the other. Set the layout_height to match parent. Or better yet for your case, use a RelativeLayout.

TextView modifies Linearlayout proportions when using ellipsize

I'm using ListView to display list of film. I used android:layout_weight to arrange each item, and I put 0.5 for my RelativeLayout, who contains 2 TextView : ZoneName and FilmName
fragment1.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/fond"
>
<TextView
android:text="En séléctionnant un des écrans ci-dessous, vous accéderai à des informations complémentaires sur les contenus qui sont en train de passer à l'écran."
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="20dp"
android:id="#+id/secondScreenInformationTextView"
android:textColor="#FFF" />
<ListView
android:id="#+id/lv_select_screen"
android:background="#26FFFFFF"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
and here my item_select_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/screenTable"
android:orientation="horizontal"
android:weightSum="1">
<ImageView
android:id="#+id/item_img_screen_type"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_weight="0.2"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_marginTop="10dp"
>
<TextView
android:id="#+id/item_title_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:textSize="18sp"
android:textColor="#FFF"
android:textStyle="bold" />
<TextView
android:id="#+id/item_content_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:layout_below="#+id/item_title_screen"/>
</RelativeLayout>
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_weight="0.2"
android:id="#+id/item_poster_miniature"/>
<ImageView
android:layout_width="15dp"
android:layout_margin="2dp"
android:layout_height="15dp"
android:layout_weight="0.1"
android:src="#drawable/menu_triangle"
android:id="#+id/item_img_triangle_select_screen"
android:layout_gravity="center_vertical"/>
</LinearLayout>
It's works well with short string, but I add android:maxLines="1" and android:ellipsize="end" to shortcut the String if necessary. But when it does, it extends the width of my RelativeLayout, and my 3 imageView seem to reduced to compensate for the change.
I can fix that using maxWidth, but it will be no more dynamic.

When you're working with weights, always give 0dp as the height or width for the children depending on the orientation and let the weight do the measurements.
So your RelativeLayout's width should be 0dp, same for the rest. I am guessing thats the problem.

Yes, the behaviour is quite expected.
You are using,
android:layout_width="wrap_content"
for your TextView. So it would try to wrap its entire contents and adjust its size accordingly.
As the content is large and it is ellipsized, the TextView takes the maximum width available to it to wrap all of its content and then ellipsize at the end.
So, the solution is to,
1) Either have a fixed width for the TextView and have ellipsize at end.
2) Or programatically truncate the contents to the length desired for a perfect layout rendering. You can also add ellipsize to the truncated string.
Both would have the same effect (its your choice) but would never distort your layouts.

the problem is you are also setting widths in dp which screw up weight, try setting them to 0dp
<ImageView
android:id="#+id/item_img_screen_type"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="0.2"
/>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_marginTop="10dp"
>
<TextView
android:id="#+id/item_title_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:textSize="18sp"
android:textColor="#FFF"
android:textStyle="bold" />
<TextView
android:id="#+id/item_content_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:layout_below="#+id/item_title_screen"/>
</RelativeLayout>
<ImageView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="0.2"
android:id="#+id/item_poster_miniature"/>
<ImageView
android:layout_width="0dp"
android:layout_margin="2dp"
android:layout_height="15dp"
android:layout_weight="0.1"
android:src="#drawable/menu_triangle"
android:id="#+id/item_img_triangle_select_screen"
android:layout_gravity="center_vertical"/>