Apps für Android programmieren leicht gemacht!

Wellen als Ladebalken – Drawables ganz neu Animiert

Da durchsucht man aus Langeweile das Internet und huch „A wild cool loading animation appears“. Auf meiner planlosen Suche im World Wide Web bin ich ganz unverhofft auf eine richtig coole Ladebalken-Animation gestoßen, die jeden Ladescreen zu einem echten Hingucker macht.

Das Beste daran: Die Animation kommt in einer sehr kleinen Library, ist verdammt einfach zu benutzen und kommt mit einer MIT-Lizenz einher. Wir können die Library also getrost kostenlos in unseren privaten oder auch kommerziellen Projekten nutzen. Ein eventueller Vermerk ist zu setzen, aber das kann man vertrösten. Am besten ihr Informiert euch über die Lizenz selber, denn ich kann hier keine rechtssichere Auskunft geben.

 

Zur Verwendung

Im Prinzip ist alles was wir tun müssen die Library einzubinden, die Drawable als „WaveDrawable“ zu definieren, vier Zeilen Einstellung zu liefern und bei jedem Fortschritt die Höhe des Wasserstandes zu erhöhen. Macht alles in allem eine Anzahl von 8 einfachsten Zeilen.

Ich muss zugeben, das klingt viel zu schön, um wahr zu sein und sieht einfach hammer aus.

Wir öffnen die Datei „grade.build (Module: app)“ und fügen in den Tag „dependencies“ ein:

compile 'com.race604.waveloading:library:1.0.1'

Führt einen Gradle Sync in der oberen Toolbar aus und wartet bis zum Ende.

Anschließend gehen wir zurück in die Java Klasse, in der wir den Ladebalken definieren wollen.
Wir benötigen ein ImageView, in das wir ein Drawable (ganz normales Bild; im Drawable-Ordner platziert) einfügen.
Dies geschieht über:

ImageView ladeView = (ImageView) findById(R.id.[NAME DES IMAGEVIEWS]);
WaveDrawable ladeDrawable = new WaveDrawable(R.drawable.[NAME DER BILDDATEI OHNE ENDUNG]);
ladeView.setImageDrawable(ladeDrawable);

 

Wir wollen nun natürlich definieren, wie hoch und breit die Wellen sind und wie schnell sie sich bewegen. Zusätzlich lässt sich definieren ob der Ladebalken Indeterminate sein soll. Dies bedeutet, ob der Ladebalken sich in Endlosschleife füllen und wieder von vorne beginnen soll oder ob wir den Fortschritt mit 0-100 selber definieren wollen.

Anderes Beispiel:
Indeterminate true = Ein Ladekreis dreht sich immer und immer wieder, bis wir etwas tun.
Indeterminate false = Wir haben einen Ladebalken, der sich so weit füllt, wie wir das gerne hätten und nur dann wenn wir es auch wollen.

Die allgemeinen Einstellungen werden wie folgt gestellt:

// Höhe der Wellen
ladeDrawable.setWaveAmplitude(int amplitude);

// Breite der Wellen
ladeDrawable.setWaveLength(int länge)

// Wellengeschwindigkeit (Die Bewegung von Links nach Rechts)
ladeDrawable.setWaveSpeed(int geschwindigkeit);

Spielt einfach einmal mit allen Einstellungen herum, ihr findet schon die richtige Kombination.

 

Den Ladestand (falls Indeterminate = false) können wir über folgende Zeile ändern:

ladeDrawable.setLevel([GANZZAHL ZWISCHEN 0-100]);

 

Das war es auch schon.
Viel Spaß mit dieser verdammt schicken Animation.
Hier geht es zum Git des Erstellers: https://github.com/race604/WaveLoading

Marvin

Ich bin 23 Jahre jung und studiere zurzeit Wirtschaftsinformatik an der Georg-August-Universität in Göttingen. Ich bin ein Mensch, der sich neben der Programmierung noch für tausend andere Dinge interessiert, die mal mehr und mal weniger verrückt sind. Vor allem aber bin ich Feuer und Flamme mit der Programmierung von eigenen kleinen Apps und Programmen, die mein Leben bereichern.

Kommentar hinzufügen

*Pflichtfeld