Android Layout Elements

Question

I'm trying to make an Android layout like the one below. I have a couple of questions:

1 - what is the element called that FB uses for posts? Ie, it doesn't look like a text view, but the element looks like it separates each post with a divider line. Also, the text style is different for a person's name and how long ago they posted. I'm looking to duplicate this (minus pictures) but I can't find the right UI elements.

What is the element called at the bottom? It's like a static menu. IE, it's the same as a menu but instead of pressing "menu" to access it, it's on the page at all times.

Finally, are there good tutorials/examples on how to make nice looking, professional layouts like the apps on the market? The tutorials that I've found on layouts are really basic. I'd like to understand what elements exist, what all of the attributes mean and see examples, etc. So far I'm only able to see the capabilities from other applications. I'd like to have a handbook or some type of some type of reference manual to go to.

enter image description here

score 3 · Accepted Answer · answered Dec 14 '11 at 17:40

3

For the "fancy" text views you can make a linear layout that hosts a <RelativeLayout>:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:layout_weight="0">
<ImageView 
    android:id="@+id/userPhoto" 
    android:layout_height="64dip"
    android:layout_width="64dip"
/>
<TextView
    android:id="@+id/userFullName"
    android:layout_height="25dp"
    android:layout_width="fill_parent"
    android:layout_marginLeft="70dp"
/>
</RelativeLayout>

Once you have a relative layout you can add different views inside of that to create a sort of customeized view.

As far as good examples I would look at this book. It's easy to understand and very helpful on such things.

answered Dec 14 '11 at 17:40

skeryl

5,225
4
26
28

Thanks for the suggestion, the book should be here in a couple of days. Do you know the name of the static menu at the bottom of the image? Also, is FB using a text box to hold their messages or some other type of object? – user836200 Dec 14 '11 at 18:19
@user836200 It's seems to be a simple LinearLayout that has ImageButton elements in it. The design of the buttons would be done elsewhere and the images themselves placed in a local resource directory. (e.g. – skeryl Dec 14 '11 at 19:58
They're probably just using a TextView – skeryl Dec 14 '11 at 20:27
Thanks! Any idea how to handle a static menu? Or know what it's called? – user836200 Dec 14 '11 at 21:57
1

I figured it out following this example: http://stackoverflow.com/questions/2777098/android-openoptionsmenu-doesnt-work-in-oncreate – user836200 Dec 14 '11 at 22:06

score 0 · Answer 2 · answered May 28 '15 at 19:01

I found a really helpful tutorial to solve a problem in ListView Row design a bit like yours. It goes a bit further explaining how to do Async Image loading but the first part should help you.

Also, I might be wrong (I am still a bit new to this) but I think the answer above lacks a TextView for the actual message besides the userName and the relative positions of the elements since it is a relative layout. Something like:

<TextView
    android:id="@+id/userName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/userPhoto"
    android:layout_toRightOf="@id/userPhoto"
    android:textSize="17dp"
    android:textStyle="bold" />

<!-- actual message -->
<TextView
    android:id="@+id/message"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/userName"
    android:layout_marginTop="1dip"
    android:layout_toRightOf="@id/userPhoto"
    android:textSize="15dp" />

The key in organizing a relative layout is:

android:layout_alignTop="@id/userPhoto" android:layout_toRightOf="@id/userPhoto" and

android:layout_below="@id/userName" android:layout_toRightOf="@id/userPhoto"

I might be wrong but if it helps, great! Just adding my bit to the other answer. Cheers

Android Layout Elements

2 Answers2