Layering - how to? - android

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.

Related

Elevation on button causing problems with view

I am trying to make the WHOLE of the blue button (As seen on the picture) on the top of the view. However, it is only showing the button half. I have sussed out it's something to do with the elevation, however I'm not sure what as I have tried the possibilities I can think of.
My XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:gravity="center"
android:orientation="vertical"
android:baselineAligned="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#color/colorPrimary" />
<View
android:id="#+id/contentView"
android:layout_width="341dp"
android:layout_height="340dp"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:layout_marginTop="250dp"
android:background="#drawable/login_container"
android:elevation="8dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/contentView"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:elevation="8dp"
android:text="LOGIN"
android:textColor="#color/black"
android:textSize="24sp" />
<EditText
android:id="#+id/emailAddress"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:layout_below="#+id/background"
android:layout_centerHorizontal="true"
android:layout_marginTop="41dp"
android:elevation="8dp"
android:ems="10"
android:hint="Email address"
android:inputType="textEmailAddress"
android:textColor="#color/colorPrimary" />
<EditText
android:id="#+id/password"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:layout_below="#+id/emailAddress"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:elevation="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#color/colorPrimary" />
<Button
android:id="#+id/loginButton"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="45dp"
android:background="#drawable/login_button"
android:elevation="8dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
take button out of relative layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:gravity="center"
android:orientation="vertical"
android:baselineAligned="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#color/colorPrimary" />
<View
android:id="#+id/contentView"
android:layout_width="341dp"
android:layout_height="340dp"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:layout_marginTop="250dp"
android:background="#drawable/login_container"
android:elevation="8dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/contentView"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:elevation="8dp"
android:text="LOGIN"
android:textColor="#color/black"
android:textSize="24sp" />
<EditText
android:id="#+id/emailAddress"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:layout_below="#+id/background"
android:layout_centerHorizontal="true"
android:layout_marginTop="41dp"
android:elevation="8dp"
android:ems="10"
android:hint="Email address"
android:inputType="textEmailAddress"
android:textColor="#color/colorPrimary" />
<EditText
android:id="#+id/password"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:layout_below="#+id/emailAddress"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:elevation="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#color/colorPrimary" />
</RelativeLayout>
<Button <----- change
android:id="#+id/loginButton"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="45dp"
android:background="#drawable/login_button"
android:elevation="8dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
problem is not button elevations is your View hiding button
<View
android:id="#+id/contentView"
android:layout_width="341dp"
android:layout_height="340dp"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:layout_marginTop="250dp"
android:background="#drawable/login_container"
android:elevation="8dp" />
this part is hiding your button you can check it in xml
I would suggest using Scrol view as well because this UI wont work on small screen devices as many heights are hard coded
My apologies to be blunt, but your layout is not well designed.
You have linearLayout with nested RelativeLayout and the parent is now not serving a purpose.
Use the root that you intend to use. If it is relative layout, then use that. If you plan to stack more content below or above the relative layout then it makes sense, but your sample it doesn't serve a purpose.
Now as to your problem. You are using a relative layout and just stacking views on views on views. First, your parent should have the container background, you should not have a view nested in the parent RelativeLayout that has the background intended to be the parent's background.
So I would move your container background to the RelativeLayout and remove the view altogether as your hard coded height width on that could be playing a role as well.
So before we hunt down any goofy behaviors, let's get the design done properly first than we can see what we are looking for if it is still acting up.
Try something like this instead:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:gravity="center"
android:orientation="vertical"
android:baselineAligned="false">
<View
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#color/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="35dp"
android:layout_marginRight="35dp"
android:layout_marginTop="250dp"
android:orientation="vertical"
android:background="#drawable/login_container">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:elevation="8dp"
android:text="LOGIN"
android:textColor="#color/black"
android:textSize="24sp" />
<EditText
android:id="#+id/emailAddress"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:elevation="8dp"
android:ems="10"
android:hint="Email address"
android:inputType="textEmailAddress"
android:textColor="#color/colorPrimary" />
<EditText
android:id="#+id/password"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:elevation="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#color/colorPrimary" />
<Button
android:id="#+id/loginButton"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="45dp"
android:background="#drawable/login_button"
android:elevation="8dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
I can't test it as i don't have your code, and you will have to adjust the margins. Also, change your preview to the 3.7 so you can see that your design may need some adjusting for small devices. Lastly, you could always use a cardview for this if desired.

Android: How to center a LinearLayout between the screen and a button in RelativeLayout?

I have the following XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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" >
<LinearLayout
android:id="#+id/login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp">
<EditText
android:id="#+id/login_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="#string/login_email"
android:inputType="textEmailAddress" />
<EditText
android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="#string/login_password"
android:inputType="textPassword" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_weight="1"
android:text="#string/forgot_pass"
android:textAlignment="textEnd"
android:textColor="#android:color/holo_blue_dark" />
</LinearLayout>
<Button
android:id="#+id/login_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-5dip"
android:layout_marginLeft="-5dip"
android:layout_marginRight="-5dip"
android:layout_marginTop="-5dip"
android:background="#android:color/holo_blue_dark"
android:text="#string/login_button"
android:textColor="#android:color/background_light" />
</RelativeLayout>
As you can see I have a button that's on the bottom of my screen, but I want to centralize the LinearLayout between the top of the screen and the button, not the top of the screen with the bottom of the screen.
I've already tried android:layout_centerVertical="true" but it isn't what I want.
How do I proceed?
Use this code, and your linearlayout will be center aligned between top and bottom button
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/login_btn"
>
<LinearLayout
android:id="#+id/login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp">
<EditText
android:id="#+id/login_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="#string/login_email"
android:inputType="textEmailAddress" />
<EditText
android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="#string/login_password"
android:inputType="textPassword" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_weight="1"
android:text="#string/forgot_pass"
android:textAlignment="textEnd"
android:textColor="#android:color/holo_blue_dark" />
</LinearLayout>
</RelativeLayout>
<Button
android:id="#+id/login_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-5dip"
android:layout_marginLeft="-5dip"
android:layout_marginRight="-5dip"
android:layout_marginTop="-5dip"
android:background="#android:color/holo_blue_dark"
android:text="#string/login_button"
android:textColor="#android:color/background_light" />
</RelativeLayout>
Right now, it's centered relative to the parent element. If you want to center between the button and the top, you need another RelativeLayout that surrounds the LinearLayout with the button outside and make that match the parent boundaries. Then you center the LinearLayout in that. You might as well just make the outer element a LinearLayout.
Or you can also use a FrameLayout with center gravity around the inner LinearLayout
Or, ConstraintLayout might be even better
you don't have to add another relative layout for that
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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" >
<LinearLayout
android:id="#+id/login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_alignParentTop="true"
android:layout_above="#id/login_btn"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp">
<EditText
android:id="#+id/login_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/login_email"
android:inputType="textEmailAddress" />
<EditText
android:id="#+id/login_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/login_password"
android:inputType="textPassword" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_weight="1"
android:text="#string/forgot_pass"
android:textAlignment="textEnd"
android:textColor="#android:color/holo_blue_dark" />
</LinearLayout>
<Button
android:id="#+id/login_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-5dip"
android:layout_marginLeft="-5dip"
android:layout_marginRight="-5dip"
android:layout_marginTop="-5dip"
android:background="#android:color/holo_blue_dark"
android:text="#string/login_button"
android:textColor="#android:color/background_light" />
</RelativeLayout>
Try this I hope this is what you are looking for?
your linear layout is covering all the area from the top of your screen till the top of the button.

Android - How to structure a simple Layout

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>

Edit text fields snapping into view

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>

EditText hides under keyboard when clicked on

I'm trying to create an Android app at the moment. Right now I'm doing some fiddling with EditTexts, and I happened to notice that when I click on the EditText, it drops below the keyboard. When I click on the keyboard, I notice the EditText and the button drop to an area below where the keyboard would obstruct it.
Here's my layout:
<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"
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="me.flipbook.android.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" />
<TextView
android:id="#+id/flipbookText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="36dp"
android:drawableLeft="#drawable/flipbook_logo"
android:drawablePadding="16dp"
android:fitsSystemWindows="true"
android:text="Flipbook"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFF"
android:textSize="48dp"
android:textStyle="bold" />
<ScrollView
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
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" />
<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:textColor="#f70"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
</LinearLayout>
By changing <activity android:windowSoftInputMode="adjustResize"/>
to adjustPan as mentioned here, I was able to fix my issue.

Categories

Resources