How to create a Stepper in a layout?

Question

I want to create the stepper as shown in above image. Below is the code what I have tried. text below the circles should be at the center of circle. color of each line should be changed as next activity is navigated. and also color of each circle should be also changed when navigated to next activity.

  <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/padding_title"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="visible">


            <View
                android:id="@+id/circle_one"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_one"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_one"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_two"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_one"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_two"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_two"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_three"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_two"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_three"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_three"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_four"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_three"
                android:background="@drawable/ic_gray_hollow_circle" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/circle_one"
                android:text="Pay"
                android:textColor="#dbdbdb" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/circle_two"
                android:layout_toEndOf="@id/line_one"
                android:text="Amount"
                android:textColor="#dbdbdb" />

        </RelativeLayout>

Any help will be appreciated.

You can use this library - https://github.com/stepstone-tech/android-material-stepper — ClassA, May 10 '18 at 08:32
Well you can look at how they implemented it in the library..... — ClassA, May 10 '18 at 08:37

WS Ayan · Answer 1 · 2018-05-10T09:42:02.777

Well you can add this layout file on top of each and every activity. And then change the color and text on selection. Here's an example of what I've just said.

First make a layout file.

stepper_layout.xml

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/padding_title"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="visible">

        <View
            android:id="@+id/circle_one"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/ic_gray_hollow_circle" />

        <View
            android:id="@+id/line_one"
            android:layout_width="76dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/circle_one"
            android:background="@drawable/ic_gray_line" />

        <View
            android:id="@+id/circle_two"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/line_one"
            android:background="@drawable/ic_gray_hollow_circle" />

        <View
            android:id="@+id/line_two"
            android:layout_width="76dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/circle_two"
            android:background="@drawable/ic_gray_line" />

        <View
            android:id="@+id/circle_three"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/line_two"
            android:background="@drawable/ic_gray_hollow_circle" />

        <View
            android:id="@+id/line_three"
            android:layout_width="76dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/circle_three"
            android:background="@drawable/ic_gray_line" />

        <View
            android:id="@+id/circle_four"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/line_three"
            android:background="@drawable/ic_gray_hollow_circle" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/circle_one"
            android:text="Pay"
            android:textColor="#dbdbdb" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/circle_two"
            android:layout_toEndOf="@id/line_one"
            android:text="Amount"
            android:textColor="#dbdbdb" />

    </RelativeLayout>

Add stepper_layout in FirstActivity layout.

FirstActivity.xml

<?xml version="1.0" encoding="utf-8"?>  
<android.support.constraint.ConstraintLayout      
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<include layout="@layout/stepper_layout" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="First!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Add stepper_layout in SecondActivity layout.

SecondActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<include layout="@layout/stepper" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Second"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

   </android.support.constraint.ConstraintLayout>

Change stepper_layout view as you want.

FirstActivity.java

public class FirstActivity extends AppCompatActivity {

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final View view = findViewById(R.id.circle_one);
    view.setBackground(getResources().getDrawable(R.drawable.ic_green));

    final View view2 = findViewById(R.id.circle_two);
    view2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(FirstActivity.this, SecondActivity.class);
            startActivity(intent);
            finish();
        }
    });
}
}

Change stepper_layout view as you want.

SecondActivity.java

public class SecondActivity extends AppCompatActivity {

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_second);

    final View view2 = findViewById(R.id.circle_two);
    view2.setBackground(getResources().getDrawable(R.drawable.ic_green));

    final View view = findViewById(R.id.circle_one);
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(SecondActivity.this, FirstActivity.class);
            startActivity(intent);
            finish();
        }
    });
}
}

Two activities are given as example here. You need to add more of them. And you can change view attributes within activity classes. Hope this helps.

How to create a Stepper in a layout?

1 Answers1

Linked