[:ru]Анимация загрузки с помощью WaveLoadingView в андроид-приложении[:en]Animation download using WaveLoadingView in android application[:]

[:ru]В этом видеоуроке рассмотрим интересную библиотеку для создания анимации загрузки с эффектом наполнения жидкости. Исходный код примера – ниже под видео.

Для подключения библиотеки в проект добавьте зависимость в файл сборки Build.gradle (App):

dependencies {
    compile 'me.itangqi.waveloadingview:library:0.3.5'
    // I have uploaded v0.3.5 on 2017-01-06, if it doesn't take effect or your
    // gradle cannot find it in maven central, you may try v0.3.4.
}

В видео также используется компонент DiscreteSeekBar, его можно добавить так:

compile 'org.adw.library:discrete-seekbar:1.0.0'

Добавим компоненты в макете главного экрана activity_main.xml:

<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:id="@+id/activity_main"
    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="com.example.vitaly.waveloadingview.MainActivity">

    <me.itangqi.waveloadingview.WaveLoadingView
        android:id="@+id/waveLoadingView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:wlv_borderColor="@color/colorAccent"
        app:wlv_borderWidth="3dp"
        app:wlv_progressValue="40"
        app:wlv_shapeType="circle"
        app:wlv_round_rectangle="true"
        app:wlv_triangle_direction="north"
        app:wlv_titleCenterStrokeColor="@android:color/holo_blue_dark"
        app:wlv_titleCenterStrokeWidth="3dp"
        app:wlv_titleCenter="Center Title"
        app:wlv_titleCenterColor="@android:color/white"
        app:wlv_titleCenterSize="24sp"
        app:wlv_waveAmplitude="70"
        app:wlv_waveColor="@color/colorAccent"/>

    <org.adw.library.widgets.discreteseekbar.DiscreteSeekBar
        android:id="@+id/seekbar_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:dsb_indicatorColor="@color/colorPrimary"
        app:dsb_max="100"
        app:dsb_min="0"
        app:dsb_progressColor="@color/colorPrimary"
        app:dsb_value="50"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="41dp" />
</RelativeLayout>

В классе MainActivity.java в методе onCreate пишем реализацию, устанавливаем параметры и слушатели:

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import org.adw.library.widgets.discreteseekbar.DiscreteSeekBar;

import me.itangqi.waveloadingview.WaveLoadingView;

public class MainActivity extends AppCompatActivity {

    WaveLoadingView mWaveLoadingView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

       mWaveLoadingView = (WaveLoadingView) findViewById(R.id.waveLoadingView);
        mWaveLoadingView.setShapeType(WaveLoadingView.ShapeType.CIRCLE);
        //mWaveLoadingView.setTopTitle("Top Title");
        //mWaveLoadingView.setCenterTitleColor(Color.GREEN);
        //mWaveLoadingView.setBottomTitleSize(18);
        mWaveLoadingView.setProgressValue(50);
       // mWaveLoadingView.setBorderWidth(10);
        mWaveLoadingView.setAmplitudeRatio(60);
        //mWaveLoadingView.setWaveColor(Color.RED);
        //mWaveLoadingView.setBorderColor(Color.RED);
        mWaveLoadingView.setTopTitleStrokeColor(Color.GREEN);
        mWaveLoadingView.setTopTitleStrokeWidth(3);
        mWaveLoadingView.setAnimDuration(3000);
       // mWaveLoadingView.pauseAnimation();
       // mWaveLoadingView.resumeAnimation();
       // mWaveLoadingView.cancelAnimation();
        mWaveLoadingView.startAnimation();

        ((DiscreteSeekBar) findViewById(R.id.seekbar_progress))
                .setOnProgressChangeListener
                        (new DiscreteSeekBar.OnProgressChangeListener() {
            @Override
            public void onProgressChanged(DiscreteSeekBar seekBar, int value, boolean fromUser) {
                mWaveLoadingView.setProgressValue(value);
            }

            @Override
            public void onStartTrackingTouch(DiscreteSeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(DiscreteSeekBar seekBar) {

            }
        });
    }
}

В коде закоментированы дополнительные параметры. Раскоментируйте и поэкспериментируйте с ними. Полный перечень параметров – на странице библиотеки в GitHub.[:en]In this video tutorial, consider an interesting library to create animations load effect of liquid filling. The source code example – under the below video.

To connect the library to your project, add the dependency in Build.gradle (App) assembly file:

dependencies {
    compile 'me.itangqi.waveloadingview:library:0.3.5'
    // I have uploaded v0.3.5 on 2017-01-06, if it doesn't take effect or your
    // gradle cannot find it in maven central, you may try v0.3.4.
}

The video is also used DiscreteSeekBar component, it can be added as follows:

compile 'org.adw.library:discrete-seekbar:1.0.0'

Add a component in the layout of the main screen activity_main.xml:

<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:id="@+id/activity_main"
    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="com.example.vitaly.waveloadingview.MainActivity">

    <me.itangqi.waveloadingview.WaveLoadingView
        android:id="@+id/waveLoadingView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:wlv_borderColor="@color/colorAccent"
        app:wlv_borderWidth="3dp"
        app:wlv_progressValue="40"
        app:wlv_shapeType="circle"
        app:wlv_round_rectangle="true"
        app:wlv_triangle_direction="north"
        app:wlv_titleCenterStrokeColor="@android:color/holo_blue_dark"
        app:wlv_titleCenterStrokeWidth="3dp"
        app:wlv_titleCenter="Center Title"
        app:wlv_titleCenterColor="@android:color/white"
        app:wlv_titleCenterSize="24sp"
        app:wlv_waveAmplitude="70"
        app:wlv_waveColor="@color/colorAccent"/>

    <org.adw.library.widgets.discreteseekbar.DiscreteSeekBar
        android:id="@+id/seekbar_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:dsb_indicatorColor="@color/colorPrimary"
        app:dsb_max="100"
        app:dsb_min="0"
        app:dsb_progressColor="@color/colorPrimary"
        app:dsb_value="50"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="41dp" />
</RelativeLayout>

In MainActivity.java class in the method onCreate write implementation, set the parameters and listeners:

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import org.adw.library.widgets.discreteseekbar.DiscreteSeekBar;

import me.itangqi.waveloadingview.WaveLoadingView;

public class MainActivity extends AppCompatActivity {

    WaveLoadingView mWaveLoadingView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

       mWaveLoadingView = (WaveLoadingView) findViewById(R.id.waveLoadingView);
        mWaveLoadingView.setShapeType(WaveLoadingView.ShapeType.CIRCLE);
        //mWaveLoadingView.setTopTitle("Top Title");
        //mWaveLoadingView.setCenterTitleColor(Color.GREEN);
        //mWaveLoadingView.setBottomTitleSize(18);
        mWaveLoadingView.setProgressValue(50);
       // mWaveLoadingView.setBorderWidth(10);
        mWaveLoadingView.setAmplitudeRatio(60);
        //mWaveLoadingView.setWaveColor(Color.RED);
        //mWaveLoadingView.setBorderColor(Color.RED);
        mWaveLoadingView.setTopTitleStrokeColor(Color.GREEN);
        mWaveLoadingView.setTopTitleStrokeWidth(3);
        mWaveLoadingView.setAnimDuration(3000);
       // mWaveLoadingView.pauseAnimation();
       // mWaveLoadingView.resumeAnimation();
       // mWaveLoadingView.cancelAnimation();
        mWaveLoadingView.startAnimation();

        ((DiscreteSeekBar) findViewById(R.id.seekbar_progress))
                .setOnProgressChangeListener
                        (new DiscreteSeekBar.OnProgressChangeListener() {
            @Override
            public void onProgressChanged(DiscreteSeekBar seekBar, int value, boolean fromUser) {
                mWaveLoadingView.setProgressValue(value);
            }

            @Override
            public void onStartTrackingTouch(DiscreteSeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(DiscreteSeekBar seekBar) {

            }
        });
    }
}

In the code commented out additional options. Uncomment and experiment with them. A complete list of parameters – on library page in GitHub.[:]