RelativeLayout makes no sense

Question

I've been working on this layout for about 7 hours today, and that doesn't even count how much time I've put into it this week. I had posted this earlier today, and since then have progressed immensely.

The goal is to get the @+id/contactPicture (the girl) into the @+id/background; same thing with the @+id/myPicture (me). I'm trying to make it look similar to this (leftmost image): cardui However, I can't get anything centered and aligned anymore. The @+id/background resource is the "card" in this case. I'm not entirely sure what @+id/holder does, but I know it is crucial. Any and all help is appreciated. Here is my code:

<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="match_parent"
            android:orientation="vertical" >


<LinearLayout
    android:id="@+id/holder"
    android:layout_gravity="center"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp" />

<ImageView
    android:id="@+id/myPicture"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"
    android:layout_marginLeft="0dp"
    android:layout_marginTop="0dp"
    android:maxHeight="48dp"
    android:maxWidth="48dp"
    android:minHeight="48dp"
    android:minWidth="48dp"
    android:scaleType="centerCrop" />

<ImageView
    android:id="@+id/contactPicture"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_centerInParent="true"
    android:layout_marginTop="24dp"
    android:gravity="center"
    android:maxHeight="48dp"
    android:maxWidth="48dp"
    android:minHeight="48dp"
    android:minWidth="48dp"
    android:scaleType="centerCrop"
    tools:ignore="Suspicious0dp" />

<TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/body"
    android:layout_gravity="center_vertical"
    android:layout_marginTop="-3dp"
    android:ellipsize="marquee"
    android:fadingEdge="horizontal"
    android:fontFamily="sans-serif-light"
    android:gravity="center_vertical"
    android:paddingBottom="3dp"
    android:paddingRight="5dp"
    android:textColor="@color/dateColorReceived"
    android:textSize="12sp" />

<ImageView
    android:layout_below="@+id/name"
    android:id="@+id/media"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:gravity="center"
    android:padding="10dp"
    android:scaleType="centerInside"
    android:visibility="gone" />

<View android:layout_below="@+id/media"
      android:id="@+id/gifView"
      android:layout_width="200dp"
      android:layout_height="wrap_content"
      android:padding="10dp"
      android:visibility="gone" />

<TextView
    android:id="@+id/date"
    android:layout_below="@+id/gifView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="sans-serif-light"
    android:gravity="left"
    android:textColor="@color/dateColorReceived"
    android:textSize="12sp"
    android:visibility="visible" />

    <TextView
        android:id="@+id/body"
        android:background="@+id/background"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/myPicture"
        android:layout_toRightOf="@+id/contactPicture"
        android:ellipsize="marquee"
        android:fadingEdge="horizontal"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:textAlignment="center"
        android:textColor="@color/textColorReceived"
        android:textSize="14sp" />

<LinearLayout
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="52dp"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical" />

</RelativeLayout>

This is what my code displays

screenshot

As you can see, the @+id/background is overlapping the contact images. I can't seem to get them into it.

BTW: RelativeLayout doesn't use android:orientation="vertical". — Martin Marconcini, Feb 01 '14 at 23:28

score 1 · Answer 1 · answered Feb 01 '14 at 22:29

1

Later children in a RelativeLayout are higher on the Z axis than are earlier children in a RelativeLayout. Since your @+id/background widget is defined last in the RelativeLayout, it will be the highest on the Z axis. For places where your widgets overlap, move their elements in the <RelativeLayout> so they are after the widgets they should float on top of and are before the widgets that should float on top of them. I would expect something named @+id/background to perhaps be the first widget, so other things float on top of it.

Of course, your pair of empty LinearLayout widgets suggest that you may have other problems with this layout. For example, if @+id/background is supposed to be the background for something, usually that "something" should be inside that LinearLayout, instead of being largely disassociated from it.

answered Feb 01 '14 at 22:29

CommonsWare

986,068
189
2,389
2,491

Here's the kicker--if I change the `@+id/background` layer to an ImageView, and then proceed to place it at the top of the list--I get the same thing in the screenshot I posted. Nothing is different. – Nxt3 Feb 01 '14 at 22:37
@Nate: Then use Hierarchy View to determine what is going on. – CommonsWare Feb 01 '14 at 22:39
Is there anyway I can share this with you? – Nxt3 Feb 01 '14 at 22:50
@Nate: I do not know what "this" is, sorry. – CommonsWare Feb 01 '14 at 22:52
What I'm seeing from the HierarchyViewer. – Nxt3 Feb 01 '14 at 22:55
This is the closest I've been to my desired effect. However, I still never could figure out a way to get the `@+id/body` aligned properly with the contact images (`@+id/contactPicture` and `@+id/myPicture`). [Check this out](http://stackoverflow.com/questions/21499800/so-close-to-getting-this-layout-down-relativelayout-linearlayout-woes) – Nxt3 Feb 01 '14 at 23:04
@Nate: "@JakeWharton FYI, I'm getting a 404 error on your link to the 1.4.1 JAR: http://repo1.maven.org/maven2/com/squareup/retrofit/retrofit/1.4.1/retrofit-1.4.1.jar" -- not really. I don't think there's any sort of export option. – CommonsWare Feb 01 '14 at 23:04

score 1 · Answer 2 · answered Feb 01 '14 at 22:29

1

You should consider putting both the image and the speech box in a table row. This will make it easier to keep the distance between them.

answered Feb 01 '14 at 22:29

sootie8

48
3

How would I go about that? Never used a TableRow before. – Nxt3 Feb 01 '14 at 22:36
http://stackoverflow.com/questions/13215909/android-xml-tablerow the question has a good example of how it is used – sootie8 Feb 01 '14 at 22:41
@scootie8 But how does the background come into play? – Nxt3 Feb 01 '14 at 22:45

score 1 · Answer 3 · answered Feb 02 '14 at 00:03

I would do something like this and hide/show the correct contact picture in my adapter.

You will need to optimize your drawables, backgrounds, colors, fonts, etc. but the idea is a simple layout, should be fast enough. You hide the missing picture (depending who's sending the message) or you can even inflate two layouts (one w/the pic on the left and one on the right) and decide which one to use during the getView… The expensive part is inflating, once you've done that (and have it in a viewholder) then the rest should make your life simpler :)

note: I've noticed you want the text to "wrap" the body, so adjust that according to your preference so it looks more like a text "bubble" (like whatsapp).

You will need to tell content layout to wrap_content (remove the weight) and then play with the alignment (left or right) showing and hiding the corresponding picture.

This is how it looks:

layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/background_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  <LinearLayout
      android:id="@+id/row_background"
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:background="@color/medium_gray"
      android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/left_picture"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:visibility="visible"
        android:src="@drawable/ic_launcher"
        android:maxHeight="48dp"
        android:maxWidth="48dp"
        android:minHeight="48dp"
        android:minWidth="48dp"
        android:scaleType="centerCrop"
        android:contentDescription="contact picture" />
    <LinearLayout
        android:id="@+id/content_layout"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="@color/light_gray"
        android:layout_height="wrap_content"
        android:orientation="vertical">
      <TextView
          android:id="@+id/contact_name_tv"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center_vertical"
          android:paddingLeft="5dp"
          android:paddingRight="5dp"
          android:ellipsize="marquee"
          android:fadingEdge="horizontal"
          android:layout_margin="2dp"
          android:gravity="center_vertical"
          android:text="John Doe"
          android:textStyle="bold"
          android:textColor="@color/white"
          android:textSize="12sp" />
      <TextView
          android:id="@+id/msg_body"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="this is a sample message…"
          android:ellipsize="marquee"
          android:fadingEdge="horizontal"
          android:layout_marginLeft="2dp"
          android:paddingLeft="5dp"
          android:paddingRight="5dp"
          android:textAlignment="center"
          android:textColor="@color/white"
          android:textSize="14sp" />
      <TextView
          android:id="@+id/msg_date"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="left"
          android:text="5 hours ago"
          android:paddingLeft="5dp"
          android:paddingRight="5dp"
          android:layout_margin="2dp"
          android:textColor="@color/white"
          android:textSize="12sp"
          android:visibility="visible" />
    </LinearLayout>
    <ImageView
        android:id="@+id/right_picture"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:visibility="visible"
        android:src="@drawable/ic_launcher"
        android:maxHeight="48dp"
        android:maxWidth="48dp"
        android:minHeight="48dp"
        android:minWidth="48dp"
        android:scaleType="centerCrop"
        android:contentDescription="contact picture" />
  </LinearLayout>
</RelativeLayout>

As it turns out, the `TableLayout` seems to bring me the closest to what I'm looking for--it's still not correct though. — Nxt3, Feb 02 '14 at 00:46

RelativeLayout makes no sense

3 Answers3