- Home
- >> Nerd Digest
- >> Android
Your account has been flagged due to frequent spamming, you are not permitted to post comments. Contact admin@findnerd.com.
-
How to design New user Sign Up form layout
over 8 years ago
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> <!-- <!–Select country 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_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>
Comment on it
Insert an Image
To select an image, click on it.
Image path:
Example : https://wmd-editor.com/images/cloud1.jpg
0 Comment(s)