Develop Reference

How can I create a multiline, multicolumn list item layout?

I am creating a messaging app and am currently working on the inbox. I'm using a RecyclerView to display the list of conversations and would like each list item to look like this:
Leftmost is the contact image at 90dp x 90dp
The first row has two columns--the contact name and the date. The date should not be a fixed size as I currently have it, but fit at most DD/MM/YYYY (can be smaller in the case of something like "Sunday") and should be anchored to the right margin. The contact(s) should expand as necessary to fill any space up to the date.
The second row contains as much text of the last message as will fit.
I was going to use layout_weight but that doesn't work in a RelativeLayout (and doesn't allow the contact names to elongate in the case of a shorter date) and LinearLayout doesn't let me use layout_toEndOf. I'm a newbie at Android development so I'm not sure if one of those is the "right" answer.
What's the proper way of accomplishing the layout I'm looking for?
<?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="wrap_content">
<RelativeLayout
android:id="#+id/conversation_info"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_horizontal_margin">
<RelativeLayout
android:id="#+id/conversation_image_layout"
android:layout_width="90dp"
android:layout_height="90dp">
<ImageView
android:id="#+id/conversation_contact_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
<TextView
android:id="#+id/conversation_contact_name"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:gravity="center_vertical"
android:textSize="#dimen/conversations_contact_font_size"
android:layout_toEndOf="#id/conversation_image_layout" />
<TextView
android:id="#+id/conversation_date"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/conversation_contact_name"
android:gravity="right"
android:paddingRight="#dimen/activity_horizontal_margin"
android:textSize="#dimen/conversations_date_font_size" />
<TextView
android:id="#+id/conversation_snippet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/conversation_contact_name"
android:textSize="#dimen/conversations_snippet_font_size"
android:layout_toRightOf="#id/conversation_image_layout" />
</RelativeLayout>
</LinearLayout>
This is what a list item currently looks like (I haven't loaded contact images yet). It's fine for the most part (though my layout code is probably incredibly bloated so I'd appreciate if anyone could point out ways to make it more concise) but notice how the date isn't on the same level as the contact name and wraps:

One of the textView in question has the MarginTop attribute, and the other one doesn't. Either remove it on both or add it to both:
<TextView
android:id="#+id/conversation_contact_name"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:gravity="center_vertical"
android:textSize="#dimen/conversations_contact_font_size"
android:layout_toEndOf="#id/conversation_image_layout" />
<TextView
android:id="#+id/conversation_date"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/conversation_contact_name"
android:gravity="right"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:textSize="#dimen/conversations_date_font_size" />
Also, I'd recommend that you use Linear Layouts with nested Linear Layouts and weights, for better performance on different screens and devices. This may all fall apart if you run it on a different device. Don't trust me, try it :)

After it became clear to me that some of the layout parameters didn't mean what I thought they did, I spent some more time looking at my choices.
It is not recommended to nest LinearLayouts/use layout_weight within a list item, as the number of views created increases rapidly as more items are added. I managed to minify my code and keep it in a single RelativeLayout with the following code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/conversation_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/conversation_contact_image"
android:layout_width="64dp"
android:layout_height="64dp"/>
<TextView
android:id="#+id/conversation_contact_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/conversations_contact_font_size"
android:layout_toEndOf="#id/conversation_contact_image"/>
<TextView
android:id="#+id/conversation_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/conversation_contact_name"
android:textSize="#dimen/conversations_date_font_size"/>
<TextView
android:id="#+id/conversation_snippet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/conversation_contact_name"
android:textSize="#dimen/conversations_snippet_font_size"
android:layout_toEndOf="#id/conversation_contact_image"/>
</RelativeLayout>
Notable changes:
No nested tags - It was unnecessary to group the first line in its own layout
Used layout_alignBaseline - #Vucko pointed out that I was using marginTop on the contact name but not the date. Even after removing it, the two were still misaligned. android:gravity had no effect and it turns out none of these actually affect the text inside the layout
Used layout_alignParentEnd to fix the date issue. I've realized that in my case, a layout component usually only needs to reference one other in order to properly align itself relative to the rest of the layout.

How to hide layouts / views programmatically in Android

I have just started learning Android. Few confusions I have regarding layouts in XML
Are all views that I define in my layout are essentially inflated or they are optional? Suppose I have two different views in a view-group but I want to
use only first or only second conditionally. Is it possible?
How dynamically created views deal with layout.XML
file?
If I want received messages to be shown in red and sent messages in black how can I do that?

You can include views in the XML layout file that are invisible until you programatically display them. Just use "android:visible="gone" or "android:visible="invisible" in the XML file.
For instance, I include the following in my layout file initially but it's not visible:
<LinearLayout
android:id="#+id/pnlLatLong"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
>
<TextView
android:id="#+id/lblLatLng"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lat_long"
/>
<EditText
android:id="#+id/txtLatitude"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal|numberSigned"
/>
<EditText
android:id="#+id/txtLongitude"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal|numberSigned"
/>
</LinearLayout>
In Java code, when the code logic dictates it should be visible, I change the visibility programatically to:
View v = findViewById(R.id.pnlLatLng);
v.setVisibility(View.VISIBLE);

you can set android:visibility="gone" in xml or by code setVisibility(View.gone); for change text color you can set android:text color="#000000" or by code setTextColor();

Adding Views to layout runtime, going ahead when the line ends: How To?

I need to add views in a layout going to a new line at the end of one, filling every line from left to right. Imagine the layout is a paper and every word you write is a textview, and you have to write a long text. I don't even know which kind of layout I should use, does anyone have an idea?

I think you're looking for a LinearLayout set to an horizontal orientation. Something like the below. I have used two TextViews but you can use whatever kind of view you'd like. They will stack horizontally to the right.
<?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="horizontal"
android:gravity="left" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item 1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item 2" />
<!-- etc. -->
</LinearLayout>

I would go with nested LinearLayouts. Start with a vertical LinearLayout and a horizontal LinearLayout inside it. Then to add a View:
measure the View (let's call it 'myView').
Then:
if(currentHorizontalLayout.getChildCount==0 ||
myView.getWidth() > currentHorizontalLayout.getWidth()-currentHorizontalLayout.getChildAt(currentHorizontalLayout.getChildCount()-1)).getRight()){
currentHorizontalLayout = new LinearLayout(getContext());
verticalLayout.addView(currentHorizontalLayout);
currentHorizontalLayout.addView(myView);
}

How to get UI to look right

I am having a problem getting the ListView to display properly. It currently looks like this with the following xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/favs_main">
<Button
android:text="Return to Home"
android:id="#+id/return_button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:textSize="15sp"/>
<ListView
android:id="#+id/favsListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"
android:layout_above="#id/return_button"/>
</RelativeLayout>
If you notice the list is down on the screen. I want it to be just below the favorites text instead of just above the return to home button. The catch however is that I always want the button to show and the list view to just occupy the space between the favorites text and the button. The text is from the background image so I can't just align below that. So even with 100 items I would still like to show the button.
Thanks for the help

If the word "favorites" is part of a background image as suggested in the RelativeLayout's background attribute, then you won't be able to align an element below it without using hacky margins or something to that effect. If you want to align an element below the word, separate that into a different ImageView and set the layout_below of the ListView to the id of that ImageView. To get an element to align properly in between two other elements, use a combination of layout_above and layout_below.

Couldn't you just align the ListView to the Parents' Top and set a margin for the ListView so that it is below the Text of the Background?
Also you could change the background to provide the Text in an ImageView and align the ListView to be below the ImageView.

Instead of trying to make a persistent View always show up under the ListView and align it (which you can do, see other suggestions), you might want to take a look at using a footerView:
http://developer.android.com/intl/de/reference/android/widget/ListView.html#addFooterView
"Add a fixed view to appear at the bottom of the list."
Note that it can be another layout too if you eventually need to do more than just one Button.

this my listview which have multiple entries and textview and button fixed in the botton. i haven't inserted background. try this hope it will help.
http://www.techuv.com/layout-with-butoon-and-textview-fixed-in-bottom/

You could use a simple LinearLayout and use the weight attribute on the ListView :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/favs_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ListView
android:id="#+id/favsListView"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"/>
<Button
android:text="Return to Home"
android:id="#+id/return_button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:textSize="15sp"/>
</LinearLayout>

android layout question

Currently I'm working on a dialog which consists of title, description, tags and footer. The title can be long and in this case the text should automatically be displayed in multiple lines. The description is also longer and should fill multiple lines.
At the bottom of the dialog has to be the footer (also if the title and description don't fill whole screen).
I tried to do create the layout described about but had a problem with long text - if the content is long it doesn't display multiple lines but extends main view (LinearView) so the content extends over the visible area.
Here I'm pasting the print screen of the current state and the mockup of the desired layout:
alt text http://img52.imageshack.us/img52/9697/androidscreenshot.png
alt text http://img69.imageshack.us/img69/3609/screenshot20091227at716.png
TextView "Footer" and buttons OK and Cancel should appear at the bottom of the screen and the title ("Title Title Title...) and description text should automatically appear in multiple lines instead of extending the parent view.
I would really appreciate if anyone of you could give a tip about solving these layout issues.
Thanks!

Something like this should help: placing the text elements up top, and forcing the buttons to the bottom of the layout using weightSum. I can't remember the settings for multi-line text offhand, but if you're not using the singleLine attribute set to true, then things should work out ok.
Check the XML attribute documentation for more info.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1">
<TextView
android:id="#id/android:title"
android:layout_width="fill_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="2">
<Button
android:id="#+id/btn_ok"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="#string/btn_ok" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="#string/btn_cancel" />
</LinearLayout>
</LinearLayout>