I still dont understand how to use layouts when I'm trying to program for multiple screen sizes. I need to insert an image saying "Facebook" with a distance to the top and the textboxes a bit down.
But if I use margins it will mess up my layout on bigger screen sizes.
Can someone explain to me the layout of this picture:
You can solve this by creating layouts for different screen sizes.for that create separate layout folders for different screens and put corresponding layout there.For example
layout-sw720dp for 720dp devices /
layout-sw600dp for 600dp devices
change the dp value according to your need.
you can also make images for different sizes
OR
you can try this layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/amna2"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.codeslayers.amnalocations.LoginActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/amna" />
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="150dp">
<EditText
android:id="#+id/id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Van Name"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/amna3"
android:textColorHint="#color/amna3"
android:textColorLink="#color/amna3" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/amna3"
android:textColorHint="#color/amna3"
android:textColorLink="#color/amna3" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/district"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Destination"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/amna3"
android:textColorHint="#color/amna3"
android:textColorLink="#color/amna3" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/dbname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Database Name"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/amna3"
android:textColorHint="#color/amna3"
android:textColorLink="#color/amna3" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/email_sign_in_button"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/action_sign_in"
android:textColor="#color/amna4" />/
android:textStyle="bold" />
</LinearLayout>
You can also do some thing like this with different dimen.xml (values-sw600dp,values-sw720dp) . So you dont have to duplicate the layout files.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="32dp"
android:layout_above="#+id/inputFields"
android:id="#+id/facebook_logo"
android:gravity="center"
android:text="Facebook"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_marginTop="45dp"
android:layout_centerInParent="true"
android:id="#+id/inputFields"
android:gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<Button
android:text="Login"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:gravity="center"
android:text="Forgot password ?"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView
android:id="#+id/signupTxt"
android:layout_marginBottom="10dp"
android:layout_alignParentBottom="true"
android:text="Signup for Facebook"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/rotate_refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
Related
I need that my image was on top of my layout with margin bottom, so i tried to use Frame layout to make what i need, but my image can't leave framelayout border. Than i tried to use Relative layout,and i have the same problem. I read some posts on stackoverflow, but i didn't find the solution, all posts was about "how make image on top of view"
What i need:
Here's how i try:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#color/colorPrimaryDark"
tools:context="com.partyticket.root.partytickets.LoginActivity">
<!-- Login progress -->
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<RelativeLayout
android:id="#+id/containerLayout"
android:layout_centerVertical="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/colorPrimary"
>
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
style="#style/App_EditTextStyle"
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="7dp"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
<EditText
style="#style/App_EditTextStyle"
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"
android:imeActionId="6"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/action_sign_in"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
<ImageView
android:layout_width="81dp"
android:layout_height="81dp"
android:layout_above="#+id/containerLayout"
android:layout_marginTop="42dp"
android:src="#drawable/partytickets_small_logo" />
</RelativeLayout>
Use coordinator Layout instead of Relative Layout and than in the attribute of your ImageView use the following
app:layout_anchor="#id/your Layout Wich Will Be under the Image"
app:layout_anchorGravity="center_horizontal"
Hope this will help , it's the only way i know of.
I'm working on my xml file in android studio.
I want to have "surnameEditText" and "nameEditText", Picture, which have arrows next to them, to have the same width as the input forms that are located below them.
How to do that? This is my code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_register"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/pozadina"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.xyz.ui.RegisterActivity">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/signUpTextView"
android:layout_centerHorizontal="true"
android:orientation="vertical">
<TextView
android:id="#+id/signUpTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:text="Sign up"
android:textAlignment="center"
android:textColor="#ffffffff"
android:textSize="30sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/nameEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:backgroundTint="#ffffffff"
android:ems="10"
android:hint="Name"
android:inputType="textPersonName"
android:textColorHint="#95ffffff" />
<EditText
android:id="#+id/surnameEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:backgroundTint="#ffffffff"
android:ems="10"
android:hint="Surname"
android:inputType="textPersonName"
android:textColorHint="#95ffffff" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Top views only have margin 10dp and rest of the views have marginLeft 16dp. Change top view's margin to 16dp as well.
So I've been designing in XML in Android Studio a standard log in page - with an image covering about half of the screen, and then the edit text fields occupying the bottom half, asking for the log in details. My problem is that when I tap on the edit text fields on smaller mobile displays, it will only snap to and show the field I have selected, when I think it's far better if it were to automatically snap to show all fields and the 'Next' button at once.
An overview of the page
When I click on 'UserID' field
What I WANT to see when I click on 'UserID' field
How do I achieve this result?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context="com.example.android.brunelplanner.LoginActivity">
<!-- Login progress -->
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="250sp"
android:background="#color/colorPrimary"
android:orientation="vertical"></LinearLayout>
<RelativeLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/logo"
android:orientation="vertical">
<LinearLayout
android:id="#+id/login_fields"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.87"
android:gravity="center"
android:text="eVision Log in"
android:textColor="#000000"
android:textSize="20sp" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_userID"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"
android:imeActionId="#+id/login"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/login_fields">
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/action_sign_in"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
Cant comment so I have to write here. If you XML in question is current, you have to align parent bottom the whole layout that you want to move up. The bottom alignment must have the whole login form not just button. Also you have linear layout on top which has fixed height, that could be a problem too.
EDIT: Ok, try this, it works on my end. BUT I simplified the XML for testing so dont copy it, just try to edit your xml.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/email_login_form"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary"
android:orientation="vertical">
</LinearLayout>
<RelativeLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<LinearLayout
android:id="#+id/login_fields"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.87"
android:gravity="center"
android:text="eVision Log in"
android:textColor="#000000"
android:textSize="20sp" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/email_login_form"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:text="sign in"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
I have 2 cards in a single RelativeLayout.
The problem is that there is no elevation or shadow underneath the second card.
See the screenshot here: screenshot
Here's what I have done in the xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.abc.xyz.abcActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/cba_screen_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/cba_screen_text"
android:textColor="#android:color/white"
android:textSize="#dimen/cba_screen_text"
android:gravity="center_horizontal|center_vertical"
android:layout_gravity="center_horizontal|center_vertical"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/signup_screen_first_cardview_top_margin"
app:contentPadding="10dp"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<!-- N Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/abc_screen_name_label_topmargin">
<EditText android:id="#+id/input_n"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords"
android:textColor="#color/colorPrimary"
android:hint="N" />
</android.support.design.widget.TextInputLayout>
<!-- E Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/abc_screen_name_label_topmargin"
android:layout_marginBottom="#dimen/abc_screen_name_label_topmargin">
<EditText android:id="#+id/input_e"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords"
android:textColor="#color/colorPrimary"
android:hint="E" />
</android.support.design.widget.TextInputLayout>
<!-- P Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/abc_screen_name_label_topmargin"
android:layout_marginBottom="#dimen/abc_screen_name_label_topmargin">
<EditText android:id="#+id/input_p"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords"
android:textColor="#color/colorPrimary"
android:hint="P"/>
</android.support.design.widget.TextInputLayout>
<!-- S Button -->
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_s"
android:layout_width="#dimen/s_btn_width"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/c_btn_topmargin"
android:layout_gravity="center_horizontal"
android:padding="12dp"
android:text="C"
android:textSize="#dimen/s_btn_text_size"/>
<TextView android:id="#+id/l"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/a_topmargin"
android:text="A"
android:gravity="center"
android:textSize="16sp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_gravity="center_horizontal|center_vertical"
android:text="OR"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="#android:color/white"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentPadding="10dp"
app:cardElevation="2dp"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.gms.common.SignInButton
android:id="#+id/google_login_button"
android:layout_width="#dimen/sign_in_btn_width"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<com.facebook.login.widget.LoginButton
android:id="#+id/facebook_login_button"
android:layout_width="#dimen/sign_in_btn_width"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
Please let me know why is this happening and how can I have the shadow/elevation underneath the second card too?
Your LinearLayout is wrapping its height, cutting off the shadow of the card at the bottom.
Either put some padding on the bottom of the LinearLayout or set it to match_parent on its height.
PS that outer RelativeLayout is useless -- get rid of it and put all the padding and background on the inner LinearLayout
I want to design login page which is similar to facebook login page.
I have tried the below layout view ,if i change the orientation of my screen there is no space at bottom and also fields those i have taken completely changed.Please advice how to fix this problem?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:id="#+id/ScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#7CACF5"
android:orientation="vertical"
android:padding="10dp"
android:paddingBottom="30dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:layout_marginTop="50dp"
android:gravity="center"
android:paddingBottom="5dp"
android:text="Welcome"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="email or phone"
android:inputType="textEmailAddress"
android:paddingBottom="5dp" />
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="password"
android:inputType="numberPassword"
android:paddingBottom="5dp" >
<requestFocus />
</EditText>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Log In" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Try this
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical"
android:padding="10dp"
android:paddingBottom="30dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="50dp"
android:gravity="center"
android:paddingBottom="5dp"
android:text="Welcome"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:hint="email or phone"
android:inputType="textEmailAddress"
android:paddingBottom="5dp" />
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:ems="10"
android:hint="password"
android:inputType="numberPassword"
android:paddingBottom="5dp" >
<requestFocus />
</EditText>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Log In" />
</LinearLayout>
For this you need to create responsive layout, you must need to go through android development blog, who teaches us how to create responsive layout. In basic you need to implement different Drawables folders like Darawable-mdpi, Drawable-hdpi, Drawable-xhdpi, Drawable-xxhdpi and like wise, and you need to put your images in all the folders with same name, but with different sizes. Likewise, you need to create layout files as well but your xml must be designed with proper attributes as per your requirements.
Follow this Link
The layouts in /res/layout are applied to both portrait and landscape, unless you specify otherwise. Let’s assume you have /res/layout/login.xml and you want it to look differently in the 2 layout types.
Create folder /res/layout-land (here you will keep your landscape adjusted layouts).
Copy login.xml there make necessary changes to it. Run the application in the emulator and test it using the Ctrl + F11 combination
// Try this way,hope this will help you to solve your problem...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7CACF5"
android:gravity="center" >
<ScrollView
android:id="#+id/ScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:gravity="center"
android:text="Welcome"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:hint="email or phone"
android:inputType="textEmailAddress" />
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:ems="10"
android:hint="password"
android:inputType="numberPassword" >
</EditText>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Log In" />
</LinearLayout>
</ScrollView>
</LinearLayout>