ViewPager indicator is not getting displayed

Question

I want when pages get swiped it should change the indicator.but in my case not hapeening.i referred this "How do you create an Android View Pager with a dots indicator?" but it won't work..im retrieving the images using retrofit..following is my code:

xml:

<androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="170dp" />

<LinearLayout
    android:id="@+id/pager_dots"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="10dp"
    android:background="@android:color/transparent"
    android:gravity="center_horizontal"
    android:orientation="horizontal" />

page_indicator_selected.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
    <size android:width="12dp" android:height="12dp"/>

    <stroke android:width="1dp" android:color="#000000"/>
</shape>

page_indicator_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
    <size android:width="12dp" android:height="12dp"/>

    <stroke android:width="1dp" android:color="#ffffff"/>
</shape>

here is my activity :

public class PhotoListFragment extends Fragment {
private GridViewAdapter adapter;
private GridView mGridView;
private ProgressDialog progressDialog;
private List<RetroPhoto> retroPhotoList;
private LinearLayout llPagerDots;
private ViewPager viewPager;
private PhotoViewPagerAdapter photoViewPagerAdapter;
 ImageView[] img;
private void populateGridView(List<RetroPhoto> spacecraftList) {
    adapter = new GridViewAdapter(getContext(), spacecraftList);
    mGridView.setAdapter(adapter);
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_first, container, false);
    return rootView;
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    mGridView = getView().findViewById(R.id.mGridView);
    viewPager = (ViewPager) getView().findViewById(R.id.view_pager);
    llPagerDots = (LinearLayout) getView().findViewById(R.id.pager_dots);

    progressDialog = new ProgressDialog(getContext());
    progressDialog.setMessage("Loading....");
    progressDialog.show();

    /*Create handle for the RetrofitInstance interface*/
    GetDataService myAPIService = RetrofitClientInstance.getRetrofitInstance().create(GetDataService.class);

    Call<List<RetroPhoto>> call = myAPIService.getAllPhotos();
    call.enqueue(new Callback<List<RetroPhoto>>() {

        @Override
        public void onResponse(Call<List<RetroPhoto>> call, Response<List<RetroPhoto>> response) {
            progressDialog.dismiss();
            retroPhotoList = response.body();
            populateGridView(retroPhotoList);
            photoViewPagerAdapter = new PhotoViewPagerAdapter(getContext(), retroPhotoList);

            viewPager.setAdapter(photoViewPagerAdapter);

            setupPagerIndidcatorDots();

            img[0].setImageResource(R.drawable.page_indicator_selected);

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

                }

                @Override
                public void onPageSelected(int position) {
                    for (int i = 0; i < img.length; i++) {
                        img[i].setImageResource(R.drawable.page_indicator_unselected);
                    }
                    img[position].setImageResource(R.drawable.page_indicator_selected);
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });
        }

        @Override
        public void onFailure(Call<List<RetroPhoto>> call, Throwable throwable) {
            progressDialog.dismiss();
            Log.d("url", "error");
        }
    });

}
private void setupPagerIndidcatorDots() {
    img = new ImageView[retroPhotoList.size()];
    for (int i = 0; i < img.length; i++) {
        img[i] = new ImageView(getActivity());
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.setMargins(5, 0, 5, 0);
        img[i].setLayoutParams(params);
        img[i].setImageResource(R.drawable.page_indicator_unselected);
        //ivArrayDotsPager[i].setAlpha(0.4f);
        img[i].setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.setAlpha(1);
            }
        });
        llPagerDots.addView(img[i]);
        llPagerDots.bringToFront();
    }}}