Android Studio, wrap ImageView size around the x and y scale of the actual image

Question

I have an ImageView with a mail icon, however, it was too big so i reduced its size. The actual size of the image is smaller, but the content it wraps is still the same, resulting in my lines not being even. The image below demonstrates my problem

As you can see, the size of the imageview does not wrap around the image itself. Below is the XML for the imageview

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_mail"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:scaleX="0.5"
        android:scaleY="0.5"/>

Is there a way to fix this?

Below this is the full XML for the whole layout if that would help

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:background="@color/PaleGrey">

<Space
    android:id="@+id/dummyTopSpaceSc"
    android:layout_width="wrap_content"
    android:layout_height="10dp"
    android:layout_alignParentTop="true"/>

<TextView
    android:id="@+id/nameTextView"
    android:paddingLeft="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/dummyTopSpaceSc"
    android:text="name"
    android:textStyle="bold"/>

<TextView
    android:id="@+id/titleTextView"
    android:layout_width="wrap_content"
    android:paddingLeft="10dp"
    android:layout_height="wrap_content"
    android:layout_below="@+id/nameTextView"
    android:text="title"/>

<android.support.percent.PercentRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/titleTextView"
    android:id="@+id/phoneContainer">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_phone"
        android:scaleType="fitCenter"
        android:scaleX="0.5"
        android:scaleY="0.5"/>

    <TextView
        android:id="@+id/phoneTextView"
        android:layout_width="wrap_content"
        android:layout_centerVertical="true"
        app:layout_marginLeftPercent="15%"
        android:layout_height="wrap_content"
        android:autoLink="phone"
        android:text="phone"/>

</android.support.percent.PercentRelativeLayout>


<!-- below this comment is the container for the mail icon -->

<android.support.percent.PercentRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/mailContainer"
    android:layout_below="@+id/phoneContainer">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_mail"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:scaleX="0.5"
        android:scaleY="0.5"/>

    <TextView
        android:id="@+id/emailTextView"
        android:layout_width="wrap_content"
        android:layout_centerVertical="true"
        app:layout_marginLeftPercent="15%"
        android:layout_height="wrap_content"
        android:autoLink="email"
        android:text="email"/>

</android.support.percent.PercentRelativeLayout>

<Space
    android:id="@+id/dummyBottomSpaceSc"
    android:layout_width="wrap_content"
    android:layout_height="10dp"
    android:layout_below="@id/mailContainer"/>

</RelativeLayout>

if i remove the scale, it takes up the whole area, but then it looks too big — Simon Andersson, Mar 13 '17 at 14:48
Then you need to specify the dimension or recreate the image. — Rod_Algonquin, Mar 13 '17 at 14:50

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

You should resize your image by giving it exact values for width and height instead of wrap_content if you actually want the bounding box to get smaller as you change the size. Then you can add padding/margins back to it as you wish. Also, you should use the android:src attribute (or maybe even app:srcCompat) instead of android:background.

<ImageView
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:src="@mipmap/ic_mail" />

edited May 23 '17 at 11:53

Community

1
1

answered Mar 13 '17 at 14:49

zsmb13

85,752
11
221
226

thank you, what is the benefit of using src over background? – Simon Andersson Mar 13 '17 at 14:54
`background` is a attribute of the `View` base class, while `src` is an attribute of `ImageView` which you're meant to use. I assume that using `background` instead will lead to some odd behaviour eventually. Setting the `src` attribute is equivalent to calling `setImageDrawable` from Java code. Good summary here: http://stackoverflow.com/a/5454564/4465208 – zsmb13 Mar 13 '17 at 14:59

Android Studio, wrap ImageView size around the x and y scale of the actual image

1 Answers1