How do I create a two-color dialog like this?

Question

I'm looking to create a Dialog styled like the below, but I'm a little stuck. It has rounded corners and two different background colors.

It will contain multiple Textviews in a vertical setup in the end. I tried to make a vertical LinearLayout contain two children that were also vertical LinearLayout, but that did not seem to go over well.

How do you create a view like this, with two colors of background that use the same rounded corners and can contain multiple, vertical items each?

My current code looks like this. I've set a single vertical layout, which uses a rounded-corners white background with padding, and I set the red background on the first two text-views, since they need to be white-on-red. However, their backgrounds can't push out to the edges of their parent because of the padding.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="600dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/warning_dialog_background"
    android:padding="20dp"
    style="@style/dialog" >

    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:background="@color/Warning"       
        style="@style/white"
        android:text="@string/warning_block_explanation"
        android:paddingBottom="30dp"
        />

    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"        
        style="@style/title.warning"
        android:text="@string/warning_block_warning_title"
        />
    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"        
        style="@style/safe.title"
        android:text="@string/safe_title"
        />
    <TextView         
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"        
        style="@style/safe"
        android:text="@string/safe_text"        
        />
</LinearLayout>

Answer 1

You can create custom layout and inflate that layout using setContentView() for dialog;

        custom dialog;

        final Dialog dialog = new Dialog(context);

        dialog.setContentView(R.layout.custom);

        dialog.setTitle("Title...");

        // set the custom dialog components - text, image and button
        TextView text = (TextView) dialog.findViewById(R.id.text);
        text.setText("Android custom dialog example!");
        ImageView image = (ImageView) dialog.findViewById(R.id.image);
        image.setImageResource(R.drawable.ic_launcher);

        Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
        // if button is clicked, close the custom dialog
        dialogButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });

        dialog.show();

Layout for this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
    android:layout_width="match_parent"
    android:layout_height="70"
    android:text="White Text Goes Here"
    android:gravity="center"
    android:textColor="#fff"
    android:layout_marginRight="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="5dp"
    android:textSize="18dp"
    android:background="@drawable/custom_drwable"/>
<TextView
    android:layout_marginRight="5dp"
    android:layout_marginLeft="5dp"
    android:layout_width="match_parent"
    android:layout_height="120"
    android:text="Red Text Goes Here"
    android:gravity="center"
    android:textColor="#F2122B"
    android:textSize="18dp"
    android:background="#fff"/>

</LinearLayout>

drawable for same:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#F2122B"/>
<corners android:topLeftRadius="4dp"
    android:topRightRadius="4dp"/>

</shape>