I've got an ImageView that I've wrapped in a LinearLayout. The LinearLayout has a background drawable which is basically a border, so the effect is that my image has a border around it.
However no matter what I try, I get a big chunk of empty space underneath my image, which is pushing the lower border of my LinearLayout down. I want the LinearLayout to wrap tightly around the image with no padding (except for the 1sp that I specify)
This is how I've defined the two
<LinearLayout
a:orientation="vertical" a:layout_width="wrap_content"
a:layout_height="wrap_content"
a:gravity="top"
a:padding="1sp"
a:background="#drawable/heading_background">
<ImageView a:src="#drawable/photo"
a:layout_width="wrap_content"
a:layout_height="wrap_content"
a:scaleType="fitStart"/>
</LinearLayout>
Can anyone tell me what I'm doing wrong?
Thanks
I don't know how big your drawable is, but if it's really big* then your imageview tries to size itself to that format (wrap_content), but also is restricted by the actual space it's got. What happens exactly is a bit fuzzy for me, but with pictures that get resized (even when keeping aspect ratio like your fitStart does) I had to add the adjustviewbounds attribute: http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
It resizes the ImageView back to the format I'd think it would allready have, but in my case it was needed to get it to actually "wrap" the content....
*And I don't mean enormous, just "big enough so it has to be scaled down a bit)
You will want to set a:adjustViewBounds as true in your ImageView. This ensures that the layout will wrap tightly around the image.
android:adjustViewBounds="true"
Related
In my application, a TextView is shown above an ImageView which contains a SVG image. Depending on the screen resolution, the ImageView, which is constrained (top and bottom e.g.) by another ImageView, is scaled: thus its SVG is also scaled by decreasing its height (and width, proportionnaly). Thus, the space between the TextView and the ImageView is technically the same than the one in Android Studio but is visually longer.
What I would want is: to keep the same space in Android Studio than on all screen resolutions, i.e.: 8dp.
Example:
In the Android Studio's visualizator, the space is 8dp:
In a Samsung Galaxy S7, I think the space is still 8dp but the SVG has been scaled: the space seems longer.
Proof that the SVG is scaled and that the ImageView is really at 8dp from the TextView:
Do you know how to keep the same space than in Android Studio, whatever the screen resolution?
Warning
I really want the SVG to be scaled (so I don't want, e.g. to set scale: fitXY or something like that). But I also want the space between the bottom of the TextView and the top of the scaled SVG be 8dp on all screen resolutions.
This is a guess but I think that your image is causing the problem.
As you said - your space is the same 8dp all the time but because your image has a white background, when you use a bigger image the white background scales and it looks like the space between your text and image is larger.
You can use some view with non-white background and scale it for testing - I believe that you will see the same spacing regards the view size. If this will be the case maybe try to change your image.
You can use LinearLayout layout with constraints to ensure a fixed proportion no matter what
E.g
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/main_layout"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="40"
/>
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="60"
/>
</LinearLayout>
So no matter what, in our example, the image will always be 40% of the horizontal space while the text will be 60%. I believe you can apply this idea to your situation
I have a TextView and an ImageView in a LinearLayout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="72sp"
android:orientation="horizontal"
android:keepScreenOn="true" >
<TextView
android:id="#+id/instructionView"
android:layout_width="245sp"
android:layout_height="70sp"
android:textSize="18sp" />
<ImageView
android:contentDescription=""
android:id="#+id/ma_landmarkView"
android:layout_width="70sp"
android:layout_height="70sp"
android:layout_gravity="right" />
</LinearLayout>
In my Code, I set different Images to the ImageView (All 68x68 pixels size) with
myView.setImageDrawable(this.getResources().getDrawable(
R.drawable.mypicture));
The Problem is now, the Image is no more seen if the TextView gets other Text by .setText(...) and redraws itself. The Image also dissappears if other Views outside this LinearLayout change their size and get redrawn (e.g. an MapView that has been zoomed in/out).
If I set all .setText(...) from this TextView in comments //, the picture from the ImageView stays visible and doesn't disappear anymore.
But I don't want to go without that TextView...
I already hardcoded the Views heights and widths but that does not help.
Any Ideas ?
EDIT:
I just saw at testing, that by setting different Text to the TextView it can get a bigger width (even bigger than I stated in the *xml) if this TextView gets too width, the Image disappears. Maybe a work around solution works, that prevents the TextView from getting too width. Some1 knows how to?
Try .setBackgroundDrawable instead
You should change the different view's units to dp instead of sp. sp is usually used for the actual text size. So basically change the layout_width and layout_height to use dp units, and keep the textSize in sp units.
Please change these and re-run your application, and let me know if this changed the results. If it doesn't work, add some of your java code so I can better tell where the issue is.
I am having two different circular images with different sizes.I have to place both in same place where the center point will be same.These two imageviews are in a relative layout.
please help..
When using a relative layout the only option to do that is to center both images in the layout, but if you start adding more elements, such as some text above/below any of the images, the result will not be as expected.
So my recommendation is to do it programatically. You can define a View and override the onDraw() method. Then you would load the bitmaps by means of two ImageView (or BitmapFactory). Then you paint it to the canvas at the desired location. To find out the center of each image you can use the Rect class that you obtain from the View method getDrawingRect after you apply the layout properties (so the size is calculated),, or by hand (create a Rect with de dimensions of the loaded Bitmap if you use BitmapFactory)
Other alterative is using LayerDrawable and define the image positions so they are centered (you need to know the image dimensions before hand).
Difficult to help without your layout XML code. Having said that, the moment you see "one on top of the other", you need to consider FrameLayout.
Use Framelayout, and set the background for the same with an image and then add images on top with setting layout gravity to left or right or middle.
In stead of creating a new sublayout, you can potentially have the ImageViews align on all sides and set the scaleType attribute to something like center:
<ImageView
android:id="#+id/circle_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:scaleType="center"/>
<ImageView
android:id="#+id/circle_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:layout_alignTop="#+id/circle_a"
android:layout_alignBottom="#+id/circle_a"
android:layout_alignLeft="#+id/circle_a"
android:layout_alignRight="#+id/circle_a"
android:scaleType="center" />
This will give the circle_b ImageView actually the same dimensions as circle_a, but setting the appropriate scaleType will prevent the image from being stretched or misaligned.
//Edit: ups, I meant to say center... corrected.
I created a 9patch image and somehow it does only stretch vertically.
I tried other 9-patch images, but they have the same effect, whyle they work in other situations. So the 9patch should be fine I think.
This is my XML code:
..
<ImageView
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:src="#drawable/bar" />
</RelativeLayout>
Anybody had the same issue and know how to solve it?
Thanks
If you are sure that the height of your View is really taller than the current image (as the others have suggested) then you should change your ImageViews scaleType. The default is FIT_CENTER which does not stretch the image, you should set it to FIT_XY.
Also you may try to set your 9-png file as the background of your ImageView not as the src and I think this will also stretch the file.
Did you add a black dot to the top dead center as well as the left side center?
The issue may be in layout_width="match_parent" you have mentioned width to match parent this may be the reason of 9 patch image to stretch vertically. But for height you have written height="wrap_content" So it doesnt stretch in height
You have wrap_content specified for the height. Are you sure the content is tall enough to make the image stretch?
I have an image which is 450px square below some text in a linear layout and wanted it to fill the width of the device, which I done by using;
ImageView android:id="#+id/my_image_container"
android:src="#drawable/my_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:scaleType="fitStart"
This has worked in a fashion, but the ImageView element fills the rest of the screen and any elements placed under do not show.
Does anyone know of a way to trim the bottom of the space that the ImageView uses.
Hopefully this image can explain it better - I want to crop the empty area under the image (orange background).
I recommend you to use a RelativeLayout instead of a LinearLayout. You can then use android:layout_above="" and android:layout_below="" to ensure that you get the layout you want.