ImageView in LinearLayout is displayed on wrong place

Question

I have a layout with one row:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingRight="@dimen/total_sales_page_summary_text_distance"
        android:text="test2"
        android:textSize="@dimen/total_sales_page_info_font_size" />

    <TextView
        android:id="@+id/year_on_year"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/total_sales_info_text_color"
        android:textSize="@dimen/total_sales_page_info_font_size" />

    <ImageView
        android:id="@+id/tradeGreen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_gravity="center_vertical"
        android:contentDescription=""/>

</LinearLayout>

In source code I just set different number and visibility (GONE/VISIBLE) of imageview (clicking on different buttons).

as result:

1. image is not visible (button1 was clicked)

2.image and some long number are vivible (button2 was clicked)

3.image and other little shorter number are visible (button3)

You can compare how it looks like. Text becomes visible but image is on the previous place. Why? Why image is not moved to left.

By the way. When screen is rotated - image becomes visible on correct place.

Answer 1

As Deepchand rightly said, add that Image as a drawable to the TextView directly. This will take care of the Image position and will remove an extra ImageView from the layout.

So to your TextView add this,

<TextView
    android:id="@+id/year_on_year"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="@color/total_sales_info_text_color"
    android:drawableRight="your image" //this will add an image to its right
    android:drawablePadding="5dp" // you can also add padding as per you need
    android:textSize="@dimen/total_sales_page_info_font_size" />

Hope this works the way you want. :)

Answer 2

Try to use weight.. it will align based on screen

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:orientation="horizontal" xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:paddingRight="@dimen/total_sales_page_summary_text_distance"
        android:text="test2"
        android:textSize="@dimen/total_sales_page_info_font_size" />

    <TextView
        android:id="@+id/year_on_year"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:textColor="@color/total_sales_info_text_color"
        android:textSize="@dimen/total_sales_page_info_font_size" />

    <ImageView
        android:id="@+id/tradeGreen"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_marginLeft="5dp"
        android:layout_gravity="center_vertical"
        android:contentDescription=""/>

Answer 3

This will be solved by using Weight.

Here your UI is horizontally so you need to change in your xml file. Like,

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" xmlns:android="http://schemas.android.com/apk/res/android">

<TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:paddingRight="@dimen/total_sales_page_summary_text_distance"
    android:text="test2"
    android:textSize="@dimen/total_sales_page_info_font_size" />

<TextView
    android:id="@+id/year_on_year"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:textColor="@color/total_sales_info_text_color"
    android:textSize="@dimen/total_sales_page_info_font_size" />

<ImageView
    android:id="@+id/tradeGreen"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_marginLeft="5dp"
    android:layout_gravity="center_vertical"
    android:contentDescription=""/>

</LinearLayout>