Search code examples
androidregistrationprogress

How to implement registration/sign up in android?


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.

enter image description here


Solution

  • <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