Question

I have a relative layout with 3 ImageViews. The first one is a square image, the second is just used for spacing, and the third one is another square image.

Here is the xml code for that layout:

<?xml version="1.0" encoding="UTF-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/radioSV"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:id="@+id/radioLayout"
    android:orientation="vertical"
    android:gravity="center">

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:gravity="center">

    <ImageView
        android:id="@+id/sssImageView"
        android:src="@drawable/radio_sss_400_r"
        android:layout_width="10sp"
        android:layout_height="10sp"
        android:layout_gravity="center"
        android:scaleType="centerCrop">
    </ImageView>

    <!-- spacing -->

    <ImageView
        android:id="@+id/spacing1"
        android:background="@android:color/transparent"
        android:layout_width="wrap_content"
        android:layout_height="10dip"
        android:layout_below="@id/sssImageView">
    </ImageView>

    <ImageView
        android:id="@+id/gaImageView"
        android:src="@drawable/radio_ga_400_r"
        android:layout_width="10sp"
        android:layout_height="10sp"
        android:layout_gravity="center"
        android:scaleType="centerCrop"
        android:layout_below="@id/spacing1">
    </ImageView>

    </RelativeLayout>
</LinearLayout>
</ScrollView>

Now, I want my app to be useful for various screen densities, so therefore, in the java file, I ask for the density and use a switch-case statement afterwards. In this statement, the size (width, height) of the 2 ImageViews (sssImageView and gaImageView) have to be changed.

For instance, if the density of the screen is high, I want the width and height of the ImageViews to be 200sp. I’ve just put 10sp in the xml as a ‘standard’ value.

This is the part of the use-case statement for high screen density:

case DisplayMetrics.DENSITY_HIGH:
    layoutParams = new RelativeLayout.LayoutParams(val_high, val_high);
    sssImageView.setLayoutParams(layoutParams);
    sssImageView.setMaxHeight(val_high);
    sssImageView.setMaxWidth(val_high);

    gaImageView.setLayoutParams(layoutParams);
    gaImageView.setMaxHeight(val_high);
    gaImageView.setMaxWidth(val_high);
    break;

Also, val_high is 200sp:

int val_high = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, 200, this.getResources().getDisplayMetrics());

Now, the part with the ImageView sssImageView works perfectly. It correctly enlarges the image from 10sp to 200sp (don’t worry – the image is not 10sp originally!).
The problem is the fact that the other ImageView, gaImageView, puts itself on top of sssImageView and destroys the layout. If I comment out the 3 lines with gaImageView, it is on its correct place in the layout, but is still small (10sp) of course.

I have also tried the opposite: commenting out the 3 lines with sssImageView and only manipulating gaImageView. Now the top ImageView (sssImageView) is on its correct place and small as expected. However, the bottom ImageView, gaImageView, positions itself on top of sssImageView, and not below as written in the xml layout file.

What is wrong here?

Answer 1

I managed to solve this problem.

Here is the code for the DENSITY_HIGH case statement:

case DisplayMetrics.DENSITY_HIGH:               
    display = getWindowManager().getDefaultDisplay(); 
    width = display.getWidth();
    height = display.getHeight();               

    // 0.36 is a scaling factor
    int val_high = (int) (height*0.36);

    sssImageView.setId(1);
    gaImageView.setId(2);
    spacing.setId(3);

    layoutParams = new RelativeLayout.LayoutParams(val_high, val_high);
    layoutParams2 = new RelativeLayout.LayoutParams(val_high, val_high);
    layoutParams3 = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 
        (int) TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP, 10, this.getResources().getDisplayMetrics()));

    sssImageView.setMaxHeight(val_high);
    sssImageView.setMaxWidth(val_high);
    relativeLayout.updateViewLayout(sssImageView, layoutParams);            

    layoutParams3.addRule(RelativeLayout.BELOW, sssImageView.getId());
    relativeLayout.updateViewLayout(spacing, layoutParams3);

    layoutParams2.addRule(RelativeLayout.BELOW, spacing.getId());
    gaImageView.setMaxHeight(val_high);
    gaImageView.setMaxWidth(val_high);
    relativeLayout.updateViewLayout(gaImageView, layoutParams2);                
    break;

So generally, it looks like I had to “re-create” the xml file programmatically.