How to design a step number showing a Viewpager indicator in android?
I want to design step number ViewPager Indicator in android. When the user is in the first step, the indicator will look like this.
And when he is on the last step, he should look like this.
So, as I move forward in the ViewPager, I want the step numbers to go forward one step, showing the step number and their associated lines.
EDIT:
The indicator layout code I have tried is as follows. I am programmatically changing the thumbnails of images on a page slide. But the problem is, how do you create a line connecting the two steps and increase the progress on the slide of the page? Is the library available?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="@+id/img_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/cb1"
android:layout_weight="1"
/>
<ImageView
android:id="@+id/img_two"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/cb2"
android:layout_weight="1"
/>
<ImageView
android:id="@+id/img_three"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/cb3"
android:layout_weight="1"
/>
<ImageView
android:id="@+id/img_four"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/cb4"
android:layout_weight="1"
/>
<ImageView
android:id="@+id/img_five"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/cb5"
android:layout_weight="1"
/>
<ImageView
android:id="@+id/img_six"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/cb6"
android:layout_weight="1"
/>
Please, help. Thank.
+3
source to share
2 answers
there are better ways to achieve what you want (better performance and memory efficiency, but a much more difficult task), but to follow your current attempts, you should:
to create rows you will include the following view in between each ImageView (change color, height and width as you need):
<View
android:layout_height="1px"
android:layout_width="8dp"
android:background="#f99">
and change the status you will call on the ViewPager
pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
@Override public void onPageSelected(int position) {
/// change status here
}
});
+1
source to share
In Xml try this code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_dark"
android:fitsSystemWindows="true"
tools:context="com.layer_net.stepindicatorexample.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/appbar_padding_top"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp">
<FrameLayout
android:layout_width="200dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="left|center"
android:src="@drawable/dot_white" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center"
android:src="@drawable/dot_white" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="right|center"
android:src="@drawable/dot_white" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ProgressBar
android:id="@+id/bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:indeterminate="false"
android:max="100"
android:maxHeight="5dip"
android:minHeight="5dip"
android:progressDrawable="@drawable/greenprogress" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ProgressBar
android:id="@+id/bar2"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:indeterminate="false"
android:max="100"
android:maxHeight="5dip"
android:minHeight="5dip"
android:progressDrawable="@drawable/second_progress_bar" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="left|center"
android:padding="0.5dp"
android:src="@drawable/dot_orange" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/second_dot"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center"
android:padding="0.5dp"
android:src="@drawable/dot_white" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/third_dot"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="right|center"
android:padding="0.5dp"
android:src="@drawable/dot_white" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
IN Activity View Pager try this: -
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int round = Math.round(positionOffset * 100);
Log.e("positionOffset", ">>" + position);
int progress = round;
if (position == 0) {
progressBar.setProgress(progress);
if(progressBar.getProgress()<95){
second_dot.setImageResource(R.drawable.dot_white);
}
} else if(position==1) {
second_dot.setImageResource(R.drawable.red_dot);
bar2.setProgress(progress);
if(bar2.getProgress()<95){
third_dot.setImageResource(R.drawable.dot_white);
}
}
else if(position==2){
third_dot.setImageResource(R.drawable.blue_dot);
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
Drawable greenprogress.xml code :-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/progress"
android:drawable="@drawable/line_12" />
<item android:id="@android:id/background"
>
<shape>
<solid android:color="#fff" />
<stroke
android:width="0.5px"
android:color="#fff" />
<corners android:radius="5dp" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<stroke
android:width="0.5px"
android:color="#fff" />
<corners android:radius="5dp" />
<gradient
android:endColor="#c3464e"
android:startColor="#ffa200" />
</shape>
</clip>
</item>
</layer-list>
second_progress_bar.xml code: -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/progress"
android:drawable="@drawable/line_12"/>
<item android:id="@android:id/background"
>
<shape >
<solid android:color="#fff"/>
<stroke android:width="0.5px"
android:color="#fff"
/>
<corners android:radius="5dp"/>
</shape>
</item>
<item
android:id="@android:id/progress"
>
<clip>
<shape>
<stroke android:width="0.5px"
android:color="#fff"
/>
<corners android:radius="5dp"/>
<gradient
android:startColor="#c3464e"
android:endColor="#38a0da"
/>
</shape>
</clip>
</item>
</layer-list>
It's three smooth steps to sync with the pager view. You can easily customize the code to suit your needs. Thanks and happy to help :)
+1
source to share