CODEWITHSUNDEEP
javaandroid
Aviel Fedida
Aviel Fedida

Reputation: 4102

Android, ImageView, unwanted padding

I'm using something like that to present my logo or user profile picture:

<ImageView
    android:id="@+id/logo"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/circle_bg"
    android:src="@drawable/account_circle_grey"
    android:layout_gravity="center_horizontal" />

@drawable/circle_bg:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="@color/colorWhiteOpacity"/>
    <size
        android:width="100dp"
        android:height="100dp"/>
</shape>

and @drawable/account_circle_grey is just an image I took from MaterialUI(the black 192x192) and used Final-Android-Resizer.

The problem is that I get something like that:

enter image description here

Basically the problem is that when the user clicks and pick a picture, I use glide to load the picture to replace the default @drawable/account_circle_gray but as you can see the padding is gone:

enter image description here

The picture takes the full space, as it should!, what I wanted to add is padding="5dp" and that will give a bit of padding between the background and the Glide loaded user picture, the problem is that there is already a weird padding to @drawable/account_circle_grey, I noticed however that not all drawables get the padding, when I chosen an old picture I used as a full page background I didn't get the padding, maybe I can force android to pick bigger picture, why do I get this padding?

Edit: To clerify I used this tutorial to try all possible(scaleType+adjustViewBounds) values but nothing worked.

Upvotes: 0

Views: 1810

Answers (3)

Aviel Fedida
Aviel Fedida

Reputation: 4102

thanks for the answers, the problem was so obvious but I made it complicated, although I used many "account_circle" images, what I didn't think was that they all comes with a transparent padding, so if the image is 192x192 for instance it's actual size is about 182x182 with 5px transparent padding on each side, anyway the simple solution is to open it on photoshop, go to Image>Trim and that's it.

Upvotes: 0

Amir_P
Amir_P

Reputation: 9019

set the scaleType of your ImageView to centerFit or you can add only high dpi drawable to your drawables

Upvotes: 1

thomaspsk
thomaspsk

Reputation: 789

This is likely happening when you're using images that are physically smaller than the size of your ImageView. You can scale the image to fill the space or use a larger image. A mix of both is likely the best solution.

To achieve the former of the two, try this:

<ImageView
    android:id="@+id/logo"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="@drawable/circle_bg"
    android:src="@drawable/account_circle_grey"
    android:layout_gravity="center_horizontal"
    android:scaleType="fitXY"
    android:padding="5dp" />

Notice that I reduced the width and height by 2x the padding. That is because adding padding to a view increases the entire view's size by the size of the padding. In this particular case we're adding 5dp to the left, to the right, to the top, and to the left. This means we must subtract left and right from the width, and top and bottom from the height.

Upvotes: 1

Related Questions