How to make Imageview not overlap Textview in ConstraintLayout - android

I have problem to make this widget not overlap each other, what i found like below
(preview when imageview invisible)
(preview when imageview visible)
Here my xml snippet code:
<android.support.constraint.ConstraintLayout
android:id="#+id/constraits"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/title_news"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
android:textStyle="bold" />
<TextView
android:id="#+id/date_published"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4 Menit lalu"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:textStyle="italic" />
</LinearLayout>
<ImageView
android:id="#+id/image_news"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:src="#drawable/sample_headline_img2"
android:adjustViewBounds="true"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/linearLayout"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
is there a better solution?


Try below code:
<android.support.constraint.ConstraintLayout
android:id="#+id/constraits"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp">
<TextView
android:id="#+id/title_news"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/image_news"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/date_published"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4 Menit lalu"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="#+id/title_news"
app:layout_constraintTop_toBottomOf="#+id/title_news"
app:layout_constraintEnd_toStartOf="#+id/image_news" />
<ImageView
android:id="#+id/image_news"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:src="#drawable/sample_headline_img2"
android:adjustViewBounds="true"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Note: If you are using ConstraintLayout then try to manage every view by setting constraints of view. Here you used LinereLayout to display two TextView vertically which can be done by setting constraints like I did.


In the TextView:
<TextView
android:id="#+id/textView_01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="The text"
app:layout_constraintEnd_toStartOf="#+id/imageView_01"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
Create a constraint from the end of the textView to the start of the ImageView
app:layout_constraintEnd_toStartOf="#+id/imageView_01"
If you want the text to remain left justified, set the bias to 0.0.
app:layout_constraintHorizontal_bias="0.0"
And the key is making sure setting the width to 0dp:
android:layout_width="0dp"


<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp">
<ImageView
android:id="#+id/image_news"
android:layout_width="45dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:src="#drawable/sample_headline_img2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title_news"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
app:layout_constraintEnd_toStartOf="#+id/image_news"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/date_published"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="4 Menit lalu"
app:layout_constraintEnd_toStartOf="#+id/image_news"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title_news" />
</android.support.constraint.ConstraintLayout>


Complete Implementation Given as follows, You can try
<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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_margin="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:textStyle="bold"
android:text="Tak Ada Nomor Anrean, Masyarakat Sesalkan Pelayanan Kantor Pos Senpokdsoa"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4 Menit lalu"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small" />
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="3"
android:scaleType="center"
app:srcCompat="#drawable/sample_headline_img2" />
</LinearLayout>

Related

How to set Textview height between two imageview

I have a TextView to display order items and quantity. But it overlaps with the divider lines above and below. How to fix this?
<?xml version="1.0" encoding="utf-8"?><!--https://www.youtube.com/watch?v=18VcnYN5_LM !-->
<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="wrap_content"
android:animateLayoutChanges="true"
android:animationCache="true"
android:gravity="center|start"
android:orientation="vertical"
android:padding="0dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="15dp"
android:layout_marginTop="10dp"
android:elevation="50dp"
app:strokeColor="#color/grey600"
app:strokeWidth="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.skydoves.androidribbon.RibbonView
android:id="#+id/order_status_ribbon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_bold"
android:letterSpacing=".10"
android:text="#string/order_status"
android:textColor="#FFFFFF"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:ribbon_background_color="#color/primaryYellow"
app:ribbon_padding_top="4dp"
app:ribbon_ribbonRadius="4dp"
app:textAllCaps="true" />
<TextView
android:id="#+id/order_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/poppins_semibold"
android:text="#string/sample_order_id"
android:textColor="#000000"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/order_status_ribbon" />
<TextView
android:id="#+id/order_date_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/poppins"
android:text="#string/date_amp_time"
android:textColor="#color/grey600"
android:textSize="11sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/order_id" />
<ImageView
android:id="#+id/dotted_line_order_after_date_time"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="8dp"
android:layerType="software"
android:src="#drawable/dotted"
app:layout_constraintTop_toBottomOf="#+id/order_date_time"
tools:layout_editor_absoluteX="0dp" />
<TextView
android:id="#+id/order_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:fontFamily="#font/poppins"
android:text="#string/order_items_and_quantity"
android:textColor="#color/black"
app:layout_constraintBottom_toTopOf="#+id/dotted_line_order"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dotted_line_order_after_date_time"
app:layout_constraintVertical_bias="0.418" />
<ImageView
android:id="#+id/dotted_line_order"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="80dp"
android:layerType="software"
android:src="#drawable/dotted"
app:layout_constraintTop_toBottomOf="#+id/order_date_time"
tools:layout_editor_absoluteX="0dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:paddingBottom="10dp"
android:text="#string/view_details"
android:textColor="#color/black"
app:layout_constraintTop_toBottomOf="#+id/dotted_line_order"
tools:layout_editor_absoluteX="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Sample image is found in https://imgur.com/a/EPsUeI3
As you can see in the image the order items and quantity TextView is overlapping with ImageView. The text for TextView comes from a StringBuffer
sb.append(n.getInt("quantiy"));
sb.append(" X ");
sb.append(n.getString("name"));
sb.append("\n");
holder.orderItems.setText(sb);

The dotted_line_order ImageView constrained to order_date_time TextView Using app:layout_constraintTop_toBottomOf="#+id/order_date_time".
While the overlapped order_items TextView constrained to dotted_line_order ImageView with app:layout_constraintBottom_toTopOf="#+id/dotted_line_order".
Both constraints will make the order_items overlaps with the dotted_line_order.
You need to replace the 1st constraint to be constrained to the order_items instead of the order_date_time, so it should be app:layout_constraintTop_toBottomOf="#+id/order_items"
<ImageView
android:id="#+id/dotted_line_order"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="80dp"
android:layerType="software"
app:layout_constraintTop_toBottomOf="#+id/order_items"
android:src="#drawable/dotted" />
Also, check if 80dp margin as it seems some how big.

Align textviews in left and right side of a linear layout?

I currently doing one of the project from "Google Android Dev". I am facing a problem in my layout design. Kindly help me how to align one textview in left side and right side of a linear layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|right"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android so you are most welcome for code review.

Try to change your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|start"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies: Sunbathing"
android:gravity="center"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Use it like this
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:weight="1"
android:layout_height="wrap_content"
android:text="Age : 7"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
weight here will allow the first textview to take all the space and will leave the required space for the hobby textview.
Use it as per your requirement.

NestedScrollView inside ConstraintLayout cannot be scrolled until bottom

I have an activity like this:
Below the "Berapa jumlah kartu kredit" TextView, there's another TextView and Spinner, but cannot scroll further down.
My 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"
android:background="#drawable/whitebg"
tools:context=".activity.Apply1Activity">
<androidx.core.widget.NestedScrollView
android:id="#+id/nsv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_constraintTop_toTopOf="parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvApply1_tv0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Input informasi pengajuan pinjaman"
android:textStyle="bold"
android:textSize="18dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/tvApply1_Pekerjaan"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="10dp"
android:text="Pekerjaan"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvApply1_tv0"
/>
<Spinner
android:id="#+id/spinner_pekerjaan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvApply1_Pekerjaan"/>
<TextView
android:id="#+id/tvApply1_NamaPerusahaan"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Nama perusahaan atau toko"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/spinner_pekerjaan"
/>
<EditText
android:id="#+id/edtApply1_NamaPerusahaan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toBottomOf="#id/tvApply1_NamaPerusahaan" />
<TextView
android:id="#+id/tvApply1_Email"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Email"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/edtApply1_NamaPerusahaan"
/>
<EditText
android:id="#+id/edtApply1_Email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:singleLine="true"
android:maxLines="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toBottomOf="#id/tvApply1_Email" />
<TextView
android:id="#+id/tvApply1_MulaiKerja"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Mulai bekerja sejak"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/edtApply1_Email"
/>
<LinearLayout
android:id="#+id/ll_worksince"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvApply1_MulaiKerja">
<Spinner
android:id="#+id/spinner_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:entries="#array/arr_bulan"
/>
<Spinner
android:id="#+id/spinner_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
<TextView
android:id="#+id/tvApply1_StatusPekerjaan"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Status pekerjaan"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/ll_worksince"
/>
<Spinner
android:id="#+id/spinner_status_pekerjaan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvApply1_StatusPekerjaan"/>
<TextView
android:id="#+id/tvApply1_Income"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Penghasilan per bulan"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/spinner_status_pekerjaan"
/>
<EditText
android:id="#+id/edtApply1_Income"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:singleLine="true"
android:maxLines="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toBottomOf="#id/tvApply1_Income" />
<TextView
android:id="#+id/tvApply1_KK"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Berapa jumlah kartu kredit"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/edtApply1_Income"
/>
<Spinner
android:id="#+id/spinner_kk"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginLeft="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvApply1_KK"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/btnApply1_Lanjut"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="220dp"
android:background="#color/color_orange"
android:text="Lanjut"
android:textColor="#color/colorWhite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/nsv1"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
How to fix this?

You need to change
NestedScrollview constraints.
NestedScrollview width and height
Reduce Button top margin
I have updated your code and it's working now.
<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"
android:background="#color/color_white">
<!--change Nested scrollview constraint, width and height-->
<androidx.core.widget.NestedScrollView
android:id="#+id/nsv1"
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#+id/btnApply1_Lanjut"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.....
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/btnApply1_Lanjut"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_blue_pin"
android:text="Lanjut"
android:textColor="#color/color_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/nsv1" />
</androidx.constraintlayout.widget.ConstraintLayout>

Most possibly your NestedScrollView is not scrolling because you have set it's height to match_parent, Try with wrap_content it should work then.

Multiple options:
Since you do not have any nested scrolling content inside the root scroll view. Try converting NestedScrollView to Scroll View.
or
a. remove top constraint from button and add bottom constraint to the app:layout_constraintBottom_toTopOf="#+id/btnApply1_Lanjut"
b. replace match_parent with 0dp to actually match the constraint for nestedScrollView. Like this android:layout_height="0dp"

ConstraintLayout sub textview cut off text

I layout the cell of RecyclerView with ConstraintLayout, and the element TextView (id:cell_summary) cut off its long text;
here is the cell layout xml code:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/cell_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:maxLines="2"
android:text="And we find ourselves cruelly cut off from the wireless world"
android:textColor="#android:color/black"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/cell_thumb"
android:layout_width="120dp"
android:layout_height="88dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:background="#cccccc"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/cell_title" />
<TextView
android:id="#+id/cell_datetime"
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:text="2Hours"
android:textColor="#999999"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#id/cell_thumb"
app:layout_constraintLeft_toRightOf="#id/cell_thumb"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/cell_summary"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="12dp"
android:text="But then we were not being singled out, the entire country lives in a bubble of unreality, cut off from the outside world and watched by an army of informers."
android:ellipsize="end"
app:layout_constraintBottom_toTopOf="#id/cell_datetime"
app:layout_constraintLeft_toLeftOf="#id/cell_datetime"
app:layout_constraintRight_toRightOf="#id/cell_datetime"
app:layout_constraintTop_toTopOf="#id/cell_thumb" />
<View
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="16dp"
android:background="#dddddd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/cell_thumb" />
</android.support.constraint.ConstraintLayout>
If I add android:maxLines="3", the TextView will work correctly. But here I need an unbounded TextView.

remove android:layout_marginBottom="12dp" from cell_summary

Try below code this will help you out :-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/cell_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="2"
android:text="And we find ourselves cruelly cut off from the wireless world"
android:textColor="#android:color/black"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/cell_thumb"
android:layout_width="120dp"
android:layout_height="88dp"
android:layout_gravity="center_vertical"
android:background="#cccccc"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/cell_summary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:text="But then we were not being singled out, the entire country lives in a bubble of unreality, cut off from the outside world and watched by an army of informers." />
<TextView
android:id="#+id/cell_datetime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2Hours"
android:textColor="#999999"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#dddddd" />

Elements do not fit in the gap constraint layout

I study constraint layout. I use the chains for join two textviews tvNameReview and tvTimePeriodReview. But as you can see if text in tvNameReview is very large, it is superimposed on tvTimePeriodReview. How can I fix it?
[So it looks like in studio editor][1]
[1]: https://i.stack.imgur.com/COsd8.png Code my layout:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/gl2Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin ="20dp"/>
<android.support.constraint.Guideline
android:id="#+id/gl1Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"/>
<TextView
android:id="#+id/timeReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/gl1Review"
app:layout_constraintTop_toTopOf="#+id/gl2Review"
tools:text="10:15" />
<Space
android:id="#+id/space1Review"
android:layout_width="40dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/timeReview"/>
<android.support.constraint.Guideline
android:id="#+id/gl3Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="20dp"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<android.support.constraint.Barrier
android:id="#+id/b1Constraint"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:constraint_referenced_ids="imageView, textView5, textView4"
app:barrierDirection="left"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="#+id/viewReview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintLeft_toRightOf="#+id/space1Review"
app:layout_constraintRight_toLeftOf="#+id/b1Constraint"/>
<TextView
android:id="#+id/tvNameReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/viewReview"
app:layout_constraintRight_toLeftOf="#+id/tvTimePeriodReview"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
tools:text="Very very long name reviewwwww"
app:layout_constraintHorizontal_chainStyle="spread_inside"
android:ellipsize="end"/>
<TextView
android:id="#+id/tvTimePeriodReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintLeft_toRightOf="#+id/tvNameReview"
app:layout_constraintRight_toRightOf="#+id/viewReview"
tools:text="10:15-11:45"
android:layout_marginTop="-1dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
</android.support.constraint.ConstraintLayout>

Can be done using weighted chains.
<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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/gl2Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin ="20dp"/>
<android.support.constraint.Guideline
android:id="#+id/gl1Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"/>
<TextView
android:id="#+id/timeReview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/gl1Review"
app:layout_constraintTop_toTopOf="#+id/gl2Review"
tools:text="10:15" />
<Space
android:id="#+id/space1Review"
android:layout_width="40dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/timeReview"/>
<android.support.constraint.Guideline
android:id="#+id/gl3Review"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="20dp"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toLeftOf="#+id/gl3Review"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<android.support.constraint.Barrier
android:id="#+id/b1Constraint"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:constraint_referenced_ids="imageView, textView5, textView4"
app:barrierDirection="left"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="#+id/viewReview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintLeft_toRightOf="#+id/space1Review"
app:layout_constraintRight_toLeftOf="#+id/b1Constraint"/>
<TextView
android:id="#+id/tvNameReview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/viewReview"
app:layout_constraintRight_toLeftOf="#+id/tvTimePeriodReview"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
tools:text="Very very long name reviewwwww"
app:layout_constraintHorizontal_chainStyle="spread"
android:ellipsize="end"/>
<TextView
android:id="#+id/tvTimePeriodReview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/gl2Review"
app:layout_constraintLeft_toRightOf="#+id/tvNameReview"
app:layout_constraintRight_toRightOf="#+id/viewReview"
tools:text="10:15-11:45"
android:layout_marginTop="-1dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
</android.support.constraint.ConstraintLayout>
Just set the text views' width to 0dp.

Categories

Resources