png images getting streached inside imageview - android

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="#dimen/contactUsPad"
tools:context="com.onqanetapp.mp.onqanet.ContactUs_Fragment">
<!-- TODO: Update blank fragment layout -->
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".2"
android:text="#string/contactUsAddHead"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/contactUsAdd"
android:textSize="18sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".6"
android:orientation="horizontal">
<ImageView
android:id="#+id/ivFb"
android:layout_width="#dimen/socialImageWidth"
android:layout_height="#dimen/socialImageHeight"
android:layout_marginRight="#dimen/socialImageRightMargin"
android:src="#drawable/f" />
<ImageView
android:id="#+id/ivIn"
android:layout_width="#dimen/socialImageWidth"
android:layout_height="#dimen/socialImageHeight"
android:layout_marginRight="#dimen/socialImageRightMargin"
android:src="#drawable/in" />
<ImageView
android:id="#+id/ivTw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/socialImageRightMargin"
android:src="#drawable/tw" />
</LinearLayout>
</LinearLayout>
dimens
<dimen name="socialImageHeight">50dp</dimen>
<dimen name="socialImageWidth">50dp</dimen>
<dimen name="socialImageRightMargin">10dp</dimen>
Image
this is final layout screenshot and i did't change the last imageview to show you guys the problem
info
all images are png
first drawable start's at 48x48
question
wrap_content should give those images there resolution i.e 48x48 , but it's not.
when i give them width and height of 50dp they looks stretched but
also looks out of bounds.
also tired 72x72 resolution but same

You have to adjust the image bounds according to the screen size.
android:scaleType="centerInside"
It wont strech or crop image. It will simply resize the image

try to add following lines in imageView xml :
android:adjustViewBounds="true"
android:scaleType="centerCrop"
or
android:adjustViewBounds="true"
android:scaleType="fitXY"; //fitCenter, or change according to your requirement
For Scaling the bounds of an image view:
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Thanks for the answers guys .
but nothing works for me.whatever i do the image steal not crisp or clear so i use SVG.
===========
downloaded svg icons from http://www.flaticon.com/
then used Vector Asset Studio(https://developer.android.com/studio/write/vector-asset-studio.html)
(Right-click the res folder and select New > Vector Asset.)
to import SVG to vector asset studio which then convert the svg to drawable xml.
now it's work like a charm.

Related

How to make the size of ImageView independent to parent when it is larger than the parent?

for example, if a 80dp square layout contains a smaller ImageView, the size of ImageView will not be scaled:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FFFF00"
android:clipChildren="true">
<ImageView
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/sym_def_app_icon" />
</RelativeLayout>
but if the parent is smaller than the ImageView, eg:30dp:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#FFFF00"
android:clipChildren="true">
<ImageView
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/sym_def_app_icon" />
</RelativeLayout>
it would be scaled automatically:
but I want the ImageView cropped instead of scaled:
how can I get this crop effect in xml?
There is alot of techniques available.
Try to Add both attribute in your ImageView xml
android:scaleType="matrix"
OR
Use margin-right,left,up,down.
OR
Search Icon size in google and then edit this icon in photoshop give it a fix size of icon .
try adding following attribute in your ImageView xml
android:scaleType="matrix"
hope it helps :)

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.

Scale background image and foreground image at same ratio in Android

I have a centered background image with a pattern that I am showing using an ImageView. I want it to fill the width and height of all the different screen sizes/densities, but maintain its aspect ratio. I think I have that part figured out, but then I have a foreground image (in a ToggleButton) that is smaller and centered and needs to scale at the same rate of the background image. This is important because the button image has graphical elements that need to align perfectly with the background. How do I get it to scale correctly? Here's what I've got so far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relmain"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="#string/bg_desc"
android:src="#drawable/bg_img" />
<ToggleButton
android:id="#+id/button"
android:background="#drawable/btn_on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_centerInParent="true"
android:textOff=""
android:textOn=""
android:onClick="toggleLight" />
</RelativeLayout>
Thanks for taking a look!
I think you should do it like this according to my skills
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="#string/bg_desc"
android:background="#drawable/bg_img" />
May be it will look as you want.

ImageView without scaling

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>

problem in setting image over a background image android

i have image-view in my xml for setting the image over a background image at a specified place of back ground image i set it for one emulator and it works but when i launch other emulator of different size image-view change it corresponding position with respect to background image so how to set image view over a background image so that imageview not changes its position for any size of screen
i am providing my code ...thanks in advance..
here is my splash.xml file ,button and imageview changes its position w.r.t. background image..for diffrent size screen emulator
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/TheSplashLayout"
android:layout_gravity="center"
android:background="#drawable/splashmodified"
>
<ImageView
android:layout_width="60sp"
android:layout_height="60sp"
android:id="#+id/SplashImageView"
android:layout_gravity="center"
android:layout_marginTop="120sp"
android:layout_marginLeft="55sp"
/>
<Button
android:text="SUBMIT"
android:id="#+id/submitt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="75px"
android:layout_marginTop="300px"
/>
</RelativeLayout>
Did not understand the question, you might consider uploading some images and giving us links to them. Only thing I can tell is that you must avoid using px when indicating any dimensions. This will make your views look different on every device, that you probably don't want.
use dip instead of px and sp.
Your xml will be
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/TheSplashLayout"
android:layout_gravity="center"
android:background="#drawable/splashmodified"
>
<ImageView
android:layout_width="60dip"
android:layout_height="60dip"
android:id="#+id/SplashImageView"
android:layout_marginTop="120dip"
android:layout_marginLeft="55dip"
android:background="#drawable/a_thumb"
/>
<Button
android:text="SUBMIT"
android:id="#+id/submitt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="75dip"
android:layout_marginTop="300dip"
/>
</RelativeLayout>
Thanks
Deepak

Categories

Resources