4

I'm working on an android app that we're targeting for all screen sizes? How do i go about making my layouts? Shall i make a different layout.xml for each type of screen or is there any other "efficient" way of doing things?

Vincent Mimoun-Prat
  • 28,208
  • 16
  • 81
  • 124
Sultan Saadat
  • 2,268
  • 6
  • 28
  • 38
  • Yes i got an **efficient** way of handling `layouts` for different screen resolutions, please check my answer http://stackoverflow.com/a/16518557/1939564 – Muhammad Babar May 13 '13 at 10:24

3 Answers3

6

Read Supporting Multiple Screens, specially the section "Best practices for Screen Independence".

Basic rules:

  • Use wrap_content, fill_parent, or the dp unit (instead of px), when specifying dimensions in an XML layout file
  • Do not use AbsoluteLayout
  • Do not use hard coded pixel values in your code
  • Use density and/or resolution specific resources
  • In practice, even if your layout will work on tablets, you will also want to provide different layouts for those extra large devices to enhance user experience.

Edit concerning your screenshots.

<ImageButton
        android:id="@+id/btnSubmit"
        android:src="@drawable/submit"
        android:layout_height="22dp"
        android:layout_width="85dp"
        android:layout_marginTop="15dp"
        android:layout_below="@+id/confirmpassword"
        android:layout_centerInParent="true" />

You specify here two vertical constraints that might not play well together. Instead of layout_centerInParent, try layout_centerHorizontal.

You could also give a gravity="top|center_horizontal" to your RelativeLayout. So by default the elements get centered in the view horizontally and get sticked to the top.

Also try to align firstname below btnSignin instead of username. You might be lucky.

RelativeLayout is the most complicated layout to use. If you can't get it right after some time, you could simply decide to fall back on using combinations of nested LinearLayout

Vincent Mimoun-Prat
  • 28,208
  • 16
  • 81
  • 124
  • I am already using dp as the unit, I've read the page but when i view my app on a large screen the components go haywire. I always use relative layout. so how do i go about fixing this? – Sultan Saadat Apr 20 '11 at 07:23
  • Provide screenshots in your question, one for standard screen and one showing the problem. Along with the layout XML. – Vincent Mimoun-Prat Apr 20 '11 at 07:24
  • here is the xml file http://pastie.org/1814546 and here are the images of both normal layout http://yfrog.com/hs409zyj and large layout http://yfrog.com/h7r31ujj – Sultan Saadat Apr 20 '11 at 07:49
  • hi, did you get a chance to see this? – Sultan Saadat Apr 20 '11 at 08:02
  • Made some comments in edited answer. Will give you some hints, but you'll need to search a lot by yourself :) – Vincent Mimoun-Prat Apr 20 '11 at 08:08
  • I am getting the same problem. When I see my app in a tablet it get totally different. I'm losing my hair, I couldn't find any solution for this problem. – gandarez Jun 01 '12 at 01:42
2

For landscape and portrait mode, you can use different xmls, incase u need to display your screen according to the orientations. I have been using this method for my apps. As for support of multiple screen, you can go with relative layout as parent node. Dont go with absolute layout.

Vinay
  • 193
  • 1
  • 10
1

you have to take relative layout for any dynamic screen & all measurement will be in percent(%) or u can use the property(fill parent or wrap content), by do so u can somewhat manage layout for different screen

  • I am already using a relative layout but instead of using %ages I'm using dp as per some senior developers recommendations. Do i have to make multiple layout.xml files or not for each screen? and what about portrait and landscape orientation. – Sultan Saadat Apr 20 '11 at 07:20
  • 1
    You can use any layout but AbsoluteLayout. You are not restricted to RelativeLayout. Measurements can be in dp/dip/sp. – Vincent Mimoun-Prat Apr 20 '11 at 07:21
  • Display display = act.getWindowManager().getDefaultDisplay(); DisplayMetrics displaymetrics = new DisplayMetrics(); Window manager wn=(WindowManager) context.getSystemService(Context.WINDOW_SERVICE); act.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics); –  Apr 20 '11 at 07:28
  • (%) in terms that first u calculate the total avail size in the screen & from that u can decide that ex. 5% is for textview & 10% for imageview now got? –  Apr 20 '11 at 07:29
  • onCreate calculate ur total avail screen size, widt=320 then 5% 320=16 that is for ur any control i.e. textview & so on... –  Apr 20 '11 at 07:39
  • Really? I have to resize programmatically all images? – gandarez Jun 01 '12 at 01:45