Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to create Sign Up Screen Design

    @rajshekhar.tiwari
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 227
    Comment on it

    In the below example I have created Sign Up page layout. Here first I have used Main LinearLayout then all category design in diffrent subLinearLayout and added Color, text, size category defined in value folder. Here I have also used ScrollView. See the below layout code it will clearly described you to design Sign up layout in Android.

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@mipmap/background">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/signup"
        android:gravity="center"
        android:textSize="@dimen/text_large"
        android:textColor="@color/font_color"
        android:layout_marginTop="@dimen/margin_large"/>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:src="@color/font_color"
        android:layout_marginTop="@dimen/margin_medium"
        />

<ScrollView

    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:paddingLeft="@dimen/margin_medium"
    android:paddingRight="@dimen/margin_medium"
    >



    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/select_user_type"
        android:textSize="@dimen/text_large"
        android:textColor="@color/font_color"
        android:layout_marginTop="@dimen/margin_large"/>

    <!--Select user type layout-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="@dimen/margin_medium"
        android:layout_marginLeft="@dimen/margin_xlarge"
        android:layout_marginRight="@dimen/text_xlarge"
        android:weightSum="2">
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radioButtonUser"
                android:src="@mipmap/rediobtn_select"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/user"
                android:layout_marginLeft="@dimen/margin_medium"
                android:textSize="@dimen/text_large"
                android:textColor="@color/font_color"
               />
        </LinearLayout>
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radioButtonBusinessUser"
                android:src="@mipmap/rediobtn"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/business_user"
                android:layout_marginLeft="@dimen/margin_medium"
                android:textSize="@dimen/text_large"
                android:textColor="@color/font_color"
                />
        </LinearLayout>

    </LinearLayout>
    <!--End of select user type layout-->


    <!--Field layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="@dimen/margin_large"
        android:layout_marginLeft="@dimen/margin_medium"
        android:layout_marginRight="@dimen/text_medium"
        android:background="@drawable/login_bg">

        <!--Email address layout-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_margin="@dimen/margin_large">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/icon_mail"/>
            <EditText
                android:id="@+id/emailAddressEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email_address"
                android:inputType="textEmailAddress"
                android:textColorHint="@color/font_color"
                android:background="#00000000"
                android:textCursorDrawable="@drawable/custom_cursor_color"
                android:layout_marginLeft="@dimen/margin_medium"
                android:textColor="@color/font_color"
                />
        </LinearLayout>

        <!--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>


        <!--User name layout-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_margin="@dimen/margin_large">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/icon_user"/>
            <EditText
                android:id="@+id/userNameEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/username"
                android:inputType="text"
                android:textColorHint="@color/font_color"
                android:background="#00000000"
                android:textCursorDrawable="@drawable/custom_cursor_color"
                android:layout_marginLeft="@dimen/margin_medium"
                android:textColor="@color/font_color"
                />
        </LinearLayout>

        <!--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>

        <!--Enter name and surname  layout-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_margin="@dimen/margin_large">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/icon_user"/>
            <EditText
                android:id="@+id/userSurNameEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/enter_name_sirname"
                android:inputType="text"
                android:textColorHint="@color/font_color"
                android:background="#00000000"
                android:textCursorDrawable="@drawable/custom_cursor_color"
                android:layout_marginLeft="@dimen/margin_medium"
                android:textColor="@color/font_color"
                />
        </LinearLayout>

        <!--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>


        <!--Cell phone  layout-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_margin="@dimen/margin_large">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/icon_cell"/>
            <EditText
                android:id="@+id/userCellPhoneEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/cell_phone_nuber"
                android:inputType="phone"
                android:textColorHint="@color/font_color"
                android:background="#00000000"
                android:textCursorDrawable="@drawable/custom_cursor_color"
                android:layout_marginLeft="@dimen/margin_medium"
                android:textColor="@color/font_color"
                />
        </LinearLayout>

        <!--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>





        <!--Select country   layout-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            android:layout_marginTop="@dimen/margin_small"
            android:layout_marginBottom="@dimen/margin_small">

            <ImageView
                android:id="@+id/countryImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:src="@mipmap/icon_country"/>

            <Spinner
                android:layout_toRightOf="@+id/countryImageView"
                android:id="@+id/country_spinner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:background="@android:color/transparent"
                android:layout_centerVertical="true"/>


            <ImageView
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:src="@mipmap/icon_drop_down"/>

        </RelativeLayout>

        <!--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>

        <!--Select province   layout-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            android:layout_marginTop="@dimen/margin_small"
            android:layout_marginBottom="@dimen/margin_small">

            <ImageView
                android:id="@+id/provinceImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:src="@mipmap/icon_country"/>

            <Spinner
                android:layout_toRightOf="@+id/provinceImageView"
                android:id="@+id/province_spinner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:inputType="text"
                android:background="@android:color/transparent"
                android:layout_centerVertical="true"/>


            <ImageView
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:src="@mipmap/icon_drop_down"/>

        </RelativeLayout>


        !--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>


        <!--Select city   layout-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            android:layout_marginTop="@dimen/margin_small"
            android:layout_marginBottom="@dimen/margin_small">

            <ImageView
                android:id="@+id/cityImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:src="@mipmap/icon_country"/>

            <Spinner
                android:layout_toRightOf="@+id/cityImageView"
                android:id="@+id/city_spinner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:inputType="text"
                android:background="@android:color/transparent"
                android:layout_centerVertical="true"/>


            <ImageView
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:src="@mipmap/icon_drop_down"/>

        </RelativeLayout>

        !--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>

        <!--Select city   layout-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            android:layout_marginTop="@dimen/margin_small"
            android:layout_marginBottom="@dimen/margin_small">

            <ImageView
                android:id="@+id/suberbImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:src="@mipmap/icon_country"/>

            <Spinner
                android:layout_toRightOf="@+id/suberbImageView"
                android:id="@+id/suberb_spinner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:inputType="text"
                android:background="@android:color/transparent"
                android:layout_centerVertical="true"/>


            <ImageView
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:src="@mipmap/icon_drop_down"/>

        </RelativeLayout>

        !--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>



        <!-- &lt;!&ndash;Select country   layout&ndash;&gt;
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="horizontal"
             android:layout_margin="@dimen/margin_large">

             <ImageView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@mipmap/icon_country"/>

             <Spinner
                 android:id="@+id/country_spinner"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:inputType="text" />

         </LinearLayout>
 -->
        <!--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>


        <!--Password  layout-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_margin="@dimen/margin_large">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/icon_passwrod"/>
            <EditText
                android:id="@+id/userPasswordEditText"
                android:layout_width="match_parent"

                android:layout_height="wrap_content"
                android:hint="@string/enter_your_password"
                android:inputType="textPassword"
                android:textColorHint="@color/font_color"
                android:background="#00000000"
                android:textCursorDrawable="@drawable/custom_cursor_color"
                android:layout_marginLeft="@dimen/margin_medium"
                android:textColor="@color/font_color"
                />
        </LinearLayout>

        <!--divider line -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/font_color">

        </LinearLayout>


        <!--Confirm Password  layout-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_margin="@dimen/margin_large">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/icon_passwrod"/>
            <EditText
                android:id="@+id/userConfirmPasswordEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/confirm_password"
                android:inputType="textPassword"
                android:textColorHint="@color/font_color"
                android:background="#00000000"
                android:textCursorDrawable="@drawable/custom_cursor_color"
                android:layout_marginLeft="@dimen/margin_medium"
                android:textColor="@color/font_color"
                />
        </LinearLayout>




    </LinearLayout>

    <!--Login button-->
    <Button
        android:id="@+id/signUpButton"
        android:layout_marginLeft="@dimen/margin_large"
        android:layout_marginRight="@dimen/margin_large"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_large"
        android:layout_marginBottom="@dimen/margin_large"
        android:background="@drawable/login_btn"
        android:text="@string/signup"
        android:textSize="@dimen/text_large"
        android:textColor="@color/font_color"/>


</LinearLayout>
    </ScrollView>
</LinearLayout>
    Android sign up
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: