Question

I’m trying to figure out designing for multiple screen sizes/densities/etc. I thought “dp” was my answer but it’s not working the way I thought it was going to.

Here’s what I’m trying to do:

I have a header and footer section for menu items that remain static. Then I have a ScrollView between the 2. Within the ScrollView is several “blocks” that display various information. I want those blocks to always expand to the full width of the screen. I want the height of those blocks to simply scale appropriately to keep a proper 1:1 -> height:width scale. I also want the TextViews/Images/Buttons/etc to scale and keep their position within the block. If the Blocks height get too big for the screen, that’s where the ScrollView comes in. If they fit just fine, that’s OK too. I mainly want to scale to width and let the user Scroll if necessary.

Currently if the screen gets wider, the Blocks get really wide but don’t scale the height to match them in.

Here’s a basic (simplified for readabilities sake) rundown of what my XML layout code looks like. Also note that each block may be a different size. I’m not looking for a “take up 25%” solution. The blocks have fairly complex and completely different layouts within them.

<LinearLayout>
    <RelativeLayout>Header stuff</RelativeLayout>

    <ScrollView> //height and width = match_parent width lower priority than header/footer

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="???" //Had been using a specified "dp" value but that didn't work like I thought. What goes here?
        >
                Block#1 with lots of TextViews, ImageViews and Buttons...etc
        </RelativeLAyout>

        <RelativeLayout>
                Block#2
        </RelativeLAyout>

        <RelativeLayout>
                Block#3... etc
        </RelativeLAyout>

    </ScrollView>

    <RelativeLayout>Footer stuff</RelativeLayout>

</LinearLayout>

Answer 1

One way of achieving ‘perfect’ 1:1 ratio (or other predefined ratios) of a view is to create your custom extension of it and override the onMeasure() method. in your case you might want a SquareRelativeLayout with an onMeasure() method looking something like this:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width, width);
}

Edit:
If you want a custom ratio, you can define it somewhere and measure your View like this:

float ratio = 0.5f;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width, ratio*width);
}

If you know how to create your own xml-attributes you can add the ratio attribute and get it from there, meaning you don’t have to create a new View for each different ratio.