0

I currently have implemented an ImageSwitcher in my app, which slides through an array of pictures. Now I want to have a ProgressBar under the picture which shows on which position we are in the collection so the user gets a feeling of how much pictures are left.

Is this possible? Can I have some advices on how I might implement this?

Picture:

progress [--|--------]

My ImageSwticher:

package com.example.cfaslides;

import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.ProgressBar;
import android.widget.ViewSwitcher;
import android.widget.Gallery;
import android.widget.Gallery.LayoutParams;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.view.Window;
import android.content.Context;


public class l2_AltInvestActivity extends Activity implements ViewFactory {


ImageSwitcher imageSwitcher;

Integer[] imageList = {
R.drawable.av_01,
R.drawable.av_02,
R.drawable.av_03,
R.drawable.av_04,
R.drawable.av_05
};

int curIndex=0;
int maxIndex = 4; //# imageList -1
int downX, upX;

private Animation mIn1, mOut1, mIn2, mOut2;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.slider);
    final ProgressBar mProgressBar = (ProgressBar) findViewById(R.id.progressB);

mProgressBar.setProgress(0);
    mProgressBar.setMax(maxIndex);
    mProgressBar.setVisibility(View.VISIBLE);

     mIn1 =   AnimationUtils.loadAnimation(l2_AltInvestActivity.this,android.R.anim.slide_in_left);
     mOut1 = AnimationUtils.loadAnimation(l2_AltInvestActivity.this,android.R.anim.slide_out_right);
     mIn2 = AnimationUtils.loadAnimation(l2_AltInvestActivity.this,R.anim.slide_in_right);
     mOut2 = AnimationUtils.loadAnimation(l2_AltInvestActivity.this,R.anim.slide_out_left);

     AnimationListener mAnimListener = new AnimationListener() {
         public void onAnimationEnd(Animation animation) {
                // the in animation has ended so update the ProgressBar with the new 
                // progress
                mProgressBar.setProgress(curIndex); // I don't know your progress?!? 
            }   
         @Override
          public void onAnimationStart(Animation animation) {
           // TODO Auto-generated method stub

          }

          @Override
          public void onAnimationRepeat(Animation animation) {
           // TODO Auto-generated method stub

          }
             // rest of the callbacks
     };  
     //set this listener for the both of the in animations 
     mIn1.setAnimationListener(mAnimListener);  
     mIn2.setAnimationListener(mAnimListener);
     // rest of the onCreate method


    imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
    imageSwitcher.setFactory(this);
    imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
    imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));
    imageSwitcher.setImageResource(imageList[curIndex]);
    imageSwitcher.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                downX = (int) event.getX();
                Log.i("event.getX()", " downX " + downX);
                return true;
            }
            else if (event.getAction() == MotionEvent.ACTION_UP) {
                upX = (int) event.getX();
                Log.i("event.getX()", " upX " + downX); 

                if (upX - downX > 100) {
                    imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(l2_AltInvestActivity.this,android.R.anim.slide_in_left));
                    imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(l2_AltInvestActivity.this,android.R.anim.slide_out_right));
                    //curIndex  current image index in array viewed by user
                    curIndex--;
                    if (curIndex < 0) {
                        curIndex = maxIndex; //maximum
                    }

                    //imageList :-image list array
                    imageSwitcher.setImageResource(imageList[curIndex]);
                    //GalleryActivity.this.setTitle(curIndex);
                }
                else if (downX -upX > -100) {
                    curIndex++;
                    if (curIndex > maxIndex) {
                        curIndex = 0;
                    }
                    imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(l2_AltInvestActivity.this,R.anim.slide_in_right));
                    imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(l2_AltInvestActivity.this,R.anim.slide_out_left));
                    imageSwitcher.setImageResource(imageList[curIndex]);
                    //GalleryActivity.this.setTitle(curIndex);
                }
            return true;
            }
        return false;
        }
    });
} //END onCreate

@Override
public View makeView() {
    ImageView i = new ImageView(this);
    i.setScaleType(ImageView.ScaleType.FIT_CENTER);
    i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
    i.setBackgroundColor(0xFF000000);
    return i;   
} //END makeView

} // END Class

Slider:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/widget32"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ProgressBar
    android:id="@+id/progressB"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<ImageSwitcher android:id="@+id/switcher"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
>

</ImageSwitcher>


</RelativeLayout>

1 Answers1

1

now i like to have an progress bar under the picture which shows on which position we are in the collection. so that someone gets a feeling how much pictures are left.

  1. Place a ProgressBar in your R.layout.slider layout file
  2. Make the four different Animations that you used for the ImageSwitcher's transitions as fields in your Activity and also set an AnimationListener for each of them:

    //...
    private Animation mIn1, mOut1, mIn2, mOut2;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.slider);
        final ProgressBar = (ProgressBar) findViewById(R.id.theIdOfTheProgressBar);
        mIn1 =   AnimationUtils.loadAnimation(l2_AltInvestActivity.this,android.R.anim.slide_in_left);
        mOut1 = AnimationUtils.loadAnimation(l2_AltInvestActivity.this,android.R.anim.slide_out_right);
        mIn2 = AnimationUtils.loadAnimation(l2_AltInvestActivity.this,R.anim.slide_in_right);
        mOut2 = AnimationUtils.loadAnimation(l2_AltInvestActivity.this,R.anim.slide_out_left);
        AnimationListener mAnimListener = new AnimationListener() {
    
        public void onAnimationEnd(Animation animation) {
            // the in animation has ended so update the ProgressBar with the new 
            // progress
            mProgressBar.setProgress(curIndex); // I don't know your progress?!? 
        }   
         // rest of the callbacks
        });  
        //set this listener for the both of the in animations 
        mIn1.setAnimationListener(mAnimListener);  
        mIn2.setAnimationListener(mAnimListener);
        // rest of the onCreate method
    
  3. In the onTouch method update the ImageSwitcher with the proper animations(from mIn1, mOut1, mIn2, mOut2)

user
  • 86,916
  • 18
  • 197
  • 190
  • hey, thanks for that, but now the app crashes if i will open the slider menu: it says 01-13 12:16:27.335: E/AndroidRuntime(3495): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.cfaslides/com.example.cfaslides.l2_AltInvestActivity}: java.lang.IllegalStateException: Can't add more than 2 views to a ViewSwitcher ... i have Updates the code at the top – user1966046 Jan 13 '13 at 11:17
  • 1
    @user1966046 Don't place the `ProgressBar` **inside** the `ImageSwitcher` tags(meaning inside of the tags), you have to place it outside of those tags. – user Jan 13 '13 at 11:30
  • well thanks this is working now, but it didn't update the progress in the bar. i initialised it with 0 and set maximum to max:mProgressBar.setProgress(0); mProgressBar.setMax(maxIndex); mProgressBar.setVisibility(View.VISIBLE); i think the bar issn correctly connected tot the ontouch listner ? – user1966046 Jan 13 '13 at 12:11
  • @user1966046 I used `curIndex` as the new value of the progress(see my code in the answer), if you just use `setProgress(0)` it's normal that you don't modify the progress as you set the progress to the same value, `0`. – user Jan 13 '13 at 12:25
  • hmm i thought that the method sets the right count public void onAnimationEnd(Animation animation) { mProgressBar.setProgress(curIndex); } – user1966046 Jan 13 '13 at 12:27
  • ... the setProgress(0) i set in the onCreate Method final ProgressBar mProgressBar = (ProgressBar) findViewById(R.id.progressB); mProgressBar.setProgress(0); mProgressBar.setMax(maxIndex); mProgressBar.setVisibility(View.VISIBLE); – user1966046 Jan 13 '13 at 12:33
  • 1
    @user1966046 Ok, but you also followed point 3 of my answer to actually use the `mIn1`, `mOut1`, `mIn2` and `mOut2` in the `onTouch` method **instead** of the `AnimationUtils.loadAnimation(/**/)` ? – user Jan 13 '13 at 12:45
  • ok well i missed this... now the bar is doing something but it is getting invisble after the animation... is it possible to see the bar all the time ? – user1966046 Jan 13 '13 at 12:59
  • 1
    @user1966046 I don't see how would the `ProgressBar` become invisible. Your layout should be like this https://gist.github.com/4524101 . See if this makes a difference. – user Jan 13 '13 at 13:26