Android ImageView doesn't wrap content

Question

Cannot solve trouble with ImageView inside of the TableLayout.
I am setting both layout_width and layout_height to wrap_content,
but some unneeded area appeares on the left and right sides.
(image is actually square shaped)

Explored similar questions
here Why do I need to wrap an ImageView into a FrameLayout?
here LinearLayout not wrapping content and others

Tried

setting adjustViewBounds="true",
setting fixed width and heigth in dp,
played with scalTypes,
wrapped into FrameLayout,

but nothing helps with this issue.
Why it appears, how to get rid of it and just wrap the image?

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="8dp"
    android:background="@android:drawable/dialog_holo_light_frame"
    android:padding="20dp" >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/tv_deal_number_description"
                style="@style/ListHeadingTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/deal_number"
                 />

            <TextView
                android:id="@+id/tv_deal_number"
                style="@style/ListHeadingTextStyle"
                android:textColor="@color/accent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:maxLines="1" />
        </LinearLayout>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <View
            android:id="@+id/div_under_deal_number"
            style="@style/Divider"
            android:layout_marginBottom="6dp"
            android:layout_marginTop="6dp"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/descriptions_vertical_margin"
        android:gravity="center" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/ic_margin_right"
            android:layout_marginRight="@dimen/ic_margin_right"
            android:contentDescription="@null"
            android:gravity="start"
            android:src="@drawable/ic_person_grey600_24dp"
            android:adjustViewBounds="true"

           />

        <TextView
            android:id="@+id/tv_client_name_description"
            style="@style/DescriptionTextStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/description_value_horizontal_margin"
            android:layout_marginRight="@dimen/description_value_horizontal_margin"
            android:text="@string/client_name_col" />

        <TextView
            android:id="@+id/tv_client_name"
            style="@style/ListValuesTextStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxLines="2" />
    </TableRow>
...

hata · Answer 1 · 2015-11-28T03:45:33.010

0

Though you set sizes wrap_content, also you set margins.

android:layout_marginEnd="@dimen/ic_margin_right"
android:layout_marginRight="@dimen/ic_margin_right"

Try to remove these arrributes or set them 0.

edited Nov 28 '15 at 03:45

answered Nov 28 '15 at 03:38

hata

11,633
6
46
69

As you can see, this margin is only on the right side. And removing of them does not help. – Nov 28 '15 at 18:14
Maybe it is somehow related to TableLayout? – Nov 28 '15 at 18:15

score 0 · Answer 2 · answered Nov 28 '15 at 05:08

0

Actually this happen due to your image. Try to CROP your image as fit. Your image hold extra space in left & right side even image is also transparent. Retry it helps.

answered Nov 28 '15 at 05:08

Mobile Application Develope

1
1

score 0 · Answer 3 · 2015-11-29T00:34:55.363

The problem occured because of the heading.
After removing of heading from the first row of the table, ImageViews started having no margins, just wrapped content (to be honest I don't know exactly why).
So I just put heading out of the table layout and achieved desired:

Now the code looks like:

   <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="8dp"
    android:background="@android:drawable/dialog_holo_light_frame"
    android:orientation="vertical"
    android:padding="20dp" >

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

        <TextView
            android:id="@+id/tv_deal_number_description"
            style="@style/ListHeadingTextStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/deal_number" />

        <TextView
            android:id="@+id/tv_deal_number"
            style="@style/ListHeadingTextStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:textColor="@color/accent" />
    </LinearLayout>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <View
                android:id="@+id/div_under_deal_number"
                style="@style/Divider"
                android:layout_marginBottom="6dp"
                android:layout_marginTop="6dp"
                android:layout_weight="1" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/descriptions_vertical_margin"
            android:gravity="center" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/ic_margin_right"
                android:layout_marginRight="@dimen/ic_margin_right"
                android:adjustViewBounds="true"
                android:contentDescription="@null"
                android:gravity="start"
                android:src="@drawable/ic_person_grey600_24dp" />

            <TextView
                android:id="@+id/tv_client_name_description"
                style="@style/DescriptionTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/description_value_horizontal_margin"
                android:layout_marginRight="@dimen/description_value_horizontal_margin"
                android:text="@string/client_name_col" />

            <TextView
                android:id="@+id/tv_client_name"
                style="@style/ListValuesTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:maxLines="2" />
        </TableRow>
    ...

Android ImageView doesn't wrap content

3 Answers3