Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Custom Progress Bar with Timer

    • 0
    • 1
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 2.18k
    Comment on it

    Custom Progress bar with timer

    Generally we use this splash screen to make our app dynamic and stylish.We can also use to show some process is doing internally. For this we just customize ProgressBar by defining custom style .

    <progressbar 
    
    android:id="@+id/splash_progress_bar"
    style="@style/CustomProgressBar"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:max="100"
    android:progress="10"
    android:secondaryprogress="0">

    Its the Custom style that we have to define:

    style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
           < item name="android:indeterminateOnly">false
           <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal
           < item name="android:minHeight">5dip
           <item name="android:maxHeight">10dip
        /style>

    In drawable folder create a xml custom_progress_bar_horizontal.

    and apply this code.
    !--?xml version="1.0" encoding="UTF-8"?-->
    
    layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background">
           <shape>
                <corners android:radius="5dip">
                <gradient android:startcolor="#ffffffff" android:centercolor="#ffdddddd" 
    <android:centery="0.50" android:endcolor="#ffffffff" android:angle="270">
            </gradient></corners></shape>
        </item>
        <item android:id="@android:id/secondaryProgress">
            <clip>
                <shape>
                    <corners android:radius="5dip">
                    <gradient android:startcolor="#770e75af" android:endcolor="#771997e1" android:angle="90">
                </gradient>
            </clip>
        </item>
        <item android:id="@android:id/progress">
            <clip>
                <shape>
                   <corners android:radius="5dip">
                    <gradient android:startcolor="#0000FF" android:endcolor="#0000FF" android:angle="90">
                </gradient></corners></shape>
            </clip>
        </item>
    </layer-list>

    Now apply it to your Activity

    public class SplashActivty extends ActionBarActivity {
        private int timeToWaitInSec = 5;
        private int updateProgressBarInterval = 50;
        private CountDownTimer mCountDownTimer;
        private ProgressBar mprogressBar;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mprogressBar = (ProgressBar) findViewById(R.id.splash_progress_bar);
            initAndRunCountDownTimer();
        }
    
    /**
     * CountDownTimer for 5 sec wait.
     * on each tick update the Progress bar.
     */
    private void initAndRunCountDownTimer() {
        mCountDownTimer = new CountDownTimer(1000 * timeToWaitInSec,
                updateProgressBarInterval) {
            int increment;
    
            @Override
            public void onFinish() {
                mprogressBar.setProgress(mprogressBar.getMax());
                //Call to another activity
            }
    
            @Override
            public void onTick(long millisUntilFinished) {
                increment = ((mprogressBar.getMax() * updateProgressBarInterval) / (1000 * timeToWaitInSec));
                mprogressBar.setProgress(mprogressBar.getProgress() + increment);
            }
        };
        mCountDownTimer.start();
    }
    

    }

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: