Android - ImageView - Multiple Screen Support - Set height/width as dp or match_parent/wrap_content?

Question

I am currently trying to adjust my Android App so it will look and feel similar on multiple screens/devices.

I know by now that a major part in this is to provide multiple image sizes for every image file according to the x1, x1.5, x2, x3, x4 ratios for mdpi, hdpi, xhpi, xxhdpi and xxxhdpi respectively, and I have finished doing so today.

After doing this, I have defined Density independent Pixel dimensions in the @dimen.xml values resource that correspond with the actual image sizes in pixels of the MDPI resources. Subsequently, i have set the imageviews in question's layout_width and layout_height to this dimension.

I am currently at a loss, however, as to why my application still looks significantly different on an MDPI emulator than it does on an HDPI emulator. To highlight what I mean, I'll provide the following screenshot showing the HDPI and MPDI emulator next to one another (left is HDPI ( 4" WVGA Nexus S ) and right is MDPI ( 5.4" FWVGA )). I want both of them to look like the MPDI version, but what I've done so far apparently isn't working.

I have three theories of my own as to why this is not working the way I intend it to:

1. I am not supposed to set ImageView layout_width and layout_height to a dp value, but rather match_parent or wrap_content (?) (and change the structure of my .xml layouts in the process).

2. I am not only supposed to define multiple drawable resources, but also multiple layout resources for different screen sizes (?).

3. I have misunderstood the entire idea behind how this is supposed to work (?).

I will also give you an example of one of the list items that can be seen in the first screenshot ( @drawable/phone_speed_icon is a 64 x64 pixel resource in MPDI and a 96x96 resource in HDPI, and @dimen/icon_attribute_size is 64dp ):

        <LinearLayout
            android:id="@+id/llSpeed_PreSession"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="10dp"
            android:paddingEnd="20dp"
            android:paddingStart="20dp"
            android:weightSum="100">

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="@dimen/icon_attribute_size"
                android:layout_weight="20"
                android:weightSum="100">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="70"
                    android:gravity="center"
                    android:orientation="vertical">


                    <ImageView
                        android:layout_width="@dimen/icon_attribute_size"
                        android:layout_height="@dimen/icon_attribute_size"
                        android:src="@drawable/phone_speed_icon" />

                </LinearLayout>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="30"
                    android:gravity="center_vertical"
                    android:paddingStart="10dp"
                    android:text="Speed"
                    android:textAppearance="@android:style/TextAppearance.Large"
                    android:textColor="#878787"
                    android:textStyle="bold" />

            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="80"
                android:gravity="center">

                <android.support.v7.widget.SwitchCompat
                    android:id="@+id/swSpeed_PreSession"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent" />
            </LinearLayout>

        </LinearLayout>

In the end, I have four questions that I'd like answered:

1. How do I make the list items in screenshot 1 look the same on MDPI devices as HDPI devices? Does this have anything to do with one of the three theories I mentioned earlier?

2. Why is the header text ("What do you want to measure?") wrapped on one device, but not on the other? They use the sp unit (via android:style/TextApperance.TextApperance.Large )?

3. Shouldn't everything be more spaced out on an HDPI device (if anything) rather than less spaced out? The HDPI emulator looks as if it "has got way less pixels available", if you can understand what I'm saying even a little.

4. How do I make the Fragments on the second screenshot look the same? Or should i not even want this, because the HDPI is (for some reason) physically smaller, which is why the layout is less spread out?

Anyway, I have been at this all day and the more I read the more thouroughly confused I get, so any help is greatly appreciated!

Answer 1

You have the option to create multiple dimens.xml files depending on a variety of factors. Here you'll see what my current project looks like with the various dimens.xml files in Android Studio based on screen width.

However, you can have different requirements for each dimens file you want. For example, you can create dimens files for each density: