Develop Reference

How do I right justify a TextView in a Linear Layout?

I am trying to get the TextView, "tv_amount" to stay on the right side of the screen. I have tried using android:gravity="right" but that hasn't been working for me. Anyone have any suggestions?
Image of emulator running 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="45dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="40sp"
android:layout_height="40sp"
android:background="#drawable/circle_border"
android:padding="6sp"
android:layout_marginLeft="6dp"
android:src="#drawable/food"/>
<TextView
android:id="#+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="12dp"
android:text="Yummy Pizza"
android:textSize="20sp" />
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:gravity="end"
android:text="$25"
android:textSize="25sp" />
</LinearLayout>
I am expecting the transaction or "tv_amount" to stay be right justified so that end of the number is staying towards the right side of the screen.
I tried using :
android:layout_weight="0"
android:layout_gravity="end"
android:gravity="right"
but these don't seem to work obviously. I am a beginner when it comes to android development and can't seem to find any answers that have helped anywhere else. They all say to use android:gravity or some other alternative. Maybe there is something in my code that doesn't allow that.

Try it like this:
Splitting the content into left and right will result in the weight and gravity properties working. Check out this layout below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="20sp" />
<!--Separate layout aligned to the left, containing an image and a yummy pizza label. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/tv_text_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Left"
android:textSize="16sp" />
</LinearLayout>
<!--Display the pizza price on a separate label aligned to the right -->
<TextView
android:id="#+id/tv_text_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Text Right"
android:layout_weight="1"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>

I am dumb. The issue wasn't with the code in my individual recycler view layout code. It was with my activity_main.xml. I set the recycler_view width to "wrap_content" when it should have been "match_parent." Rookie mistake.

Make an element fill all the free space in wrap_content-based layout

I have a vertical layout: 2 text field and a horizontal bar of buttons:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff00"
android:orientation="vertical"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_send"
android:layout_weight="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
I want the button bar to have wrap_content size policy (can't even have them fixed size because this app has different localizations). I also want the text fields to have the same width as the button box. Here's how the above xml looks in designer (Eclipse + ADT) with platform 17 selected (and how I want it to look). Colors are just for easy debugging:
And here's how it looks on an Android 4.1 tablet:
This layout is used as a custom layout to a Dialog. No manipulations has been done to the Dialog apart from setting content and title.
Interesting fact: it looks exactly as I want it to (and same as ADT designer shows) on Android 3.1 tablet. But not on 4.1.
How can I achieve the desired layout?

You might want to use RelativeLayout to accomplish what you're looking for. Try changing your xml to the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff00ff00"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_below="#+id/et_email"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<RelativeLayout
android:id="#+id/buttonbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_comment" >
<Button
android:id="#+id/btn_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toLeftOf="#+id/btn_show"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toRightOf="#+id/btn_show"
android:text="Cancel" />
</RelativeLayout>
</RelativeLayout>

This seems silly but it seems to work. Try putting in a nested layout. Change your outer layout width/height to fill parent. Then, inside that make another linear layout with all of your views and such. Give the inner LinearLayout the wrap_content values and that should do it. There's got to be a better way to do it than this but I can't think of it at the moment.

How to optimise this layout XML file to match my idea?

I've created this fragment named searchfragment. Below there is the layout XML file of the searchfragment. Unfortunatelly the design isn't that smooth as I want it to be.
Here's what I wanted it to look like:
First row: Welcoming text (that works)
Second row: Search input field (that works, too)
Thirt row (and here it gets complicated): There should be a text named "Search for" and then a Spinner with the item you can search for (e.g. name, year, price). Then there's the Search button. Next thing is that you can sort the output. Therefore there's a text with "Sort for", a Spinner with the critirion and a Sort button. Best case the search section should be align to the left and the sort for to the right, but still centered.
Forth row: Output field.
Now as the elements are all present on my device, they are not in the graphical layout of Eclipse. I've tried for hours now to get it working but it's kind of hard if you're not sseing your objects.
Long text - short task: Please help me optimise my design.
searchfragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:layout_gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:text="#string/welcome" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/edit_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:hint="#string/edit_message" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="8dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/search_for" />
<Spinner
android:id="#+id/criterion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:entries="#array/searcharray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="136dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sendMessage"
android:text="#string/button_send" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sort_for"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<Spinner
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:entries="#array/sortarray"
android:prompt="#string/prompt" />
</LinearLayout>
<Button
android:id="#+id/sort_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sortAgain"
android:text="#string/button_send" />
</LinearLayout>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/showResults"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
</ScrollView>
</LinearLayout>
I've added a photo of the current design. The space with the red frame around it is the third "row" and should be changed. The second spinner is (I don't know why) much too wide. It should be that wide as the first one. Then all the elements should be about the same heigth and the elements should be centered.

You're on the right track with your layout, but the reason your second Spinner is taking up so much room is that you've set it's layout_weight to 1, and as it's the only one with a layout_weight, it's taking up the rest of the space that's free.
If you want the items to take up a relative amount of space on the screen, then you could stick with using layout_weight and give all of your items that property.
For example, just for your third row you would get rid of the LinearLayout around your Spinner, change some of the layout_width properties and give all of your items a layout_weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="8dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/search_for" />
<Spinner
android:id="#+id/criterion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:entries="#array/searcharray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sendMessage"
android:text="#string/button_send" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/sort_for"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/sortarray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/sort_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sortAgain"
android:text="#string/button_send" />
</LinearLayout>
This is going to give all of your items an equal weighting, so the TextViews will be the same size as the Spinners which will be the same size as the Buttons. Play around with the layout_weight attribute to make them more relative, for example if you want the Buttons to be twice the size as the Spinners, set their layout_weight to 2.

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>

Why are some of my views not aligned correctly at the bottom of my relative layout?

I have problems getting some of my views aligned in a relative layout that I use inside a row of my listview.
Here is a screenshot from the layout builder in Eclipse, this is what I think it should look like:
(source: janusz.de)
The next image is from the emulator. Now the TestTestTest View is at the top and covers the name and distance Textviews.
(source: janusz.de)
This is my layout:
<?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:padding="4dip">
<ImageView android:id="#+id/logo" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:adjustViewBounds="true"
android:scaleType="centerInside" android:src="#drawable/icon"
android:layout_centerVertical="true" android:layout_alignParentLeft="true"
android:background="#color/green" />
<TextView android:id="#+id/distance" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Distance"
android:layout_alignParentRight="true" android:layout_alignParentTop="true"
android:paddingRight="4dip" android:background="#000000" />
<TextView android:id="#+id/name" android:layout_width="fill_parent"
style="#style/ListHeadText" android:layout_height="wrap_content"
android:text="Name"
android:layout_alignTop="#id/distance" android:layout_toRightOf="#id/logo"
android:layout_toLeftOf="#id/distance" android:gravity="clip_horizontal"
android:lines="1" android:paddingLeft="4dip" android:background="#color/red" />
<TextView android:id="#+id/number" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Number"
android:paddingRight="4dip" android:layout_alignRight="#id/distance"
android:background="#color/darkred" android:layout_below="#id/distance" />
<TextView android:id="#+id/subcategory" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Subcategory"
android:paddingLeft="4dip" android:layout_alignLeft="#id/name"
android:lines="1" android:gravity="clip_horizontal"
android:layout_below="#id/distance" android:background="#color/green" />
<TextView android:id="#+id/test" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="TestTestTest"
android:paddingLeft="4dip"
android:layout_alignParentBottom="true" android:gravity="bottom"
android:background="#color/red" />
Shouldnt align_parent_bottom put the view at the bottom of the cell in the list?

Try adding android:layout_alignParentLeft="true" as well; sometimes Views aren't displayed properly if it can't anchor the view with at least 2 points. Also, is this RelativeLayout used within a ListView? If so, you might find you have some difficulty getting it to look right. There was another question where someone was having a problem where the RelativeLayout looked right on its own, but not once it was included as part of a ListView. We didn't manage to figure out what went wrong so he had to use nested LinearLayouts instead.