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.

Android: Buttons Orientation for different screen sizes

I have problems with my buttons layout.
I made the "small, normal, large, xlarge" layout folders.
But still at some devices the buttons got mixed together !
When i view my layout using the devices set eclipse i can see the problem but i can't know what is the dimensions of the device.
My Question is: can anyone give me the dimensions of each one of these devices or who can i make a layout for each one?
the devices in the image blew
<?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"
android:background="#drawable/mainnati"
android:gravity="center_horizontal" >
>
<Button
android:id="#+id/b_info"
android:layout_width="220dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:background="#drawable/info" />
<Button
android:id="#+id/b_pass"
android:layout_width="220dp"
android:layout_height="50dp"
android:layout_alignLeft="#+id/b_comp"
android:layout_below="#+id/b_comp"
android:layout_marginTop="350dp"
android:background="#drawable/pass" />
</RelativeLayout>

Two things: I see two Buttons.
The second is below and aligned to the left of one that doesn't exist in your code (b_comp).
So, I guess it should refer to b_info, instead.
And, instead of centerVertical, I'd set centerInParent (which also centers horizontally) for the first Button (b_info).
I'd use centerHorizontal for the lower Button, instead of alignLeft.
So, after all, my layout file would be:
<?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"
android:background="#drawable/mainnati"
android:gravity="center_horizontal" >
>
<Button
android:id="#+id/b_info"
android:layout_width="220dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="#drawable/info" />
<Button
android:id="#+id/b_pass"
android:layout_width="220dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_below="#id/b_info"
android:background="#drawable/pass" />
</RelativeLayout>

How to design a frame in Android?

I would like to design a frame using 4 ImageView for each of the top, bottom, left and right side of that frame, as shown in the following example:
Seems simple, but I am really having a hard time doing it. I tried using a FrameLayout along with layout_alignParentLeft|Right|Top|Bottomlike the following:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/camera_masque"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
>
<ImageView
android:id="#+id/camera_top_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_top_masque_photo"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/camera_left_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_left_masque_photo"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/camera_right_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_right_masque_photo"
android:layout_alignParentRight="true"
/>
<ImageView
android:id="#+id/camera_bottom_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_bottom_masque_photo"
android:layout_alignParentBottom="true"
/>
</FrameLayout>
It works well for the top and left sides, but not for the others (like it places the right and bottom sides on the top side...).
I also tried using a RelativeLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/camera_masque"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
>
<ImageView
android:id="#+id/camera_top_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_top_masque_photo"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/camera_left_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="-2dp"
android:src="#drawable/ic_left_masque_photo"
android:layout_below="#id/camera_top_masque"
/>
<ImageView
android:id="#+id/camera_right_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_right_masque_photo"
android:layout_marginRight="-2dp"
android:layout_below="#id/camera_top_masque"
android:layout_alignParentRight="true"
/>
<ImageView
android:id="#+id/camera_bottom_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_bottom_masque_photo"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
But same thing, does not work as expected.
Any idea what is wrong with my layouts? How could I accomplish this?
Note: Images sizes are: 640*114px (top, bottom) and 34*572 (left, right).
Thanks!

I usually use linearlayout for things like this and control the fill using layout_weight parameters. You will probably find a lot of similar questions here.
Simply create a vertical linear layout and in the middle section create a horizontal linear layout.
This is made a lot simpler if you use the WYSIWYG layout designer in Eclipse ADT ... .see tools.android.com for details
There are a lot of tutorials available for Android layouts which are a more useful resource as Stack Overflow tends to deal with the programming issues rather than layouts.

I will answer my own question in order to highlight the mistakes I have made. Turns out, I was almost there, I only had to add an alignParentTop at both the right and left ImageViews and an alignParentLeftat the bottom ImageView.
I don't understand the logic behind this, though! (if someone could explain...)

If the frame are built by the same images. You can try a 9-patch drawable or a shape with borders and transparent center.

Android Button Layout - Not Displaying Correctly

I am trying to get three images to display on the "welcome screen" of my Android app. Only one of the images is being displayed, and I cant figure out why... any Help?
XML File:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#drawable/main_bg"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:paddingTop="30dip"
android:layout_height="wrap_content"
android:gravity="center"
>
<ImageButton
android:id="#+id/mnwvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dip"
android:background="#drawable/mnwvicon" />
<ImageButton
android:id="#+id/reportsbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/reportsicon" />
</LinearLayout>
<ImageButton
android:id="#+id/mnwvshowbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/showicon"
android:paddingTop="30dip" />
</LinearLayout>
I have the exact same set up in another app, so I dont know why it isnt working here??

I think its because the last image is outside the inner linearlayout so put it inside the inner linearlayout and you should be able to see all three images in a row.

Try scaling the images using the attribute android:ScaleType="centre" inside the ImageButton
or try a different layout like Tablayout for arranging the images in rows and columns with proper spacing.

Sorry guys. I didnt have the app support the different screen sizes. I am not sure why this mattered, but once I added support, then it worked perfectly!. Thanks for your input though! Anyone know why this mattered though?? I dont know why supporting screen sizes matters?

Listing different images along with text in android?

..i want to list different images..so

I dont fully understand your exact requirement. Anyways, you can use ListViews to make a list of images and textviews.
Assuming you want to have a ListView in which each row must contain an image and a text, you must define an xml inside /layout/ folder. Here is an example custom_row.xml
<?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="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
/>
</LinearLayout>