I am developing an application for android. My main layout is a RelativeLayout.
When I'm opening the app for debug within a large-screen emulator, everything works fine.
But when I open it on a QVGA device, I see al the layout distorted.
Do I actually need to make a new layout for every screen size? I have seen at some places that android can automatically stretch everything to fit the layout...
Developer.android.com says:
By default, Android resizes your application layout to fit the current device screen.
(http://developer.android.com/guide/practices/screens_support.html)
Could you please help me figure out why a layout would look distorted ion a small device?
As you can see the images do get stretched, but the layout is not displayed well.
Thanks in advance!
Big Screen Image http://www.interload.co.il/upload/6549026.png
Small Screen Image http://www.interload.co.il/upload/9617759.png
Edit: XML code of the problematic page.
All the graphics are in "drawable-hdpi" folder, but again, the problem is not with the images themselves, but with the layout.
<?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:background="#drawable/background" xmlns:android1="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/selectionHead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/header" />
<ImageView
android:id="#+id/chooseFormatTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/selectionHead"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:src="#drawable/step1_choose_format" />
<ImageView
android:id="#+id/videoBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="42dp"
android:onClick="VideoClick"
android:src="#drawable/step1_video" />
<ImageView
android:id="#+id/orTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/videoBtn"
android:layout_centerHorizontal="true"
android:layout_marginBottom="19dp"
android:src="#drawable/step1_or" />
<ImageView
android:id="#+id/audioBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/orTxt"
android:layout_alignLeft="#+id/videoBtn"
android:layout_marginBottom="22dp"
android:layout_centerHorizontal="true"
android:onClick="AudioClick"
android:src="#drawable/step1_audio" />
<ImageView
android1:id="#+id/step1Share"
android1:layout_width="wrap_content"
android1:layout_height="wrap_content"
android1:layout_alignBottom="#+id/selectionHead"
android1:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="5dp"
android1:src="#drawable/share" />
</RelativeLayout>
Do I actually need to make a new layout for every screen size?
You need to make a new layout when your existing layouts do not work and you elect to make a new layout instead of solving the problem in other ways.
Could you please help me figure out why a layout would look distorted ion a small device?
Your layout is perfectly fine, insofar as it is doing precisely what you told it to do:
The video button is 42dp above the bottom of the layout
The "or" line is 19dp above the video button
The audio button is 22dp above the "or" line
That is 83dp plus the sizes of the various images, which clearly makes it too tall.
If that is not what you want it to do on a small screen, either:
Come up with a different layout for -small devices, or
Use dimension resources instead of hard-coded values, and use different values for those dimension for -small devices, or
...
Related
How can i make an app to fit all screen sizes using relative layout?
At the moment i am using constant values for the button positions and sizes and it looks good only on HTC One S. That's the device i am using for development.
I want the buttons to be on the appropriate positions on every display.
I have one background in the app, that's the HUD you can see it here:
The buttons and the LED must be in the exact locations inside the holes. And it looks like this:
The layout:
<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"
android:background="#drawable/hud"
android:orientation="horizontal"
android:splitMotionEvents="false"
android:windowEnableSplitTouch="false"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/connect_button"
android:layout_width="122sp"
android:layout_height="122sp"
android:layout_marginLeft="338dp"
android:layout_marginTop="54dp"
android:background="#drawable/connect_inactive"
android:contentDescription="#string/connect_button_description" />
<ImageButton
android:id="#+id/disconnect_button"
android:layout_width="122sp"
android:layout_height="122sp"
android:layout_marginLeft="338dp"
android:layout_marginTop="195dp"
android:background="#drawable/disconnect_inactive"
android:contentDescription="#string/disconnect_button_description" />
<ImageButton
android:id="#+id/throttleup_button"
android:layout_width="122sp"
android:layout_height="122sp"
android:layout_marginLeft="483dp"
android:layout_marginTop="54dp"
android:background="#drawable/throttleup_inactive"
android:contentDescription="#string/throttleup_button_description" />
<ImageButton
android:id="#+id/throttledown_button"
android:layout_width="122sp"
android:layout_height="122sp"
android:layout_marginLeft="483dp"
android:layout_marginTop="195dp"
android:background="#drawable/throttledown_inactive"
android:contentDescription="#string/throttledown_button_description" />
<ImageButton
android:id="#+id/moveforward_button"
android:layout_width="170sp"
android:layout_height="160sp"
android:layout_marginLeft="79dp"
android:layout_marginTop="30dp"
android:background="#drawable/control_forward_inactive"
android:contentDescription="#string/moveforward_button_description" />
<ImageButton
android:id="#+id/movebackward_button"
android:layout_width="170sp"
android:layout_height="160sp"
android:layout_marginLeft="79dp"
android:layout_marginTop="153dp"
android:background="#drawable/control_backward_inactive"
android:contentDescription="#string/movebackward_button_description" />
<ImageButton
android:id="#+id/moveleft_button"
android:layout_width="170sp"
android:layout_height="160sp"
android:layout_marginLeft="17dp"
android:layout_marginTop="92dp"
android:background="#drawable/control_left_inactive"
android:contentDescription="#string/moveleft_button_description" />
<ImageButton
android:id="#+id/moveright_button"
android:layout_width="170sp"
android:layout_height="160sp"
android:layout_marginLeft="141dp"
android:layout_marginTop="92dp"
android:background="#drawable/control_right_inactive"
android:contentDescription="#string/moveright_button_description" />
<ImageView
android:id="#+id/led"
android:layout_width="45sp"
android:layout_height="45sp"
android:layout_marginLeft="297dp"
android:layout_marginTop="280dp"
android:background="#drawable/led_inactive"
android:contentDescription="#string/led_description" />
</RelativeLayout>
Instead of hard coding the values, use the dimen files for this purpose.
Specify different folders for values,like values-large etc, and create dimension files and put specific values according to screen size.
Use weight for all Layouts instead of giving constant values, Because weight is a type of % for screen and in manifest by default support screen view is true.
Create a Multiple Screen size layout folders like this
layout-small , layout-large , layout-xlarge so u copy your layout XML files in to these folder and now u can edit the specified width and size of the boxes .
These links will help you to create application for multiple screens :
http://developer.android.com/training/multiscreen/screensizes.html
http://developer.android.com/guide/practices/screens_support.html
These are android's official documents on implementing support for multiple screen sizes.
http://developer.android.com/guide/practices/screens_support.html
please look at following link
http://developer.android.com/training/multiscreen/screensizes.html
I feel like I'm the only one lost here. Everyone seems to be fine with using DP to make apps work across multiple screen sizes. For me, whenever I load up another screen, the alignment will never be the scale properly.
However, if I use android:weight everything will scale fine across all devices. The problem I have with android weight for everything is that it doesn't always want to resize images well into layouts, not to mention the warnings I'll get for using nested weights.
One solution I see is creating a new screen size for each possible screen sizes out there. Is this what everyone else does? At first I thought we'd have to only create the x-large, small, etc layouts only to find that even these don't cope for various screen sizes (even the nexus 7 doesn't fall well into any of these categories).
Sample code
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#drawable/layout_border"
android:padding="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:contentDescription="#string/app_name"
android:src="#drawable/yg" />
<ProgressBar
android:id="#+id/progressBar2"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/imageView1"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:progress="50" />
<TextView
android:id="#+id/textView1"
style="#style/NormalFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/progressBar2"
android:layout_alignLeft="#+id/progressBar2"
android:layout_marginLeft="36dp"
android:text="#string/exercise_percent" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_above="#+id/textView1"
android:layout_toRightOf="#+id/imageView1"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:background="#drawable/start"
android:onClick="meditateTask" />
</RelativeLayout>
For example, here the imagebutton I have will be out of place on every new screen size.
You can create same layout for all screen sizes, small, normal, large and x large.
How can you do that: Make new XML layout file in layout folder, make it so it has same name as the layout you want to modify to fit for all screen sizes. Click next, and there will be some options shown, find Size and insert it. Then you will be able to chose which screen size you want.
And when launched, system will chose best screen size for device.
Repeat for all 4 screen sizes. Hope this helps
I am new to Android, but I still managed to design an app that runs just fine on my smartphone. I read the tutorial about Android support for different screen sizes and I thought: "Ok, that's great, Android itself will scale the app in order to fit other screen sizes. I just need to have different images for different resolutions so that they will look better."
Well, it seems I didn't understand how it works exactly. By using a Virtual Device within Android SDK, I run my app on a smaller screen size. Unfortunately, there was no automatic "scaling" and half of my app layout is not shown on the screen. An imageButton that on my smartphone was one sixth of the screen, it occupies maybe one third of this new smaller screen.
What did I forget? I read some explanations and other posts but the info I got seemed to indicate an automatic scaling that doesn't happen... Maybe I miss some basic rule?
Thank you
EDIT:
Here below I add a bit of my code as an example. How should I change it in order to make the ImageButtons fill the smartphone screen in the same way, even if the screen sizes change? (if it's possible).
<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"
android:background="#drawable/greenbackground"
tools:context=".GameFrame" >
<ImageButton
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:layout_marginTop="27dp"
android:background="#android:color/transparent"
android:clickable="false"
android:contentDescription="#string/app_name"
android:src="#drawable/empty" />
<ImageButton
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image1"
android:layout_alignTop="#+id/image1"
android:layout_marginLeft="16dp"
android:background="#android:color/transparent"
android:clickable="false"
android:contentDescription="#string/app_name"
android:src="#drawable/empty" />
<ImageButton
android:id="#+id/image3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_toRightOf="#+id/image2"
android:layout_alignTop="#+id/image2"
android:background="#android:color/transparent"
android:clickable="false"
android:contentDescription="#string/app_name"
android:src="#drawable/empty" />
</RelativeLayout>
You need to use a ScollView in order to display UI elements which aren't visible on the small screens. Keep in mind that a ScrollView can only have one child:
<ScollView
[...] >
<MyParentLayout
[...] >
<MyUiElements
[...] >
</MyParentLayout>
</ScollView>
I'm building a graph which consists of 2 images: 1 background image and one image containing the actual data points. The data points image show be aligned at the top of the background image.
The layout looks like this:
<RelativeLayout
android:id="#+id/graphImageWrap"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/graphImageBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
android:contentDescription="#string/stroom_grafiek"
/>
<ImageView
android:id="#+id/graphImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/graphImageBackground"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
android:contentDescription="#string/stroom_grafiek"
/>
</RelativeLayout>
This works well on a HDPI device:
But on a MDPI device it doesn't align properly:
I hope someone can explain what the problem is.
You may want to use a FrameLayout instead, and make sure the images are the same size.
I'm struggling to finish my Android app, but I'm having some problems with the UI. My problem is very basic, I've developed the UI using the default AVD when using AVD manager in Eclipse (HVGA, with a density of 160 dpi), and when I execute the app I see it as I designed, but if I change the target device (i.e. WVGA or QVGA) all the components in the layout are in a different position than the original. As far as I saw in the recommendations for support multiple screens, I should not use AbsoluteLayouts, in fact I'm using RelativeLayouts, I'm not using "px" for the dimensions (or positions), just "wrap_content" or "fill_parent", and in case I need an specific position I'm using "dp" (tested too with "sp"), also I've scaled the images for ldpi (0.75x), and still have the issue (not a particular screen, the hole app) ...so, my question is, is there any other UI tip that I'm missing?.
I'm putting a sample code and the results that I observe when testing it with a HVGA AVD (bigger image) and with a QVGA AVD. As you can see, the position of the yellow/green squares is different, as well as the size of the last row of images.
PS: I'm using a TabLayout also, so the background is loaded through code (tabHost.setBackgroundDrawable(getResources().getDrawable(R.drawable.background1)))
Any help will be appreciated.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/row1"
android:layout_centerHorizontal="true"
android:layout_marginTop="140dp"
>
<ImageView
android:id="#+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button1"
/>
<ImageView
android:id="#+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button2"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#id/row1"
android:layout_centerHorizontal="true"
>
<ImageView
android:id="#+id/btn3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button3"
/>
<ImageView
android:id="#+id/btn4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clickable="true"
android:onClick="method1"
android:src="#drawable/button4"
/>
</LinearLayout>
</RelativeLayout>
Your layout looks fine to me, except for having that white box title on the background as it will make more difficult to put things in their position. Also, RelativeLayout does not have orientation but that is ignored.
In the bigger screenshot it looks like there is more space between the white box and the top of the screen. What it does not make sense to me is the different size in the second row. Are you 100% sure you are loading the correct images in the smaller screenshot?
You need to create different layout for diff. resolution i.e for large screen use layout-large folder..
I hope this link help to you.
Did you follow the steps given on the developer site to make ur app to support multiple screens?