Develop Reference

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

fill parent on a textview doesn't apply

I know this question has been asked multiple times, but I have looked on all the solution I could see and none of them worked.
I have a textview inside a relative-layout. the textview has a height : fill_parent atribute that does not work. the pun is that they are severall other textview in this relative-layoutwhich all manage to fill parent,except for this one.
here is the XML :
<?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"
android:background="#drawable/customshape"
android:orientation="horizontal" >
<TextView
android:id="#+id/mainlistdescription"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scrollHorizontally="true"
android:maxLines="4"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/mainlistquantite"
android:layout_gravity="center_vertical"
android:textSize="12sp"
android:padding="10dp"
/>
<TextView
android:id="#+id/mainlistquantite"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:maxLines="4"
android:layout_toLeftOf="#+id/consultaffichelayoutdroit"
android:textSize="12sp"
android:padding="10dp"
/>
<TextView
android:id="#+id/consultafficheseparator" <!-- the one not working-->
android:layout_width="2dp"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/imageView1"
android:background="#777777"
android:maxWidth="2dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|right"
android:src="#drawable/fleche" />
<LinearLayout
android:id="#+id/consultaffichelayoutdroit"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/consultafficheseparator"
android:orientation="vertical"
android:paddingLeft="5dp"
>
<TextView
android:id="#+id/mainlistnumero"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:id="#+id/mainlistprix"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
here is what i get :
the grey bar should go all the way but doesn't when actually running on the emulator( it does in the eclipse tool)
since this xml is actually called in a list view, I can't seem to fix the problem using JAVA code, so the solution would ideally be on the XML file. I tryed so far android:clipChildren="false" without sucess, as well as changing the order of my elements in the XML, wich juste made it worse.
after experiment,I can tell nothing takes the place so it's not the it cannot go because there is allready a view there,it just doesn't expand that far
thanks for the help on that

Why are you using a TextView to draw a separator? Try with a normal view like the code below.
Also, if the seperator has to align to the bottom of your description view, you can use the layout_alignBottom-property of RelativeLayout like this:
android:layout_alignBottom="#+id/mainlistdescription"
So the separator would look something like the code below:
<View
android:id="#+id/consultafficheseparator"
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/imageView1"
android:layout_alignBottom="#+id/mainlistdescription"
android:background="#color/separator_bg" />
Below some other tips:
It's better to define a color in some resource-file (eg. colors.xml) and refer to that color from inside your layout. Especially when using it in a ListView
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="separator_bg">#777777</color>
</resources>
And in your layout-file android:background="#color/separator_bg"
Use match_parent instead of fill_parent because that's deprecated.
I see android:scrollHorizontally="true" on one of the TextView's. That only works when the TextView is editable. If you want the content to scroll because it doesn't fit in the TextView, try to use the code below:
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
And in your adapter.getView():
final TextView description = (TextView) view.findViewById(R.id.mainlistdescription);
description.setSelected(true);

It looks like your TextView is not at the top level, maybe you can try the following in your code:
consultafficheseparatorTextView.bringToFront();

Had the same pesky problem which by the way makes no sense. What worked for me in the end was changing the android:layout_height in RelativeLayout tag to fill_parent like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/customshape"
android:orientation="horizontal">
hope this helps

Try setting one (or all) of the following to see if it changes anything:
android:maxHeight="100dp"
or
android:layout_height="100dp"
or
android:text="a"
android:textColor="#777777"
If any of these options change the size, please let me know and we can work on a proper solution!

It's very strange you get such view of this layout, because after copy&paste of your layout code I've got this one.
Your solution works, I've made some minor improvments. It's like your code, but there is no need to use TextView if you need background color only, View could be used instead.
<View
android:id="#+id/consultafficheseparator"
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/imageView1"
android:background="#777777"
/>
Only suggestion is to set root layout height "match_parent" or some value in dp, like thiagolr proposed. I've set it to "100dp" for this screenshot.

This is what you should do,
<?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"
android:background="#drawable/customshape"
android:orientation="horizontal" >
<TextView
android:id="#+id/mainlistdescription"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scrollHorizontally="true"
android:maxLines="4"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/mainlistquantite"
android:layout_gravity="center_vertical"
android:textSize="12sp"
android:padding="10dp"
/>
<TextView
android:id="#+id/mainlistquantite"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:maxLines="4"
android:layout_toLeftOf="#+id/consultaffichelayoutdroit"
android:textSize="12sp"
android:padding="10dp"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|right"
android:src="#drawable/fleche" />
<TextView
android:id="#+id/consultafficheseparator" <!-- this will work now -->
android:layout_width="2dp"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/imageView1"
android:background="#777777"
android:maxWidth="2dp" />
<LinearLayout
android:id="#+id/consultaffichelayoutdroit"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/consultafficheseparator"
android:orientation="vertical"
android:paddingLeft="5dp"
>
<TextView
android:id="#+id/mainlistnumero"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:id="#+id/mainlistprix"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>

1)Try to make your Linear Layout orientation vertical
or
2)Try to make your Relative Layout orientation vertical
it can be help.

Android - Align TextViews like a table row

I have a listview that I'm populating with data and I'm trying to get my layout to look like this:
Is there a way to create this while using Linear or Relative layouts? I tried with TableRows and while it works, it leaves a gap between for the column that divides the left from the right and it doesn't look appealing at all.
Not too sure where to get started....any help is greatly appreciated.

I am writing a sample for one line. Please refer that.
<LinearLayout
android:id="#+id/line1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:text="Issue Number"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:layout_width="0px"
android:gravity="right"/>
<TextView
android:text="6046"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:layout_width="0px"
android:gravity="left"/>
</LinearLayout>
You need to write this for all the lines and then enclose it under the parent LinearLayout with orientation vertical.

You can provide an xml to format each row in a ListView, whereby each row is a simple horizontal LinearLayout with two TextViews.
So something along the same lines as this:
http://www.heikkitoivonen.net/blog/2009/02/15/multicolumn-listview-in-android/
A more detailed article dealing with ListViews:
http://www.vogella.de/articles/AndroidListView/article.html

I created a layout with your firsts 2 rows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Issue Number:"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date Received:"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_toRightOf="#+id/linearLayout1"
android:gravity="left"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6,046"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="09/02/2008"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</RelativeLayout>

You can actually do this by placing a 2 LinearLayout inside a single parent LinearLayout. Where parent android:orientation should be horizontal. For each row you need to use this technique.
I did use this method for my project.

Why two items in the same relative layout are differently layouted?

I have a listview with item specified by RelativeLayout
There is an image (gray arrow, this is png, with transparent padding). In first case text with blue back overlaps this image, in second - it is aligned.
The only difference between these cases is that left photo is invisible in first case. I do not understand why in second case the blue text does not overlap gray arrow? (it is desirable behavior)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/padding_content">
<ru.ip_news.ui.views.RationalImage
android:id="#+id/picture"
android:layout_width="#dimen/article_short_image_width"
android:layout_height="fill_parent"/>
<View
android:id="#+id/separator"
android:layout_width="#dimen/padding_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/picture"/>
<ImageView
android:id="#+id/dis_ind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/dis_ind"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/separator"
android:layout_toLeftOf="#id/dis_ind"
android:layout_gravity="left"
android:textStyle="bold"
android:textColor="#color/article_text_main"
android:maxLines="2"
android:ellipsize="end"
android:background="#F0F0"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/separator"
android:layout_below="#id/title"
android:layout_alignParentBottom="true"
android:textColor="#color/article_text_secondary"
android:maxLines="4"
android:background="#F00F"/>
</RelativeLayout>

I've never worked with Android coding before, but just from looking at your code I'd say there's a conflict between android:layout_alignParentRight="true" found here:
<ImageView
android:id="#+id/dis_ind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/dis_ind"/>
and your android:layout_alignParentBottom="true" found here:
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/separator"
android:layout_below="#id/title"
android:layout_alignParentBottom="true"
android:textColor="#color/article_text_secondary"
android:maxLines="4"
android:background="#F00F"/>
I've never worked with the code base before and don't have a "solution" for you, but maybe it'll get you a starting point.

Since the picture no longer exists in the top view , the layout has become smaller so the textviews are closer. Put some margin between the two text views to fix the issue.

Resolved the problem by extracting linearlayout and moving photo to it. For some reason this photo in the same layout involves space between texts.
<?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:padding="#dimen/padding_content">
<ru.ip_news.ui.views.RationalImage
android:id="#+id/picture"
android:layout_width="#dimen/article_short_image_width"
android:layout_height="fill_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/padding_content">
<ImageView
android:id="#+id/dis_ind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/dis_ind"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dis_ind"
android:layout_gravity="left"
android:layout_alignParentLeft="true"
android:textStyle="bold"
android:textColor="#color/article_text_main"
android:maxLines="2"
android:ellipsize="end"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_alignParentBottom="true"
android:textColor="#color/article_text_secondary"
android:maxLines="4"/>
</RelativeLayout>
</LinearLayout>

Why is there extra padding on the bottom of my row?

I have the following layout. This defines a row in my ListView. I noticed that the text is not centered in the row. There seems to be extra bottom padding. How can I make the text appear in the center, vertically, so there is no padding?
<?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="fill_parent" android:background="#drawable/stocks_gradient">
<TextView
android:id="#+id/nameText"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Symbol" android:textStyle="bold" android:textSize="24sp" android:layout_width="100dp" android:textColor="#4871A8" android:paddingLeft="5dp"/>
<TextView
android:id="#+id/priceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/nameText"
android:gravity="right"
android:text="100" android:textStyle="bold" android:textSize="24sp" android:textColor="#4871A8"/>
<TextView
android:id="#+id/changeText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/priceText"
android:gravity="right"
android:textSize="18sp" android:text="3.07(+1.08%)" android:padding="7dip"/>
</RelativeLayout>

Did you try setting the layout_gravity to center_vertical?
Also, you may have a reason for doing so, but the layout you show would be much simpler as a horizontal LinearLayout. There is no need for a RelativeLayout here.