2

I am working on the UI of my app.
The graphical layout I get in Eclipse while coding looks perfect and as that should be.
But when I launch the app either on an emulator or on a device, it gets distorted.
Every UI component, like Buttons, EditTexts and TextViews.
All the margins and paddings just get lost.

        <LinearLayout
            android:id="@+id/ll_grand_parent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:gravity="fill_horizontal"
            android:orientation="vertical"
            android:weightSum="10" >



            <LinearLayout
                android:id="@+id/ll_button_signin_create_account"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
              android:layout_gravity="fill"
                android:layout_marginLeft="7dp"
                android:layout_marginTop="29dp"
                android:layout_weight="2"

                android:orientation="horizontal"
                android:visibility="visible"
               >

                <Button
                    android:id="@+id/button_common_singin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"

                    android:background="@drawable/transparent_button"
                    android:gravity="center"
                    android:text="Sign In"
                    android:textColor="#FFFFFF"
                    android:textSize="13sp" />

                <Button
                    android:id="@+id/button_common_create_account"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"

                    android:background="@drawable/colored_button"
                    android:gravity="center"
                    android:text="Create Account"
                    android:textColor="#FFFFFF"
                    android:textSize="13sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/signin_main"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="5.24"
                android:orientation="vertical"
                android:visibility="gone" >

                <LinearLayout
                    android:id="@+id/ll_parent_signin_email_password"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="20sp"
                    android:layout_weight=".8"
                    android:background="@drawable/border"
                    android:orientation="vertical"
                    android:visibility="visible" >
<LinearLayout
                        android:id="@+id/ll_signin_email"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_gravity="center"
                        android:layout_weight="2"
                        android:orientation="horizontal"
                        android:visibility="visible"
                        android:weightSum="10" >

                        <TextView
                            android:id="@+id/textview_space_signin_email"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="2" />

                        <TextView
                            android:id="@+id/textview_signin_email"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:gravity="center"
                            android:text="Email"
                            android:textColor="#FFFFFF" />
                        <EditText
                            android:id="@+id/edittext_signin_email"
                            android:layout_width="wrap_content"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:background="@android:color/transparent"
                            android:gravity="center"
                            android:hint="[email protected]"
                            android:textColorHint="#FFFFFF"
                            android:textSize="13dp" />
                    </LinearLayout>
                    <View
                        android:id="@+id/view_line_signin_email_password"
                        android:layout_width="fill_parent"
                        android:layout_height="1dip"
                        android:background="#FFFFFF" />

                    <LinearLayout
                        android:id="@+id/ll_signin_password"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_gravity="center"
                        android:layout_weight="2"
                        android:orientation="horizontal"
                        android:visibility="visible"
                        android:weightSum="10" >
                        <TextView
                            android:id="@+id/textview_space_signin_password"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="1" />

                        <TextView
                            android:id="@+id/textview_signin_password"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:gravity="center"
                            android:text="Password"
                            android:textColor="#FFFFFF" />
                       <EditText
                            android:id="@+id/edittext_signin_password"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="4.49"
                            android:background="@android:color/transparent"
                            android:gravity="center"
                            android:hint="*********"
                            android:password="true"
                            android:textColorHint="#FFFFFF" />
                    </LinearLayout>
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/ll_signin_logme_parent_button"
                    android:layout_width="fill_parent"
                    android:layout_height="0dp"
                    android:layout_marginTop="20dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    android:weightSum="10" >

                    <TextView
                        android:id="@+id/textview_space_signin_loginme_button_lhs"
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="1" />
                    <Button
                        android:id="@+id/button_signin_loginme"
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="7"
                        android:background="#219AC7"
                        android:gravity="center"
                        android:text="Login Me"
                        android:textColor="#FFFFFF" />

                    <ImageView
                        android:id="@+id/textview_space_signin_logmebutton_rhs"
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight=".7" />
                </LinearLayout>
               <RelativeLayout
                   android:id="@+id/relative_layout_signin_parent_forgetpassword"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginLeft="14dp"
                    android:layout_marginTop="9dp"
                    android:visibility="visible" >
                    <TextView
                        android:id="@+id/textview_signin_forget_password"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="forget password"
                        android:textColor="#000000" />
                </RelativeLayout>
                <LinearLayout
                    android:id="@+id/ll_signin_orline_draw_parent"
                    android:layout_width="fill_parent"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    android:weightSum="10" >
                    <View
                        android:layout_width="fill_parent"
                        android:layout_height="1dip"
                        android:layout_gravity="center"
                        android:layout_weight="4"
                        android:background="#000000"
                        android:padding="20dp" />

                    <ImageView
                        android:id="@+id/imageview_signin_or_drawline"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="2"
                        android:src="@drawable/or" />
                    <View
                        android:layout_width="fill_parent"
                        android:layout_height="1dip"
                        android:layout_gravity="center"
                        android:layout_weight="4"
                        android:background="#000000"
                        android:padding="20dp" />
               </LinearLayout>
                <LinearLayout
                    android:id="@+id/ll_signin_parent_loginwith_facebook"
                    android:layout_width="fill_parent"
                    android:layout_height="0dp"
                    android:layout_marginTop="13dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    android:weightSum="10" >
                    <TextView
                        android:id="@+id/textview_space_signin_facebook_lhs"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" />
                    <ImageView
                        android:id="@+id/imageview_signin_facebook_logo"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="2"
                        android:background="@drawable/fb" />
                    <Button
                        android:id="@+id/button_singin_facebook"
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="6"
                        android:background="#3B5998"
                        android:text="login with facebook"
                        android:textColor="#FFFFFF" />
                    <TextView
                        android:id="@+id/textview_space_sigin_facebook_rhs"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" />
                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/signup_main"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="6"
                android:orientation="vertical"
                android:visibility="visible" >
                <LinearLayout
                    android:id="@+id/ll_signup_parentlayout_name"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="20sp"
                    android:layout_weight=".8"
                    android:background="@drawable/border"
                    android:orientation="vertical"
                    android:visibility="visible" >
                    <LinearLayout
                        android:id="@+id/ll_singnup_firstname"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_gravity="center"
                        android:layout_weight="2"
                        android:orientation="horizontal"
                        android:visibility="visible"
                        android:weightSum="10" >
                        <TextView
                            android:id="@+id/textview_signup_firstname"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:gravity="center"
                            android:text="First Name"
                            android:textColor="#FFFFFF" />
                        <EditText
                            android:id="@+id/edittext_signup_firstname"
                            android:layout_width="wrap_content"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:background="@android:color/transparent"
                            android:gravity="center"
                            android:hint="John"
                            android:singleLine="true"
                            android:textColor="#FFFFFF"
                            android:textColorHint="#FFFFFF"
                            />
                        <EditText
                            android:id="@+id/edittext_singup_email"
                            android:layout_width="wrap_content"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:background="@android:color/transparent"
                            android:gravity="center"
                            android:hint="[email protected]"
                            android:singleLine="true"
                            android:textColor="#FFFFFF"
                            android:textColorHint="#FFFFFF"
                            android:textSize="13dp"
                            android:visibility="gone" >

                        </EditText>
                    </LinearLayout>
                    <View
                        android:id="@+id/view_signup_line_draw_name_first_last_name"
                        android:layout_width="fill_parent"
                        android:layout_height="1dip"
                        android:background="#FFFFFF" />
                    <LinearLayout
                        android:id="@+id/ll_signup_lastname"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_gravity="center"
                        android:layout_weight="2"
                        android:orientation="horizontal"
                        android:visibility="visible"
                        android:weightSum="10" >
                        <TextView
                            android:id="@+id/textview_signup_lastname"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:gravity="center"
                            android:text="Last Name"
                            android:textColor="#FFFFFF" />
                        <EditText
                            android:id="@+id/edittext_signup_lastname"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="4.47"
                            android:background="@android:color/transparent"
                            android:gravity="center"
                            android:hint="Smith"
                            android:password="false"
                            android:singleLine="true"
                            android:textColor="#FFFFFF"
                            android:textColorHint="#FFFFFF" />
                    </LinearLayout>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/ll_singnup_email_parent"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="20sp"
                    android:layout_weight=".8"
                    android:background="@drawable/border"
                    android:orientation="vertical"
                    android:visibility="visible" >
                    <LinearLayout
                        android:id="@+id/ll_signup_email_address"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_gravity="center"
                        android:layout_weight="2"
                        android:orientation="horizontal"
                        android:weightSum="10" >

                        <TextView
                            android:id="@+id/textview_signup_email"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:gravity="center"
                            android:text="Email Address"
                           android:textColor="#FFFFFF" />

                          <EditText
                            android:id="@+id/edittext_signup_enteremail"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="4.49"
                            android:background="@android:color/transparent"
                            android:gravity="center"
                            android:hint="[email protected]"
                            android:password="false"
                            android:singleLine="true"
                            android:textColor="#FFFFFF"
                            android:textColorHint="#FFFFFF" />

                    </LinearLayout>
                    <View
                        android:id="@+id/view_signup_draw_line_email"
                        android:layout_width="fill_parent"
                        android:layout_height="1dip"
                        android:background="#FFFFFF" />

                    <LinearLayout
                        android:id="@+id/ll_signup_reenter_email"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_gravity="center"
                        android:layout_weight="2"
                        android:orientation="horizontal"
                        android:visibility="visible"
                        android:weightSum="10" >
                        <TextView
                            android:id="@+id/textview_signup_reenteremail"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="3"
                            android:gravity="center"
                            android:singleLine="true"
                            android:text="Re Enter Email Address"
                            android:textColor="#FFFFFF" />

                        <EditText
                            android:id="@+id/edittext_signup_reenteremail"
                            android:layout_width="0dp"
                            android:layout_height="fill_parent"
                            android:layout_weight="4.49"
                            android:background="@android:color/transparent"
                            android:gravity="center"
                            android:hint="[email protected]"
                            android:password="false"
                            android:singleLine="true"
                            android:textColor="#FFFFFF"
                            android:textColorHint="#FFFFFF" />
                    </LinearLayout>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/ll_signup_dob_button_parent"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                  android:layout_marginTop="13dp"
                    android:divider="@drawable/divider"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:showDividers="middle"
                    android:visibility="visible"
                    android:weightSum="3" >
                    <Button
                        android:id="@+id/button_signup_day"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/round_button"
                        android:text="BirthDate"
                        android:textColor="#000000"
                        android:textSize="10sp" />
                    <Button
                        android:id="@+id/button_signup_month"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/round_button"
                        android:divider="@drawable/divider"
                        android:showDividers="middle"
                        android:text="BirthMonth"
                        android:textColor="#000000"
                        android:textSize="10sp" />
                    <Button
                        android:id="@+id/button_singup_year"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/round_button"
                        android:singleLine="true"
                        android:text="BirthYear"
                        android:textColor="#000000"
                        android:textSize="10sp" />
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/ll_singup_radio_gender_parent"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left"
                    android:layout_marginTop="10dp"

                    android:orientation="horizontal"
                    android:visibility="visible" >
                    <RadioGroup
                        android:id="@+id/radio_signup_radiogroup"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal" >

                        <RadioButton
                            android:id="@+id/radiobutton_signup_male"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"

                            android:cursorVisible="true"
                            android:text="male "
                            android:textColor="#FFFFFF"
                            android:textColorHighlight="#ED933E" />
                        <RadioButton
                            android:id="@+id/radiobutton_signup_female"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="female"
                            android:textColor="#FFFFFF" />
                    </RadioGroup>
                </LinearLayout>
                <Button
                    android:id="@+id/button_signup_createaccount"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="13dp"
                    android:layout_marginRight="13dp"
                    android:layout_weight=".003"
                    android:background="@drawable/colored_button"
                    android:text="Create My Account"
                    android:visibility="visible" />

        </LinearLayout>
3
  • All component UI distorted because you put manual margin,padding,weight ,font size use default like font size small,medium...so on.
    – KeTaN
    May 1, 2015 at 7:23
  • It will be helpful if link is provided to show how it looks. May 1, 2015 at 8:43
  • yes KeTan , You are right .. as i just removed the maunal padding and margin , went trough the dynamic it help me alot
    – Alok
    May 4, 2015 at 7:34

1 Answer 1

0

These are the causes of your issue

 android:weightSum="10"

You have to fill parent on every view and give each one a weight to just to make this work. You can achieve a good looking app that way but it is quite labor intensive and we have not even discussed text size among different devices.

Also other stuff like

android:layout_marginLeft="7dp"

Imagine a 10 inch tablet and a normal sized phone. Think of the different dimensions of the two and how your application will stretch . What happens if your turn your app sideways? How would it look then? Go here and when your done reading it read it again. http://developer.android.com/training/basics/supporting-devices/screens.html

1
  • 1
    thnku it really helped me
    – Alok
    May 4, 2015 at 7:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.