Develop Reference

Button not visible when keyboard is shown

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" />

How do I make the ScrollView scroll behind the keyboard?

I have a screen with a lot of text and an EditText field.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/blue_dark_grey">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#+id/inputFl"
app:layout_constraintTop_toTopOf="parent"
android:layout_weight="2">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/backTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:fontFamily="#font/radikal"
android:text="#string/back"
android:textColor="#color/white"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.weare8.android.ui.widgets.TextViewBoldWhite
android:id="#+id/loginPasswordTitle"
style="#style/OnBoardingTitleTextViewStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:lineSpacingMultiplier="1.3"
android:text="#string/log_in_password_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/forgotPasswordTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginBottom="20dp"
android:text="#string/log_in_password_reset"
android:textAppearance="#style/Text.RadikalBold.White"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<LinearLayout
android:id="#+id/inputFl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintBottom_toTopOf="#id/nextTv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/passwordEt"
style="#style/OnBoardingInputEditTextStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="14dp"
android:layout_weight="1"
android:hint="#string/log_in_enter_a_password"
android:inputType="textPassword"/>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/passwordModeIv"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center_vertical"
android:src="#drawable/selector_eye"/>
</LinearLayout>
<TextView
android:id="#+id/nextTv"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/onboarding_button_blue"
android:fontFamily="#font/radikal"
android:gravity="center"
android:padding="10dp"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:text="#string/on_boarding_next_action"
android:textColor="#color/white"
android:textSize="17sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</LinearLayout>
The dark blue area (Scrollview), the password field, and the next button are stacked on top of each other in a LinearLayout. When the soft keyboard is open, it covers the contents of the ScrollView without adjusting their position, and they cannot be seen or scrolled to.
I would like to make it so that the section of the ScrollView that gets covered by the keyboard can be scrolled to when the keyboard is up, currently it stays hidden and locked in place. How do I make it react to the presence of the soft keyboard?

Can I put a Button to bottom of a ConstraintLayout inside ScrollView?

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>

How can make the two buttons to be center when I use ConstraintLayout?

I hope to make two buttons on the center of screen just like Image A when I use Code A, but in fact the two button located on the left screen just like Image B, what error code do I made in my Code A? I know that I can do it by adding a Guideline control, but why can't the Code A do it? Thanks!
Image A
Image B
Code A
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginRight="7dp"
android:layout_marginTop="2dp"
android:text="One"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLefttOf="#+id/btnCancel"
app:layout_constraintBottom_toBottomOf="parent"
/>
<Button
android:id="#+id/btnCancel"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginLeft="7dp"
android:layout_marginTop="2dp"
android:text="Two"
app:layout_constraintLeft_toRightOf="#+id/btnAddEdit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
To Cheticamp:
Thanks!
Code AA works well, why can I delete the app:layout_constraintRight_toLefttOf="#+id/btnCancel" ?
Code AA
<Button
android:id="#+id/btnAddEdit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginRight="7dp"
android:layout_marginTop="2dp"
android:text="One"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnCancel"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
/>
Code BB works well , why can I replace app:layout_constraintEnd_toEndOf="parent" with app:layout_constraintRight_toRightOf="parent"
Code BB
<Button
android:id="#+id/btnCancel"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginLeft="7dp"
android:layout_marginTop="2dp"
android:text="Two"
app:layout_constraintStart_toEndOf="#+id/btnAddEdit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
And more, could you tell me what are different between app:layout_constraintEnd_toEndOf="parent" and app:layout_constraintRight_toRightOf="parent"

Here is the corrected XML that will lay out like "Image A" without any hard coding or margins:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnCancel"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintRight_toLefttOf="#+id/btnCancel"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btnAddEdit" />
</android.support.constraint.ConstraintLayout>
The key thing to do is to constrain button "one" to the left side of the parent and button two to the right side. A packed chain is create between the two buttons. See Chains in the documentation.
You can set a start/end margin on the buttons to separate them while maintaining the centering.
CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

For your button try using this attribute for button one
app:layout_constraintHorizontal_bias="0.4"
and for button two use
app:layout_constraintHorizontal_bias="0.6"

I've updated your code, it should be working now!
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/btnAddEdit"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/adView">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Backup Name" />
</LinearLayout>
<Button
android:id="#+id/btnAddEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:text="One"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLefttOf="#+id/btnCancel" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginEnd="80dp"
android:text="Two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>

Constraint layout scroll to bottom with keypad open

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"