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.
If you are ok with a continous bar you can use a custom progress bar as explained in this answer.
If you really want the individual segments like in the picture you will probably have to create a 'light' and 'dark' image resource and place a bunch of ImageViews in a horizontal LinearLayout. As you go the next step you will just change the drawable of that ImageView to the 'dark' image resource.
<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
