使布局在所有设备上看起来都不错

Question

I am using an emulator to build my first android app. When I publish my app on my phone with the realease .apk , I don't have the desired results.

<Button
    android:text="Log In"
    android:layout_width="match_parent"
    android:layout_height="100px"
    android:layout_marginTop="482px"
    android:id="@+id/loginButton"
    android:background="#76988F"
    />

What I want is for someone to explain how you can set buttons or any other interface controls to look alike on any devices. All devices are different so let's say I put the margins like this in my XAML and boot up the emulator, I'm going to see the following interface :

-----------------------
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|     MyButton        |
-----------------------

But when I boot it on my device, the button will appear elsewhere :

-----------------------
|                     |
|                     |
|                     |
|       MyButton      |
|                     |
|                     |
|                     |
|                     |
|                     |
-----------------------

Probably because according to the device I'm on and the emulator I tried before, the margin of x pixels won't take me to the same place. How can I make these controls stay on a good place on all devices ?

It is kind of hard to search for that information because I don't have the name of the way to let elements stay in a fixed place.

Answer 1

Because there are many devices with so many different screen sizes, resolutions, etc., probably the main thing you have to avoid is using absolute positions when placing layout elements. The Android SDK has some powerful structures to avoid absolute positioning (ie LinearLayout, RelativeLayout), so try working with them and instead of defining positions like "12dp", use the correct combination of layout_width, layout_height (wrap_content or match_parent) and layout_weight, which can help you to place layout elements without specifying absolute positions.

Answer 2

Seeing your code the first thing i thought is

• Do not use hard coded pixel values in your application code.

You should refer to Best Practices . As the doc says

For performance reasons and to keep the code simpler, the Android system uses pixels as the standard unit for expressing dimension or coordinate values. That means that the dimensions of a view are always expressed in the code using pixels, but always based on the current screen density. For instance, if myView.getWidth() returns 10, the view is 10 pixels wide on the current screen, but on a device with a higher density screen, the value returned might be 15. If you use pixel values in your application code to work with bitmaps that are not pre-scaled for the current screen density, you might need to scale the pixel values that you use in your code to match the un-scaled bitmap source.

Answer 3

Another mistake you made is working with px. Indeed, screens have different densities, and pixels have different sizes depending on this density. So you'll probably prefer using dp, a density dependent measure unit. As for your text sizes you'll have to use sp.

Answer 4

when you use this attribution android:layout_marginTop="482px" , you shouldn't use px. You should use dp.