Problem with UI on different screen sizes

Android Android Development
1

Hey Friends,

First of all I’m new on this forum and this is my first post.

I am am using image as BG of the app and for buttons…but where I am facing problem is like while I have mentioned 60dp margin from top…it is working for current layout but on smaller or larger device it is casing problems like the layout is getting distorted.

Also using .9.png image to avoid px sizing problem.

So can anyone help me with like what should I do to make the layout looks same on every device?

I know on one side its a simple question but on the other end its the most complicated question…

So any help would be appreciated.

Thanks

2

Read: Supporting Multiple Screens | Android Developers
and this:
More Resource Types | Android Developers

Then you can do this:
<LinearLayout android:margin="@dimen/my_top_margin" …

and in a res/values/blah.xml file have this:
<dimen name=“my_top_margin”>20dp</dimen>

And for each resolution create a different res/values/blah.xml file…

3

I had the same problem on my last app and solved it by getting the exact dimensions of the screen in pixels, then splitting this dimension into 10 parts. So each part is exactly 10% of the screen in pixels. Then I set the button margins I want with these percentages. So the screen looks the same no matter what size device is being used. You can easily modify this code for your images instead.

Example:

I have a button in a relative layout that needs to be an exact width, height and position on the screen for the app to work right. Margins in dp does not do this for me:


 //
  setButtonDimensionAndPosition(myHeadButton, 4.3, 1.3, 1.5, 1.4);
 // 
  private void setButtonDimensionAndPosition(Button myButton, double XPos, double YPos, double width, double height)
 {
    WindowManager w      = getWindowManager();
    Display d                    = w.getDefaultDisplay();
    DisplayMetrics metrics = new DisplayMetrics();
  //
    d.getMetrics(metrics);
  //
    _SCREENW = metrics.widthPixels;
    _SCREENH = metrics.heightPixels;
  //
  //
  //
    int width10Perc  = (int)(_SCREENW * .1);
    int Height10Perc = (int)(_SCREENH * .1);
  //
    int buttonXPos   = (int)(width10Perc * XPos);
    int buttonYPos   = (int)(Height10Perc * YPos);
  //  
    int buttonW     = (int)(width10Perc * width);
    int buttonH     = (int)(width10Perc * height);
  //
  //
    RelativeLayout.LayoutParams buttonRLO = (RelativeLayout.LayoutParams) myButton.getLayoutParams();
  //
    buttonRLO.setMargins(buttonXPos,buttonYPos,0,0);
  //
    myButton.setWidth(buttonW);
    myButton.setHeight(buttonH);    
    myButton.setLayoutParams(buttonRLO);
  // 
  }
4

Ok but dont you think that would be too much tiresome to take measurements of the screen or making different xml’s for each size…Im not going against you guys but just asking you…

Thanks for your replies

5

you can have different layout.xml files , in res/layout folder keep the files for normal screen and in res/layout-sw600dp keep your logic for tablets an so on…

6

Maybe if you posted pics of both screens we can help you solve this in a different way. I suspect I may not be fully grasping your problem.

7

ok I will post the ASAP…Im in office right now…so will post when I will reach home :slight_smile:

8

I agree too with @mrBruce. And @coolbud012, yes its tiresome to create different layout for each size… But its much needed if you want to target all devices. Note : there are some techniques to make your layout responsive.

9

@Ahamed - can you please help with that?

I mean by mentioning all the techniques by which we can make the layout responsive?

Thanks

10
  1. Use GridView
    …
    …
    …
11

Take a look at this pdf. This will give insights into making the layouts responsible with cardviews. Going Responsive with Google Play - Google Präsentationen

12

Here is the screenshot of what I was talking about.

Thanks

13

Oh dear, that’s why I wanted a screen shot. There’s nothing wrong with your images.

Just set your text size depending on screen pixels or DPI(mdpi,hdpi,etc).