How to display fancy frame on the image in android viewpager/imageview?

Question

I have developed an app that is suppose to display images located in the drawable folder. I used imageview/viewpager for it. However, I would like to display frame shown below.On the top of the image so that image appears more fancy.. Also, the frame should swipe along with the image...so that it looks more beautiful... I was thinking of creating it permanently on the image...through photoshop... But I didn't like that idea ..So I thought may be android have something for it....I am android beginner...So any code help along with explanation will be appreciated..Following are my codes..

Mainactivity.java

import android.app.Activity;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;

public class MainActivity extends Activity {

    MediaPlayer oursong;
    ViewPager viewPager;
    ImageAdapter adapter;

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

         oursong = MediaPlayer.create(MainActivity.this, R.raw.a);
         oursong.seekTo(0);
         oursong.start();

         viewPager = (ViewPager) findViewById(R.id.view_pager);
         adapter = new ImageAdapter(this);
         viewPager.setAdapter(adapter);


         viewPager.setOnPageChangeListener(MyViewPagerListener);
    }



    private int pos = 0;
    @Override
    protected void onPause() {
            super.onPause();

           if(oursong != null){
               pos = oursong.getCurrentPosition();
               oursong.release();
               oursong = null;
            }
    }

    @Override
    protected void onResume(){
          super.onResume();

         oursong = MediaPlayer.create(MainActivity.this, R.raw.a);
         oursong.seekTo(pos); // You will probably want to save an int to restore here
         oursong.start();
    }


   private final OnPageChangeListener MyViewPagerListener = new OnPageChangeListener() {

            @Override
            public void onPageSelected(int pos) {
              if (pos == adapter.getCount() - 1){
                 // adding null checks for safety
                 if(oursong != null){
                    oursong.pause();
                 }

               } else if (!oursong.isPlaying()){ 

                // adding null check for safety
                if(oursong != null){
                    oursong.start();
                }
              }         
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
             // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub

            }
        };

 }

Imageadapter.java

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ImageAdapter extends PagerAdapter {
    Context context;
    private int[] GalImages = new int[] {
        R.drawable.one,
        R.drawable.two,
        R.drawable.three,
        R.drawable.four,
        R.drawable.five
    };
    ImageAdapter(Context context){
        this.context=context;
    }
    @Override
    public int getCount() {
      return GalImages.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
      return view == ((ImageView) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      ImageView imageView = new ImageView(context);
      int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small);
      imageView.setPadding(padding, padding, padding, padding);
      imageView.setScaleType(ImageView.ScaleType.FIT_XY);
      imageView.setImageResource(GalImages[position]);
      ((ViewPager) container).addView(imageView, 0);
      return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      ((ViewPager) container).removeView((ImageView) object);
    }
  }

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:icon="@drawable/icon" >



          <android.support.v4.view.ViewPager
          android:id="@+id/view_pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent" 
         android:icon="@drawable/icon" />
           <ImageView
        android:id="@+id/swipe_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/swipe_left" />

    <ImageView
        android:id="@+id/swipe_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/swipe_right" />

</RelativeLayout>

Edited

Hidden portion of the image under frame

Answer 1

You can do it using a LayerDrawable

A Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index will be drawn on top.

You have two choices to use LayerDrawable .You can either define it in a separate drawable xml and then simply set the image in your ImageView , or you can configure a LayerDrawable dynamically in your code.

Programmatically using code

Resources r = getResources();
Drawable[] layers = new Drawable[2];
layers[0] = r.getDrawable(R.drawable.yourImage);;
layers[1] = r.getDrawable(R.drawable.yourFrame);
LayerDrawable layerDrawable = new LayerDrawable(layers);
imageView.setImageDrawable(layerDrawable);

Now you have your ImageView having two images(1.your image and 2.Frame) set on it.

Edit :

In your ImageAdapter , you need to modify instantiateItem(ViewGroup container, int position) something like

@Override
public Object instantiateItem(ViewGroup container, int position) {
  ImageView imageView = new ImageView(context);
  int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small);
  imageView.setPadding(padding, padding, padding, padding);
  imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  Resources r = context.getResources();
  Drawable[] layers = new Drawable[2];
  layers[0] = r.getDrawable(GalImages[position]);
  layers[1] = r.getDrawable(R.drawable.yourFrame);
  LayerDrawable layerDrawable = new LayerDrawable(layers);
  imageView.setImageDrawable(layerDrawable);
  ((ViewPager) container).addView(imageView, 0);
  return imageView;
} 

Edit 2

As some portions of your image gets hidden under the frame, you need to set the width and height of your image before using it in the ImageView .Have some calculations of what could be the best width and height combination for your image, such that it will fit exactly with your frame.For setting height and width of your image

@Override
public Object instantiateItem(ViewGroup container, int position) {
  ImageView imageView = new ImageView(context);
  int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small);
  imageView.setPadding(padding, padding, padding, padding);
  imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  Resources r = context.getResources();
  Bitmap bmp = BitmapFactory.decodeResource(r, GalImages[position]);
  int width=200;//set your width
  int height=200;//set your height
  Bitmap resizedbitmap = Bitmap.createScaledBitmap(bmp, width, height, true);
  Drawable d = new BitmapDrawable(r,resizedbitmap);
  Drawable[] layers = new Drawable[2];
  layers[0] = d;
  layers[1] = r.getDrawable(R.drawable.yourFrame);
  LayerDrawable layerDrawable = new LayerDrawable(layers);
  imageView.setImageDrawable(layerDrawable);
  ((ViewPager) container).addView(imageView, 0);
  return imageView;
} 

Using XML

Create a new Drawable XML file, let's call it mylayer.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/yourimage" />
  <item android:drawable="@drawable/yourframe" />
</layer-list>

Now in your Activity set the image using that Drawable:

imageView.setImageDrawable(getResources().getDrawable(R.layout.mylayer));

I hope this gives you the basic idea for achieving what you want.