I have an image (picture 1) that has a transparent area around it that extends above and below the image itself (picture 2). When I add this image as an ImageButton in my xml and use wrap_content, that transparent area in picture 2 is becoming part of the button rather than just the button itself (picture 1). Picture 3 is the result. Does anyone know how to solve this?
Here's my XML:
<ImageButton
android:id="#+id/resume_button"
android:src="#drawable/disabled_resume_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/new_checklist"
android:layout_centerHorizontal="true"
/>
Do this :
<ImageButton
android:id="#+id/resume_button"
android:background="#drawable/disabled_resume_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/new_checklist"
android:layout_centerHorizontal="true"
/>
the transparent area around your image, if its part of your image, contributes to the actual width and height of the image, imagine if the transparent part of the image was a coloured area rather than a transparent area and you can visulise how it would be part of your image, even though its transparent it is taking up an area that contributes to the height and width of the image
"wrap_content" attribute just set the height of yout button to the height of yout image.
If you want to keep only the colored part of your image, just resize it! ;)
Related
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'm using this to crop an image and then i load it to this imageView:
<RelativeLayout
android:id="#+id/activity_edit_image_relative_layout_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/activity_edit_image_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff2299"
android:scaleType="fitCenter"
android:src="#drawable/phone" />
</RelativeLayout>
the color i'm giving to the background of the image view is pink ( so it will be easy to spot) and the relative layout will act as the view group and i will add other views to it at run time.
the pink background must only appear for the images that have transparent background (png files) like this (this picture is not cropped)
but when i crop an image and load it to the image view i get this
the pink background must not appear. the issue is i'm trying to figure out where on the image is the user taping (overloading onTouch for the imageView) now when i tap on the pink area around the Alien it tells me that i'm tapping the image which is not correct. whats the issue?
Add the following property to your ImageView:
android:adjustViewBounds="true"
I dont know why this is happening: After loading the image with the Ion library, my image shows two white bars below and above image. I don't want to have that.
My ImageView is displayed in a listview item. My adapter code looks like this:
if (node.getImageUrl() != null) {
ivImage.setVisibility(View.VISIBLE);
Ion.with(ivImage)
.placeholder(R.drawable.anne_eli_icons_set_up_anne_eli_logo_530px)
//.error(R.drawable.error_image)
//.animateLoad(android.R.anim.cycle_interpolator)
.animateIn(android.R.anim.fade_in)
.load("http://app.anne-eli.at/" + node.getImageUrl().getUrlBig());
} else {
ivImage.setVisibility(View.GONE);
}
My imageview layout like this:
<LinearLayout ...
<ImageView
android:id="#+id/fragment_appointment_list_item_article_iv_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/anne_eli_icons_set_up_anne_eli_logo_530px"
android:background="#color/gray1" />
</LinearLayout>
Any ideas?
change your imageview layout to this one:
<LinearLayout ...
<ImageView
android:id="#+id/fragment_appointment_list_item_article_iv_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" <!-- this line added , also your can use other value too like cropCenter ... -->
android:src="#drawable/anne_eli_icons_set_up_anne_eli_logo_530px"
android:background="#color/gray1" />
</LinearLayout>
I think it may be whatever value "gray1" is, but it looks very white because it's lighter than the image in the background. Remove the background attribute in the xml and it'll be invisible.
Likewise, without setting a scaleType on the ImageView, it's going to default to center. This will attempt to resize the image so it fits to the center of the ImageView without cropping. The ImageView is bound to the width of it's container. The image provided is much wider than that, so it shrinks the image to fit. This means the tops and bottoms will be shrunk as well, and the image becomes smaller than the height of the container. If you want the image to be near the top, you can try setting the scaleType to fitStart instead.
The actual image is this:
the red boxex are where i made 1 px black likes. Even the preview shows fine. So no problem with 9-patch
but the image i get for the following layout is:
<ImageView
android:id="#+id/image_landing"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#drawable/loginheader"
android:contentDescription="#string/login_header"
/>
I Expected, the logo to be on the left and black dots on the right and the rest of the space between them is filled with grey color i selected on the top
Thank You
Is your ImageView really bigger than your 9patch?
If not, you need to change scaleType as defaut is FIT_CENTER.
Use android:scaleType="fitXY" or android:adjustViewBounds="true".
It looks like your 9 patch is larger than the ImageView that you are trying to put it in. Try setting the ImageView to wrap_content to see if it fixes the problem. If it does, try making the 9 patch smaller, the ImageView bigger or set the scaleType as pcans mentioned.
I have a 640px wide, 208px tall PNG that I've placed in my /drawable folder and I'm having a very hard time properly placing it in an ImageView. I want to scale the image so that it maxes out the horizontal resolution, and I want it to scale vertically only as much as it takes to stay in proportion.
The problem I am having is that my ImageView ends up taller than it needs to be to fit the image. The image itself looks perfect; as wide as the screen and in proportion. But the ImageView appears to have padding on the top and bottom. From what I can tell it's the drawable that the ImageView contains that's actually too tall.
I can't post an image because I'm new to SO, but if I did it would be of the Graphical Layout view. When I click on the ImageView the regular blue box shows up around it, but with padding on the top and bottom, the same padding I'm seeing on the device. Even if I drag the blue box to attempt to resize the ImageView, I am not allowed to make it any smaller than it already is (perhaps because the ImageView thinks the drawable is that tall, or something). From what I can tell, this may have something to do with the density of the image...the ImageView ends up being 312 pixels tall (208*1.5) on an hdpi device.
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/back" android:src="#drawable/categoryheader2"
android:layout_width="wrap_content" android:layout_height="wrap_content">
</ImageView>
</RelativeLayout>
Thanks in advance for any help!
I guess android:adjustViewBounds="true" on the ImageView should do the trick. I recently had a similar problem, when I was trying to scale an image to fit the whole width of the view without loosing its proportions.
did you tried the tag : android:scaleType="fitXY" or android:scaleType="centerCrop" on your ImageView ?