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')
}

Solution 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.

Solution 2

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.

Solution 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'
    }

Solution 4

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>

View more solutions

Comments

[Víctor Albertos]

I'm glad I could help you!

[Ajay S]

Yes it is working fine & rest of the answers is not working & either not in new android studio. +1 Thanks

[jimpanzer]

Great work! This answer should be marked as "Right".

[samvel1024]

The only answer out of hundred ones which is really working. Thanks

[Rct Lynx]

"Failed to resolve: com.viewpagerindicator:library:2.4.1" error occured when i tried this

[Jürgen 'Kashban' Wahlmann]

@RctLynx I didn't check this in a while.... still seems to be the correct version number. But with the new design support library it is no longer necessary to include the custom ViewPager Indicator (developer.android.com/tools/support-library/features.html#v‌​4)

[Subhalaxmi]

Really helpful. Friends please note for support your application minimum sdk should 11. (just hints for fresher )

[MiguelHincapieC]

you should use this answer at 2016

[ThomasW]

In my test the first reference to the maven url in buildscript repositories is unnecessary, only the second usage in the allprojects repositories section is necessary.

[barış çıracı]

indicatorContainer and indicators not initialize.

[Hitesh Sahu]

indicatorContainer variable is Linear Layout of indicator_root in Java Code. indicators is empty array of ImageView

[andygeers]

This no longer works (currently December 2021) since bintray has been shut down. But there is a GitHub issue that provides a drop-in replacement: github.com/JakeWharton/ViewPagerIndicator/issues/415