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.
Related
I am trying to develop a simple app for project management. The problem is with the xml layout of the app screens. The app screens are proportionally not very well put in different devices. Some elements are even hidden in some devices due to lack of space.
I already tried using both linear layout and relative layout. I've always used the "Match_parent" attribute to both the width and height of the relative layout and linear layout parent block. But still in some screen sizes, some elements are not showing, they are below the display area.
<RelativeLayout
android:id="#+id/layout1"
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/white"
tools:context=".login"
android:paddingTop="20dp"
>
<ImageView
android:id="#+id/loginImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_logo"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/loginText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="LOGIN"
android:textColor="#color/orange"
android:textSize="50sp"
android:layout_below="#id/loginImage"
/>
<EditText
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/logintextbackground"
android:layout_centerHorizontal="true"
android:layout_below="#id/loginText"
android:hint="Username"
android:textColorHint="#color/lightOrange"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:textColor="#color/lightOrange"
android:maxLength="15"
/>
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/logintextbackground"
android:layout_centerHorizontal="true"
android:layout_below="#id/username"
android:hint="Password"
android:textColorHint="#color/lightOrange"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:textColor="#color/lightOrange"
android:inputType="textPassword"
android:maxLength="16"
/>
<Button
android:id="#+id/loginButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/login_button"
android:layout_below="#id/password"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/orText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="or"
android:textSize="20dp"
android:textColor="#color/orange"
android:layout_below="#id/loginButton"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/signUpButtonLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/signup"
android:layout_below="#id/loginButton"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
/>
Put a ScrollView as parent of your RelativeLayout and you should be fine. Refer code below :
<ScrollView 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/white">
<RelativeLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:paddingTop="20dp"
tools:context=".login">
<ImageView
android:id="#+id/loginImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/login_logo" />
<TextView
android:id="#+id/loginText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/loginImage"
android:layout_centerHorizontal="true"
android:text="LOGIN"
android:textColor="#color/orange"
android:textSize="50sp" />
<EditText
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/loginText"
android:layout_centerHorizontal="true"
android:background="#drawable/logintextbackground"
android:hint="Username"
android:maxLength="15"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:textColor="#color/lightOrange"
android:textColorHint="#color/lightOrange" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:layout_centerHorizontal="true"
android:background="#drawable/logintextbackground"
android:hint="Password"
android:inputType="textPassword"
android:maxLength="16"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:textColor="#color/lightOrange"
android:textColorHint="#color/lightOrange" />
<Button
android:id="#+id/loginButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/password"
android:layout_centerHorizontal="true"
android:background="#drawable/login_button" />
<TextView
android:id="#+id/orText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/loginButton"
android:layout_centerHorizontal="true"
android:text="or"
android:textColor="#color/orange"
android:textSize="20dp" />
<Button
android:id="#+id/signUpButtonLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/loginButton"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:background="#drawable/signup" />
</RelativeLayout>
</ScrollView>
For future development, I would suggest you to use ConstraintLayout instead of LinearLayout or RelativeLayout as it provides less nesting of the views.
I have one fragment called FeedBackFragment And its a Page of ViewPager and it has scrollview. But the scroll is not working.
I have 2 xml files:
parent.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:gravity="center"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
I have scrollview inside *feedback.xml* and it's **not** scrolling.
*feedback.xml*
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.promediadesigns.tecosnation.CustomScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<EditText
android:id="#+id/username"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:background="#drawable/round_et"
android:gravity="center"
android:hint="Enter Full Name..."
android:inputType="textPersonName"
android:textColor="#fff"
android:textColorHint="#fff"
android:textSize="12sp" />
<EditText
android:id="#+id/email"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:background="#drawable/round_et"
android:gravity="center"
android:hint="Enter Email..."
android:inputType="textEmailAddress"
android:textColor="#fff"
android:textColorHint="#fff"
android:textSize="12sp" />
<EditText
android:id="#+id/msg"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:background="#drawable/greyround_et"
android:hint="Type your message here..."
android:inputType="textMultiLine"
android:textColor="#color/colorPrimary"
android:textColorHint="#color/colorPrimary"
android:textSize="15sp" />
<Button
android:id="#+id/send"
android:layout_width="150dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:background="#drawable/send_icon" />
</LinearLayout>
</com.promediadesigns.tecosnation.CustomScrollView>
</LinearLayout>
Can someone help me out about the scrolling?
Change your feedbak.xml to
<?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="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<EditText
android:id="#+id/username"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:gravity="center"
android:hint="Enter Full Name..."
android:inputType="textPersonName"
android:textColor="#fff"
android:textColorHint="#fff"
android:textSize="12sp" />
<EditText
android:id="#+id/email"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:gravity="center"
android:hint="Enter Email..."
android:inputType="textEmailAddress"
android:textColor="#fff"
android:textColorHint="#fff"
android:textSize="12sp" />
<EditText
android:id="#+id/msg"
android:layout_width="200dp"
android:minHeight="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:hint="Type your message here..."
android:inputType="textMultiLine"
android:textColor="#color/colorPrimary"
android:textColorHint="#color/colorPrimary"
android:textSize="15sp" />
<Button
android:id="#+id/send"
android:layout_width="150dp"
android:layout_height="60dp"
android:layout_gravity="center"
/>
</LinearLayout>
</ScrollView>
</LinearLayout>
based on the comments it seem the problem is not actually with the scroll but rather with the softkeyboard covering the editfield, as the content of the scrollview is not actually bigger than the scrollview itself, so there is nothing to scroll.
you need to set
android:windowSoftInputMode="adjustResize"
or
android:windowSoftInputMode="adjustPan"
on your activity to get expected behaviour.
"adjustResize" The activity's main window is always resized to make
room for the soft keyboard on screen.
"adjustPan" The activity's main window is not resized to make room for
the soft keyboard. Rather, the contents of the window are
automatically panned so that the current focus is never obscured by
the keyboard and users can always see what they are typing. This is
generally less desirable than resizing, because the user may need to
close the soft keyboard to get at and interact with obscured parts of
the window.
As I'm using png as a background for my View I didn't want it to stretch in a weird way. So I put an ImageView inside RelativeLayout and set its parametrs to match parent.
The problem appears when I click on a edittext and keyboard is opening. android:windowSoftInputMode="adjustResize" and keyboard pushes every view inside relative layout up, so my background image moves to. Do you know how to fix this?
Basically I want to adjust the view but not background image.
<?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:id="#+id/login_relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:hapticFeedbackEnabled="false"
tools:context="com.example.radzik.recipes.activity.LoginActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="false"
android:cropToPadding="false"
android:scaleType="centerCrop"
app:srcCompat="#drawable/background_activity_login" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
android:gravity="center_horizontal">
<ProgressBar
android:id="#+id/progress_bar_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<LinearLayout
android:id="#+id/login_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toEndOf="#+id/progress_bar_login"
android:orientation="vertical">
<TextView
android:id="#+id/text_view_email_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="54dp"
android:layout_marginTop="15dp"
android:elevation="0dp"
android:fontFamily="#string/roboto_thin_typeface_asset_path"
android:text="EMAIL"
android:textColor="#color/white_transparent"
android:textSize="12sp" />
<EditText
android:id="#+id/edit_text_email_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:backgroundTint="#android:color/transparent"
android:fontFamily="#string/roboto_condensed_typeface_asset_path"
android:hint="example#gmail.com"
android:inputType="textEmailAddress"
android:textColor="#android:color/white"
android:textColorHint="#android:color/white" />
<TextView
android:id="#+id/text_view_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="54dp"
android:layout_marginTop="15dp"
android:elevation="0dp"
android:fontFamily="#string/roboto_thin_typeface_asset_path"
android:text="PASSWORD"
android:textColor="#color/white_transparent"
android:textSize="12sp" />
<EditText
android:id="#+id/edit_text_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/text_view_password"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:backgroundTint="#android:color/transparent"
android:fontFamily="#string/roboto_condensed_typeface_asset_path"
android:inputType="textPassword"
android:paddingBottom="5dp"
android:paddingTop="0dp"
android:textColor="#android:color/white"
android:textColorHint="#android:color/white"
android:textSize="30sp" />
<Space
android:layout_width="1dp"
android:layout_height="20dp" />
<Button
android:id="#+id/button_sign_in"
style="?android:textAppearanceSmall"
android:layout_width="350dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/button_sign_in"
android:onClick="onLoginClicked"
android:padding="10dp"
android:text="Log In"
android:textColor="#android:color/white"
android:textStyle="bold" />
<Space
android:layout_width="1dp"
android:layout_height="35dp" />
<!--<Button-->
<!--android:id="#+id/button_facebook_sign_in"-->
<!--style="?android:textAppearanceSmall"-->
<!--android:layout_width="fill_parent"-->
<!--android:layout_height="fill_parent"-->
<!--android:background="#color/colorPrimaryDark"-->
<!--android:onClick="onFacebookLogInClicked"-->
<!--android:padding="10dp"-->
<!--android:layout_marginLeft="10dp"-->
<!--android:layout_marginRight="10dp"-->
<!--android:text="Login with Facebook"-->
<!--android:textStyle="bold"-->
<!--android:textColor="#color/colorText"/>-->
<com.facebook.login.widget.LoginButton
android:id="#+id/button_facebook_login"
android:layout_width="350dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textStyle="bold"
/>
<!-- <Button
android:id="#+id/button_facebook_login"
android:layout_width="350dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/button_facebook_log_in"
android:drawableLeft="#drawable/facebook_white_logo_custom_1"
android:paddingLeft="10dp"
android:paddingRight="36dp"
android:text="Facebook"
android:textColor="#android:color/white"
android:textStyle="bold" /> -->
<Space
android:layout_width="1dp"
android:layout_height="10dp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
app:srcCompat="#drawable/login_bottom_coloured_line" />
<Button
android:id="#+id/button_sign_up"
style="?android:textAppearanceSmall"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#040C12"
android:onClick="onSignUpClicked"
android:padding="10dp"
android:text="SIGN UP"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
Background image:
background image
Try this:
Put you ImageView inside scrollview.
<ScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:src="#drawable/background_activity_login"/>
</ScrollView>
And in java set scrollview enabled false in onCreate method like below:
ScrollView scrollView = (ScrollView)findViewById(R.id.scrollView);
scrollView.setEnabled(false);
Try not to add background in scroll view add another layout for background after scrollview it work for me
I have a Coordinator layout in activity xml and an include layout that have a content layout xml. Like this:
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
android:id="#+id/main">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/content_sign_in" />
</android.support.v4.widget.NestedScrollView>
When i put my content layout inside a nestedscrollview my content layout double your heigth. Anyone can help me?
My Content layout xml:
<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:id="#+id/content_sign_in"
android:layout_width="match_parent"
android:background="#drawable/sign_up_bg"
android:layout_height="match_parent"
tools:showIn="#layout/activity_sign_in">
<ImageButton
android:id="#+id/arrow_back"
android:layout_marginTop="15dp"
android:layout_marginLeft="10dp"
android:scaleType="centerInside"
android:padding="5dp"
android:src="#drawable/ic_back_white"
android:background="#android:color/transparent"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:scaleType="centerInside"
android:layout_below="#+id/arrow_back"
android:id="#+id/logo"
android:layout_marginTop="6dp"
android:layout_centerHorizontal="true"
android:layout_width="78dp"
android:layout_height="45dp" />
<android.support.design.widget.TextInputLayout
android:textColorHint="#color/color_80ffffff"
android:id="#+id/input_layout_email"
android:layout_marginLeft="46dp"
android:hint=" "
android:layout_marginRight="46dp"
android:layout_marginTop="74dp"
android:layout_below="#+id/logo"
app:errorTextAppearance="#style/error_appearance"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/work_email"
android:gravity="center"
android:theme="#style/EditTextLogin"
android:textColorHint="#color/color_80ffffff"
android:hint="#string/hint_work_email"
android:textColor="#android:color/white"
android:textSize="14sp"
android:inputType="textEmailAddress"
android:imeOptions="actionNext"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:textColorHint="#color/color_80ffffff"
android:id="#+id/input_layout_password"
android:layout_marginLeft="46dp"
android:hint=" "
android:theme="#style/EditTextLogin"
android:layout_marginRight="46dp"
android:layout_below="#+id/input_layout_email"
app:errorTextAppearance="#style/error_appearance"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/password"
android:gravity="center"
android:textColorHint="#color/color_80ffffff"
android:hint="#string/hint_password"
android:textColor="#android:color/white"
android:textSize="14sp"
android:inputType="textPassword"
android:imeOptions="actionDone"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<Button
android:layout_below="#+id/input_layout_password"
android:id="#+id/btn_sign_in"
android:textColor="#android:color/white"
android:text="#string/btn_login"
android:layout_marginTop="26dp"
android:background="#color/colorAccent"
android:layout_marginRight="60dp"
android:layout_marginLeft="60dp"
android:layout_width="match_parent"
android:layout_height="40dp" />
<RelativeLayout
android:layout_marginTop="17dp"
android:layout_below="#+id/btn_sign_in"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/label_sign_up"
android:textSize="14sp"
android:text="#string/lbl_sign_up"
android:textColor="#color/color_80ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_toRightOf="#+id/label_sign_up"
android:textStyle="bold"
android:layout_marginLeft="5dp"
android:id="#+id/btn_sign_up"
android:textSize="14sp"
android:text="#string/txt_sign_up"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<TextView
android:id="#+id/forgot_password"
android:textColor="#color/color_80ffffff"
android:textSize="14sp"
android:gravity="center"
android:text="#string/text_forgot_password"
android:layout_marginBottom="20dp"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:visibility="gone"
android:id="#+id/layout_resend"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="86dp">
<ImageView
android:scaleType="fitXY"
android:src="#drawable/pink_bar"
android:layout_width="match_parent"
android:layout_height="86dp" />
<Button
android:id="#+id/btn_resend"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_marginTop="26dp"
android:textSize="14sp"
android:text="#string/txt_resend"
android:textColor="#color/color_505065"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="40dp" />
<ImageView
android:id="#+id/ic_email"
android:layout_marginLeft="16dp"
android:layout_marginTop="26dp"
android:src="#drawable/ic_email_confirmation_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/ic_email"
android:layout_toLeftOf="#+id/btn_resend"
android:layout_marginTop="26dp"
android:textSize="14sp"
android:text="#string/text_resend_email"
android:textColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:visibility="gone"
android:id="#+id/load"
android:background="#aa000000"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_width="50dp"
android:layout_height="50dp" />
</RelativeLayout>
i don't know why this happen
I don't see anything wrong with your layout hierarchy. Things might be a little weird because you are using an image as a background, and no fixed height and width. I don't know if this is a XML background or a image file, but if it is the latter, I'd recommend using an image view inside the relative layout with a fixed size and a scale type defined.
I am new to android development . I've made a simple demo of login screen. I used Xml to do this and have checked my output on landscape and portrait mode. It looks fine in portrait mode, but on landscape my login button is not visible and I am not able to scroll my view. I used dp in my xml file and I think it is due to dp that I have this problem.
Here are my screen shots to show what is displayed.
This is portrait mode which is looking fine ..
When I rotate my device it moves to landscape, but it is not showing button and below text view? Can I add scroll view ? or can I add in % percentage instead of dp?
Here is my code
<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"
tools:context=".MainActivity"
android:background="#223399"
android:orientation="vertical">
<TextView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"
android:text="Login here"
android:gravity="center"
/>
<EditText
android:layout_marginTop="80dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
/>
<EditText
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
/>
<Button
android:layout_marginTop="80dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/loginClick"
android:layout_gravity="center"
/>
<TextView
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceMedium"
android:text="New User?"
android:textColor="#00eeff"
android:gravity="center"
android:id="#+id/regiester_id"
/>
</LinearLayout>
java code
public static final String MyPREFERENCES = "MyPrefs" ;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
How can I set the screen up so that it looks good in portrait as well as landscape mode?
Update code
<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"
tools:context=".MainActivity"
android:background="#223399"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent">
<TextView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"
android:text="Login here"
android:gravity="center"
/>
<EditText
android:layout_marginTop="80dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
/>
<EditText
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
/>
<Button
android:layout_marginTop="80dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/loginClick"
android:layout_gravity="center"
/>
<TextView
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceMedium"
android:text="New User?"
android:textColor="#00eeff"
android:gravity="center"
android:id="#+id/regiester_id"
/>
</ScrollView>
</LinearLayout>
I gave it a quick try using layout_weight. You can more fine tune it using different weights.
<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"
tools:context=".MainActivity"
android:background="#223399"
android:orientation="vertical"
android:weightSum="5">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"
android:text="Login here"
android:gravity="center"
android:layout_weight="1"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/loginClick"
android:layout_gravity="center"
android:layout_weight="1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceMedium"
android:text="New User?"
android:textColor="#00eeff"
android:gravity="center"
android:id="#+id/regiester_id"
android:layout_weight="1"
/>
</LinearLayout>
when i rotate my device it move to landscape .it is not showing button
and below text view ? can I add scroll view ? or can I add in %
percentage instead of dp.
I would say use ScrollView for better screen adjustment, it will be helpful in smaller device screens too.
also you can make different types of layouts for every size of screens and for landscape and portrait.
please refer to developer's site for types of screen layouts.
I hope you will get info for different types of screen size from there.
ScrollView must have only one child, try to change your code like that:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#223399">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"
android:text="Login here"
android:gravity="center"
/>
<EditText
android:layout_marginTop="80dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
/>
<EditText
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
/>
<Button
android:layout_marginTop="80dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/loginClick"
android:layout_gravity="center"
/>
<TextView
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceMedium"
android:text="New User?"
android:textColor="#00eeff"
android:gravity="center"
android:id="#+id/regiester_id"
/>
</LinearLayout>
</ScrollView>
Scroll View Must have one child. So update your code with below and seee its working or not.
<ScrollView 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="#223399"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="Login here"
android:textAppearance="?android:textAppearanceLarge" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="80dp"
android:hint="Username" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:hint="Password" />
<Button
android:id="#+id/loginClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="80dp"
android:text="Login" />
<TextView
android:id="#+id/regiester_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:gravity="center"
android:text="New User?"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#00eeff" />
</LinearLayout>
</ScrollView>