I need to create ImageView for portrait mode like on this image:
But whatever I do I got same results like:
EDITED
XML example from third image
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_gravity="start"
android:src="#drawable/background" />
There are few possibilities that may cause this problem. You either have a Margin set for your image (margin top and bottom). Or the parent layout has a padding (also top and bottom).
You only need to remove this padding or margin in order for the view to fill the parent layout.
There's also another possibility, which -by looking at your code- might be the issue. you might want to use android:background attribute instead of android:src
Related
I have my imageview declared like this:
<ImageView
android:id="#+id/category_image_top"
android:layout_width="match_parent"
android:layout_height="170dp"
android:maxHeight="170dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:background="#drawable/image_placeholder"
/>
And this is how I set my category_image_top in asynctask (on onPostExecute)
imageView.setImageBitmap(image);
When image is set, imageview suddenly gets a margin of 4px. But when I remove android:background="#drawable/image_placeholder" from XML everything is fine?!
BTW: image_placeholder is a 9-patch image, if this makes any difference.
Any ideas why this happens?
UPDATE: I've tried placing background as a solid color and then no margins appear when image is loaded. I've also tried placing another 9-patch image and when I do so margins appear again. So it must be something with background as an image
UPDATE2: Maybe it's an android bug like this guy points out? https://stackoverflow.com/a/8340745/581531
I can guess that image_placeholder has 4px transparent margin
OK. Solution was found, maybe it's not the prettiest one but hey, it work! :)
In my view I've just added an arbitrary View that is a holder for my image. On top of it i have my ImageView so when the image is loaded placeholder (View) get covered. This is my view (or at least part that matters):
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<View
android:layout_width="match_parent"
android:layout_height="210dp"
android:background="#drawable/image_placeholder"
/>
<ImageView
android:id="#+id/article_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:scaleType="centerCrop"
/>
...
The element that contains the image view may have a margin, have you checked that?
Change android:background="#drawable/image_placeholder" to android:src="#drawable/image_placeholder"
Also add the following: android:scaleType="centerCrop"
If centerCrop doesn't work, try the other ones listed here.
I have to add an overlay (ImageView) so that it's a bit shifted to the left of the containing layout's left boundary.
What is the best way to do this?
Tried something simple, like putting the ImageView inside the layout and use negative margin
android:layout_marginLeft="-20dip"
This made this:
(Correction: Text in the image should be 20dip not 20px)
AbsoluteLayout is deprecated. Is there something like z-order? Or what do I do?
Thanks in advance.
Edit: I tried using relative layout instead. Same effect. Here's the xml reduced to a minimum:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:paddingLeft="50dip"
>
<ImageView
android:id="#+id/myId"
android:layout_width="60dip"
android:layout_height="60dip"
android:layout_marginLeft="-30dip"
android:clipChildren="false"
android:src="#drawable/pic" />
</RelativeLayout>
Result
Also happens when the containing layout has a background image smaller than the screen instead of padding.
Using RelativeLayout instead of LinearLayout (to allow overlapping) and adding this to the RelativeLayout fixed it:
android:clipToPadding="false"
set "android:clipChildren = false" in xml
Instead of
android:layout_marginLeft="-30dip"
try with
android:paddingLeft="-30dp"
Use a transparent(android:background="#00000000") imageview to the left of linear layout with width = 30dp. And make myId as aligning left in case of relative layout. If you are using linear layout make orientation as horizontal and let the transparent imageview be the first entry in it.
I want the drawable inside my ImageView to be shown aligned to the bottom (of the Imageview), and not centered.
Is it possible to do that?
Maybe this is too late, but even I ran into the same problem today and fixed it by using the following snippet.
All the alignment/scaling options are in the scaleType attribute.
Now, if you want to align the image with the beginning of the ImageView, use android:scaleType="fitStart".
Similarly, android:scaleType="fitEnd" to align it with the bottom of the ImageView.
You can wrap the ImageView inside a FrameLayout and align using android:layout_gravity like this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:src="#drawable/img_select_profile" />
</FrameLayout>
You'll have to set the weight of it to 1 or set its alignment to bottom.
http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html
If you have SVG you can open it in https://boxy-svg.com/app or any other online svg editor
Align Image Bottom.
I have a LinearLayout with width set to fill_parent and height to wrap_content. Now I want to give it a background from a png file, but doing it in a traditional way causes the LinearLayout to resize in order to show the whole background instead of cropping the additional part.
How can I set the background of LinearLayout so it won't resize?
Thanks
It appears that such thing is achievable only using the ImageView and setting the scaleType parameter accordingly. A quick workaround is to use FrameLayout and put the ImageView under another layout with transparent background.
Code:
<FrameLayout
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="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/background" />
</FrameLayout>
The default behaviour of background bitmaps is to fill the container completely and grow the horizontal and vertical size of the container if needed. The solution is to create a drawable bitmap resource and changing the gravity.
Check the following link and look for the possible gravity values. Your view should then just reference the drawable resource and you should be fine.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap
I solved this one by subclassing LinearLayout and overriding the onMeasure(int,int) callback, then updating the layout XML to use my new layout type. I'm not at liberty to post that exact code, but what I did was invoke the super.onMeasure(int,int) implementation and check whether the measured height came back as the exact height of my background image. If so, I grab the measured height of all child views, then calculate a new height value and pass it to setMeasuredDimension(int,int).
put this code in the xml activity, for example activity_main.xml
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/image" />
How can I get a LinearLayout (or any other ViewGroup) to assume the size of it's child views rather than assuming the size of the background image?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/large_image300x300pix">
<TextView android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"/>
</LinearLayout>
The linear layout becomes the same size as the background image.
How can I get my linear layout to assume the same size as the textview?
OK, so this thread is a little old, but I have a solution that someone might someday find useful. I think Android has problems scaling large images down, so the LinearLayout size ends up getting bumped by the background drawable bitmap, and the ImageView ends up forcing up the size of the parent container.
Unless you use a relative layout. You can make the ImageView relative to the position of the LinearLayout, even when the ImageView is behind the layout in the parent. My solution looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/activation_popup"
android:scaleType="fitXY"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignTop="#+id/activation_layout"
android:layout_alignBottom="#id/activation_layout"
android:layout_alignLeft="#id/activation_layout"
android:layout_alignRight="#id/activation_layout"
android:contentDescription="#string/act_code_label" />
<LinearLayout
android:id="#id/activation_layout"
android:clipToPadding="true"
android:padding="25dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- LinearLayout wraps a bunch of smallish views here -->
</LinearLayout>
</RelativeLayout>
I tried this on a top of display sizes and OS versions, seems to work great. Note that the padding in the LinearLayout is a trick to make space for a shadow border in the background image graphic. The LinearLayout doesn't need any relative positioning because top left is assumed.
You can create a FrameLayout and put an ImageView and your LinearLayout there. So you'll be able to configure the layout of your background image.
This happens because the Android view calculates its minimum size based on its background drawable size.
Check my answer here in this another post which covers the same problem which will help you to achieve your layout configuration.
If your image lends itself to being converted to a scalable 9-patch image, then doing that would cause the background to scale around the TextView.
I believe the best solution here is to set android:clipToPadding="true". What this does is excludes the padding for the main layout and wraps your layout to its children.