Putting ImageView close to the TextView

Question

My problem is that when I try always put ImageView in the same layout as the TextView and when SetText(); writes text to the textview, ImageView goes outside the layout. Yeah, I know I could put the Image to the background, but my Image is set by the setImageResource and I cannot change it or the project goes down...

So here is my XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="onhar.personalhealth.Main"
    android:baselineAligned="false"
    android:weightSum="1"
    android:orientation="horizontal">

    <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_marginBottom="100dp"
        android:id="@+id/tip"
        android:text=""
        android:layout_gravity="bottom" />

    <ImageView
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="20dp"
        android:id="@+id/imageView2" />

</LinearLayout>

Thanks alot for someone who answers this!

Answer 1

Use layout_weight attribute:

     <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_marginBottom="100dp"
        android:id="@+id/tip"
        android:text=""
        android:layout_gravity="bottom" />


    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="20dp"
        android:id="@+id/imageView2" />

Answer 2

Use android:layout_weight

Try this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="onhar.personalhealth.Main"
    android:baselineAligned="false"
    android:weightSum="1"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_marginBottom="100dp"
        android:id="@+id/tip"
        android:text=""
        android:layout_gravity="bottom" />

    <ImageView
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="20dp"
        android:id="@+id/imageView2" />

</LinearLayout>

Answer 3

add this line into your textview. That will add image left side of your TextView android:drawableLeft="@drawable/YOUR_IMAGE"

Here is full xml:

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableLeft="@drawable/YOUR_IMAGE"
        android:gravity="center_vertical"
        android:textStyle="bold"
        android:textSize="24dip"
        android:maxLines="1"
        android:ellipsize="end"/>

Answer 4

It seems you're using fixed widths for both views. So, you can use FrameLayout to keep them close together. In this way whenever the TextView overflows it will go beneath the ImageView .

<FrameLayout
    android:layout_width="560dp"
    android:layout_height="...">

    <TextView
        android:layout_width="260dp"
        android:layout_height="..."
        android:layout_gravity="left"/>

    <ImageView
        android:layout_width="300dp"
        android:layout_height="..."
        android:layout_gravity="right"/>

</FrameLayout>

Another option is using dynamic width for the ImageView . In this way the ImageView will be resized based on remaining space in that LinearLayout .

Answer 5

For responsive UI you must use relative layout, it will scale and look the same in all device this is how you could achieve this.

<TextView
    android:id="@+id/tip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@+id/imageView2"
    android:text="some \n really \n realllllyyyyy \n \n long  \n text a \n who \n just  \n do not \n\n\n\ fit "
    android:textAppearance="?android:attr/textAppearanceMedium" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="260dp"
    android:layout_height="260dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_launcher" />

Result

Irrespective of length of text your image will always going to be on right side with size 260dp & your text will scale depending on width of device screen and nothing will go out of screen.