I am new to android development. I am making a UI for my android app. Now, mdpi screen's height is 480px. So I designed my UI to have a height of 480px on mdpi's screens. But because the status bar takes some space at the top of the devices, some of my ImageViews in RelativeLayout are overlapping. How to compensate for the space the status bar takes? Because for different screens, the status bar will be of different sizes and in tablets the status bar might not even be at the top. I am confused, help!
EDIT: The XML :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:theme="#android:style/Theme.Black.NoTitleBar" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:clickable="false"
android:contentDescription="#string/p"
android:scaleType="center"
android:src="#drawable/volbar" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:clickable="false"
android:contentDescription="#string/p"
android:scaleType="center"
android:src="#drawable/base" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:contentDescription="#string/p"
android:scaleType="center"
android:src="#drawable/head" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_marginBottom="33dp"
android:layout_marginRight="19dp"
android:text="#string/press_to_update" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:clickable="false"
android:contentDescription="#string/p"
android:scaleType="center"
android:src="#drawable/frag1"
/>
</RelativeLayout>
In Relativelayout , you have used match_parent / wrap_content. So it will fit to the screen. But you have specified that you have designed the ui for 480px on mdpi's screens.
Since it is not clear how you designed the ui to 480px on mdpi screen. I guess , might have used drawables used in Image View which fits the 480 px for mdpi screens.
drawables should be placed in the ratio of 3:4:6:8
for example
lpdi:mdpi:hdpi:xhdpi = 3:4:6:8
for example if you keep an image for mdpi as 40px
Then,for ldpi = 30 px , hdpi = 60px , xhdpi = 80px.
Per the Supporting Multiple Screens Best Practices, you should design your layouts to expand or contract to fill the space available. On a phone, the most important part is making sure your content fits horizontally and (if needed) scrolls vertically. You can add a ScrollView if you need to fit more vertical content in a layout than your device has room.
Don't try to set the height to a specific size. Use "wrap_content" or "match_parent" as the value for "layout_height" whenever possible.
If you feel like the content will be taller than the available screen height you will want to use a ScrollView as the container for the content.
If you feel like the content will always fit in the available screen height then you can simply use a container (like a RelativeLayout) with layout_height="match_parent".
If you have a specific layout you need help with you could post the XML.
As other users suggested, you should not hard code the specific heights but use wrap_content or match_parent.
If you still want to follow this way, why don't you reduce the height of your RelativeLayout by the dimension of the ActionBar? In Android 4.0+ the default height is 48dip, in landscape is 40dp, in sw600dp is 56dp. You can also get height programmatically calling getActionBar().getHeight() in your activity. For more infos about ActionBar appearance, see this link.
Related
Problem: trying to give multi device support screen for a simple layout but in Nexus 6 its creating the problem,means not showing fit.
It's side is cutting down where as per as docs for nexus-6 resolution is 1440*2560 and image should be in drawable-xxxhdpi .so i keep a image with resolution of 1440*2560.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:id="#+id/imv" />
</RelativeLayout>
if i ll give match_parent so obvious it will stretch the image.
Please help me to get out of it.
Here is screen shots of screen -
http://s10.postimg.org/43od5j5h5/screen_shot_layout.png
Set the width of the Image to fill_parent (you can set margins if you want a bit smaller imageView or you could also just set a fixed width)
Use android:adjustViewBounds to keep aspect ratio
Set height to wrap_content (it will take whatever it takes to maintain aspect ratio)
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/icon"
android:id="#+id/imv"
android:scaleType="fitCenter" />
If you want to fit the image on the imageview, replace android:src with android:background in the ImageView in the xml code.
Try to use these lines of code in the layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:scaleType="fitXY"
android:id="#+id/imv" />
In my RelativeLayout, I have a large background picture of an ocean view (1870px x 756px in drawable-xxhdpi) that I center for all the devices :
<ImageView
android:src="#drawable/bg_image"
android:scaleType = "centerCrop"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ImageView>
On top of it, I want to put another Image of a ship (500px x 300px also in drawable-xxhdpi), centred horizontally, but should be 230px away from the top of the screen to be on the horizon line.
<ImageView
android:src="#drawable/another_image"
android:layout_centerHorizontal="true"
android:layout_marginTop="230px"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
I'm not getting the correct results and android is complaining about the use of px as a unit for the margin top.
Results : Device 1 (adjusted on the horizon)
Smaller Device 2 (not adjusted on the horizon):
Any suggestions?
I think you have to use "dp" unit... You could try using diferent devices (emulators, for example) with diferent sizes to guarantee it.
I hope this will help you
Make sure that the horizon on your background image is centered vertically. Then you can use this simple trick of RelativeLayout that will position your ship image above vertical center of the view
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/bg_image"
android:scaleType = "centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ImageView>
<View
android:id="#+id/center"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<ImageView
android:src="#drawable/another_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/center">
</ImageView>
</RelativeLayout>
each device has it's own screen resolution. I think you're using boat image with one screen resolution support. if you want to solve this problem you need to add boat image with different resolutions. Like HDPI,LDPI,MDPI,xhdpi
In my widget I've an image of a refresh icon and circular progress bar (CPB) that is showed when the refresh icon is pressed (obviously only one view can be showed in the same time).
The CPB is too big, so I try to set scaleX and scaleY to 0.7 and my CPB is smaller, but this had the side effect that there is empty space where there was a bigger CPB.
How do I set this 2 view in the same position with the same height and width?
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="right"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/navigation_refresh" />
<ProgressBar
android:id="#+id/progressBar1"
android:scaleX="0.7"
android:scaleY="0.7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</FrameLayout>
I can remove the scale and force the frame layout width and height to 28dp for example, and in this way it works fine, but I'm not sure if this is the best practice to do.
(For example in this way in a tablet with a big screen maybe the images will be a little big bigger because I'm using "dp", but not of the right size. Am I wrong?)
I managed to set views at the same location UNINTENTIONALLY using relative layout.
Try surround the views you want to be on top of each other with relativelayout.
I am using a relativelayout to overlay to images. On all screen sizes so far that I have tested (from 2.7 to 10.1 inch) I always get white space on top of my image. In my IDE I always see that my relativelayout is causing the extra space on top and on the bottom of my image.
Why is that? I have set all height attributes to wrap_content and even added the adjustViewBounds attribute.
Note: You should know that my image is a lot bigger in size, meaning that there will be some sort of scaling.
Thanks for your tips!
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:focusable="true"
android:focusableInTouchMode="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/bgf"
android:textColor="#000000"
android:textSize="25sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingBottom="5dp"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/cde"
android:contentDescription="#string/cde" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/fgh"
android:contentDescription="#string/abc" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
I had the exact problem. After struggling for quite some time, I solved it by following this
and add the following to my program
android:adjustViewBounds="true"
It works perfectly
This is occuring as the image is scaled down to fit the area available without losing the image's aspect ratio. You are getting white space because the image first occupied the available width and according to the aspect ratio of the original image the height of the was brought down.
To get a clearer understanding, I suggest you to do the following :
Set the background color of the relative layout to some color
Now you can understand the space between the imageView and the relativelayout.
Once you have checked that on your device, Do the following change and try again
Set the attribute scaleType = "fitXY" in your imageView.
This will make the image to scale and occupy the complete area available to the imageView. (The aspect ratio of the original image will be lost in this case). Now you will come to know the amount of area the imageView occupied.
I suppose once you do this you can conclude that :
In the first run if you had set the background of relativeLayout as black, it won't be visible since the imageView occupies the entire area without leaving any gap.
In the second run the image will cover the entire height and width, although the aspect ratio was lost. Hence this ascertains that imageView does cover the width and height and no space is left, its the image's aspect ratio ie the problem
In case you arrive at a different result altogether please do inform, we can work it out
EDIT :
Please do remove the paddings you have given for imageView too
I have a layout with two ImageView inside. Each image has a fixed aspect ratio, for example first image is 320x160, second is 320x320. Layout is aligned vertically. I want this two images be glued together and scale to fit one of the screen sides (width or height) and scale the other side proprotionally.
I tried to use scaleType=fitCenter, but the problem is that on different phones with different aspect ratio, images are not together, there is a black area between them.
It seems that I can not use layout:weight because the screens have different ratio (480x854 and 480x800) and I need my layout stays the same scaled proportion.
Any help is appreciated.
Here is my layout for now:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:src="#drawable/im_menu"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:layout_weight="0.7"
>
</ImageView>
<ImageView android:src="#drawable/im_field"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:layout_weight="0.3"
>
</ImageView>
</LinearLayout>
You can use:
android:adjustViewBounds="true"
and set fill_parent to height for example
<ImageView
...
android:layout_height="fill_parent"
...>
adjustViewBounds for my details
You can use layout weight with relative values too. For example, if you want a field with 30% and other with 70%, just set the children views weight with 0.3 and 0.7, and don't specify width nor height in children.
It is explained in the developer guide (tip section):
developer guide - linear layout
Also you may have to use RelativeLayout instead of LinearLayout.