Question

I’ve been having trouble finding a generic way to size UI components so they look good on all devices. I have some ideas but could use any feedback on them or suggestions for better strategies.

Take a simple situation like a dialog with a single EditText which a user will enter a fairly long String into. On smaller devices I would like the EditText to be as wide as possible (because its likely that the maximum size possible on these devices isn’t all that large). However, if I set the width of this EditText to FILL_PARENT, the dialog will look silly on tablets, because it will be much, much wider than it needs to be. Also, setting the width to some hard coded DIP value, like 500, isn’t great because it doesn’t maximize available space on smaller devices, won’t expand to take up additional space if the device is rotated, and could be an issue on devices narrowers than 500 DIP.

What I would like to do is approximate the behavior FILL_PARENT by hardcoding the width of the EditText to of the screen’s width, but to prevent the EditText from growing to wide on large devices by not allowing the width to be larger than some DIP value, like 500.

I have encountered 2 problems with this strategy:

1: If I set the EditText’s width to the screen’s width, the EditText doesn’t fit on the screen (as shown in the below image). I fixed this by setting the width to 90% of screen width, but this is questionable (what if the device’s dialogs have larger margins around them?).

2: My app sets android:configChanges flag in its application manifest such that dialogs don’t get dismissed on rotation. But this means that dialogs don’t get resized on rotation. So, if the device rotates from landscape to portrait while the dialog is visible, then the EditText will be too wide for the screen; and if it goes the opposite direction, then the EditText will not take up all the available space. I guess this would be fixable by relaying out my dialog on rotate, but it seems painful/ugly for my Activity to have to keep track of the visible Dialog and force it to relayout on rotation (particularly because each dialog would then have re-populate any field values when after relayout).

So, any thoughts on improving my solution, or on alternatives?

class SampleDialog extends Dialog
{
    public SampleDialog(Context context) 
    {
        super(context);

        setContentView(getContentView());
    }

    private View getContentView()
    {

        TextView label = new TextView(getContext());
        label.setText("A label:");

        int fiveHundredDips = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 500, activity.getResources().getDisplayMetrics());
        Display display = getWindowManager().getDefaultDisplay();
        float width = .9f * display.getWidth();
        Math.min(width, fiveHundredDips);
        LinearLayout.LayoutParams linearParams = new LinearLayout.LayoutParams((int) width, LinearLayout.LayoutParams.WRAP_CONTENT);

        EditText editText = new EditText(getContext());
        editText.setLayoutParams(linearParams);

        LinearLayout layout = new LinearLayout(getContext());
        layout.addView(label);
        layout.addView(editText);

        return layout;
    }
}

}

Answer 1

You could use different folders in your resources folder, which define different qualifiers for different devices. You can then specify say on a small device you would like a dimension to be ‘x’ big, and on a tablet to be ‘x’ big.

Another solution would be to programatically detect if the device is a Tablet, and perform actions based on that.

I would recommend you look into resource qualifiers, which are a very powerful tool in Android.