I would like to know how you adjust the "hitbox" of an ImageView to the Image inside, so that there are no empty spaces around the image. I want to make a game and so it feels odd when you click on an empty space next to the Image but it still counts as "a click on the image". I would really appreciate help.
Thank you in advance.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/soraka"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/image"
android:adjustViewBounds="true"
android:maxWidth="300dp"
android:maxHeight="300dp"
android:scaleType="fitXY"
android:layout_alignParentEnd="false"
android:layout_alignParentStart="false"
android:cropToPadding="false"
android:padding="0dp" />
First of all open your image in some image editor and check if it fills entire canvas. Second - use android:scaleType="fitXY". But be carefull with aspect ratio:
Scale in X and Y independently, so that src matches dst exactly. This
may change the aspect ratio of the src.
Also remove all paddings, margins from ImageView.
Related
There's an ImageView with certain size (100dp, 100dp). And there's an image which size is 1000-1000px.
That's how it looks right now:
1
What i want is:
2
So image wont come out of ImageView's borders and will be sort of zoomed to center in some value, that i can change. Can it be done in some way? Maybe i need something different from ImageView? At the moment, i use adapter for recyclerview, which loads list of items that contain an image that needs to be kinda zoomed.
<ImageView
android:id="#+id/cart_item_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/min" />
just add android:scaleType="centerCrop"
here is the code look like:
<ImageView
android:id="#+id/cart_item_image"
android:layout_margin="5dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop" />
I wan to place Small ImageView on the anchor of CircularView just like below image
My Code is
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.hey.heypickup.UI.UICircularImage xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/contct_imgpic"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_margin="5dp"
android:layout_weight="0.04"
android:padding="10dp"
app:line_color="#color/colorPrimary"
app:line_color_press="#color/green"
android:src="#drawable/ph_1"
app:line_width="1dp"
app:padding="0dp"/>
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_phone_black"
/>
</FrameLayout>
Result of above code:
but the Second imageview not appearing at the achor of circularImageView?
Can we achieve this without using floating action button ?
if yes then how ?
Since your second image is overlapping the first image,
I think it's because your ImageView has a wrap_content height and width. You should make it a fix size, and try it out because if your ic_dialog_email image is large enough then it will take entire space and might overlap the first image.
Would you make height and width fix and try again? For example, make it 15dp each and take a look. Also remove that margin from ImageView along with that change.
You'll just need to trial and check the exact size your need for the second image along with required margin to position itself correctly as per your UI requirements
I'd like to ask about what I should to do if I want to limit place of ImageView in Android? When picture was load in horizontal position, it is ok, but when I load image in vertical position, photo superimposed on the icons.
My code of ImageView:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/sample" />
How can I to repair it?
As you set the android:layout_width and android:layout_height to wrap_content, the source image may extend beyond what is expected so it gets fit correctly.
You could set a defined dimension for the image when in portrait (in the values-port folder) or even a different layout for portrait and landscape using the layout-land and layout-port folders.
Also, have you tried different values for android:scaleType? You can check more about them in this link
I am loading an image from the web with a AsyncTask class and set it to a imageview in my code.
// loading of the image into the ImageView
new DownloadImageTask(MyImageView).execute("ImageURL");
the problem is, every time I load an image, the height of it is different, even though the width and height of the ImageView is warp_content.
I added sort of a border line with the Background and padding to see the actual height of it.
Here is the xml
<ImageView
android:id="#+id/ivBigRecipeImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toRightOf="#+id/ingredientsTitle"
android:background="#52D017"
android:contentDescription="food"
android:padding="1dp" />
in here are the pics
sometimes this happens:
and sometimes this happens:
Any ideas? I want to just have it exactly the actual size of it
thanks!
Try to add android:adjustViewBounds="true" to your ImageView, and it should work.
I have an ImageView, and I want it to be clickable. The image itself is only 32x32 pixels, but I want the clickable region to be larger so it's easier to hit. I was hoping I could set the layout margin values to increase the size of the imageview's clickable area:
<ImageView
layout_width="32dip"
layout_height="32dip"
layout_margin="20dip" />
That doesn't work, what I could do is just recreate the image resource to have a larger transparent region around it. That's a bit annoying because it's hard to tweak if I ever need to change the clickable region. It's not just a single png either, it's a statelistdrawable so I have to resize 3 different pngs if I ever need to tweak the clickable area.
Anything else I can do?
Thanks
Use padding. layout margins are used if for inserting space outside the boundary of the view.
for equal padding on all sides
<ImageView
android:padding="20dip" />
or to set the padding on each side
<ImageView
android:paddingLeft="10dip"
android:paddingRight="15dip"
android:paddingTop="23dip"
android:paddingBottom="12dip" />
Hope that helps !
Instead of resizing the image (Peter Knego's answer) or increasing padding (Saimon's answer) I suggest to set the minWidth and minHeight attributes in combination with scaleType="center":
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="40dp"
android:minHeight="40dp"
android:scaleType="center"
android:src="#drawable/your_image" />
That makes sure that small images have at least a size of 40x40dp while the image is not up-scaled if it's smaller. If one day the image is going to be replaced with another image larger than minWidth and minHeight it will not grow larger than 40x40dp as it gets downscaled. Thus a minimum clickable dimension of 40x40dp is always guaranted and the image is always displayed nicely.
Suggestions (never tried it myself):
Create ImageView as large as you want than put image into it without scaling
ImageView.setScaleType(ImageView.ScaleType.CENTER).
Brute force approach: create new larger png that has original image centered and the rest of it is transparent.
Use like below; where width/height is your touch radius
<ImageView
android:id="#+id/editProfile"
android:layout_width="32dp"
android:layout_height="32dp"
android:padding="8dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_edit"
android:scaleType="fitCenter"
/>
In the above code, I wanted my src size to be viewed as 24dp width/height. And touch radius of 32dp. so I had used padding of 8dp.