Add ViewPagerIndicator to Android Studio

Question

i'm trying to get Jake Wharton's ViewPagerIndicator working with Android Studio but unfortunately it won't work.
I downloaded the .aar file from here and included it in my libs folder.
I referenced it like this:

compile files('src/main/libs/viewpagerindicator_2.4.1.aar')

Android Studio gives me the following error:

Error:duplicate files during packaging of APK

I'm not very familiar with gradle and don't know what to do when it gives me this error.
Can you please help me with this one?

Here's my complete build.gradle:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 19
    buildToolsVersion "20.0.0"

    defaultConfig {
        applicationId "de.xxx"
        minSdkVersion 15
        targetSdkVersion 19
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_7
            targetCompatibility JavaVersion.VERSION_1_7
        }
    }

    buildTypes {
     release {
     runProguard false
     proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
    }
    }
}

dependencies {
    compile 'com.android.support:support-v4:20.0.0'
    compile 'com.github.amlcurran.showcaseview:library:5.0.0'
    compile files('src/main/libs/PdfViewer.jar')
    compile files('src/main/libs/viewpagerindicator_2.4.1.aar')
}

Answer 1

UPDATE

Based on the answer given by Jürgen 'Kashban' Wahlmann, it is now possible to add ViewPagerIndicator via gradle:

Top Level Build.gradle:

buildscript {
    repositories {
        maven { url "http://dl.bintray.com/populov/maven" }
        mavenCentral()
    }
}

allprojects {
    repositories {
        maven { url "http://dl.bintray.com/populov/maven" }
        mavenCentral()
    }
}

App's build.gradle:

compile 'com.viewpagerindicator:library:2.4.1@aar'

Also, based on the answer given by Enrico Susatyo now it seems possible to download the library from Jitpack maven repositories. Do it as follows:

In root build.grade:

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

In project build.grade:

dependencies {
            compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'
    }

------------

To use Android-ViewPagerIndicator in Android Studio, you can’t download it from gradle. Instead, you must import the library as an “Existing Project” to your current one.

Follow these steps:

#1 Download source code from GitHub.

#2 In your Android Studio Project: File -> Project Structure -> add (+ symbol) -> Import Existing Project. Import just the folder called ”library”, not the entire project (leave the import options as Android Studio suggests).

# 3 If the "compileSdkVersion" specified in your build.gradle doesn’t match with the one specified in the Android-ViewPagerIndicator project, change the second one. The same apply with any other property, such as "minSdkVersion" or even the current support library.

# 4 Add Android-ViewPagerIndicator project as a dependency to your build.gradle module:

dependencies {
    compile project(':library')
}

# 5 Sync project with gradle files.

Answer 2

For me trying to integrate it from maven didn't work out. I always go the following build exceptions and styles couldn't be reoslved:

no ressource found that matches the given name vpiCirclePageIndicatorStyle vpiTitlePageIndicatorStyle

Adding the dependency via jitpack works just perfect:

In root build.gradle:

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

In project build.gradle:

dependencies {
            compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'
    }

Answer 3

As of today (March 2016), Jitpack's maven repos work for me: https://jitpack.io/#JakeWharton/ViewPagerIndicator/2.4.1/aar

In root build.gradle:

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

In project build.gradle:

dependencies {
            compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'
    }

Answer 4

It can be imported by Gradle like this:

Top Level Build.gradle:

buildscript {
    repositories {
        maven { url "http://dl.bintray.com/populov/maven" }
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:0.12.+'
    }
}

allprojects {
    repositories {
        maven { url "http://dl.bintray.com/populov/maven" }
        mavenCentral()
    }
}

In your App's build.gradle add this to your dependencies section:

compile 'com.viewpagerindicator:library:2.4.1@aar'

(Add @aar to avoid "packaging for apklib is not supported error")

Works fine for me.

Answer 5

You can do it without any third party library

Final Result:

1) Use frame layout as a container for Viewpager and then add a Linearlayout at the bottom of it.

<FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax">

                <android.support.v4.view.ViewPager
                    android:id="@+id/product_images_pager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <HorizontalScrollView
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:layout_gravity="bottom|center_horizontal"
                    android:layout_margin="10dp">

                    <LinearLayout
                        android:id="@+id/indicator_root"
                        android:layout_width="20dp"
                        android:layout_height="match_parent"
                        android:layout_gravity="bottom|center_horizontal"
                        android:gravity="center_horizontal"
                        android:orientation="horizontal">

                    </LinearLayout>
                </HorizontalScrollView>

            </FrameLayout>

2) Define size and margin for indicators

  //define globaly 
   private LinearLayout.LayoutParams imageParam;

   //init params
      int margin = Utils.pxFromDp(getActivity(), 5);
        int width = Utils.pxFromDp(getActivity(), 8);
        imageParam = new LinearLayout.LayoutParams(width, width);
        imageParam.setMargins(margin, margin, margin, margin);

3) Add Indicators in Linear Layout

 for (int indicatorCount = 0; indicatorCount < productFromShoppingList.getProductImages().size();
             indicatorCount++) {

            ImageView imageIndicator =
                    new ImageView(getActivity());

            imageIndicator.setAdjustViewBounds(true);
            imageIndicator.setScaleType(ImageView.ScaleType.FIT_XY);
            imageIndicator.setLayoutParams(imageParam);

            indicatorContainer.addView(imageIndicator);
            indicators.add(imageIndicator);
            imageIndicator.setBackgroundResource(R.drawable.indicator_unselected);
        }

4) Initialize indicator at 0 position

 indicators.get(0).setBackgroundResource(R.drawable.indicator_unselected);

5) Update indicator on view pager page change

carousalViewPager.setAdapter(new slidingPagerAdapter(getActivity(),
            productFromShoppingList.getProductImages()));

    carousalViewPager
            .addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position,
                                           float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {

                    currentPageIndex = position;
                    updateIndicators(currentPageIndex);
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });


private void updateIndicators(int selectedPostion) {
    for (int indicatorPosition = 0; indicatorPosition < indicators.size(); indicatorPosition++) {
        indicators.get(indicatorPosition).setBackgroundResource(indicatorPosition == selectedPostion ? R.drawable.indicator_selected
                : R.drawable.indicator_unselected);
    }
}

Last but not least add this 2 drawable for indicator

indicator_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="@color/white" />
</shape>

indicator_selected.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="100dp" />
    <solid android:color="@android:color/white" />
</shape>