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 :)
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 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.)
I want to use an image of backgrounds, but I do not know that size must be set for different size android, there are several specification is that you can tell me that you need to use size in pixels . for my application
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/your_selected_background_image"
>
android:layout_width="fill_parent" and android:layout_height="fill_parent" attributes in your main layout will fill the background of your app with the image that you have selected completely on any device.
Use a NinePatch Image.
A NinePatch is a PNG image in which you can define stretchable regions that Android scales when content within the View exceeds the normal image bounds. You typically assign this type of image as the background of a View that has at least one dimension set to "wrap_content", and when the View grows to accomodate the content, the Nine-Patch image is also scaled to match the size of the View
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/myninepatch" />
http://developer.android.com/guide/topics/resources/drawable-resource.html#NinePatch
According to the android developer documents fill_parent is renamed as match_parent in API Level 8 and higher and it is recommend to use match_parent instead of fill_parent.
math_parent/fill_parent can make the View's size stretch to its parent's size,so if you using android:layout_width="math_parent" and android:layout_height="match_parent" in your background layout. Your background image will be automatically stretch to the size of your screen size(Accurately, it is depend on its parent's size).
wrap_content make the view's size just big enough to enclose its cotent. So using wrap_content the view's size and its background will stretch depending on the view's content.
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 have a few ImageViews located near the bottom of my application. When I run in WVGA (Nexus One), everything lines up nicely with the bottom.
When running on another higher res, such as FWVGA, as well as on my Droid 2, there is a space that is left on the bottom of the application.
Is there a way to scale imageviews so that they stretch to fill all the space needed in one or multiple directions?
At the moment I am using an AbsoluteView and my imageview code looks like. I have tried layout_x and layout_y.
<ImageView android:layout_height="400px"
android:id="#+id/widget33"
android:layout_width="300px"
android:background="#drawable/picture1"
android:layout_x="-45dp"
android:layout_y="216dp">
</ImageView>
I have also tried a few other things such as
android:baselineAlignBottom
android:padding
You had fixed the height and width of the imageview.
If you want to set imageview in your whole screen you can use fill_parent or match_parent if above Android2.2 .
And also I am giving you advice to use relative layout instead of Absolute layout.
In relative layout you can set Views in relative position so that your view will remains same even if the resolution of the device will increase.
And also use unit of length in dp instead of px so that your view will remains same in all screen density.