ImageView without scaling - android

I have a ListView that shows rows
This is the xml:
...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#color/white"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".30">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/face"
android:scaleType="centerCrop" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".70"
android:background="#color/white"
android:padding="4dp" >
// Other views...
</LinearLayout>
</LinearLayout>
…
and get this result:
this is the original image
need is the image without scaling, just like this:
I am using android: ScaleType = "centerCrop" I tested with android: adjustViewBounds = "true" and many other parameters, but never successfully
Ideas?
thanks in advance

Set your image to android:src instead of android:background.
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/face"
android:scaleType="centerCrop" />
All views can take a background image
The src to an ImageView has additional features:
different scaling types
adjustViewBounds for setting bounds to match image dimensions
some transformations such as alpha-setting
And more that you may find in the docs.

Change android:background="#drawable/face" to android:src="#drawable/face"
Scale type will only work forandroid:src

You can use android:src instead of android:background to set your drawable. Something like:
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/face"
android:scaleType="centerCrop" />
Also, Why not just crop the image using an image editor software like photoshop and use that image instead? Dynamically scaling and manipulating images should be avoided to prevent heavy use of system resources as far as possible.

I think, your problem is inserted weights in LinearLayout and FrameLayout. Please use RelativeLayout without weight. System can not crop your picture because system can not measure ImageView and can not compare him with your picture. In sum system thinks "This is picture and ImageView equal".
I have done so :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<ImageView
android:id="#+id/image"
android:layout_height="50dp"
android:layout_width="match_parent"
android:src="#drawable/photo"
android:scaleType="centerCrop"
android:contentDescription="#string/app_name"
android:layout_alignParentTop="true"
/>
<TextView android:layout_height="150dp"
android:layout_width="match_parent"
android:text="#string/text"
android:layout_below="#id/image"
android:maxLength="350"
android:layout_marginTop="5dp"/>
</RelativeLayout>

Related

Imageview shows border around photo that does not exist in the source image

I'm trying to display a simple image in an imageview and it seems to be adding a border around the photo that isn't there in the source image. I placed the imageview in the parent view and set the image to it, and in the editor you can see a small sliver of the border but when I run it on a device or emulator more of a border appears.
I tried removing a pixel off the size of the photo in case there was a border but that didn't fix it. Below are the photos of the emulator and the editor to show the difference.
Editor:
Emulator:
Any help would be greatly appreciated, thank you.
EDIT: added xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="frolicindustries.strandstudybible.HomeScreen"
android:weightSum="1"
android:background="#android:color/background_light"
android:orientation="vertical"
android:baselineAligned="false">
<!--android:scaleType="fitCenter"-->
<!--android:cropToPadding="false"-->
<!--android:layout_weight="0.01"-->
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/About"
android:background="#drawable/aboutgradient"
android:layout_alignParentBottom="true"
android:layout_height="65sp"
android:layout_marginBottom="1dip"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/Extras"
android:layout_alignEnd="#+id/Extras"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/Extras"
android:background="#drawable/extragradient"
android:layout_height="65sp"
android:layout_above="#+id/About"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/WTFW"
android:layout_alignEnd="#+id/WTFW"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/Bible"
android:background="#drawable/biblegradient"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:elevation="0dp"
android:layout_height="65sp"
android:layout_marginLeft="-5dip"
android:layout_marginRight="-5dip"
android:layout_above="#+id/WTFW" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/WTFW"
android:background="#drawable/wtfwgradient"
android:layout_height="65sp"
android:layout_above="#+id/Extras"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/Bible"
android:layout_alignEnd="#+id/Bible"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<ImageView
android:id="#+id/imageView2"
android:src="#drawable/logo"
android:background="#null"
tools:targetApi="lollipop"
android:layout_width="match_parent"
android:adjustViewBounds="false"
app:srcCompat="#drawable/logo"
android:layout_alignRight="#+id/Bible"
android:layout_alignEnd="#+id/Bible"
android:layout_height="155sp" />
<ImageView
android:layout_width="match_parent"
android:src="#drawable/title"
android:id="#+id/imageView3"
android:layout_weight="0.29"
android:layout_height="wrap_content"
android:layout_above="#+id/Bible"
android:layout_alignRight="#+id/imageView2"
android:layout_alignEnd="#+id/imageView2"
android:cropToPadding="false"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_below="#+id/imageView2" />
</RelativeLayout>
Check this,
my xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#000"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.charu.its2017huree.MainActivity"
tools:showIn="#layout/app_bar_main"
android:orientation="vertical">
<ImageView
android:background="#FFF"
android:src="#drawable/amanda"
android:id="#+id/my_image_view"
android:layout_width="match_parent"
android:layout_height="300dp" />
</LinearLayout>
I have set an imageView and i found out it seems there is something wrong with it's left and right edges. I have given match_parent to my imageView already.So I add a background color to my imageView to find out what's going on.
But that's not enough for me i want to see the boundaries as well.It's there on your android mobile!
Settings >Developer Options >(scroll bit down) under category Drawing there is a option Show layout boundaries > Tick that option .. mm You get some kind of grids in your mobile.It's normal it will be gone when you untick that option.
Let's jump back to image view and see how it looks now!
Now i can clearly see a background color which i add in behind of the image
Also image view width boundary is fine,it's match_parent.You can see that from your layout boundaries.
MM sounds like image didn't fit properly then i try something with scaleType like android:scaleType="fitXY" and run and see how is it now .. all-right it seems she has taken the full space .. I mean in my imageView :D
This way you can clearly identify what'w wrong with your imageView
what is your image saved as? i would suggest .png extension. I would get the border when my images are jpg or anything else.

ImageViews in LinearLayout - messing up the scale

I been struggeling with this for a whole day now. I want 3 Image Views in my LinearLayout. As you can see the scale is not correct at all. All of my icons have a size of 24x24 px. Been experimenting with different propertiers inside of my ImageViews.
Here is my XML-code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="45dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/tList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_home_black_24px" />
<ImageView
android:id="#+id/ist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_help_black_24px"
/>
<ImageView
android:id="#+id/ations"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_settings_black_24px"
/>
</LinearLayout>
I pasted your code on a layout file in my Android Studio, an it seems that the weight and scaleType attributes are messing up your view. This is how I declared a 24 by 24 ImageView:
<ImageView
android:id="#+id/ations"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="#drawable/your_drawable"
/>
You can check full doc about weight here, but what is basically saying is that if you put weight on several attributes under a LinearLayout, you're adding a priority to grow when the screen does. Since the 3 ImageViews have 1 as weight, they grow with the same priority, and since the fill_parent is being called also, they will force to fit in the parent layout params, looking oddly.
Change all of your ImageView's width to "0dp" and replace background to src like this :
<ImageView
android:id="#+id/ations"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_settings_black_24px"
/>

ImageView bounds extend beyond image

I have an ImageView defined as:
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|top"
android:layout_marginBottom="50dp"
android:layout_marginTop="-80dp"
android:layout_toRightOf="#+id/prem_BACK"
android:layout_weight="0"
android:clickable="true"
android:paddingBottom="0dp"
android:src="#drawable/tester"
android:adjustViewBounds="false" />
and I see this in Android Studio in the layout preview:
And notice the bounds of the ImageView. Is it possible to have the bounds be along the actual edges of the image I am displaying?
<ImageView
android:id="#+id/imageView"
android:src="#drawable/tester"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"/>
Adding the scaleType to centerCrop should fix it for you. You can change the centerCrop to any other suggestions according to your need.
you have to set the scaletype to fitCenter
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|top"
android:layout_marginBottom="50dp"
android:layout_marginTop="-80dp"
android:layout_toRightOf="#+id/prem_BACK"
android:layout_weight="0"
android:clickable="true"
android:paddingBottom="0dp"
android:src="#drawable/tester"
android:adjustViewBounds="false"
android:scaleType="fitCenter"
/>
set android:adjustViewBounds="true"
It will set the bounds of the imageView to match the content
I think, the image is too large and you re wraping it so the imageview layout will be larger than you wanted to. Crop the image seems like the only solution you can do. You can try to scale

How can get the right size images when setting some resource to imageview?

I hope to put some item into a gridview like following :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingBottom="40dp" >
<ImageView
android:id="#+id/mudImg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/icon_m0_r"
android:visibility="visible" />
<TextView
android:id="#+id/mudTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="fsafdsf"
android:textColor="#color/white"
android:textSize="16dp" />
</LinearLayout>
While the 'mudImg' part got something wrong with the image's size on a true android machine.Actually It never works util I set a indeed num to 'layout_width' and 'layout_height' like '50dp' or something like this.
What I want is show the origin size image and if necessary expended to the size what the parent view left to it.
Now my solution is that calculating the image size with app screen params(height width) and parent view's margins and gridview's numColumns and setting the result by code (since can not do it in xml)
any better idea?
Try this for your ImageView:
<ImageView
android:id="#+id/mudImg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/icon_m0_r"
android:visibility="visible" />
adjustViewBounds="true" tells the ImageView to set the height so that the image has the correct aspect ratio using the given width.

How do I remove extra space above and below imageView?

I have a really simple image within a RelativeLayout and for some reason I am getting extra spacing on the top and bottom which I can't remove. How can I clear it out?
Here is what it looks like:
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/slice11pp" />
</RelativeLayout>
Try this
android:adjustViewBounds="true"
In your above imageView just add android:scaleType="fitXY"
Your problem is probably that you have no scale type set... Add it to the XML for the ImageView, "fitCenter" should be correct, but there are others, check: ScaleType.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/slice11pp"
android:scaleType="fitCenter" />
Must be enough adding the property:
android:adjustViewBounds="true"
for example:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/slice11pp"
android:adjustViewBounds="true" />
If your image view height is match_parent, even if you set android:adjustViewBounds="true" ImageView will add some extra blank space at top and bottom side. so, change ImageView height to wrap_content and set android:adjustViewBounds="true"
for example
<ImageView
android:id="#+id/img_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
Use drawable-nodpi folder if there is no specific requirement for images. Then android: adjustViewBounds = "true" acts as the default.
If you use drawable-nodpi you don't need to set android:adjustViewBounds = "true".
I think this is the most effortless method.
android:scaleType="centerCrop" by adding this
<ImageView
android:id="#+id/image"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/temp_image"
android:adjustViewBounds="true"
android:scaleType="centerCrop"/>
works for me Before and After Image
this line of code will solve the problem
android:adjustViewBounds="true"
don't forget to rotate the image
just add ScaleType="fitxy" inside the Image view
Try this
<ImageView
(...)
android:adjustViewBounds="true" />
this is the perfect solution
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
it will not leave any extra single dp in any side. however the image will be distorted if it is not portrait image.

Categories

Resources