I have a recyclerview that takes a Arraylist as paramter. And when i am adding an image uri to one the objects variables of the list and then refreshing the recylerview
using
rv.notifydatasetchanged
then my code properly adds image to the imageview of the object whose uri variable i set but all the rows gets shrinked
and when i am doing
rv.notifyItemChanged(position)
then that row gets shrinked. And other remains same. I am not modifying width or height after refresh or notifydatasetchanged, thats why i am confused why its happening.
Here is my recylverview row:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="feedbackData"
type="in.myapp.event_subscriber.models.MyData" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:id="#+id/ll_question"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_question_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="#{Integer.toString(feedbackData.questionNumber)}"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#id/tv_question" />
<TextView
android:id="#+id/tv_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="40dp"
android:text="#{feedbackData.question}"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_question_number"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<EditText
android:id="#+id/et_answer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:background="#drawable/stroke_rectangle_grey"
android:gravity="start"
android:hint="Write you answer here..."
android:lines="4"
android:paddingStart="10dp"
android:paddingTop="15dp"
android:text="#{feedbackData.answer.description}"
app:layout_constraintTop_toBottomOf="#id/ll_question" />
<LinearLayout
android:id="#+id/ll_action_attachment"
goneUnless="#{feedbackData.imageUri==null}"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_answer">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/ic_attachment" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="Add attachment"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:id="#+id/iv_attached_image"
attachImage="#{feedbackData.imageUri}"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:elevation="10dp"
android:scaleType="fitXY"
android:visibility="gone" />
<TextView
android:id="#+id/tv_image_attached_text"
goneUnless="#{feedbackData.imageUri!=null}"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="5dp"
android:text="Image Attached Successfully"
android:textColor="#color/medium_aqua_marine"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="40dp" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:background="#color/grey" />
</LinearLayout>
</layout>
The first image shows my defualt recyclerview, but as soon as i add an image uri from my local storage to the list variable and then call notifydatasetchanged or notifyItemChanged(position), the thing in second image happens. Everything shrinks, even the textviews and divider and everything shrinks.
Code for my recylerview:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<TextView
android:id="#+id/tv_event_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:background="#color/white"
android:text="Technical corridor"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:background="#color/grey"
app:layout_constraintTop_toBottomOf="#id/tv_event_name" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_subscriber_feedback"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toTopOf="#id/btn_submit"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider"
tools:listitem="#layout/row_feedback" />
<Button
android:id="#+id/btn_submit"
android:layout_width="100dp"
android:layout_height="30dp"
android:layout_marginBottom="40dp"
android:background="#color/colorPrimary"
android:text="Submit"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I will try to give some hints, might be because recyclerView recalculates views:
1) for your recycler view setHasFixedSize(true)
2) set a LinearLayoutManager to your recyclerView
3) keep using notifyDataSetChanged()
4) let your recyclerview be match_parent both width and height
See what happens.
Adding the imageview on which i was setting image and the textview which was only visible after image is set inside one more linearlayout worked. Now its not shrinking. Maybe now only that linearlayout is shrinking upto the width of imageview. I Dont know why this is happening. But atleast this worked and can be used for now.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
goneUnless="#{feedbackData.imageUri!=null}"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_attached_image"
attachImage="#{feedbackData.imageUri}"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:elevation="10dp"
android:scaleType="fitXY"
android:visibility="gone" />
<TextView
android:id="#+id/tv_image_attached_text"
goneUnless="#{feedbackData.imageUri!=null}"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="5dp"
android:text="Image Attached Successfully"
android:textColor="#color/medium_aqua_marine"
android:visibility="gone" />
</LinearLayout>
Related
I am new in Android and somewhere didnt understand how it works. I has this XML 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:id="#+id/mainWindow"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/katalog"
android:layout_width="388dp"
android:layout_height="179dp"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintStart_toStartOf="parent">
<TableRow
android:id="#+id/row"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView // problem is here
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stock"
android:textSize="18sp" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
</TableLayout>
<Button
android:id="#+id/button3"
android:layout_width="135dp"
android:layout_height="51dp"
android:text="Stuff"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="135dp"
android:layout_height="51dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:text="Person"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="135dp"
android:layout_height="51dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:text="card"
app:backgroundTint="#07464E"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5" />
</androidx.constraintlayout.widget.ConstraintLayout>
And i have another one with almost same options. But this one doesn't displayed. Also java class has few action listeners for buttons, and nothing for TableLayuout. But another java class with table layout doesnt have anything with code, like that
public class admpanel extends lk{
private TableLayout table;
#SuppressLint("SetTextI18n")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.admpanel);
}
}
And thats works.
P.S. another one TableLayout doesnt displayed because im forgot to use "id" for pieces, then i fixed it. But now im idk
EDIT: That code start work if i am delete ImageView. How to use Image View? Pointed problem
The issue with your code is that the code has not specified a proper android:src or app:srcCompat for the imageView which is necessary to inflate the UmageView to some height or it considers the height as 0dp resulting in the ImageView not show up. tools:src is used just to show the image in the XML design tab to have an idea of how much space or how the view will look. The image specified can not be used for showing it in the application. I have updated your code for a better design and also added a proper image for your ImageView(Resource here). Save the image in your drawable folder as a12_logo. Check this code and comment if you have any issues ahead.
Also, if the purpose of this TableLayout is to use it for showing a list of items, switch to RecyclerView for better performance and easy data handling.
Also, your Buttons have fixed height and width which is not ideal as the buttons might get out of the screen for some devices so I have added better code for the buttons.
<?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:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/katalog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
app:layout_constraintBottom_toTopOf="#id/button3">
<TableRow
android:id="#+id/row"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_column="0"
android:src="#drawable/a12_logo" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stock"
android:textSize="18sp" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
</TableLayout>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Stuff"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:text="Person"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toEndOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:text="card"
app:backgroundTint="#07464E"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5" />
</androidx.constraintlayout.widget.ConstraintLayout>
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.
I created app like below
First Recyclerview(horizontal one) works properly.
However, when I scroll second RecyclerView(vertical one) it doens't work properly. I can't scroll view to the bottom.
Here's my xml code.
<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:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ulimbridge.firechatting.views.ChatFragment">
<TextView
android:id="#+id/tv_approachingUsers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="다가온 인연"
android:textSize="15sp"
android:textStyle="bold"
android:fontFamily="#font/nanum_square_r"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<android.support.v7.widget.RecyclerView
android:id="#+id/ApproachingRecyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.15"
app:layout_constraintTop_toBottomOf="#id/tv_approachingUsers"
app:layout_constraintStart_toStartOf="parent"
/>
<TextView
android:id="#+id/view_chatMessage"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#72808A"
android:text="메시지"
android:textStyle="bold"
android:paddingLeft="10dp"
android:textColor="#color/white"
android:fontFamily="#font/nanum_square_r"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ApproachingRecyclerView" />
<android.support.v7.widget.RecyclerView
android:id="#+id/chatListRecyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/view_chatMessage"
app:layout_constraintBottom_toBottomOf="parent"/>
I used scrollview or nestedscroll view, but it didn't work.
How can I fix it?
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"
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>