ImageView does not align properly

Question

I have the following design where I want my left user image and then textviews on the right of the user image and arrow image on the right-most. However, for some reasons, arrow does not come to the right-most

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:local="http://schemas.android.com/apk/res-auto"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:padding="6dip"
  android:background="#FFFFFF">
  <ImageView
    android:id="@+id/userimage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="6dip"
    android:gravity="center"
    android:layout_alignParentLeft="true"
    android:src="@drawable/ic_person_black_24dp"
    android:layout_gravity="center_vertical" />
  <LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="6dip">
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textSize="15dp"
        android:textColor="#040404"
        android:typeface="sans"
        android:textStyle="bold"
        android:text="Username_05"
        android:singleLine="true" />
    <TextView
        android:id="@+id/secondline"
        android:text="Text"
        android:layout_below="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="#000000"
        android:singleLine="true" />
    </LinearLayout>
   <ImageView
    android:id="@+id/icon"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_keyboard_arrow_right_black"
    android:layout_gravity="center_vertical" />
 </LinearLayout>

Here is my current output:

Update 1:

Answer 1

Keep it simple. Use LinearLayout with horizontally orientation instead of RelativeLayout and add 1. ImageView 2. Another LinearLayout with layout_weight=1 and vertical orientation which will contain the two TextViews 3. ImageView

Sorry for not posting any code. I'm from mobile ;)

Answer 2

I think it is because you use android:layout_width="match_parent" instead of wrap content.

If you use linear Layout, you need a weight to use all the space:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:local="http://schemas.android.com/apk/res-auto"
          android:orientation="horizontal"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:padding="6dip"
          android:background="#FFFFFF">
<ImageView
    android:id="@+id/userimage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="6dip"
    android:gravity="center"
    android:layout_alignParentLeft="true"
    android:src="@drawable/ic_person_black_24dp"
    android:layout_gravity="center_vertical" />
<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:padding="6dip">
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textSize="15dp"
        android:textColor="#040404"
        android:typeface="sans"
        android:textStyle="bold"
        android:text="Username_05"
        android:singleLine="true" />
    <TextView
        android:id="@+id/secondline"
        android:text="Text"
        android:layout_below="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="#000000"
        android:singleLine="true" />
</LinearLayout>
<ImageView
    android:id="@+id/icon"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_keyboard_arrow_right_black"
    android:layout_gravity="center_vertical" />
</LinearLayout>

Answer 3

I think you are looking for something like this

. There is no point creating a separate Imageview to accomodate the icons. Better use the android:drawableLeft and android:drawableRight to achieve that.

Below is the sample code:

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left|center"
        android:text="Testing"
        android:drawableLeft="@drawable/ic_account_circle_black_24dp"
        android:drawableRight="@drawable/ic_account_circle_black_24dp"/>

Edit: For multiline :

Answer 4

First, do not use android:orientation on a RelativeLayout , that property is only for LinearLayout .

Second, you are doing circular references:

• Username has android:layout_above="@id/secondline"
• SecondLine has android:layout_below="@id/username"

When you do that the system does not know how to render the views, because they depend on each other.

Try doing this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:padding="6dip"
                android:background="#FFFFFF">
    <ImageView
        android:id="@+id/userimage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="6dip"
        android:layout_alignParentLeft="true"/>
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textStyle="bold"
        android:text="Username_05"
        android:layout_toRightOf="@id/userimage"
        android:singleLine="true" />
    <TextView
        android:id="@+id/secondline"
        android:text="Text"
        android:layout_below="@id/username"
        android:layout_toRightOf="@+id/userimage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"/>
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

Result:

Answer 5

Just use layout_weight.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="horizontal"
android:padding="6dip">

<ImageView
    android:id="@+id/userimage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_gravity="center_vertical"
    android:layout_marginRight="6dip"
    android:layout_weight=".1"
    android:gravity="center"
    android:src="@android:drawable/ic_menu_my_calendar" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="5"
    android:orientation="vertical"
    android:padding="6dip">

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:text="Username_05"
        android:textColor="#040404"
        android:textSize="15dp"
        android:textStyle="bold"
        android:typeface="sans" />

    <TextView
        android:id="@+id/secondline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/username"
        android:singleLine="true"
        android:text="Text"
        android:textColor="#000000"
        android:textSize="10sp" />
</LinearLayout>

<ImageView
    android:id="@+id/icon"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|right"
    android:layout_weight="1"
    android:src="@android:drawable/arrow_down_float" />
</LinearLayout>

Answer 6

Use the code you provided in your question but change android:layout_width="match_parent" to android:layout_width="wrap_content" in the ImageView of your arrow. This should make the arrow ImageView appear at the complete right