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.