Creating a native material design alert dialog

Question

Android Studio 1.4
compile 'com.android.support:appcompat-v7:22.2.1'

Hello,

I have created the following Material Design dialog box. But the EditText box doesn't follow the design concept. As it matches the parent in width. I need the EditText to get the user input. I don't want to use any libraries as I would rather do this natively.

This is what I have right now:

This is the style I am using:

<style name="InvitationDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">#FFCC00</item>
    <item name="android:textColorPrimary">#FFFFFF</item>
    <item name="android:background">#5FA3D0</item>
</style>

And here is the code for creating the dialog:

        final AlertDialog builder = new AlertDialog.Builder(getActivity(), R.style.InvitationDialog)
                .setPositiveButton(R.string.invitation_accept, null)
                .setNegativeButton(R.string.invitation_decline, null)
                .create();

        final EditText etNickName = new EditText(getActivity());
        builder.setView(etNickName);
        builder.setTitle(R.string.accept_invitation);
        final String username = "steve";
        final String roomName = "happy room";
        builder.setMessage(username + " has invited you to join " + roomName + " for lots of fun chatting");

        builder.setOnShowListener(new DialogInterface.OnShowListener() {
            @Override
            public void onShow(DialogInterface dialog) {
                final Button btnAccept = builder.getButton(AlertDialog.BUTTON_POSITIVE);
                btnAccept.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if(etNickName.getText().toString().isEmpty()) {
                            Toast.makeText(getActivity(), "Enter a user name", Toast.LENGTH_SHORT).show();
                        }
                        else {
                            Log.d(TAG, "You have entered: " + etNickName.getText().toString());
                            builder.dismiss();
                        }
                    }
                });

                final Button btnDecline = builder.getButton(DialogInterface.BUTTON_NEGATIVE);
                btnDecline.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Log.d(TAG, "Invitation declined");
                        builder.dismiss();
                    }
                });
            }
        });

        /* Show the dialog */
        builder.show();

Many thanks for any suggestions,

Answer 1

As far as I can see, the biggest problem would be the margins. For this, you can add some attributes in the layout file of your dialog. For example:

<EditText
    android:id="@+id/etName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/tvInvitationText"
    android:layout_marginTop="24dp"
    android:layout_marginLeft="24dp"
    android:layout_marginRight="24dp"
    android:lines="1"
    android:maxLines="1"
    android:inputType="text"
    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
    android:hint="@string/sEnterYourName" >

    <requestFocus />
</EditText>