This is my code for the button. Thing is, it's the same size on all devices. It's big on small ones and small on big ones. How do I alter its size relatively? Here's my code.
<Button
android:id="#+id/button1"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="3dp"
android:background="#drawable/blue_gradient"
android:layout_alignRight="#+id/relativeLayout1"
android:layout_alignTop="#+id/relativeLayout1"/>
I would like the size to be consistent, depending upon the device's resolution.
EDIT
I want the buttons to be square.
You are specifying the width and height in dp, or density-independent pixels. This unit of measure is designed to produce the same physical size on all devices regardless of pixel density, because pixel density varies by device. You can also use either of the following values for layout_width and layout_height:
wrap_content makes the view large enough to hold its content.
match_parent uses the corresponding dimension (width or height) of its parent view.
Also with any of these you can stil specify padding and margins, a la the typical box model.
Android currently does not support percentage style measurements, like making the width be 60% of the available width. The closest you can get to that is using a LinearLayout and specifying layout_weight values for its child views.
If you want finer control over the size of a view, you can subclass it and override the onMeasure method, which is where you would calculate the size of the view and set its width and height by calling setMeasuredDimension(w, h). Here's an example of someone doing just that: https://stackoverflow.com/a/3147157/1207921
the best way is to use
android:layout_width="wrap_content"
android:layout_height="wrap_content"
It manages size for all devices very well.
For square buttons you need to set width/height in the code. this will help you.
You might want to try using image buttons with different sized images according to screen resolution (Android, (newbie) different res imagebuttons).
If you use LinearLayout with android:weightSum="2.0" and you set all of your image buttons with android:layout_weight="1" you will have their width/height exactly 50% of the LinearLayout according to the LinearLayout orientation.
Related
I have an Image of resolution 1600 x 2400. I want it to be displayed in an ImageView as follow:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerInside" />
I want the image to:
Take full width
Maintain Aspect ratio
Hence the imageview height must be as per the ratio
Eg: on a 320 x 600 screen, an image of size 1600 x 2400 must be shown as 320 x 480
What I currently get is an imageview with dimensions 320 x 2400 with image centered and space on top and bottom.
save the image in hdmi folder and use
android:src="#drawable/imagename"
or you can use
android:background="#drawable/imagename"
and you can set the heigth and width with
instead of fill parent or wrap or match use sizes in dp like 100dp or whatever you like.
android:layout_width="fill_parent"
android:layout_height="wrap_content"
example
android:layout_width="100dp"
1.Please go through the Developers guide first. Supporting Multiple Screens provides a pretty good overview of what you are trying to achieve. It's a challenging task being honest. Most of the iPhone devs enjoy the fixed screen size but we Android devs have to go through this problem. I can recomend few practices that I'm following
2.Try not to use Fixed height and weight as much as you can
Stick to Linear Layout if the layout is not complex. Go to relative layout only when its really mandatory.
Use Wrap and fill parent than giving fixed sizes..
These are the few I can think of.
3.Typically you just provide different layouts and resources for different screen densities and orientations as described in Android documentation
try using
android:scaleType="fitXY"
or
android:scaleType="fitCenter"
Assuming you have calculated how high your view should be: set it's layout parameters through code.
imageView.setLayoutParams(new LayoutParams(320, height));
I want to create a scalable view.
should I prefer using linear layout property: layout_weight
or using layout_width: X dp ? (which is also relative and not apolute like pixels)
what is the difference?
This highly depends on the exact use case.
layout_weight depends on the number and size of the other views in the same ViewGroup.
dp (density-independant pixels) depends on the density of the device.
Usually, dp is used to have a view displayed at the same physical size on devices with different screen densities, while weight just makes sure that a view fills a certain percentage of its parent ViewGroup.
It is my understanding that dp is just a general size that you want an object while weight is defining how much space you want something to take relative to the other things sharing the same space.
it makes it easier to create layout when you want some view to take for example one third (1/3) of the available space. How would you achieve this with layout_width? However you can easily achieve this using the weight property.
what more the weight property makes you layout looks the same on all screen sizes, even tablets. Which is not the case when you are using the weight property and usually if you do you will develop a separated layout for tablets (I'm not saying that you should do that, I only want to point out the difference).
layout_width and layout_height specify those two dimensions of a widget. You can use a dp value to give the size in a device-independent manner'
layout_weight indicates how to allocate any extra space in a LinearLayout. This means that if the orientation is set to horizontal, the LinearLayout will modify the width of the widgets it contains. On the other hand, if the orientation is set to vertical, the LinearLayout will modify the height of the children widgets.
Overrall, layout_width and layout_weight have different purposes, so it is improper to ask "which should I prefer". In a vertical LinearLayout, you can easily use both.
DP is not really relative, it's just a density-independent pixel (since tablet/phone screens have different pixel densities).
You can use layout_weight to scale a control to e.g. 1/3 of the screen, no matter how small/big the screen gets.
Say you have:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<View
android:layout_width="20dp"
android:layout_height="wrap_content"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
The first item will always be the same width on all different devices, the second one will fill 2/3 of the remaining space, and the 3rd one the remaining 1/3.
It all depends on how you want to make your layout scalable (which parts of the ui should grow/shrink, which ones should stay the same size).
First of all, there is no relationship between android:layout_weight property and dp.
dp (Density-independent Pixels) is basically a unit of measure.
An abstract unit that is based on the physical density of the screen.
These units are relative to a 160 dpi (dots per inch) screen, on which 1dp is roughly equal to 1px.
To calculate the pixels and density points you can take the following formula.
px = dp * (metrics.densityDpi / 160f);
You can see here all the supported dimensions by Android.
android:layout_weight defines the "weight" of each view inside the parent layout.
E.g. you have a LinearLayout which contains a TextViewand ListView and their weight is, respectively, .25 and .75. That means your TextView can use 25% of the available space in the screen and the ListView the other 75%.
Make sure, in the end, the sum of the total weights is equal to 1 (100%).
This DP measure is pretty confusing, I'm trying to learn when should I use wrap_content and when should I set the height, when using ImageView.
My current issue is that I'm using wrap content on 3 images (and yes I have different resources for each screen size: mdpi,hdpi,xhdpi) BUT in some devices (both hdpi) since they have different width pixel size (480px for one and 590px for the other), in the 480px one, one of the images looks smaller cause their size is calculated cause of the wrap_content.
I could make my designer re-make all the images for the hdpi size, but I want to know when to use wrap_content and when to set DP size myself.
DP is just a unit of measure that normalizes for different screen pixel densities, which means a value like 50dp always has the same physical size no matter what device you run your app on.
As far as actually designing your layouts, you should almost always use either wrap_content or match_parent instead of setting hard numbers for width and height. Exceptions usually come about when you use layout_weight for children of a LinearLayout for doing proportional sizes, or when using the various layout anchors for children of a RelativeLayout.
I am trying to understand something. A weird thing that I see is that when I put wrap_content in the width and hight, the image is bigger than the the real px (pixel) size of the image which is inserted. Why is that so?
My code with wrap_content:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/header" />
and thats my code with exact pixel size of the image:
<ImageView
android:id="#+id/imageView1"
android:layout_width="378px"
android:layout_height="155px"
android:adjustViewBounds="false"
android:src="#drawable/header" />
As you can see, thats the exact pixel size:
Why is that? I thought that wrap_content should wrap the view to the content size so why is it bigger on screen?
If you really need to use the image's pixels as-is, and use the screen actual pixels do the following:
1) Create a res/drawable-nodpi and move your fixed-pixel non-scaling images in there.
2) You then can use wrap_content as layout_width and layout_height, and image pixels will match the device pixels with no upscaling because of dpi.
From http://developer.android.com/guide/practices/screens_support.html, the definition of nodpi :
Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density.
A very nice explaintaion for supporting the multiple screens is given at
http://developer.android.com/guide/practices/screens_support.html.
you need to put images in respective folders after scaling.
e.g. if you want 100*100 image then place
75*75 in drawable-ldpi for Low density devices
100*100 in drawable-mdpi for Medium density devices
150*150 in drawable-hdpi for High density devices
200*200 in drawable-xhdpi for Extra High density devices
wrap_content means that you want the image as it as its original size is. i.e if the size of the image is 200*200 then it will show 200*200 and if the image size is 400*400 it will show of the size 400*400.
So the reason you are getting a larger image then what you actually get when you hard code it with real pixels is because of the LARGE SIZE of the image. i.e image is actually large.
From my experience I can say that wrap_content always utilize maximum available size possible. So sometimes it stretch the image & sometimes reduce the size of the image. To use exact image use android:scaleType="fitXY"
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:scaleType="fitXY"
android:src="#drawable/header" />
Update after 1st 2 comments:
as per android docs :
You can specify width and height with exact measurements, though you probably won't want to do this often. More often, you will use one of these constants to set the width or height:
wrap_content tells your view to size itself to the dimensions required by its content
fill_parent (renamed match_parent in API Level 8) tells your view to become as big as its parent view group will allow.
In general, specifying a layout width and height using absolute units such as pixels is not recommended. Instead, using relative measurements such as density-independent pixel units (dp), wrap_content, or fill_parent, is a better approach, because it helps ensure that your application will display properly across a variety of device screen sizes. The accepted measurement types are defined in the Available Resources document.
I found the term size itself is important, it autometically resizes the images. thats why I told that from my experience I found sometimes it stretch the image & sometimes reduce the size of the image
You need to see where you put the image. If its in hdpi it will look bigger on screen then if its in hdpi when ising wrap_content. so, in order for it to be the exact size, put it in right library.
I have a layout which looks like this:
<LinearLayout>
<ImageView>
android:width="wrap_content"
android:height:"wrap_content"
...
</ImageView>
<ImageView>
android:width="wrap_content"
android:height:"wrap_content"
...
</ImageView>
<ImageView>
android:width="wrap_content"
android:height:"wrap_content"
...
</ImageView>
<ImageView>
android:width="wrap_content"
android:height:"wrap_content"
...
</ImageView>
</LinearLayout>
The sizes of the images are such that they fill the screen on a 540x960, 275ppi screen. But when I run my app on an emulator, the last image is squished.
After reading the Supporting Multiple Screens document, I learned that specifying the image dimensions in dp's instead of "wrap_content" should cover for different density screens.
But what about screens with different sizes? For example, if I have two different-sized screens with the same pixel densities, I can have a condition where my image fits the screen on one of them but not on the other, right? Is having two different layouts the only solution?
For example, the two different-sized (but same density) screens might have 100 and 200 vertical pixels available, and image is sized 150dps, so it wouldn't fit on the first screen. Am I right?
Thanks in advance
Almost any Android app which tries to fill the entire window with set bitmaps without being willing to crop, scale or leave uncovered areas is doomed to failure. With so many different aspect ratios and screen sizes it's just not possible to magically fit a set of content with a fixed aspect ratio and size. Even if you provide another layout that handles a different size screen that won't really fix the problem because no doubt there is a third device out there somewhere with a screen size that is different from both of the two that you've covered.
Consider using a set of images that include a portion which can be stretched or cropped without losing fidelity. That might be just a solid color, a gradient, a repeating pattern or possibly something else. Alternatively if appropriate you can just allow scrolling. All of this is dependent on your content and what you're trying to achieve though.
Pay your attention at android:scaleType attribute in ImageView. By default system scales images using FIT_CENTER value from ImageView.ScaleType. In this case system maintains original aspect ratio of your image and ensure that it will completely fit by one of device's side, either width or height.
Edit:
Sorry, made great mistake. Image completely fits ImageView by one of it's side.