Learn Programming Together: Making Borderless Dialog in Android

We are no longer strangers to Dialog in Android anymore, but, how to make a borderless dialog? Towards the flat interface design, this trick is very suitable for this. Through this small tip, I would like to provide the way to make this dialog style through using DialogFragment, hope it can make your app more flexible.
DEMO VIDEO:

Designing layouts

The first important work is designing xml layout. I use a FrameLayout and include some childrens view in it:
Note: use "wrap_content" for root container width/height properties and we can custom dialog dimension based on child view (ImageView).
And the layout for main activity, only include a Button:

Programmatically code

In order to DialogFragment, we must custom a subclass extend from it. To make the borderless style, use STYLE_NO_TITLE when setting it's style in onCreate() method:

setStyle(DialogFragment.STYLE_NO_TITLE, 0);

Locate all views, set their events,...like a normal Fragment, we have a full code for this sub-DialogFragment:

package info.devexchanges.borderlessdialog;

import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

public class BorderlessDialogFragment extends DialogFragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NO_TITLE, 0);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.layout_dialog, container);
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        ImageView btnPlus = (ImageView)view.findViewById(R.id.btn_plus);
        ImageView btnOK = (ImageView)view.findViewById(R.id.btn_ok);
        ImageView btnClose = (ImageView)view.findViewById(R.id.btn_close);

        btnOK.setOnClickListener(onClickListener("Button OK clicked!"));
        btnPlus.setOnClickListener(onClickListener("Button Plus Clicked!"));
        btnClose.setOnClickListener(onCloseClickListener());
    }

    private View.OnClickListener onCloseClickListener() {
        return new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                BorderlessDialogFragment.this.dismiss();
            }
        };
    }

    private View.OnClickListener onClickListener(final String msg) {
        return new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), msg, Toast.LENGTH_SHORT).show();
            }
        };
    }
}

Note: we can close dialog when clicking a button on it by call dimiss() directly on the DialogFragment.
In main Activity, showing dialog by clicking a Button, setCancelable(false) if you don't want to close it when touching outside:

package info.devexchanges.borderlessdialog;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = (Button) findViewById(R.id.btn_dialog);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                BorderlessDialogFragment dFragment = new BorderlessDialogFragment();

                dFragment.setCancelable(false); //don't close when touch outside
                dFragment.show(getSupportFragmentManager(), "Dialog Fragment");
            }
        });
    }
}

When running app, we will have this result:

Conclusions

Over here, you've known more a custom Dialog way to make your application look better. With this borderless style, app interface looks flatter, and Material Design technology also want to target. You can see other tips about Dialog by visit this tag link. As usual, you can see this project on @Github.