How to a create custom view with loading animation - filling custom text from left to right?

Question

I created loading animation with xml and played it in activity.

xml-file: anim.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/loading_00001" android:duration="50" />
    <item android:drawable="@drawable/loading_00002" android:duration="50" />
    <item android:drawable="@drawable/loading_00003" android:duration="50" />
    <item android:drawable="@drawable/loading_00004" android:duration="50" />
    <item android:drawable="@drawable/loading_00005" android:duration="50" />
</animation-list>

method in activity: playAnimation

private void playAnimation() {    
    ImageView imageView = (ImageView) findViewById(R.id.imageView);
    imageView.setBackgroundResource(R.drawable.anim);
    AnimationDrawable animation = (AnimationDrawable) imageView.getBackground();
    animation.start();
}

Got:

Need create the same, but need use another way - custom view without drawable resources. Only programmatically drawing.

Something like this:

public CustomLoadingView extends View {

   public CustomLoadingView(Context context) {
       this(context, null);
   }

   public CustomLoadingView(Context context, AttributeSet attrs) {
       this(context, attrs, 0);
   }

   public CustomLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       init(attrs);
   }

   private void init(AttributeSet attrs) {}

   @Override
   protected void onDraw(Canvas canvas) {}
}

What need to write inside CustomLoadingView, to get this

???

Answer 1

I would use transparent text with a filling rectangle underneath it. Here's how I would do it:

• In some visual editing software, like paint.net, create your text on a white background, make the border orange and make the fill transparent. (You can use whatever color you want, obviously, but the transparency is necessary)
• Put a rectangle with the same height, but 0 width on an activity ( you can use View for this ). Align it to the left and set its (background) color to orange.
• In your onStart method, schedule a TimerTask to have the rectangle increase its width by say 5dp every 50ms (play around with these numbers). ( You can use LayoutParams for changing the width and TimerTask for looping every x milliseconds )
• When the rectangle hits the end of the screen, reset its width to 0. ( You can use DisplayMetrics to determine the width of the screen in dp )

I wouldn't use a custom view.