I have a normal "read an article" type page with a single large photo at the top.
I'd like it to:
not scale larger than the source imgae
not be larger than the screen
not be CRAZY long vertically
side things I already have working
border (via padding), center crop (would rather top crop, but seems not avail)
The main issue I'm having is - I can either have it fill_parent (ie full width) OR wrap_content (ie as large as the original image). And nothing I have done so far allows the image to be normal size (ie keep from enlarging).
Is there a "norm" for this kind of thing? I'm sure there's some kind of sweet spot or combination of attributes for this that works - I just can't find them.
My current attempt:
<ImageView
android:id="#+id/article_photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/super_light_gray"
android:scaleType="centerCrop"
android:contentDescription="#string/articlePhoto"
android:cropToPadding="true"
android:layout_marginBottom="20dp"
android:padding="1dp"/>
You can write some code in the Activity to get the image size and display size.
If the image size exceeds display size set width to display, if not set to image size. If you want to be fancy you can find the ratio between the x and y and scale vertically also.
Related
I am designing a scale where I have 100 boxes and their vertical space. Here is the code for that. The below code indicates one Block. Ther will be 100 blocks. in that scale. The height of this block from Imageview and view is 6.7dp. 6.7*100= 670dp.
<ImageView
android:id="#+id/img_2"
android:layout_width="6dp"
android:layout_height="6.5dp"
android:background="#color/boxcolor" />
<View
android:layout_width="6dp"
android:layout_height="0.2dp"
android:background="#android:color/transparent" />
But when I set the height of a graph-view 670 dp it does not match the height of the scale.
<charts.LineChart
android:id="#+id/graph"
android:layout_width="0dp"
android:layout_height="670dp"
android:layout_marginTop="11.7dp"
android:layout_marginStart="2dp"
android:background="#android:color/transparent"
Here are the pictures that explain what it looks like.
first_image,
I cannot directly the height of the scale because the boxes are in the inner views. so can't directly set the height that way.
Please check both pictures.
Here is the whole code file
XML file link
You can't count on math being consistent like that over dozens of objects of different size- eventually rounding will kill you. Devices aren't always exactly able to fill 1 dp, there might not be an even number of pixels in that size. For example, 330 dpi is a common screen size, that would have 2.0625 pixels per dp. That would likely round down to 2 for small numbers. Add a few of those together and now you're off by a few pixels of cumulative error. Where as the 600dp would still only be off by .0625 pixels, because it would calculate off the total.
If you want a view to go around other views, there's 2 ways to do it. One is to make it the parent. If so, put the other views inside it and make this view's height wrap_content. The other is to use a ConstraintLayout or RelativeLayout, make the height wrap_content, but constrain the top and bottom edges to the top of the first image and bottom of the last.
I am creating a android app in Xamarin with the mvvmcross framework.
Am trying to display pictures from the server to our users(the pictures are Urls). But the pictures refuse to scale to fill their parent.
How can I achieve the right fit for these images? , I use the FillParent on the Width tag. But the images refuse to scale to the size of the container.
My current setup
<FFImageLoading.Cross.MvxImageLoadingView
android:id="#+id/my_plannymap_listitem_title_picture"
android:layout_width="fill_parent"
android:layout_height="150dp"
local:MvxBind="DataLocationUri ImageUrl; Click OpenDetailCommand" />
above code creates(sorry for the volume thing), As you can see the images do not fill, they remain their "original" size
other activity (same problem here)
<FFImageLoading.Cross.MvxImageLoadingView
android:layout_width="fill_parent"
android:layout_height="150dp"
android:scaleType="fitCenter"
android:id="#+id/overview_image"
android:background="#580AB0"
local:MvxBind="DataLocationUri ImageUrl"
TransparencyEnabled="false"
DownSampleToFit="true" />
It sounds like you want to fix the height to 150dp, and fix the width to the width of the parent. If that is the case it can be done, but it will stretch any image that isn't the correct aspect ratio to begin with.
<FFImageLoading.Cross.MvxImageLoadingView
android:id="#+id/my_plannymap_listitem_title_picture"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="fitXY"
local:MvxBind="DataLocationUri ImageUrl; Click OpenDetailCommand" />
(note I used match_parent since fill_parent is deprecated)
If you don't want your image to stretch in a strange way and you can't guarantee that the aspect ratio of incoming images matches that of your layout, you need to select one aspect (either width or height) to dictate the size of the other, in such a way that the ratio remains unchanged. You can do that with the following (in this case you're deciding the width, and calculating the height from it based on the image's aspect ratio):
<FFImageLoading.Cross.MvxImageLoadingView
android:id="#+id/my_plannymap_listitem_title_picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
local:MvxBind="DataLocationUri ImageUrl; Click OpenDetailCommand" />
In almost all cases where you cannot guarantee the aspect ratio of the image you're scaling, the second option gives a better result than the first.
I have an image that I want to use as a background for an activity.
I would like to take the screens height and width from the top right hand corner of the image. For example in the image below a screen the size of the red square would display that portion of the image, where as a blue screen would display everything in the blue square.
This is similar to a background image in html with the parameters 'cover' and 'top right corner fixed'.
I would recommend using android:layout_width="1900dip" and android:layout_height="951dip" and removing some of the extra but not really import attributes you have. Dip is a better solution than dp for image sizes across android devices(since their screen sizes are all different).
For the blue screen image have its height and width match the parent which would be the relative layout which will allow for it to fill the whole page. Then the red image will overlap from the top right.
<ImageView
android:id="#+id/imageView1"
android:layout_width="1900dip"
android:layout_height="951dip"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:src="#drawable/bgnd"
/>
I built an app and used an imageview (SmartImageView to be exactly, but i doubt that the problem) as reference for the place where I want my images to be, the thing is: the imageview has 50x50 px (set to wrap_content) but when I pull the images from web (favicons, to be exactly) if they are bigger than 60x60 instead of keeping the imageview size, they keep their own size.
I want my imageview to work as a mask and crop and/or resize the favicons to it's 50x50 size, how can I do it?
Heres the xml of the imageview:
<com.loopj.android.image.SmartImageView
android:id="#+id/favicon_placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/favicon_example2" />
And here's the java bit of code that pulls the images to it:
linkImageView.setImageUrl(link.favicon);
You are setting your height and width to wrap_content which means that it is going to resize itself to fit the content that you give it. If you want it to always be 50px no matter what size image you give it then you need to declare the size statically instead of wrap_content. And set your scaleType so the system knows how to manipulate the image should it be a different size. See here for possible values
<com.loopj.android.image.SmartImageView
android:id="#+id/favicon_placeholder"
android:layout_width="50px"
android:layout_height="50px"
android:scaleType="fitXY"
android:src="#drawable/favicon_example2" />
note that the use of the px unit is generally discouraged. dp is used more often because it can scale up or down for smaller and larger resolution devices. But if you want it to be the exact same pixels on every device then you must declare it with px
Look at ImageView.ScaleType. You may want to have a calculated size or fixed size in dp when using ImageView.ScaleType properties.
New to Android, bad with layouts so this is probably a simple solution but I can't find it. I am adding an image to a ListView, the ListView is defined like this:
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
Image is added like this:
ImageView image = new ImageView(context);
image.setScaleType(ImageView.ScaleType.FIT_CENTER);
image.setAdjustViewBounds(true);
image.setImageDrawable(drawable);
return image;
in the ListAdapter. I want the Image to scale so the width fills the screen and the height adjust proportionally. What is happening is the image is scaling down so the height fills the list row but there is plenty of room for the width to be bigger. I had this working earlier but can't figure out what changed. Why is the image shrinking to some seemingly arbitrary height and how do I get it to fill the screen by width?
Edit:
So this happened when I started building for 1.6 instead of 1.5, probably a resolution thing. I guess the image is a bit sharper when it's small but I want it larger, it's almost unusable smaller and I am not able to get a larger image, it's from the web.
I think there is no really "simple" solution, but it's already answered here (without list's, but i don't think it matters):
Android: How to stretch an image to the screen width while maintaining aspect ratio?
Have you tried ImageView.ScaleType.FIT_XY ?
Scale Types