Tip: Shape/Border/Circle Image in Android

    Sometimes, to make a better-looking photos/images view, we usally round it corner or change it's shape to circular, creat a border around it...In all listed features, the most complex maybe changing image shape (circular, star,...). Through this post, I would like to introduce a libary can make this trick so well: SelectableRoundedImageView. With it, user can select the "image corner" to round and some another similar features.
    DEMO VIDEO:

   Firstly, to use this libary, please add dependency to app/build.gradle file before start coding (libary will be referenced libary to current project from MavenCenter):

compile 'com.joooonho:selectableroundedimageview:1.0.1'

   We can customizing ImageView shape in xml file with some special properties provide by this lib:
- sriv_left_top_corner_radius: top left corner radius (default is 0).
- sriv_left_bottom_corner_radius: bottom left corner radius.
- sriv_right_top_corner_radius: top right corner radius.
- sriv_right_bottom_corner_radius: bottom right corner radius.
- sriv_border_width: image border thickness.
- sriv_oval: make a circular ImageView with this.
I put 4 type of ImageView in main activity layout simple like this:
    Moreover, we can create SelectableRoundedImageView by programmatically code, like lib's doc say, initializing it with some properties is so simple:

SelectableRoundedImageView sriv = new SelectableRoundedImageView(context);
sriv.setScaleType(ScaleType.CENTER_CROP);
sriv.setCornerRadiiDP(4, 4, 0, 0);
sriv.setBorderWidthDP(4);
sriv.setBorderColor(Color.BLUE);
sriv.setImageDrawable(drawable);
sriv.setOval(true);

    In this main activity, I also provide a customizing SelectableRoundedImageView, which can change style/shape by user (described in video), so over here, we have full activity code:

package devexchanges.info.roundimages;

import android.app.Dialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.ImageView;

import com.joooonho.SelectableRoundedImageView;

public class MainActivity extends AppCompatActivity {

    private SelectableRoundedImageView imageView;
    private View btnOption;

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

        imageView = (SelectableRoundedImageView) findViewById(R.id.image);
        btnOption = findViewById(R.id.btn_set);

        btnOption.setOnClickListener(onClickListener());
    }

    private View.OnClickListener onClickListener() {
        return new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // custom dialog
                final Dialog dialog = new Dialog(MainActivity.this);
                dialog.setContentView(R.layout.layout_dialog);
                dialog.setTitle("Set Image Radius");

                // set the custom dialog components - text, image and button
                final EditText topLeftTxt = (EditText) dialog.findViewById(R.id.left_top_edt);
                final EditText topRightTxt = (EditText) dialog.findViewById(R.id.right_top_edt);
                final EditText bottomLeftTxt = (EditText) dialog.findViewById(R.id.left_bottom_edt);
                final EditText bottomRightTxt = (EditText) dialog.findViewById(R.id.right_bottom_edt);
                final CheckBox chkIsOval = (CheckBox) dialog.findViewById(R.id.checkbox);

                View btnCancel = dialog.findViewById(R.id.btn_cancel);
                View btnOK = dialog.findViewById(R.id.btn_ok);

                btnOK.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        imageView.setImageResource(0);
                        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                        imageView.setImageResource(R.mipmap.photo_sample);
                        imageView.setCornerRadiiDP(getInt(topLeftTxt), getInt(topRightTxt),
                                getInt(bottomLeftTxt), getInt(bottomRightTxt));
                        imageView.setBorderWidthDP(2);
                        imageView.setBorderColor(Color.BLUE);

                        if (chkIsOval.isChecked()) {
                            imageView.setOval(true);
                        } else imageView.setOval(false);

                        dialog.dismiss();
                    }
                });

                btnCancel.setOnClickListener(new View.OnClickListener() {

                    @Override
                    public void onClick(View v) {
                        dialog.dismiss();
                    }
                });

                dialog.show();
            }
        };
    }

    private int getInt(EditText editText) {
        if (!editText.getText().toString().trim().equals("")) {
            return Integer.parseInt(editText.getText().toString().trim());
        } else {
            return 0;
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
}

    After runing app, this screen will be:

    Adding some necessary files to comple our project:
- Layout for customizing Dialog: Output:

- Strings resource:
    Conclusions: I've finished provide a demo project for SelectableRoundImageView libary, with it, I hope you have more way to customizing ImageView, make your app looking better. Moreover, you should see another similar libaries project, typical like RoundImageView, and choose the suitable one! Don't forget to subscribe my site to receive newest posts! :D

Author : Hong Thai

Share