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

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>

Related

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

android - button is making the page background change to gray

Solved
I have a scroll view that has a Constraint Layout layout inside of it. I Have a button that is constraint to the bottom of the table but it seems to change the background below the table to gray. all other widgets that I have added do not have the same problem.
Screenshot of problem
I removed the inner code of the table as its not need
<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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/gaapic" />
<androidx.cardview.widget.CardView
android:id="#+id/homecard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:padding="12dp"
android:text="#string/recent_news"
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tvhomePageDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="9"
android:gravity="center"
android:text="#string/publish_date"
android:textColor="#color/black"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:lineSpacingMultiplier="1.5"
android:padding="12dp"
android:text="#string/in_news"
android:textSize="13sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#android:color/white"
android:elevation="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/homecard">
<!-- Table Heading -->
<TableRow android:background="#color/teal_200">
</TableLayout>
<TextView
android:id="#+id/tvTimeCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.092"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tableLayout"
app:layout_constraintVertical_bias="0.589" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Live"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tableLayout"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Try adding the following to either your ScrollView or ConstraintLayout:
android:background="#android:color/white"
Solved:
I solved my problem by putting the table inside of another Constraint Layout. I don't know if that is best practice but it works for now. Thank you #Shn_Android_Dev
Have you tryed to add .setBackgroundDrawable(null) to you button inside your class?
Example:
yourButton.setBackgroundDrawable(null);

ListView under constraint layout disappears in preview

Output png
So below is my xml for the activity:
I have migrated to androidx from support libraries.
Is there a way to achieve this?
<?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">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/rounded_edittext"
android:layout_marginBottom="8dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:hint="#string/firm_name"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/billform"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#drawable/rounded_buttons"
app:layout_constraintTop_toBottomOf="#id/partyname">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_height="50dp"
android:layout_width="0dp"
android:padding="5dp"
android:layout_marginEnd="8dp"
android:textSize="16sp"
android:textAllCaps="true"
android:hint="#string/code_article"
android:background="#drawable/rounded_edittext"
android:layout_marginRight="8dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/add"
android:layout_toStartOf="#+id/add" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
android:text="#string/add"
android:textAllCaps="true"
android:textSize="18sp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/billform"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
For god knows why, the listView is not available in the preview.
It works when the root is linear layout. I tried creating a linear layout within the constraint layout, it didn't work
android:layout_height="0dp"
That might be your problem or if you are talking about not seeing items then it might be a bug in android studio because I tried adding another ConstraintLayout without getting any luck.
This answer might help
I wanted to add my answer as a comment but StackOverflow won't let me.
Try to remove the nested layouts.
Try the below code
<?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">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="24dp"
android:padding="5dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/add"
android:layout_toLeftOf="#+id/add"
android:padding="5dp"
android:textAllCaps="true"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/partyname" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="ADD"
android:textAllCaps="true"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/identifier" />
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/add" />
change the width from match_parent to 0dp and you can create left and right constraint.The following will work for you.
<ListView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/billform"
app:layout_constraintBottom_toBottomOf="parent"/>
Update
<?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"
xmlns:tools="http://schemas.android.com/tools">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/rounded_edittext"
android:layout_marginBottom="8dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:hint="#string/firm_name"
android:padding="5dp"
app:layout_constraintTop_toTopOf="parent"/>
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_height="50dp"
android:layout_width="0dp"
android:padding="5dp"
android:textSize="16sp"
android:textAllCaps="true"
android:hint="#string/code_article"
android:background="#drawable/rounded_edittext"
android:layout_toStartOf="#+id/add"
app:layout_constraintEnd_toStartOf="#+id/add"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/partyname"/>
<Button
android:id="#+id/add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
android:text="#string/add"
android:textAllCaps="true"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/partyname"/>
<ListView
android:layout_width="0dp"
android:layout_height="0dp"
tools:listitem="Add items here"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/add"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView Last Element Not Showing or getting cut off

For those who believe this is a duplicate question I have already consulted the current solutions available on stack overflow Such as:
Last Item in recyclerview is cut off
RecyclerView cutting off last item
However, no matter what I try I am unable to completely see, on in some cases see at all the last element. I have already checked my adapter to make sure the last item is being rendered.
Here are the screenshots and xml. Thanks
// This is the card view that I render using the adapter
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_border_background">
<ImageView
android:layout_width="100dp"
android:layout_height="90dp"
tools:srcCompat="#tools:sample/avatars"
android:id="#+id/collectionImage"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:text="collectionName"
android:layout_width="142dp"
android:layout_height="49dp"
android:id="#+id/collectionName"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/collectionImage"
/>
<TextView
android:text="productName"
android:layout_width="141dp"
android:layout_height="35dp"
android:id="#+id/productName"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/collectionImage" android:layout_marginTop="56dp"
/>
<TextView
android:layout_width="107dp"
android:layout_height="25dp"
android:id="#+id/productName2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/productName"
android:text="# available :"
/>
<TextView
android:layout_width="32dp"
android:layout_height="24dp"
android:id="#+id/numberOfInventoryItems"
android:text="123"
app:layout_constraintTop_toBottomOf="#+id/productName2" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
</android.support.constraint.ConstraintLayout>
This is the main layout that contains the recylerview that is inside a
nested scrollview. Like I said I tried this solution by reading other threads.
<?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"
android:id="#+id/main_constraint"
tools:context=".CollectionDetailsPage">
<android.support.constraint.ConstraintLayout
android:id="#+id/top_card"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
android:background="#drawable/card_border_background"
android:layout_marginTop="8dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/collection_image_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/collection_title_card"
android:text="Collection Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintStart_toEndOf="#+id/collection_image_card"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:textStyle="bold" android:textSize="18sp" android:textColor="#android:color/black"
tools:ignore="HardcodedText"/>
<TextView
android:id="#+id/collection_html_card"
android:text="sample body html"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/collection_image_card"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/collection_title_card"
tools:ignore="HardcodedText"/>
</android.support.constraint.ConstraintLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#+id/top_card"
android:id="#+id/nestedScrollView"
android:scrollbars="vertical" app:layout_constraintStart_toStartOf="parent"
>
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/recyclerView_Collections_Data"
tools:ignore="MissingConstraints"/>
</android.support.v4.widget.NestedScrollView>
<TextView
android:text="Loading..."
android:layout_width="125dp"
android:layout_height="40dp"
android:id="#+id/loading_title"
android:textStyle="bold"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/top_card"
tools:ignore="HardcodedText"/>
<View
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#color/colorPrimary"
android:id="#+id/view"
tools:ignore="MissingConstraints"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
this obviously is because of:
<View
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#color/colorPrimary"
android:id="#+id/view"
tools:ignore="MissingConstraints"
app:layout_constraintBottom_toBottomOf="parent"/>
have you ever had a closer look at the first one CardView ??
android:fillViewport="true" and tools:ignore="MissingConstraints" look suspicious;
replace these ConstraintLayout with LinearLayoutCompat, because these are linear layouts.
that NestedScrollView just would need weight 1.00 and height 0dp, to fill the space.

Set linearLayout margin

I need to fill a LinearLayout (child of a ScrollView) with dynamic TextViews.
The problem is that, in my app, the position where the scroll starts is not defined (it changes dynamically while using the app) and I think I've resolved this with layout_constraintTop_toBottomOf.
The main problem is that I need the ScrollView to end at 90dp from the bottom. But I cannot do that with margins (as in my code below) cause it ignores them.
I've also tried padding but doesn't work too.
This is my solution that doesn't work:
<ScrollView
android:id="#+id/scroll_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scroll_view">
<LinearLayout
android:id="#+id/linear_view_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="90dp"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
I really need that margin cause at the bottom there are some buttons.
As asked, this is my full xml:
<TableLayout
android:id="#+id/tableLayout_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="25dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Cerca utenti da seguire"
android:textSize="20sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp">
<EditText
android:id="#+id/edit_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:hint="Cerca..." />
</TableRow>
</TableLayout>
<ScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/tableLayout_seguiti">
<LinearLayout
android:id="#+id/linear_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scroll">
<LinearLayout
android:id="#+id/ln_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="8dp"
android:text="Utenti che segui"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Clicca sul nome degli utenti che desideri seguire o smettere di seguire."
android:textSize="12sp" />
</LinearLayout>
</ScrollView>
<ScrollView
android:id="#+id/scroll_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scroll_view">
<LinearLayout
android:id="#+id/linear_view_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/btn_mieiPost"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="15dp"
android:text="I miei post"
style="#style/Widget.AppCompat.Button.Colored"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btn_home"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_seguiti"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginEnd="15dp"
android:layout_marginStart="10dp"
android:text="Seguiti"
style="#style/Widget.AppCompat.Button.Colored"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btn_home" />
<Button
android:id="#+id/btn_home"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_marginBottom="10dp"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:text="Home"
style="#style/Widget.AppCompat.Button.Colored"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btn_seguiti"
app:layout_constraintStart_toEndOf="#+id/btn_mieiPost"
app:srcCompat="#android:drawable/ic_menu_gallery" />
you need to set margin only for scroll view. Remove the margin from the linear layout.
Add full viewport: true for scroll view.
make height of scrollView match_parent this may help check below
<ScrollView
android:id="#+id/scroll_seguiti"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scroll_view">
<LinearLayout
android:id="#+id/linear_view_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="90dp"
android:orientation="vertical">
</LinearLayout>

Categories

Resources