how to make a circular hole and that circular hole should appear on top of a view pager with some images?

Question

This above image is showing full as rectangle . Below is the source code for the program that i have tried. The program on execution displays the images with no issues.

But what I want is a circular mask on the view . Like this.

**activity_main**

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/fragment"
android:name="com.example.shrishyl.circleview.MainActivityFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:layout="@layout/fragment_main" />

fragment_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>

swipe_fragment

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/black" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"/>
</RelativeLayout>

MainActivity

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Paint;
import android.graphics.Shader;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class MainActivity extends FragmentActivity
{
    static final int NUM_ITEMS = 4;
    ImageFragmentPagerAdapter imageFragmentPagerAdapter;
    ViewPager viewPager;
    public static final String[] IMAGE_NAME = {"antartica", "croatia", "iceland", "india"};

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    imageFragmentPagerAdapter = new ImageFragmentPagerAdapter(getSupportFragmentManager());
    viewPager = (ViewPager) findViewById(R.id.pager);
    viewPager.setAdapter(imageFragmentPagerAdapter);
    }

    public static class ImageFragmentPagerAdapter extends FragmentPagerAdapter
    {
        public ImageFragmentPagerAdapter(FragmentManager fm) { super(fm); }

        @Override
        public int getCount() { return NUM_ITEMS; }

        @Override
        public Fragment getItem(int position) 
        {
        SwipeFragment fragment = new SwipeFragment();
        return fragment.newInstance(position);
        }
    }

    public static class SwipeFragment extends Fragment
    {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
        {
            View swipeView = inflater.inflate(R.layout.swipe_fragment, container, false);
            ImageView imageView = (ImageView) swipeView.findViewById(R.id.imageView);
            Bundle bundle = getArguments();
            int position = bundle.getInt("position");
            String imageFileName = IMAGE_NAME[position];
            int imgResId = getResources().getIdentifier(imageFileName, "drawable", "com.example.shrishyl.circleview");
            Bitmap imageBitmap= BitmapFactory.decodeResource(getResources(),  imgResId);
            imageView.setImageBitmap(imageBitmap);
            return swipeView;
        }
        static SwipeFragment newInstance(int position)
        {
            SwipeFragment swipeFragment = new SwipeFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("position", position);
            swipeFragment.setArguments(bundle);
            return swipeFragment;
        }
    }
}

Answer 1

You can do that by using canvas like in the below:

    public static class SwipeFragment extends Fragment
        {
            @Override
            public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
            {
                View swipeView = inflater.inflate(R.layout.swipe_fragment, container, false);
                ImageView imageView = (ImageView) swipeView.findViewById(R.id.imageView);
                Bundle bundle = getArguments();
                int position = bundle.getInt("position");
                String imageFileName = IMAGE_NAME[position];
                int imgResId = getResources().getIdentifier(imageFileName, "drawable", "com.example.shrishyl.circleview");
                Bitmap imageBitmap= BitmapFactory.decodeResource(getResources(),  imgResId);
              Bitmap circleImage=   CircularImage.addPicture(imageBitmap);//By calling this method your image will be converted a circular image
imageView.setImageBitmap(circleImage);//Here you will set the imageview to the Circular image which was returned by the addPicture Function() in CircularImage class

                return swipeView;
            }
            static SwipeFragment newInstance(int position)
            {
                SwipeFragment swipeFragment = new SwipeFragment();
                Bundle bundle = new Bundle();
                bundle.putInt("position", position);
                swipeFragment.setArguments(bundle);
                return swipeFragment;
            }
        }



  }
        public class CircularImage{
      public static Bitmap addPicture(Bitmap bitmap){
          Bitmap result = null;
          try {
              result = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
              Canvas canvas = new Canvas(result);// Canvas is class used for drawing , here you will be writing into the result Bitmap

              int color = 0xff424242;
              Paint paint = new Paint();
              Rect rect = new Rect(0, 0, 200, 200);

              paint.setAntiAlias(true);
              canvas.drawARGB(0, 0, 0, 0);
              paint.setColor(color);
              canvas.drawCircle(50, 50, 50, paint);//This draws a circle
              paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
              canvas.drawBitmap(bitmap, rect, rect, paint);// this puts the image into the circle
          } catch (NullPointerException e) {
          } catch (OutOfMemoryError o) {
          }
          return result;
      }
}

What you are doing in here is simple you are creating Bitmap intially and the drawing a circle inside it. Later you draw a bitmap inside the circle. So in your case just call this function and pass the Bitmap you want to add to the circle hole as a Parameter . It should work for you. ThankYou