I have following widget in my app and it contains an ImageView with width and height set as WRAP_CONTENT. Root view is a RelativeLayout again with width and height set as WRAP_CONTENT.
My issue is why there are some padding (marked in black) on top and bottom of the widget? I want it to be perfectly square. Following is my widget layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget_battery_2x2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000"
android:layout_margin="#dimen/widget_margin"
android:padding="#dimen/widget_padding" >
<ImageView
android:id="#+id/image_widget_arc_battery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
#dimen/widget_margin and #dimen/widget_padding is zero.
ImageView contains a dynamically generated Bitmap (width and height is 400).
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
This is my first widget app :) I'm kinda lost and can not figure out why this extra padding is there. Anybody has an idea?
Thanks for your help.
From App Widget Design Guidelines | Android Developers
When your widget is added, it will be stretched to occupy the minimum number of cells, horizontally and vertically, required to satisfy its minWidth and minHeight constraints.
Each device has a grid on its home screen that widgets are forcefully aligned with. You can even see on some devices that the aspect ratio of the grid cells change when rotating between portrait and landscape.
The docs at the link above have some advice for how to specify sizes for your widgets. Some of the information there might help you.
I would recommend that if you are only showing the ImageView, instead of using a RelativeLayout, use a FrameLayout with a gravity of center and a transparent background. That way the FrameLayout might get stretched but your ImageView should stay square.
Even better, you might not need a ViewGroup subclass at all. Just have the ImageView as your top level component and use a scale type of FIT_CENTER. Then your bitmap should square up inside the ImageView. (Oh, and don't specify a background color for the ImageView, just do the background color in the bitmap.)
Related
I want to set a background to any layout.
Usually, I would go on about this like here:
<LinearLayout
android:orientation="vertical"
android:background="##drawale/somedrawable"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="100dp"/>
But this will always make the background fit the LinearLayout. But what if the layout was smaller in height than the image I set as background? I do NOT want to destroy the image's aspect ratio but just center the image inside the layout and have the height overlap so that it isn't visible anymore.
To clarify:
Left is what happens currently, but right is how I want to to be. Since the layout container is smaller than the imageview or background image is, it is supposed to stay centered but only show what fits without altering the aspect ratio.
Use an ImageView inside the linear layout with width and height match_parent and set the scaleType="centerCrop"
<ImageView
android:src="#drawable/somedrawable"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
you cannot apply the scaletype property in linearlayout its better to use imageview to achieve this following is the link how to use scaleType attribue, to avoid the stratching behaviour use the 9 patch image, follwoing is the link to convert your image into 9patch
I have an image like this used as background in a RelativeLayout:
This image is used as background for all the levels of my game. Every level is drawn onto the blue area.
I want to keep fixed the aspect-ratio of the blue area, changing the size of the red edges to avoid to show to the user unused pixels of their screen. The green area must be fixed to 80dp for all phones. Then I must add a View (a GLSurfaceView) in my layout in such a way that it fit perfectly the blue area. Thus all levels of my Android game will be perfectly the same in all Android device.
How can I solve this problem?
The real image that I use is a little more complex. You can look it here:
Real image
I would use a FrameLayout for the middle part of the screen(blue), add an ImageView, containing the BackgroundImage you want to display, and put the GLSurfaceView on top of it.
Since the aspect ratio is always the same, you could set the ImageViews sclaing to fit xy and the image should always look the same.
Lets assume you are using a simple SurfaceView, the xml code id use to put a ImageView begind it would look like this
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<SurfaceView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
As i dont know how you build your View i cant post the code that does the job, but just add a FrameLayout instead of your GLSurfaceView to your View, with the Same Dimensions, the GLSurfaceView would have.
To that FrameLayout first add the ImageView, then the GLSurfaceView. Both with height and width set to match_parent.
To Figure out the size of your SurfaceView...
Retrieve Display Dimensions
Substract Green Bar Dimensions
Calculate the size of the Blue View, get the Height/Width (whatever is bigger) calculate the missing Dimension
Set the Red Views to Occupie the empty space.
So you would have to do this programmatically :)
I have a 640px wide, 208px tall PNG that I've placed in my /drawable folder and I'm having a very hard time properly placing it in an ImageView. I want to scale the image so that it maxes out the horizontal resolution, and I want it to scale vertically only as much as it takes to stay in proportion.
The problem I am having is that my ImageView ends up taller than it needs to be to fit the image. The image itself looks perfect; as wide as the screen and in proportion. But the ImageView appears to have padding on the top and bottom. From what I can tell it's the drawable that the ImageView contains that's actually too tall.
I can't post an image because I'm new to SO, but if I did it would be of the Graphical Layout view. When I click on the ImageView the regular blue box shows up around it, but with padding on the top and bottom, the same padding I'm seeing on the device. Even if I drag the blue box to attempt to resize the ImageView, I am not allowed to make it any smaller than it already is (perhaps because the ImageView thinks the drawable is that tall, or something). From what I can tell, this may have something to do with the density of the image...the ImageView ends up being 312 pixels tall (208*1.5) on an hdpi device.
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/back" android:src="#drawable/categoryheader2"
android:layout_width="wrap_content" android:layout_height="wrap_content">
</ImageView>
</RelativeLayout>
Thanks in advance for any help!
I guess android:adjustViewBounds="true" on the ImageView should do the trick. I recently had a similar problem, when I was trying to scale an image to fit the whole width of the view without loosing its proportions.
did you tried the tag : android:scaleType="fitXY" or android:scaleType="centerCrop" on your ImageView ?
I have an image view whose background is a xml shape drawable i.e. a rectangle shape drawable.My app's orientation is fixed to landscape view.
The imageview is in relative layout.
I am trying to move it to the right of the screen by setting the appropriate value of layout_marginRight but this does not work .The imageView always stays in its's original position.
I have tried the following other options also but none helped.
The other options which I tried are:
Creating a new relative layout params and setting the right margin
Creating new margin layout params and setting the position
Trying padding option
Setting the imageview to right position relative to another imageview...
Using display metrics to get width of screen and accordingly setting the margin....
I am stuck since a week setting the position of this imageview...
I was thinking the best approach is to set this imageview in between two imageview as I am not able to move it by setting margin but that does not work either...
Here is the current xml of my imageview in main.xml:-
<ImageView
android:id="#+id/rect1"
android:background="#drawable/rect"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginRight="70dp"
android:scaleType="fitCenter"/>
I don't see why adding a margin to the right of the image would help move the image to the right, it just extends the right side bounds of the imageview by the margin. As long as the imageview isn't actually on the right side of the parentview, it would be allowed to grow without changing position. I suggest using layout_alignParentRight="true" on the imageview if you want it on the right of your relativelayout, and then you can use the marginRight to control how far off the right side you want it.
Make the layout_width attribute of the RelativeLayout to fill_parent and see it work :)
My issue was that my parent layout's width was set to wrap_content, which doesn't have a defined width during the editor, I think. Thus, I couldn't use marginRight to get an offset. I had to change the width to a fixed size like match_parent or a constant dp size.
put the image view in a linearlayout, then use android:layout_marginRight="70dp
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.