Android button size changes at different devices (width is set to dp)

Question

I am designing an app which needs the customized button. I made it by inheriting the Android Button and I set its width to 300dp in the layout xml. However, I found the size of button is changing on different devices. Here are the example:

My UI in the original device : Galaxy S5

My UI in the new device : Nexus 5X

My UI in another device : Galaxy Note4 (In this trial, I set the left button to use sp instead of dp)

It seems the whole layout scale is smaller in my new device even though both of them are 1080 x 1920 pixels.

I also try to use sp but it behaves the same (problem). My guess is the style? Can any one gives me more thoughts. Thanks!

--- UPDATE --- Hi, let me rephrase my problem.

I am looking for a way to make a button which width is fix to like (relatively) 1/3 screen width at any device . And its text also changes accordingly. I think the ultimate way is to translate everything to pixel and assign those value manually in program. I used to think using dp and sp is an easy alternative to achieve it, but it turns out not :(

Answer 1

If you are using dp then it will change according to device's screen density. In order to keep the button size same in different screen density conditions you need to use pt , in or mm in your button's width.

Please check link : What is the difference between "px", "dp", "dip" and "sp" on Android?

Answer 2

To set width of each child programmaticaly,

view.getLayoutParams().width = getScreenWidth() / VIEWS_COUNT_TO_DISPLAY;

And Screensize as below

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics).widthPixels;

Now, If you want to set Text than use SP for that.

Answer 3

I think here is what you want.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    android:weightSum="3">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_weight="1">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/test"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Normal Charge (Testing)"/>

     </LinearLayout>
</LinearLayout>

With the use of weightSum and layout_weight, you can fix the item as 1/3 width of your screen.

Inside the imageview, android:scaleType="fitXY"
It means that the image will be changed to size in order to match the size of imageview.
You can delete that attribute if you do not want that.

For the image, the best way is to prepare different size of the image inside different folders:
for mdpi it should be 100X100
for ldpi it should be 75X75
for hdpi it should be 150X150 (eg Xperia U)
for xhdpi it should be 200X200 (eg Galaxy S3, Galaxy Note II, Xperia S)
for xxhdpi it should be 300X300 (eg Galaxy S4, Galaxy S5, Xperia Z, Xperia Z1, Xperia Z2)

The above size is just an example, you have to find the base case, i can explain more about that if you need.
Hop that can help, thanks!