Develop Reference

Fit 2 TextViews

I need to fit 2 TextViews in one line. I tried to use LinearLayout, and now my best approach is to use RelativeLayout.
Here you can see XML for it
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="start"
android:visibility="visible">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_alignParentLeft="true"
android:textColor="#color/black"
android:maxLines="2"
android:textSize="12sp"
android:layout_toLeftOf="#+id/session_duration"
android:text="#string/dummy_text" />
<TextView
android:id="#+id/session_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:maxLines="1"
android:textSize="12sp"
android:layout_alignParentRight="true"
android:text="asdadsd"
android:textColor="#android:color/darker_gray"
/>
</RelativeLayout>
And the result
As you can see it's fit's okay, but second TextView is on the right side, when I want it to be after first TextView.
When I used LinearLayout I faced problem with size of first TextView (if it have to many text in it, second TextView will go off screen). Another approach with LinearLayout gave me similar results to RelativeLayout with same problem (wrong position of second view)

This happens because you are using wrap_content. If textView1 needs the space of the whole screen, then textView2 will get nothing. Instead you can use layout_weight to always give a View his space.
<?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:layout_gravity="start"
android:gravity="center"
android:visibility="visible"
android:orientation="horizontal">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:gravity="left"
android:maxLines="2"
android:text="Super Long String"
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:id="#+id/session_duration"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="I will always show"
android:textColor="#android:color/darker_gray"
android:textSize="12sp" />
</LinearLayout>

Remove this line from second TextView :
android:layout_alignParentRight="true"

RelativeLayout align Textview and Edittext

I want to use a RelativeLayout to align horizontally a textview and after that an edittext and then again a textview and then an edittext. I know that you can do that with a LinearLayout, but I want to accomplish that with a relativeLayout.
My Code is the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/userNameLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username:"
android:layout_alignParentLeft="true" />
<EditText
android:id="#+id/userNameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/userNameLbl"
android:minWidth="200dp"
android:text="Sample Text" />
<TextView
android:id="#+id/pwdLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password:"
android:layout_toRightOf="#+id/userNameText"
android:layout_toEndOf="#+id/userNameText" />
<EditText
android:id="#+id/userNameText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/pwdLbl"
android:minWidth="200dp"
android:text="Sample Text" />
</RelativeLayout>
But it doesn't work. All the controls (edittexts and textviews) are put on each other! What is wrong with my code? I have used layout_toRightOf to put them next to each other.
And because it was mentioned, there is enough place for the controls.
Here is also a picture of the designer, how it is looking like:

I copied your code just to see the exact problem, but everything looked fine. However The last EditText was cramped on the right side due to space-issues.
Are you sure you have enough space so that everything can fit?
With too little space given it might be possible that the views get crammed onto each other.

When you look closer, in android:layout_toRightOf and android:layout_toEndOf attributes you are using #+id/... values. Delete the + in order to refer to an existing resource item.

Ok, the problem seems to be in Xamarin Studio itself which is not rendering the content of the layout correctly. Because when I run this layout on a device the controllers are put next to each other and there is not such a problem, but the designer show it completely different.

Try this code it will align as you need:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<TextView
android:id="#+id/userNameLbl"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:text="Username:" />
<EditText
android:id="#+id/userNameText"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:minWidth="200dp"
android:text="Sample Text" />
<TextView
android:id="#+id/pwdLbl"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:text="Password:"
/>
<EditText
android:id="#+id/userNameText2"
android:layout_width="0dp"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:minWidth="200dp"
android:text="Sample Text" />
</LinearLayout>
Comment below if you need any further info

How to make the ellipsize textview and imageview show correct

I'm working on a layout file. This layout requires that the icons should always after the single line TextView. If the TextView is too long,then the TextView is ellipsize and the icons should be shown.Such as:
situation1: [[textview][icon1][icon2] ]
situation2: [[textview......][icon1][icon2]].
I have found the similar case in here, but it doesn't work for me.
My current code is something like this:
<RelativeLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="left">
<!-- icon show here -->
<LinearLayout
android:id="#+id/icons"
android:paddingLeft="5dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|left">
</LinearLayout>
<!--text show here-->
<TextView
android:id="#+id/text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="#id/icons"
android:singleLine="true"
android:ellipsize="end"
android:gravity="left"/>
</RelativeLayout>
The LinearLayout is used to add icons when fetch data from server. Android's layout preview is like above situation,but the apk runs on device like this this:
situation1: [ [textview][icon1][icon2]]
situation2: [[textview......][icon1][icon2]].
I'm really confused. Anybody has some ideas about this situation? Thanks in advance.
I found the code works fine after Android 4.3(include 4.3,I haven't test 4.2),it doesn't work below Android 4.3.The reason I think is that different Android systems parse these layout params in different ways.Such as some version think the parent container layout's params is more important than the child view.

Finally, I got my stupid situation.But it works.I will give you code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--text show here-->
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:layout_weight="1" />
<!-- icons show here -->
<LinearLayout
android:id="#+id/icons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
</LinearLayout>

Wrap single line with multiple TextViews in a RelativeLayout

I have a custom row for a listview that contains four TextViews.
Here is a screenshot of the layout I am creating:
The reason for multiple TextView is because I need to use different styles on each textview. Bold Name for example.
Here is the XML layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgPhoto"
android:src="#color/Red"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_margin="10dp" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/imgPhoto"
android:padding="10dp"
android:id="#+id/relativeLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:id="#+id/txtName"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="viewed a promotion by"
android:id="#+id/txtAction"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/txtName" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dominos Pizza"
android:id="#+id/txtMerchant"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/txtAction" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="14 seconds ago"
android:id="#+id/txtAgo"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/txtMerchant" />
</RelativeLayout>
</RelativeLayout>
This is a screenshot of what I am trying to achieve:
The question is how do I wrap the TextViews so that it fits inside the RelativeLayout just like in Picture 2? Or is there any other alternative I can use to achieve what I am looking for here?

I think it's possible through HTML code. You should be use to CSS for the wrap the text and then set into the view.

Use only one TextView and change the style with html. Example:
textView.setText(Html.fromHtml("<h2>This</h2><br><p>is an example.</p>"));

How to get Side by Side textviews with one that wraps

I have a listview with a custom adapter in which I have 3 textviews, two are next to each other and one is below the others. The problem I am running into though, is when the first textview extends, it pushes the other textview off the screen.
I have not been able to successfully get this to work, here is an example of what's happening:
As you can see when the first textview gets too long, it then pushes the other text off the screen. I would like it so it wraps but the date textview is also showing. It should also be functional in horizontal view.
Here's the listview adapter code:
<RelativeLayout android:id="#+id/vw1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:descendantFocusability="blocksDescendants" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/liName" android:textSize="17sp"
android:textColor="#333" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="left"
android:layout_gravity="left" />
<TextView android:id="#+id/liDate" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:gravity="right"
android:layout_gravity="right" android:width="60sp" android:layout_toRightOf="#+id/liName" />
<TextView android:id="#+id/liNum" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/liName" />
</RelativeLayout>

I am assuming that the text view being pushed is the liDate one.
You need to put this one before the liName in your layout and set the width to "wrap_content" and align it right. Then you lace the liName to the left of it with "fill_parent" width
So it would look like this:
<RelativeLayout android:id="#+id/vw1" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:descendantFocusability="blocksDescendants" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/liDate" android:textSize="12sp"
android:textColor="#666" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:width="60sp"
android:layout_alignParentRight="true" />
<TextView android:id="#+id/liName" android:textSize="17sp"
android:textColor="#333" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/liDate" />
<TextView android:id="#+id/liNum" android:textSize="12sp"
android:textColor="#666" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_below="#+id/liName" />
Hope this is what you meant

The key was using "#+id/" for the first textview instead of "#id/"
This worked for me:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/listEventTypeText"
android:layout_toLeftOf="#+id/listEventDateText"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/listEventDateText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/listEventTypeText"
/>
</RelativeLayout>