Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to design New user Sign Up form layout

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 378
    Comment on it

     In the below layout code I have created a new user Sign Up form page. Here I have created first LinearLayout all layout added in this Main LinearLayout, In below code I have also added ScrollView, Relative layout, ImageView, TextView. In drawable folder I have created Custom_cursor_color.xml, login_bg.xml, login_btn.xml layout and icons store in mipmap folder.  You can see below program it will clearly describe you to design New user Sign Up form layout in android.

    Step(1) Created activity_signup.xml layout-
    <?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>
    
    Step(2)- I have created Custom_cursor_color.xml layout in drawable folder
    
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle" >
      <size
        android:width="1dip" />
      <solid
        android:color="@color/font_color" />
    </shape> 
    
    Step(3)-I have created login_bg.xml layout in drawable folder
    
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <stroke
    
            android:width="0.5dip"
            android:color="@color/font_color" />
        <gradient android:angle="270" />
    
        <corners android:radius="6dp" />
    </shape>
    
    Step(4)-I have created login_btn.xml layout in drawable folder
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@mipmap/btn_back" android:state_pressed="true"/>
        <item android:drawable="@mipmap/btn_b_back" android:state_selected="false"/>
        <item android:drawable="@mipmap/btn_b_back" android:state_activated="false"/>
        <item android:drawable="@mipmap/btn_b_back"/>
    
    </selector>

     

 0 Comment(s)

Sign In
                           OR                           
                           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: