I am using ConstraintLayout to design a sign-up screen. I have put the ConstraintLayout inside a scroll view. The user should be able to scroll and view the whole content even when the keypad is open. This feature works when I am using RelativeLayout but doesn't work when I am using ConstraintLayout. The views which are at the bottom of the screen are being hidden behind the keypad. Following is the layout I am using.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="#FFFFFF"
android:paddingTop="23dp"
android:fillViewport="true"
tools:context="com.givhero.activities.LoginActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
tools:context="com.givhero.activities.LoginActivity">
<ImageView
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:src="#drawable/back"
android:tint="#color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp"/>
<TextView
android:id="#+id/regEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="10dp"
android:text="#string/sign_up_email"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/titles_lists"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/back"
tools:layout_editor_absoluteX="0dp"/>
<TextView
android:id="#+id/nameEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="30dp"
android:background="#android:color/transparent"
android:gravity="left"
android:hint="Name"
android:textColor="#color/dark"
android:textColorHint="#color/dark"
android:textSize="#dimen/base"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/regEmail"
/>
<View
android:id="#+id/nameDivider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="15dp"
android:background="#color/divider"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nameEditText"
/>
<EditText
android:id="#+id/emailEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="30dp"
android:background="#android:color/transparent"
android:gravity="left"
android:hint="Email"
android:inputType="textEmailAddress"
android:textColor="#color/dark"
android:textColorHint="#color/dark"
android:textSize="#dimen/base"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nameDivider"
/>
<View
android:id="#+id/emailDivider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="15dp"
android:background="#color/divider"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailEditText"/>
<Button
android:id="#+id/submitButton"
android:layout_width="0dp"
android:layout_height="62dp"
android:layout_marginEnd="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="30dp"
android:background="#drawable/button_theme"
android:enabled="false"
android:text="#string/sign_up"
android:textColor="#FFFFFF"
android:textSize="#dimen/base"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailDivider"
/>
<TextView
android:id="#+id/signUpMessage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:padding="15dp"
android:text="#string/sign_up_message"
android:textColor="#color/dark80Opacity"
android:textSize="#dimen/medium12"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/submitButton"
/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
I have added the following in Manifest.
<activity android:name=".activities.EmailSignupActivity"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustResize">
</activity>
Though it doesn't scroll as expected. Following are the screen shots for better understanding
As you can see I have some text below the EditText fields and signup button. What I am expecting is that the user should be able to scroll to the bottom of the page to see that text even if the keyboard is open. Please check the following screenshot when the keypad is open
I am unable to scroll the view when the keyboard is open.
EDIT
Hey,
If anyone is stuck with this issue and landed here for the answer. I could finally find the solution for it. I couldn't figure out the exact reason for this issue but could figure out what is causing the layout not to scroll. Initially, I have been trying to occupy the whole screen including the status bar for design and used the following in oncreate
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
The above line has caused the issue and once I have removed it, I was able to scroll the layout. I would be happy to find the reason why is the layout not scrolling if we occupy the full screen including the status bar for design.
You have to set the windowSoftInputMode on your Activity on your Manifest file.
android:windowSoftInputMode="stateVisible|adjustResize"
(or android:windowSoftInputMode="stateHidden|adjustResize" if you don't want the keyboard to show when you open the activity)
and make your design of the activity to be like that
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
/* your elements here */
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
You can use the ConstraintLayout within RelativeLayout to use the ScrollView. Give the fillViewport to ScrollView. I just change your code like I use to do. And you should give marginBottom to scroll when keyboard is on. Try it out. Hope it help.
<?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"
android:background="#FFFFFF"
android:paddingTop="23dp"
tools:context="com.givhero.activities.LoginActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
tools:context="com.givhero.activities.LoginActivity">
<ImageView
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:src="#drawable/back"
android:tint="#color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp"/>
<TextView
android:id="#+id/regEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="10dp"
android:text="#string/sign_up_email"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/titles_lists"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/back"
tools:layout_editor_absoluteX="0dp"/>
<TextView
android:id="#+id/nameEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="30dp"
android:background="#android:color/transparent"
android:gravity="left"
android:hint="Name"
android:textColor="#color/dark"
android:textColorHint="#color/dark"
android:textSize="#dimen/base"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/regEmail"
/>
<View
android:id="#+id/nameDivider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="15dp"
android:background="#color/divider"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nameEditText"
/>
<EditText
android:id="#+id/emailEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="30dp"
android:background="#android:color/transparent"
android:gravity="left"
android:hint="Email"
android:inputType="textEmailAddress"
android:textColor="#color/dark"
android:textColorHint="#color/dark"
android:textSize="#dimen/base"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nameDivider"
/>
<View
android:id="#+id/emailDivider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="15dp"
android:background="#color/divider"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailEditText"/>
<Button
android:id="#+id/submitButton"
android:layout_width="0dp"
android:layout_height="62dp"
android:layout_marginEnd="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginStart="15dp"
android:layout_marginTop="30dp"
android:background="#drawable/button_theme"
android:enabled="false"
android:text="#string/signup"
android:textColor="#FFFFFF"
android:textSize="#dimen/base"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailDivider"
/>
<TextView
android:id="#+id/signUpMessage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:padding="15dp"
android:text="#string/sign_up_message"
android:textColor="#color/dark80Opacity"
android:textSize="#dimen/medium12"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/submitButton"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</RelativeLayout>
Add this in the manifest for your activity.
android:windowSoftInputMode="stateVisible|adjustResize"
Related
I am trying to implement a functionality where the button below EditText moves up when the keyboard is shown, this is a login fragment and I would like to have this functionality similiar to what Instagram has. Right now, when keyboard is pressed, the EditText moves up but the button is hidden. I am attaching the xml below for the same.
<FrameLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="150dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="20dp">
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:scaleType="center"
android:src="#drawable/ic_back" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:layout_marginBottom="20dp"
android:orientation="vertical" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/root_constraints"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="top|center"
android:layout_marginTop="20dp"
android:elevation="20dp"
>
<ImageView
android:id="#+id/std_imageView"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="144dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/montserrat_bold"
android:textColor="#0B3148"
android:textSize="48sp"
android:textStyle="bold"/>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/sf_bold"
android:textColor="#0B3148"
android:textSize="14sp"
android:textStyle="bold"
/>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/sf_regular"
android:textColor="#0B3148"
android:textSize="14sp" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/roboto_light"
android:hint=""
android:visibility="gone"
android:inputType="number"
android:paddingStart="16dp"
android:textSize="14sp"
android:paddingTop="11dp"
android:paddingEnd="0dp"
android:paddingBottom="10dp"
android:textColorHint="#color/color_text"
android:text=""
android:drawablePadding="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:backgroundTint="#E4E4E4"
android:fontFamily="#font/roboto_light"
android:inputType="number"
android:paddingStart="16dp"
android:textSize="14sp"
android:paddingTop="11dp"
android:paddingEnd="0dp"
android:paddingBottom="10dp"
android:textColorHint="#color/color_text"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/et_countrycode"
android:visibility="gone"
android:textSize="12sp"
android:layout_marginTop="6dp"
app:layout_constraintStart_toStartOf="#+id/et_countrycode"
app:layout_constraintEnd_toEndOf="#+id/et_countrycode" />
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/finish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginHorizontal="30dp"
android:background="#drawable/bg_button_1"
android:textColor="#111B21"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</LinearLayout>
</FrameLayout>
Note: I have removed a bit of text and backgrounds but remember that all these views are essential
EDIT: I tried the following approach with adjustresize but the button is not overlapping with edittext
<FrameLayout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="150dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="20dp">
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:scaleType="center"
android:src="#drawable/back" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:layout_marginBottom="20dp"
android:orientation="vertical" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/root_constraints"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="top|center"
android:layout_marginTop="20dp"
android:elevation="20dp">
<ImageView
android:id="#+id/std_imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:backgroundTint="#38A19C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="144dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/montserrat_bold"
android:textColor="#0B3148"
android:textSize="48sp"
android:textStyle="bold"
/>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/sf_bold"
android:text="#string/welcome_to_isaac"
android:textColor="#0B3148"
android:textSize="14sp"
android:textStyle="bold" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/sf_regular"
android:textColor="#0B3148"
android:textSize="14sp" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/et_countrycode"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:backgroundTint="#E4E4E4"
android:drawablePadding="8dp"
android:fontFamily="#font/roboto_light"
android:hint=""
android:inputType="number"
android:paddingStart="16dp"
android:paddingTop="11dp"
android:paddingEnd="0dp"
android:paddingBottom="10dp"
android:text=""
android:textColorHint="#color/color_text"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/et_email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:backgroundTint="#E4E4E4"
android:fontFamily="#font/roboto_light"
android:hint="#string/phone_number"
android:inputType="number"
android:paddingStart="16dp"
android:paddingTop="11dp"
android:paddingEnd="0dp"
android:paddingBottom="10dp"
android:textColorHint="#color/color_text"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:textSize="12sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="#+id/et_countrycode"
app:layout_constraintStart_toStartOf="#+id/et_countrycode"
app:layout_constraintTop_toBottomOf="#+id/et_countrycode" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/bt_finish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="30dp"
android:layout_marginTop="12dp"
android:background="#drawable/bg_button_1"
android:text="#string/continue_txt"
android:textColor="#111B21"
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="#id/scrollView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
Use ConstraintLayout to position the button to the bottom of the screen and then add.
<activity
android:name=".activity"
android:windowSoftInputMode="adjustResize"
android:exported="false" />
...in the activity that would host that Fragment's layout.
Note
The button should be layout in this manner:
<androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/finish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
</androidx.constraintlayout.widget.ConstraintLayout>
... but right now in your code, I can see the button inside a LinearLayout. Change the layout to make the button be positioned at the bottom of a ConstraintLayout and make that ConstraintLayout the parent of that button. The ConstraintLayout should also fill the whole screen.
Edit:
When you use windowSoftInputMode="adjustResize the system positions the element at the bottom of the screen on top of the keyboard and makes your layout shrink in size. So you need to attach a ScrollView to make your layout scrollable.
Like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
...>
// Position this scrollView to fill the entire screen
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
...>
// This scroll view layout would contain all your other layout views
</ScrollView>
<Button
android:id="#+id/finish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
</androidx.constraintlayout.widget.ConstraintLayout>
Working principle
The button should not be a child view of the ScrollView, it should be a child view of the root view, which is a ConstraintLayout that fills the screen, then the button is positioned to the bottom of the root view. The bottom of the ScrollView should be positioned to the top of the Button. That way, the child views of the ScrollView is scrollable and the button stays on top of the keyboard.
Go to your AndroidMenifest File, Inside you <activity> tag put android:windowSoftInputMode = "adjustpan" it would handle the view after showing up keyboard. if adjustpan doesn't work, there are more property, use one respect to your need.
example:
<activity
android:name=".YourActivityName"
android:windowSoftInputMode="adjustPan"
android:exported="false" />
I've been pulling my hair out with this specific issue. Whenever I load the current activity (on top) of the previous activity, it causes the background of the loading activity (with transparent background) to turn black.
I can see the transparent setting when the transition is loading, but when its fully loaded it turns black.
Here is the code I use to make the background transparent:
window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
The above code works elsewhere on another view just like this one. All settings are the same on both views, but this one doesn't want to work correctly.
This is the code for the activity:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/transparent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:scaleType="fitCenter"
tools:context=".ui.activities.TourConnectActivity">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="24dp"
android:layout_marginTop="64dp"
android:layout_marginEnd="24dp"
android:background="#drawable/rounded_top"
android:contentDescription="background"
android:scaleType="centerCrop"
android:src="#drawable/launch_bg"
app:layout_constraintBottom_toTopOf="#+id/view7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<View
android:id="#+id/view7"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:background="#drawable/preview_green_border_top"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/backgroundImage" />
<ImageView
android:id="#+id/logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="128dp"
android:layout_marginEnd="128dp"
android:background="#drawable/org_logo_border"
android:contentDescription="background"
android:cropToPadding="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="#+id/view7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/dot"
tools:ignore="HardcodedText" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="315dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="64dp"
android:background="#drawable/rounded_bottom"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view7">
<TextView
android:id="#+id/connectTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="This tour is presented by"
android:textColor="#333"
android:textSize="12sp"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/connectSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/roboto"
android:text="Jackson Hole Land Trust"
android:textAlignment="center"
android:textColor="#color/colorTSGGreen"
android:textSize="20sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="175dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/transparent">
<TextView
android:id="#+id/connectMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto"
android:text="#string/lorem_ipsum_3"
android:textColor="#333"
android:textSize="16sp" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/learnMore"
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawableStart="#drawable/ic_none"
android:drawableEnd="#drawable/ic_exit_to_app"
android:onClick="buttonClick"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="#string/learn_more"
android:textColor="#color/loginTextColor"
android:textSize="18sp"
app:backgroundTint="#color/colorTSGGreen" />
</LinearLayout>
<ImageView
android:id="#+id/buttonBack"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:contentDescription="close button"
android:onClick="iconClick"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_close" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm inclined to think that it has something to do with the map view on the previous activity, but I'm not sure that could be it.
Any input would be appreciated. Thanks.
A better approach than setting a transparent background programmatically is to change its style. Especially when the background remains the same in other cases. Check out this question and its top rated answer.
I have a ScrollView contains a ConstraintLayout. Inside the ConstraintLayout, I put many views with an attribute layout_constraintTop_toBottomOf to make a relation between the view and the view top of it, and I used layout_marginTop to put spaces between the views.
In my design, I have a Button that should be in the bottom of the layout and it cannot happen with the layout_marginTop because it should have a relation with the bottom of the ConstraintLayout.
Here's my code:
<ScrollView 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.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="120dp"
android:text="Logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/un_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="25dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="User name"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo" />
<EditText
android:id="#+id/pw_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="13dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/un_et" />
<RelativeLayout
android:id="#+id/save_pw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingLeft="28dp"
android:paddingRight="28dp"
app:layout_constraintTop_toBottomOf="#id/pw_et">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:buttonTint="#bebebe"
android:text="Save account"
android:textColor="#bebebe" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Forget password?"
android:textColor="#a40000" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="17dp"
android:layout_marginRight="28dp"
android:text="Login"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/save_pw" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/btn" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Replace ScrollView with NestedScrollView & also add android:fillViewport="true" like this
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
// rest of code
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#id/btn"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Just set this property to your button:
app:layout_constraintBottom_toBottomOf="parent"
Then add this to your last view this property:
app:layout_constraintBottom_toTopOf="#+id/button"
Also, add to your last view:
android:layout_marginBottom="height_of_button"
However, if you are adding a lot of views it would be better to populate them inside a RecyclerView using an Adapter. Decide what you want to do. Also, tell me if I understood your question correctly, it was a bit confusing.
I found one solution to keep the button at the bottom, doesn't matter is your text is dynamic, read about app:layout_constraintVertical_bias https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#Bias
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<TextView
android:id="#+id/text_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
android:text="Title"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#id/text_gallery"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true">
<androidx.appcompat.widget.AppCompatTextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/texto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text=" Text \n Text" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Buton1"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#+id/texto"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
I am simply trying to make a scrollable layout with no luck...
I have no idea why it isn't working, it seems to be exactly as I read online.
The problem here is that the bottom of the included layout is cut of to fit exactly the screen size.
this is my layout xml:
<ScrollView 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"
tools:context=""
tools:layout_editor_absoluteY="81dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="opening game"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="14dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="#+id/GameTitleET"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/GameTitleET"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="153dp"
android:ems="10"
android:hint="Game's name"
android:inputType="textPersonName"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/GameContentET"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="מהלך המשחק"
android:inputType="textMultiLine"
android:maxLines="8"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/DeleteAndMakeYOurOwnButton" />
<Button
android:id="#+id/DeleteAndMakeYOurOwnButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="Write your own game"
app:layout_constraintStart_toStartOf="#+id/GameContentET"
app:layout_constraintTop_toBottomOf="#+id/numberPicker2" />
<Switch
android:id="#+id/SendToReviewSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:layout_marginStart="16dp"
android:text="הגש משחק להגשה"
app:layout_constraintBottom_toTopOf="#+id/DeleteAndMakeYOurOwnButton"
app:layout_constraintStart_toStartOf="parent" />
<include
android:id="#+id/include5"
layout="#layout/activity_create_post_methods"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/GameContentET" />
</android.support.constraint.ConstraintLayout></ScrollView>
Do you have any suggestion of what should i do? I also plan to add many more layouts to this main layout and I need it to scroll and show everything flawlessly.
Thank you a lot!
I have two linearlayout one is below the other as below:
<LinearLayout
android:layout_width="368dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:id="#+id/linearLayout">
<ImageView
android:id="#+id/reg_imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/z"/>
<TextView
android:id="#+id/reg_app_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_title"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="368dp"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp"
android:layout_marginTop="0dp"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<EditText
android:id="#+id/req_number"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ems="10"
android:hint="#string/request_number"
android:inputType="number" />
Here is the picture of the layout:
when the keyboard shows, the layout get missed up:
What is causing this issue?
NOTE: I have app:layout_constraintTop_toBottomOf="#+id/linearLayout" line in the .xml file that holds the EditText that requires the (Request number)
in manifest for this activity put
android:windowSoftInputMode="adjustNothing"