[Android]ViewPager with bottom dots

ViewPager와 하단에 . . . Indicator를 만들어 봤습니다.

쉽게 만드는 ViewPager Indicator 입니다.

[activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
 
    <android.support.v4.view.ViewPager
        android:id="@+id/photos_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>
 
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp"
        android:id="@+id/tab_layout" />
 
</LinearLayout>
 

tabIndicatorHeight는 Indicator 하단에 _ 줄이 나타나지 않게 하려고 높이를 0dp로 설정

[pager_adapter.xml]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:id="@+id/imageView"/>
</LinearLayout>
 

. . . 모양으로 만들어 주기 위한 리소스

[default_dot.xml]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>
</layer-list>

[selected_dot.xml]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
</layer-list>

[tab_selector.xml]

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item android:drawable="@drawable/selected_dot"
        android:state_selected="true"/>
    <item android:drawable="@drawable/default_dot"/>
</selector>

[MainActivity]

public class MainActivity extends AppCompatActivity {
 
    List<Drawable> temp;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        temp = new ArrayList<>();
        temp.add(ContextCompat.getDrawable(this,이미지 리소스1));
        temp.add(ContextCompat.getDrawable(this,이미지 리소스2));
        temp.add(ContextCompat.getDrawable(this,이미지 리소스3));
 
        Adapter a = new Adapter(temp,this);
 
        ViewPager pager = (ViewPager)findViewById(R.id.photos_viewpager);
        pager.setAdapter(a);
 
 
        TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(pager, true);
 
    }
}
 

ViewPager와 TabLayout을 setupWithViewPager를 통해 연결

[Adapter]

class Adapter extends PagerAdapter {
 
    Context context;
    List<Drawable> obj;
    Adapter(List<Drawable> res, Context context){
        obj = res;
        this.context = context;
    }
 
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
 
        View view = null;
        LayoutInflater inflater = LayoutInflater.from(context);
        view = inflater.inflate(R.layout.pager_adapter,container,false);
        ImageView imageView = (ImageView)view.findViewById(R.id.imageView);
        imageView.setImageDrawable(obj.get(position));
        container.addView(view);
 
        return view;
 
    }
 
  
    public int getCount() {
        return obj.size();
    }
}
 

참고 : [링크]