I want to setup a user registration which consists of multiple steps. Each step will be highlighted in the form of bars. Dark grey bar will be the steps that are completed and light grey bar will be steps that needs to be completed. Cant seem to think of a way to do this. Please suggest.
We can see this in myfitnesspal sign up. I have highlighted this in red box in the picture below.
<RelativeLayout
android:id="@+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/tab_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="horizontal" >
<Button
android:id="@+id/step1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="-5dp"
android:background="@drawable/tab_active" />
<Button
android:id="@+id/step2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="-5dp"
android:background="@drawable/tab_active" />
<Button
android:id="@+id/step3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="-5dp"
android:background="@drawable/tab_active" />
<Button
android:id="@+id/step4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="-5dp"
android:background="@drawable/tab_active" />
</LinearLayout>
<LinearLayout
android:id="@+id/steptitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tab_layout" >
<TextView
android:id="@+id/eventItemTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:paddingLeft="15dp"
android:singleLine="true"
android:text="@string/symptomstitlebar"
android:textColor="@color/white_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/event_title_layout"
android:orientation="horizontal"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<include
android:id="@+id/stepContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="@layout/event_tab_layout" />
</LinearLayout>
</RelativeLayout>
try a layout like this and define fragments to change the content dynamically