Android Alert Dialog - Resize text ? (Change Orientation)

Question

I'm learning Android and i'm trying to avoid this behavior on my app.

This is the result using setMessage on the dialog.

This is the result using setTittle on the dialog.

Is there a way to avoid that the text or the radioButtons gets cut when i change orientation to horizontal ?

I'm using the a custom layout (LinearLayout) with this Alert Dialog for displaying the radioButtons.

I'm also using onCreateDialog to create the Alert Dialog .

@Override
protected Dialog onCreateDialog(int id) {

    Dialog createdDialog;
    AlertDialog.Builder builder = new AlertDialog.Builder(this);
    toDisplayInDialog = getLayoutInflater().inflate(R.layout.light_radiogroup, null);
    builder.setTitle("Choose Startup Color:")
           .setPositiveButton("Set Color",
           new DialogInterface.OnClickListener() {
               public void onClick(DialogInterface dialog, int id) {
                   // Do things on Click
               }
           })
           .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
               public void onClick(DialogInterface dialog, int id) {
                   dialog.cancel();
               }
            })
           .setView(toDisplayInDialog);
    createdDialog = builder.create();
    return createdDialog;
}

Answer 1

The basic problem -- as you'll have guessed -- is that there are too many controls to fit on the screen when in landscape. You need to add a ScrollView so that the user can scroll the UI.

<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:text="Green"
        android:checked="true" />

   ... etc.

</ScrollView>

Update

There are many ways to layout your widgets into two columns. Unfortunately there is no standard Layout that flows controls into multiple columns. However, below is a fixed way to display your five radio buttons.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

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

        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Green" />
        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Black" />
        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Yellow" />

    </LinearLayout>

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

        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Red" />
        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="White" />

    </LinearLayout>

</LinearLayout>

Below is a preview:

Note: You'll probably not want to use this layout when displaying in portrait, only in landscape. You can have both by adding the "layout-land" resource directory where you can add this layout, and use your regular layout in the normal "layout" resource directory. This way the system will choose the layout resource accordingly to if the device is portrait or landscape.

It's twice the work, but your UI will look better for it.

Answer 2

As the screen height is too small for the dialog, the dialog needs to reduce its height to fit its margins and its own padding. As the elements don't fit normally anymore, it needs to decrease their height too. But on TextView's, that does not include scaling, so what you get here is cropping of the title.

That's a completely common issue in Android front-end development - you make yourself a perfect design but face technical issues on certain sizes/densities.

You can try these (I recommend you apply all 3 points if necessary):

1. RadioButton circle crops when its size is reduced. BUT it has some built-in padding included. You can try changing the height of each RadioButton. You'll just need to make sure it results compatible with screens of all densities and sizes.

Alternatively, you can apply these 3 steps:

1) set layout_height of every RadioButton, RadioGroup and the title to "match_parent"

2) set layout_weight of every RadioButton, RadioGroup and the title to "1". Radio buttons will be equally distributed within the container, and container and title will be of same height.

3) increase layout_weight of the title as much as necessary.

Method above will reduce title size and increase the RadioGroup size while distributing RadioButton's evenly inside.

2. Judging by cropping not happening immediately above RadioGroup, that probably means you have padding_bottom on the title. You should remove/decrease padding_bottom from the dialog title. If you need the padding in vertical mode, you can create 2 different layouts like in this answer, or take care of that programmatically through onConfigurationChanged like described here (removing padding_bottom in horizontal mode, and recovering it in vertical).

3. As you're using your own layout for the dialog, it seems to me like layout_height of your title might be set to "match_parent" or "fill_parent". You could try replacing it with "wrap_content", although it would have a different undesirable effect.