Draw Bitmap and use it inside FrameLayout

Question

I have 2 image view inside a frame layout. My goal is cover first image view with second image view every 5 second so it show like coloring image animation.

My code run smoothly but I cannot see image overlap each other. Kindly advise what I'm missing here and really appreciate for any kind help. Thank you.

layout.xml

 <FrameLayout
    android:id="@+id/rooster_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

   <ImageView
        android:id="@+id/rooster"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:contentDescription="@string/desc_list_item_icon"
        android:padding="10dp"
        android:src="@drawable/rooster"/>

   <ImageView
        android:id="@+id/rooster_layer"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:contentDescription="@string/desc_list_item_icon"
        android:padding="10dp" />  
</FrameLayout>

Fragment class

    public class SleekUserDetailFragment extends Fragment {

    private static String TAG = SleekUserDetailFragment.class
            .getCanonicalName();
    private static int FINISH = 100;
    private int start = 0;
    private static int CURRENT = 50;

    private Activity activity;
    private ImageView rooster;
    private ImageView roosterLayer;
    private View mainView;
    private FrameLayout roosterContainer;
    private Bitmap outputRooster;
    private Bitmap roosterClip;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        activity = getActivity();
        mainView = inflater.inflate(R.layout.sleek_user_detail_fragment,
                container, false);

        roosterContainer = (FrameLayout) mainView.findViewById(R.id.rooster_container);
        rooster = (ImageView) mainView.findViewById(R.id.rooster);
        roosterLayer = (ImageView) mainView.findViewById(R.id.rooster_layer);
        roosterClip = BitmapFactory.decodeResource(activity.getResources(),
                R.drawable.rooster_clip);

        Thread t = new Thread() {
            public void run() {
                while (start <= CURRENT) {
                    Log.e(TAG, "START = " + start);
                    activity.runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            Log.e(TAG, "RUN THREAD UPDATE");
                            updateRooster(start, start, start + 10);
                        }
                    });

                    try {
                        Thread.sleep(5 * 1000);
                    } catch (InterruptedException e) {
                        Log.e(TAG,e.getMessage());
                    }
                }
            }
        };
        t.start();
        return mainView;
    }

    private void updateRooster(int width, int height, int percentage) {
        Paint paint = new Paint();
        outputRooster = null;
        outputRooster = Bitmap.createBitmap(roosterClip.getWidth(),
                roosterClip.getHeight(), Config.ARGB_8888);

        Canvas canvas = new Canvas(outputRooster);
        final Rect rectClip = new Rect(0, 0, roosterClip.getWidth()
                * (percentage / 100), roosterClip.getHeight()
                * (percentage / 100));
        canvas.drawBitmap(roosterClip, rectClip, rectClip, paint);

        roosterContainer.removeView(roosterLayer);
        roosterLayer.setImageBitmap(outputRooster);
        Log.e(TAG, "roosterlayer bitmap = "+((BitmapDrawable)roosterLayer.getDrawable()).getBitmap());
        roosterContainer.addView(roosterLayer);
        start = start + 10;
    }
}

Answer 1

Just find my mistake, the image not coming because of below line :

roosterClip.getWidth() * (percentage / 100)

change the line to be :

roosterClip.getWidth() * ((float)percentage / 100)

and I got result as expected. Maybe it will help others.

Answer 2

Use A RelativeLayout instead of framelayout

Answer 3

Example :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > 
<ImageView android:id="@id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"/>
<ImageView android:id="@id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_radio"/>
 </RelativeLayout>