I would like to check if there's a collision between Text Views, if there is, ellipsis should be displayed instead of them colliding with each other.
I already tried this, but it doesn't work on mine (probably because of the font family that I'm currently using, too many spaces)
Here's some of the XML code, (I'm using Constraint layout):
<?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"
tools:context=".SettingsActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="55dp"
android:layout_marginBottom="55dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="30dp"
tools:context=".SettingsActivity">
<TextView
android:id="#+id/screenText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:text="Screen"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/songsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:text="Songs"
android:textColor="#color/colorPrimary"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor3" />
<Spinner
android:id="#+id/fontSizeInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:gravity="right"
android:padding="0dp"
android:paddingEnd="32dp"
android:paddingRight="32dp"
android:spinnerMode="dialog"
android:divider="#8e8e8e"
app:layout_constraintBottom_toBottomOf="#+id/fontSizeText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/fontSizeText" />
<Spinner
android:id="#+id/fontFamilyInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="0dp"
android:paddingEnd="32dp"
android:paddingRight="32dp"
android:spinnerMode="dialog"
app:layout_constraintBottom_toBottomOf="#+id/fontFamilyText"
app:layout_constraintEnd_toEndOf="#+id/fontSizeInput"
app:layout_constraintTop_toTopOf="#+id/fontFamilyText" />
<Spinner
android:id="#+id/searchUsingInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="0dp"
android:paddingEnd="32dp"
android:paddingRight="32dp"
android:spinnerMode="dialog"
app:layout_constraintBottom_toBottomOf="#+id/searchUsingText"
app:layout_constraintEnd_toEndOf="#+id/darkModeInput"
app:layout_constraintTop_toTopOf="#+id/searchUsingText" />
<Spinner
android:id="#+id/displayOrderInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="0dp"
android:paddingRight="32dp"
android:singleLine="true"
android:spinnerMode="dialog"
app:layout_constraintBottom_toBottomOf="#+id/displayOrderText"
app:layout_constraintEnd_toEndOf="#+id/searchUsingInput"
app:layout_constraintTop_toTopOf="#+id/displayOrderText"
android:paddingEnd="32dp" />
<TextView
android:id="#+id/fontSizeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="12dp"
android:text="Font Size"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/screenText" />
<View
android:id="#+id/SplitLine_hor1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fontSizeText" />
<View
android:id="#+id/splitLine_hor"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fontFamilyText" />
<View
android:id="#+id/splitLine_hor2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/copyTextText" />
<View
android:id="#+id/splitLine_hor3"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/darkModeText" />
<View
android:id="#+id/splitLine_hor4"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchUsingText" />
<View
android:id="#+id/splitLine_hor5"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/displayOrderText" />
<View
android:id="#+id/splitLine_hor7"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:background="#color/colorGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/swipeHymnText" />
<TextView
android:id="#+id/fontFamilyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Font Family"
app:layout_constraintStart_toStartOf="#+id/fontSizeText"
app:layout_constraintTop_toBottomOf="#+id/SplitLine_hor1" />
<TextView
android:id="#+id/copyTextText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Copy Texts"
app:layout_constraintStart_toStartOf="#+id/fontFamilyText"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor" />
<TextView
android:id="#+id/darkModeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Dark Mode"
app:layout_constraintStart_toStartOf="#+id/copyTextText"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor2" />
<TextView
android:id="#+id/searchUsingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Search Using"
app:layout_constraintStart_toStartOf="#+id/darkModeText"
app:layout_constraintTop_toBottomOf="#+id/songsText" />
<TextView
android:id="#+id/displayOrderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Display Order"
app:layout_constraintStart_toStartOf="#+id/searchUsingText"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor4" />
<TextView
android:id="#+id/swipeHymnText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:text="Swipe Through Songs"
app:layout_constraintStart_toStartOf="#+id/displayOrderText"
app:layout_constraintTop_toBottomOf="#+id/splitLine_hor5" />
<Switch
android:id="#+id/copyTextInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/copyTextText"
app:layout_constraintEnd_toEndOf="#+id/fontFamilyInput" />
<Switch
android:id="#+id/darkModeInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/darkModeText"
app:layout_constraintEnd_toEndOf="#+id/copyTextInput" />
<Switch
android:id="#+id/swipeHymnInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/swipeHymnText"
app:layout_constraintEnd_toEndOf="#+id/displayOrderInput" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Try nesting a horizontal linear layout inside your constraint layout. Place it where your
fontFamilyInput spinner is currently located. Next, place your fontFamilyText TextView and your fontFamilyInput spinner (in that order) inside the linear layout.
You can now use weights inside the two child views to declare where on the screen the text view stops and the spinner begins.
However, remember that this is just one approach.
Try adding this to your TextView MaxEms determins the number of character before ellipsis is shown
android:ellipsize="end"
android:maxEms="15"
android:singleLine="true"
Related
I am facing a problem while opening recyclerview in a dialog box. The layout in the recyclerview is overlapping and cutting when I open this in a dialog box same like this:
But, my original layout is look like this:
and here is the code for my layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
android:layout_margin="8dp"
android:layout_marginBottom="14dp"
android:elevation="10dp"
android:padding="8dp"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/corner_layout"
android:paddingTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/r_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Admission No."
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/r_d_field_name"
app:layout_constraintStart_toStartOf="#+id/r_d_field_name"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/admission_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="45654"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_name"
app:layout_constraintStart_toStartOf="#+id/st_name"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/r_d_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Student Name"
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toTopOf="#+id/p_a_field_name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/r_field_name"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/st_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Harikant Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_father_mother_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/admission_no" />
<TextView
android:id="#+id/p_a_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Parents Name"
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/btn_call_st"
app:layout_constraintStart_toStartOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/r_d_field_name"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/st_father_mother_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suresh Kumar Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/btn_view_st_profile"
app:layout_constraintStart_toStartOf="#+id/st_name"
app:layout_constraintTop_toBottomOf="#+id/st_name" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_view_st_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="100dp"
android:layout_marginBottom="12dp"
android:gravity="center"
android:src="#drawable/view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_call_st"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.9"
app:tint="#color/white" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_call_st"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:backgroundTint="#E10751"
android:gravity="center"
android:src="#drawable/phone"
app:layout_constraintBottom_toBottomOf="#+id/btn_view_st_profile"
app:layout_constraintEnd_toStartOf="#+id/btn_view_st_profile"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/btn_view_st_profile"
app:tint="#color/white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
If you constrain both left and right, you need to set width=0dp
<TextView
android:id="#+id/st_name"
android:layout_width="0dp" <-- change to 0dp
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Harikant Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_father_mother_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/admission_no" />
I am developing android app and I have implemented constrainlayout but in real device password edit text and register button overlapping to each other I want to empty space between them how can achieve that
below my currentlayout
<?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/white">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="100dp"
android:background="#drawable/circle_back"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person">
<ImageView
android:id="#+id/person_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person" />
</androidx.constraintlayout.widget.ConstraintLayout>
<EditText
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:hint="#string/firstname"
style="#style/textFieldStyle"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"
tools:ignore="RtlSymmetry"
android:autofillHints="" />
<EditText
android:id="#+id/email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
style="#style/textFieldStyle"
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/lastName"
tools:ignore="TextFields" />
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/already_have_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/already_have_an_account"
android:textColor="#color/primaryBlack"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:hint="#string/password"
android:inputType="textPassword"
style="#style/textFieldStyle"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email" />
<EditText
android:id="#+id/lastName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
style="#style/textFieldStyle"
android:hint="#string/lastName"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/name" />
</androidx.constraintlayout.widget.ConstraintLayout>
following screenshot in real device I want to know what I have to do in order to put space between password and register button
but I want to see in real device as if you see there space between password and register button
Add a constraint from the top of the register button to the bottom of the password field. Every element should have a top and bottom constraint to not overlap another element that is above or below it.
When you do something like android:layout_marginBottom="40dp", you will eventually get some views overlapping and that's because you are using hardcoded values, you want to adjust your views to the size of your screen in a responsive way.
You can do it using Guidelines, app:layout_constraintHeight_percent="0.xx" and chain verticly your views:
Inside you constarintLayout (I have used a single layout)
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="FirstName"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName2"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<EditText
android:id="#+id/editTextTextPersonName2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="LastName"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName3"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName" />
<EditText
android:id="#+id/editTextTextPersonName3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="Email"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName4"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName2" />
<EditText
android:id="#+id/editTextTextPersonName4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="Password"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName3" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:text="Register"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName4"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName4"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName4" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.85" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already have account?"
app:layout_constraintBottom_toBottomOf="#+id/textView2"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log in"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/guideline2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
app:layout_constraintGuide_percent="0.05"
android:layout_height="wrap_content"
android:orientation="vertical" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.95"
android:orientation="vertical" />
It will look like this (arrows pointing to the guidelines):
Adding app:layout_constraintTop_toBottomOf.
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/password" />
Adding app:layout_constraintBottom_toTopOf="#id/registration"
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:hint="#string/password"
android:inputType="textPassword"
style="#style/textFieldStyle"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email"
app:layout_constraintBottom_toTopOf="#id/registration" />
The above solution works only when all of your views are within a single screen. If height of the View is bigger than the screen, then you may need ScrollView or other method.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
... your main content here ...
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
Adding ScrollView and LinearLayout outside your main content ConstraintLayout solves the overlapping issue, and allow bigger view to scroll on smaller view.
Try increasing the margin_botton of the password field and also decreasing margin_botton of the Button.
The Problem is that your register button is bottom aligned, while the above elements are top aligned, which means they will overlap on smaller screens.
Try updating your Register button in the following way to enforce a minimum top margin with the password field if there is too little space (I just added a constraint to the password field, set constraintVerticalbias to 1.0 and set a topMargin):
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="ENTER YOUR TOP MARGIN HERE"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"
app:layout_constraintVertical_bias="1.0" />
IMPORTANT: To make this work you need to wrap your screen in a Scrollview with android:fillViewport="true".
Here would be your whole layout reworked so that it should work (with registerbutton minimum top margin of 40dp):
<?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:background="#color/white">
<ScrollView
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="wrap_content">
<LinearLayout
android:id="#+id/constraintLayout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="100dp"
android:background="#drawable/circle_back"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person">
<ImageView
android:id="#+id/person_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person" />
</LinearLayout>
<EditText
android:id="#+id/name"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:autofillHints=""
android:hint="#string/firstname"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"
tools:ignore="RtlSymmetry" />
<EditText
android:id="#+id/email"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/lastName"
tools:ignore="TextFields" />
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/already_have_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/already_have_an_account"
android:textColor="#color/primaryBlack"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/password"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email" />
<EditText
android:id="#+id/lastName"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/lastName"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/name" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</LinearLayout>
I am trying to get something like this in one of my activities:
attraction detailed view
I want the image to be fixed at the top, the middle bit with the text to be scrollable as description and short description will have quite a lot of text, and the buttons to be fixed to the bottom. only the middle one is permanent visibility, the margin ones are hidden or visible depending type of attraction listed.
I tried to enclose in linear layouts but didnt work, most probably my mistake.
My xml file is :
<?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/colorAccent"
tools:context=".DetailedViewActivity">
<TextView
android:id="#+id/textViewDetailedName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/share_bold"
android:text="#string/name"
android:textAlignment="center"
android:textColor="#color/colorDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4" />
<TextView
android:id="#+id/textViewDetailedAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/address"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoAddress"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoAddress"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoAddress" />
<TextView
android:id="#+id/textViewDetailedPostCode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/post_code"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoPostCode"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoPostCode"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoPostCode" />
<TextView
android:id="#+id/textViewDetailedShortDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/short_description"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoShortDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoShortDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoShortDesc" />
<TextView
android:id="#+id/textViewDetailedDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/description"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoDescription" />
<TextView
android:id="#+id/textViewDetailedPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/price"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoPrice" />
<TextView
android:id="#+id/textViewDetailedInfoAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:fontFamily="#font/share"
android:text="#string/address"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedName" />
<TextView
android:id="#+id/textViewDetailedInfoPostCode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/post_code"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedAddress"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedAddress"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedAddress" />
<TextView
android:id="#+id/textViewDetailedInfoShortDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/short_description"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedPostCode"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedPostCode"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedPostCode" />
<TextView
android:id="#+id/textViewDetailedInfoDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/description"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedShortDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedShortDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedShortDesc" />
<TextView
android:id="#+id/textViewDetailedInfoPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/price"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedDesc" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="match_parent"
android:layout_height="270dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image" />
<Button
android:id="#+id/btnReadReviews"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/read_reviews"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnBook"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/book"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/btnPostReview"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/add_review"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can wrap all scroll views into ScroolView and use another ConstraintLayout inside the ScroolView. You can found an example here
I have the following layout in my android app but I have a problem with windowSoftInputMode="adjustResize" in the activity. The layout contains a next button at the bottom of the screen. When the keyboard is opened, the button is overlapping the input fields instead of collapsing the toolbar.
I've tried
adding android:fitsSystemWindows="true" to the parent layout
setting adjustPan in the manifest
wrapping the constraintlayout and button in a nestedscrollview
wrapping the coordinatorlayout in a Relativelayout
Read:
adjustResize does not work with CoordinatorLayout
Coordinatorlayout adjustresize not working
Remarks:
The funny thing is, when I'm typing something in the first EditText field, when the text goes past the default width, only then it does resize the toolbar and collapses it.
<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.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/save_button">
<include layout="#layout/layout_toolbar" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/report_input_name_hint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/customfont"
android:text="#string/report_phonenumber_name_hint"
android:textColor="#color/light_grey"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/report_input_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:background="#android:color/transparent"
android:fontFamily="#font/customfont"
android:hint="#string/report_phonenumber_name_hint"
android:inputType="textPersonName"
android:maxLength="120"
android:textColorHint="#color/text_color_hint"
android:textSize="#dimen/text_18sp"
app:layout_constraintEnd_toStartOf="#+id/clear_text_button_name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/report_input_name_hint" />
<ImageView
android:id="#+id/clear_text_button_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:contentDescription="#string/accessibility_image_description_clear_text_button"
android:padding="#dimen/linespace_10dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/report_input_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/report_input_name"
app:srcCompat="#drawable/icn_pro_cross" />
<View
android:id="#+id/textview_underline_name"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:background="#color/light_grey"
app:layout_constraintEnd_toEndOf="#+id/clear_text_button_name"
app:layout_constraintStart_toStartOf="#+id/report_input_name"
app:layout_constraintTop_toBottomOf="#+id/report_input_name" />
<android.support.constraint.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="report_input_name,textview_underline_name,clear_text_button_name,report_input_name_hint"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview_underline_name" />
<TextView
android:id="#+id/report_input_number_hint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/customfont"
android:text="#string/telefoonnummer"
android:textColor="#color/light_grey"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/barrier2" />
<ImageView
android:id="#+id/country_flag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:adjustViewBounds="false"
android:contentDescription="#string/accessibility_image_description_country_flag"
android:padding="#dimen/linespace_10dp"
android:src="#drawable/flag_netherlands"
app:layout_constraintBottom_toBottomOf="#+id/report_input_number"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/report_input_number" />
<ImageView
android:id="#+id/dropdown_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rotation="90"
android:src="#drawable/dropdown_arrow"
app:layout_constraintBottom_toBottomOf="#+id/country_flag"
app:layout_constraintStart_toEndOf="#+id/country_flag"
app:layout_constraintTop_toTopOf="#+id/country_flag"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/country_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:fontFamily="#font/customfont"
android:text="#string/report_phone_dutch_country_code"
android:textColor="#color/dark_text"
android:textSize="#dimen/text_18sp"
app:layout_constraintBottom_toBottomOf="#+id/report_input_number"
app:layout_constraintStart_toEndOf="#+id/dropdown_arrow"
app:layout_constraintTop_toTopOf="#+id/report_input_number" />
<EditText
android:id="#+id/report_input_number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/transparent"
android:focusable="true"
android:fontFamily="#font/customfont"
android:hint="#string/report_phone_text_hint"
android:inputType="number"
android:maxLength="13"
android:textColorHint="#color/text_color_hint"
android:textSize="#dimen/text_18sp"
app:layout_constraintEnd_toStartOf="#+id/clear_text_button"
app:layout_constraintStart_toEndOf="#+id/country_code"
app:layout_constraintTop_toBottomOf="#+id/report_input_number_hint" />
<ImageView
android:id="#+id/clear_text_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:contentDescription="#string/accessibility_image_description_clear_text_button"
android:padding="#dimen/linespace_10dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/report_input_number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/report_input_number"
app:srcCompat="#drawable/icn_pro_cross" />
<View
android:id="#+id/textview_underline_number"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:background="#color/light_grey"
app:layout_constraintEnd_toEndOf="#+id/clear_text_button"
app:layout_constraintStart_toStartOf="#+id/country_flag"
app:layout_constraintTop_toBottomOf="#+id/report_input_number" />
<TextView
android:id="#+id/error_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:paddingBottom="#dimen/activity_vertical_margin"
android:textColor="#color/emergency_button_color"
app:layout_constraintEnd_toEndOf="#+id/textview_underline_number"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/textview_underline_number"
app:layout_constraintTop_toBottomOf="#+id/textview_underline_number" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
<Button
android:id="#+id/save_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#drawable/report_next_button_background"
android:enabled="false"
android:text="#string/melden_input_volgende"
android:textAllCaps="false"
android:textColor="#color/inactive_text"
android:textSize="#dimen/text_16sp"
android:textStyle="bold" />
Desired result on smaller devices when there is not enough room to display the input fields + button under the expanded toolbar:
Currently I have a very hacky solution which is by far from optimal. I would gladly hear if anyone has a better solution. I figured out that the toolbar won't collapse since the view that is focussed, is already visible. So now i programmatically switch focus to the last item and back to the first item to collapse the toolbar.
report_input_number.requestFocus()
Handler().postDelayed( {
report_input_name.requestFocus()
}, 350)
I'm using the following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|bottom"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<include layout="#layout/layout_toolbar" />
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp">
<TextView
android:id="#+id/report_input_name_hint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/report_phonenumber_name_hint"
android:textColor="#color/light_grey"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/report_input_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:background="#android:color/transparent"
android:hint="#string/report_phonenumber_name_hint"
android:inputType="textPersonName"
android:maxLength="120"
android:textColorHint="#color/text_color_hint"
android:textSize="#dimen/text_18sp"
app:layout_constraintEnd_toStartOf="#+id/clear_text_button_name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/report_input_name_hint" />
<ImageView
android:id="#+id/clear_text_button_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:contentDescription="#string/accessibility_image_description_clear_text_button"
android:padding="#dimen/linespace_10dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/report_input_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/report_input_name"
app:srcCompat="#drawable/icn_pro_cross" />
<View
android:id="#+id/textview_underline_name"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:background="#color/light_grey"
app:layout_constraintEnd_toEndOf="#+id/clear_text_button_name"
app:layout_constraintStart_toStartOf="#+id/report_input_name"
app:layout_constraintTop_toBottomOf="#+id/report_input_name" />
<TextView
android:id="#+id/report_input_number_hint"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="#string/telefoonnummer"
android:textColor="#color/light_grey"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview_underline_name" />
<ImageView
android:id="#+id/country_flag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:adjustViewBounds="false"
android:contentDescription="#string/accessibility_image_description_country_flag"
android:padding="#dimen/linespace_10dp"
android:src="#drawable/flag_netherlands"
app:layout_constraintBottom_toBottomOf="#+id/report_input_number"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/report_input_number" />
<ImageView
android:id="#+id/dropdown_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rotation="90"
android:src="#drawable/dropdown_arrow"
app:layout_constraintBottom_toBottomOf="#+id/country_flag"
app:layout_constraintStart_toEndOf="#+id/country_flag"
app:layout_constraintTop_toTopOf="#+id/country_flag"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/country_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text="#string/report_phone_dutch_country_code"
android:textColor="#color/dark_text"
android:textSize="#dimen/text_18sp"
app:layout_constraintBottom_toBottomOf="#+id/report_input_number"
app:layout_constraintStart_toEndOf="#+id/dropdown_arrow"
app:layout_constraintTop_toTopOf="#+id/report_input_number" />
<EditText
android:id="#+id/report_input_number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/transparent"
android:focusable="true"
android:hint="#string/report_phone_text_hint"
android:inputType="number"
android:maxLength="13"
android:textColorHint="#color/text_color_hint"
android:textSize="#dimen/text_18sp"
app:layout_constraintEnd_toStartOf="#+id/clear_text_button"
app:layout_constraintStart_toEndOf="#+id/country_code"
app:layout_constraintTop_toBottomOf="#+id/report_input_number_hint" />
<ImageView
android:id="#+id/clear_text_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:contentDescription="#string/accessibility_image_description_clear_text_button"
android:padding="#dimen/linespace_10dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/report_input_number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/report_input_number"
app:srcCompat="#drawable/icn_pro_cross" />
<View
android:id="#+id/textview_underline_number"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:background="#color/light_grey"
app:layout_constraintEnd_toEndOf="#+id/clear_text_button"
app:layout_constraintStart_toStartOf="#+id/country_flag"
app:layout_constraintTop_toBottomOf="#+id/report_input_number" />
<TextView
android:id="#+id/error_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:paddingBottom="#dimen/activity_vertical_margin"
android:textColor="#color/emergency_button_color"
app:layout_constraintEnd_toEndOf="#+id/textview_underline_number"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/textview_underline_number"
app:layout_constraintTop_toBottomOf="#+id/textview_underline_number" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<Button
android:id="#+id/save_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_weight="0"
android:background="#drawable/report_next_button_background"
android:enabled="false"
android:text="#string/melden_input_volgende"
android:textAllCaps="false"
android:textColor="#color/inactive_text"
android:textSize="#dimen/text_16sp"
android:textStyle="bold" />
</LinearLayout>
You need to set on the CoordinatorLayout:
android:fitsSystemWindows="false"
This value is default true. In your Android Manifest you need to set the following for the Activity related:
windowSoftInputMode="adjustResize"
I found the solution to the question in this article:
https://code.luasoftware.com/tutorials/android/move-layout-when-keyboard-shown/
I know it's been a while since someone wrote on this thread, but since I came along this as well, I wanted to share my results.
Use adjustpan. It will solve your issue.
I am creating a layout where i need to create 2 rows of three elements each. For the middle elements (Qty and 4901) of both rows I want the text to left align.
I have created 2 horizontal chains with chainStyle as spread_inside.
Here is the layout xml:
https://gist.github.com/asheshb/cb2effdbb92e34d897672eb730339896
Any idea how to do that?
Try the layout below although I don't recommend this approach, because if you insert a value in the TextView (for example that Curr. Value) that is too long, only the element attached (in this case the TextView containing this number 15,13,184) will adapt to these changes and the than the layout will be corrupted.
<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:id="#+id/nse_item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<TextView
android:id="#+id/tvStockName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="ICICI BANK LIMITED" />
<TextView
android:id="#+id/tvStockSymbol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/tvStockName"
app:layout_constraintTop_toBottomOf="#+id/tvStockName"
tools:text="ICICIBANK" />
<TextView
android:id="#+id/tvStockValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="306.75" />
<TextView
android:id="#+id/tvStockPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="(1.44%)"
/>
<TextView
android:id="#+id/tvStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="#+id/tvStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="-4.50"
/>
<TextView
android:id="#+id/tvAvgPriceTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Avg. Price"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQtyTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvQtyTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Qty"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvCurrentValueTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvAvgPriceTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvCurrentValueTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Curr. Value"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQtyTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvAvgPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQty"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAvgPriceTitle"
tools:text="241.83" />
<TextView
android:id="#+id/tvQty"
android:layout_width="0dp"
android:layout_height="20dp"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockInvestment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvAvgPrice"
app:layout_constraintTop_toBottomOf="#+id/tvQtyTitle"
tools:text="4901" />
<TextView
android:id="#+id/tvTotalStockInvestment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQty"
app:layout_constraintTop_toBottomOf="#+id/tvCurrentValueTitle"
tools:text="15,13,184" />
<TextView
android:id="#+id/tvTotalStockPercent"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="(+27.69%)"
/>
<TextView
android:id="#+id/tvTotalStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="+3,28,234"
/>
<TextView
android:id="#+id/tvDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference"
tools:text="-24,015"
/>
<TextView
android:id="#+id/tvTitleDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Today's Gain"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvDayStockDifference"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference" />
Output of the layout above: