CODEWITHSUNDEEP
javaandroid
Onhar
Onhar

Reputation: 49

Putting ImageView close to the TextView

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!

Upvotes: 1

Views: 102

Answers (5)

Hitesh Sahu
Hitesh Sahu

Reputation: 45052

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.

enter image description here

Upvotes: 0

Md. Sajedul Karim
Md. Sajedul Karim

Reputation: 7045

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"/>

Upvotes: 1

frogatto
frogatto

Reputation: 29285

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.

Upvotes: 0

Chirag Ghori
Chirag Ghori

Reputation: 4231

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>

Upvotes: 1

Nongthonbam Tonthoi
Nongthonbam Tonthoi

Reputation: 12953

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" />

Upvotes: 1

Related Questions