How to make Android MaterialProgressBar Design

Sometimes you have to wait. With these new Progress Bar Android Libraries at least your users can wait in style. My first approach was to try and back-port the material progressbar indeterminate implementaion. The solution involves creating our own ProgressBar implementaion.

1. MainActivity

package com.tutorialsee;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import com.tutorialsee.SlackLoadingView;

public class MainActivity extends AppCompatActivity {
CatLoadingView mView;
ImageView button1;
DotLoader textDotLoader;
    private SlackLoadingView mLoadingView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mLoadingView = (SlackLoadingView) findViewById(R.id.loading_view);
        button1 = (ImageView) findViewById(R.id.button1);
        button1.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent i = new Intent(getBaseContext(), NumberProgress.class);
i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(i);
}
});
       
       
        mLoadingView.start();
       // mLoadingView.reset();
       
      
        textDotLoader = (DotLoader) findViewById(R.id.text_dot_loader);
            for (int i = 1; i < 4; i++) {
            textDotLoader.postDelayed(new DotIncrementRunnable(3 + i, textDotLoader), i * 3000);
        }
       

        mView = new CatLoadingView();
        findViewById(R.id.button).setOnClickListener(
                new View.OnClickListener() {
                    @Override public void onClick(View v) {
                        mView.show(getSupportFragmentManager(), "");
                    }
                });
       
    }

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

    @Override
    protected void onPause() {
        super.onPause();
     
        textDotLoader.resetColors();
    }

    private static class DotIncrementRunnable implements Runnable {
        private int mNumberOfDots;
        private DotLoader mDotLoader;

        private DotIncrementRunnable(int numberOfDots, DotLoader dotLoader) {
            mNumberOfDots = numberOfDots;
            mDotLoader = dotLoader;
        }

        @Override
        public void run() {
            mDotLoader.setNumberOfDots(mNumberOfDots);
        }
    }
   

    public void showDialog() {
        mView.show(getSupportFragmentManager(), "");
    }
}

2. activity_main

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <com.tutorialsee.MaterialProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:indeterminate="true"
        android:visibility="visible"
        app:duration="2000"
        app:progressColour="@color/sa_accent"
        app:backgroundColour="@color/sa_accent_transparent" />

    <ProgressBar
        android:id="@+id/dd"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:layout_below="@id/progress"
        android:layout_marginTop="24dp"
        android:indeterminate="true"
        android:visibility="visible" />
   
   
    <RelativeLayout
        android:id="@+id/fd"
    android:layout_width="match_parent"
    android:layout_height="100dp"
  android:layout_below="@+id/dd"
     android:layout_marginTop="10dp"
    android:orientation="vertical">

   

    <com.tutorialsee.SlackLoadingView
        android:id="@+id/loading_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</RelativeLayout>
 
    <LinearLayout
        android:id="@+id/ww"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/fd"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="32dp">

            <TextView
                style="@style/TextAppearance.AppCompat.Display1"
                android:textSize="44sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#E65100"
                android:text="Loading"
                android:paddingRight="2dp"/>

            <com.tutorialsee.DotLoader
                android:id="@+id/text_dot_loader"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:color_array="@array/dot_colors"
                app:dot_radius="4dp"
                android:layout_gravity="bottom"
                app:number_of_dots="3"/>
        </LinearLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
         
            <com.tutorialsee.DotLoader
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:dot_radius="9dp"
                     android:layout_marginTop="10dp"
                     android:gravity="center"
                app:color_array="@array/dot_colors"
                app:number_of_dots="3"/>
        </FrameLayout>

   
    </LinearLayout>
   <!-- 
    <android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   
    android:fitsSystemWindows="true"> -->

<LinearLayout
        android:id="@+id/wcw"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ww"
       
        android:orientation="vertical">


    <include layout="@layout/content_main"
        />


<!-- </android.support.design.widget.CoordinatorLayout> -->
     <ImageView
     android:id="@+id/button1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginTop="30dp"
     android:background="@drawable/number"/>
   
   
      </LinearLayout>



</RelativeLayout>