Recently I've bumped into a strange ConstraintLayout behavior. What I tried to do was a simple layout with ImageView, Button and a TextView. Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
<android.support.v4.widget.Space
android:id="#+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="#id/image" />
<Button
android:id="#id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
The ImageView content is loaded using Glide like this:
Glide.with(this).load("https://homepages.cae.wisc.edu/~ece533/images/monarch.png").into(imageView);
Here is how I wanted it to look like:
And here's what I actually got:
My intent was to make the text align relative to the button, not the image, how do I make this happen? Why did the ConstraintLayout clip itself to the ImageView? On the other hand, if I align the text relative to the image everything works great and nothing is clipped.
The full source is available here:
https://github.com/satorikomeiji/ConstraintLayoutBug
Use this for your Button:
#+id/button
instead of
android:id="#id/button"
You'll be able to design urself.
I would suggest you to add loading image:
.placeholder(R.drawable.ic_error_black_48px)
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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Preview:
You need to align something to the bottom of the parent
Align TEST TEXT TextView bottom to the bottom of parent like this:
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
And add plus sign in button id
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />
Try this :
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher_background"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>
Related
Here Is my
and XML code first i use a Linear Layout then card View and other views so why my view overwrite where is the problem please watch the AVD picture and tell me where is the error.Sorry for bad english.
<?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"
android:id="#+id/item_linerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintStart_toEndOf="#+id/item_id"
app:layout_constraintTop_toTopOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Author"
app:layout_constraintStart_toStartOf="#+id/item_title"
app:layout_constraintTop_toBottomOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Try to use android:fitsSystemWindows="true" in your root layout(In your case LinearLayout). I recommend you to read this article to understand system overlapping. I hope it helps)
I have removed redundant LinearLayout parent and made CardView parent. Also your TextView with id item_pages is not overlapping.
<androidx.cardview.widget.CardView
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:layout_margin="5dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Title"
app:layout_constraintBottom_toTopOf="#id/item_AuthorName"
app:layout_constraintStart_toEndOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Author"
app:layout_constraintBottom_toBottomOf="#id/item_id"
app:layout_constraintStart_toStartOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
I an activity I am using a dialog (which extend DialogFragment), Dialog contains a recycler view (w: match parent,h:200dp) and below recycler view an edit text and button, as soon as edit text is in focus and keyboard pops up the item in recycler view get deformed. dialog root view (card view) has w:match_parent h: wrap_content and list item root view (constraint layout) have w:match_parent h:wrap_content
enter image description here
Dialog :
<?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"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="4dp"
app:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="350dp"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginStart="20dp"
android:fontFamily="#font/opensans_bold"
android:gravity="center_vertical"
android:text="#string/label_add_remark"
android:textColor="#color/colorPrimary"
android:textSize="16sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/windowBackground" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_revisit_remarks"
android:layout_width="match_parent"
android:layout_height="#dimen/revisit_rv_size"
android:visibility="gone"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:itemCount="6"
tools:listitem="#layout/layout_remark_item" />
<LinearLayout
android:id="#+id/ll_add_comment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:background="#drawable/rectangle_grey_border"
android:minWidth="250dp"
android:orientation="horizontal"
android:weightSum="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/rv_remarks">
<EditText
android:id="#+id/et_add_comment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:layout_weight="2"
android:background="#null"
android:hint="#string/add_your_comment"
android:inputType="textMultiLine|textCapSentences"
android:minHeight="40dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:textColor="#color/primaryTextColor"
android:textColorHint="#color/text_color_light"
android:textSize="12sp" />
</LinearLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/button_submit"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:backgroundTint="#color/colorPrimary"
android:fontFamily="#font/opensans_bold"
android:text="#string/submit"
android:textAllCaps="false"
android:textColor="#color/white"
android:translationZ="0dp"
app:cornerRadius="4dp"
app:elevation="0dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
List Item:
<?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="wrap_content"
android:background="?attr/selectableItemBackground"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/image_member_sample" />
<TextView
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:ellipsize="end"
android:fontFamily="#font/opensans_semibold"
android:lines="1"
android:textColor="#color/text_color_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iv_profile_image"
app:layout_constraintTop_toTopOf="#id/iv_profile_image"
tools:text="BIna Antony Mari Kurian Paulose" />
<TextView
android:id="#+id/tv_comment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="20dp"
android:fontFamily="#font/opensans_regular"
android:textColor="#color/text_color_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/tv_name"
app:layout_constraintTop_toBottomOf="#id/tv_name"
tools:text="#tools:sample/lorem" />
</androidx.constraintlayout.widget.ConstraintLayout>
try this:
dialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
I'm having trouble with this layout because is not working as I supposed. The textview inside the CardView is afecting the other views and the size of the card.
But when I see the xml, the other elements are not constrained to the size of the textview (or maybe I'm just stuck and I can't see it).
This is my xml. At design time, it works fine, but in runtime, the card width resizes. Any ideas?:
<?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:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#C6C6C6"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/company_logo"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#drawable/aguas_cartagena"
android:contentDescription="#string/company_logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/company_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_toEndOf="#+id/company_logo"
android:text="XXX"
android:textSize="24sp"
app:layout_constraintStart_toEndOf="#+id/company_logo"
app:layout_constraintTop_toTopOf="#+id/company_logo" />
<TextView
android:id="#+id/pay_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/company_name"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/company_logo"
android:text="Fecha pago: 14-Abr-2020"
app:layout_constraintStart_toStartOf="#+id/company_name"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
<ImageView
android:id="#+id/icon_status"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/company_name"
app:srcCompat="#android:drawable/presence_online" />
<TextView
android:id="#+id/pay_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="$ 999.999.999"
app:layout_constraintEnd_toEndOf="#+id/icon_status"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
EDIT:
For who has the same problem, I've found a solution in this post (second accepted answer):
Use RelativeLayout as the immediate parent to CardView.
Use thias xml code
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#C6C6C6"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/company_logo"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_phone"
android:contentDescription="company_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="#+id/company_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:text="XXX"
android:textSize="24sp"
app:layout_constraintStart_toEndOf="#+id/company_logo"
app:layout_constraintTop_toTopOf="#+id/company_logo"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="#+id/pay_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/company_logo"
android:text="Fecha pago: 14-Abr-2020"
app:layout_constraintStart_toStartOf="#+id/company_name"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
<ImageView
android:id="#+id/icon_status"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:drawable/presence_online" />
<TextView
android:id="#+id/pay_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="$ 999.999.999"
app:layout_constraintEnd_toEndOf="#+id/icon_status"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
</androidx.constraintlayout.widget.ConstraintLayout>
Use this Layout it Will never overlap well tested:-
<?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:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#C6C6C6"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/company_logo"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_phone"
android:contentDescription="company_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="#+id/company_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:text="XXX"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/icon_status"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/company_logo"
app:layout_constraintTop_toTopOf="#+id/company_logo" />
<TextView
android:id="#+id/pay_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/company_logo"
android:text="Fecha pago: 14-Abr-2020"
app:layout_constraintEnd_toStartOf="#+id/pay_value"
app:layout_constraintStart_toStartOf="#+id/company_name"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
<ImageView
android:id="#+id/icon_status"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:drawable/presence_online" />
<TextView
android:id="#+id/pay_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="$ 999.999.999"
app:layout_constraintEnd_toEndOf="#+id/icon_status"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
For who has the same problem, I've found a solution in this post (second accepted answer):
Use RelativeLayout as the immediate parent to CardView
The solution was to enclose the Cardview layout inside a RelativeLayout:
<RelativeLayout
android:layout_width="match_parent" ... >
<CardView
android:layout_width="match_parent" ... >
</CardView>
</RelativeLayout>
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>
Problem Short Version:
I want to make my CardView and RecyclerView background transparent, so
the fragment/activity background should become visible.
Explained:
I have an activity A with background image and fragment B is replaced on its Framelayout , in Fragment B i have recyclerView which with CardView now problem is i want to make every background transparent so only CardView will be visible with actual background of activity
RecyclerView look like this(These white background should be transparent) :
Code
Activity(A)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"/>
Fragment(B) RecyclerView
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
tools:listitem="#layout/layout_video_item"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/tv_not_found"
android:text="No Media Found Yet"
android:layout_gravity="center"
android:gravity="center"
android:visibility="gone"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
CardView / Item layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:layout_marginStart="3dp"
android:layout_marginTop="3dp"
android:background="#android:color/transparent">
<android.support.v7.widget.CardView
style="#style/CardView.Light"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"
app:cardCornerRadius="5dp"
android:padding="0dp"
app:cardElevation="0dp"
tools:ignore="ContentDescription">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/colorAccent">
<ImageView
android:id="#+id/media_image"
android:layout_width="100dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/darker_gray" />
<ImageButton
android:id="#+id/ib_delete"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_delete_white_24dp" />
<ImageButton
android:id="#+id/share_button"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/ib_delete"
app:srcCompat="#drawable/ic_share_white_24dp" />
<TextView
android:id="#+id/tv_video_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Title Test"
android:textAppearance="#style/TextAppearance.AppCompat.Large.Inverse"
android:textColor="#color/colorPrimaryText"
app:layout_constraintEnd_toStartOf="#+id/tv_ribbon"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_ribbon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_light"
android:ellipsize="marquee"
android:fontFamily="monospace"
android:padding="3dp"
android:singleLine="true"
android:text="New"
android:textColor="#color/colorIcons"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_path"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="subtitle test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_video_name" />
<ImageView
android:id="#+id/iv_is_audio"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_duration"
app:srcCompat="#drawable/ic_settings_voice_black_24dp" />
<ImageView
android:id="#+id/iv_is_video"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_audio"
app:layout_constraintStart_toEndOf="#+id/iv_is_audio"
app:layout_constraintTop_toTopOf="#+id/iv_is_audio"
app:srcCompat="#drawable/ic_theaters" />
<ImageView
android:id="#+id/iv_is_gif"
android:layout_width="35dp"
android:layout_height="30dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_video"
app:layout_constraintStart_toEndOf="#+id/iv_is_video"
app:layout_constraintTop_toTopOf="#+id/iv_is_video"
app:srcCompat="#drawable/ic_gif" />
<TextView
android:id="#+id/tv_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:text="0:00"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_path" />
<TextView
android:id="#+id/tv_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="0 MB"
app:layout_constraintBottom_toBottomOf="#+id/tv_duration"
app:layout_constraintStart_toEndOf="#+id/tv_duration"
app:layout_constraintTop_toTopOf="#+id/tv_duration" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Reason for asking question:
I know there are lots of SO question out there to get this same task done but my requirements are little different and reason for asking this question is nothing is working for me.
Expectation
Set CardView Background to app:cardBackgroundColor="#00ffffff"