How to position the view with margin that will look same for all devices?

Question

I'm trying to position a view in the center to make it look good by adding 130 (margin-top) programmatically, however, I'm not sure how to give other android devices such as tablets to look the same? adding 130 to the margin-top looks good on the normal android phone but will look different on a tablet. How will I able to make a logic to give a margin-top that will provide the same look on all devices? Some examples or tip would be great! I would love to hear from you!

margin_top = 130 // How to make this look good on all devices? 

ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
p.setMargins(0, margin_top, 0, 0);
v.requestLayout();

Why don't you use `FrameLayout`/`LinearLayout` with `gravity=center`. Or `RelativeLayout` with `alignSelf=parentBottom`, or Constraint layout? — Khemraj Sharma, Aug 06 '18 at 15:16
A view that is an imageView is in a LinearLayout and that LinearLayout is inside a RelativeLayout. I want to know if it's possible to make a margin that can suit all devices. — Jennifer, Aug 06 '18 at 15:17
I think you can use the `height` or `weight` of the device and a percent for creating the top margin. Something like top margin should be `0.15 * height`. — grrigore, Aug 06 '18 at 15:18
So the center of the parent Linear Layout may not be the center of the Relative Layout? — , Aug 06 '18 at 15:21
@grrigore I feel that the thing you are thinking might be a key for me! Do you know any sample for it? — Jennifer, Aug 06 '18 at 15:22
@mTak Yes, the center of the parent linearlayout is not the center this time! — Jennifer, Aug 06 '18 at 15:22
@user3264924 check out [this](https://stackoverflow.com/questions/10172657/how-to-get-device-height-and-width-at-runtime) answer. — grrigore, Aug 06 '18 at 15:23
@grrigore Thanks for the answer, but since I'm a noob with android I'm not sure what the 0.15 * device height meant. This time I felt that the 130 margin top looked good on the phone, then, in this case, how should I calculate? — Jennifer, Aug 06 '18 at 15:25
@user3264924 This also means that if the parent linearlayout does not cover the necessary area around the center then this problem is unsolvable. — , Aug 06 '18 at 15:26
@user3264924 well, if you know the phone height you can calculate a ratio (phone weight/130) and then try it on a tablet or something (the ration * the device height). I don't know if this works, it was just something that came to my mind. **LE:** I also think everything has to be in pixels. If you can tell me the phone's height I might write an answer and you can try it. — grrigore, Aug 06 '18 at 15:27

grrigore · Accepted Answer · 2018-08-06T15:57:47.583

1

My approach to this is the following:

1). Get the device height. Also check this answer.

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int height = displayMetrics.heightPixels;

2). Calculate the ratio.

You have set a top margin of 130dp I assume. Using pixplicity I managed to convert it to px.

Your phone has a resolution height x weight in pixels. Let's define height as phoneHeight.

Here it becomes a little tricky for me too. As you can see 130dp has different pixel values for ldpi, mdpi, etc. I personally don't know which one you should use, you might try the mdpi one. (I'll try to research more and come back with an answer).

LE:

You can use this method to convert dp to pixels according to your phone. (See this answer).

public static float convertDpToPixel(float dp, Context context){
    Resources resources = context.getResources();
    DisplayMetrics metrics = resources.getDisplayMetrics();
    float px = dp * ((float)metrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT);
    return px;
}

Use the returned px into the formula below. (let's call the returned px - convertedPx.

3). The formula for the top margin's value.

If we use the value of 130dp for mdpi from the table we get 130px. So the formula would be:

margin_top = (convertedPx / phoneHeight) * height

with phoneHeight the height of the phone you are currently testing on and height the height of the device using displayMetrics.

NOTICE: convertedPx will be a constant. You only have to run this method (convertDpToPixel) on your phone to find out how much 130dp mean in pixels.

edited Aug 06 '18 at 15:57

answered Aug 06 '18 at 15:46

grrigore

988
1
20
34

If it's something unclear, please let me know. I'm quite tired and might not explain it very well. – grrigore Aug 06 '18 at 15:58
**NOTICE:** `convertedPx / phoneHeight` raport must be extracted while testing on your phone as a ratio and use this ratio as a constant. Moreover, you might have to convert margin_top to dp again (as `setMargins` method uses dp) , check [this](https://stackoverflow.com/questions/4605527/converting-pixels-to-dp/9563438#9563438) answer for a method. – grrigore Aug 06 '18 at 16:05
Thank you so much!!!! I will check it out! Yes, I will let you know if I find something unclear! – Jennifer Aug 06 '18 at 16:15
1

Thank you so much! Your solution was the best! Problem solved! – Jennifer Aug 09 '18 at 14:50
What is difference between phoneHeight and height? – Pir Shukarullah Shah Oct 24 '18 at 09:16
1

@PirShukarullahShah `phoneHeight` - the height of the phone you are currently testing on (let's say your phone is 120x350) -> `phoneHeight` is 120. `height` - the height of the device using `displayMetrics` (you get this value using the method described in **1).**) – grrigore Oct 24 '18 at 09:27
Sorry for this question but how to get phoneHeight? I am using displayMetrics as phoneHeight. – Pir Shukarullah Shah Oct 24 '18 at 09:39
@PirShukarullahShah Yes, use the method from the **1).** step and save `height` value (write it on a paper) this is `phoneHeight`. – grrigore Oct 24 '18 at 09:53

How to position the view with margin that will look same for all devices?

1 Answers1

Linked