too much gap between cardviews in a recyclerview - android

I have a RecyclerView inside a RelativeLayout like so:
<android.support.v7.widget.RecyclerView
android:id="#+id/cards_wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:background="#eeff99"/>
and I have card view within a LinearLayout like so:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/quote_card"
android:layout_height="200dp"
android:layout_width="match_parent"
card_view:cardBackgroundColor="#666"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="5dp"
app:cardUseCompatPadding="true"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/display_author_name"
android:text="Author Name"
android:textSize="18sp"
android:textColor="#333"
android:gravity="center_horizontal"/>
</android.support.v7.widget.CardView>
the gap between the cards are huge. The next card is seen only after one scroll a bit. What am I missing?
Here the images, before scrolling:
After scrolling:

Try this:
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent" >
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/quote_card"
android:layout_height="200dp"
android:layout_width="match_parent"
card_view:cardBackgroundColor="#666"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="5dp"
app:cardUseCompatPadding="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/display_author_name"
android:text="Author Name"
android:textSize="18sp"
android:textColor="#333"
android:gravity="center_horizontal"/>
</android.support.v7.widget.CardView>
</LinearLayout>

put card view in side a linear layout and make play with padding to change the gap
<LinearLayout 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:padding="1dp"*
>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
style="#style/list_card"
android:layout_width="match_parent"
android:layout_height="90dp" >

Make these changes in your LinearLayout. If layout_height is match_parent it takes the screens space
android:layout_width="match_parent"
android:layout_height="wrap_content"

you used card view height as match parent so if parent height also match parent than change parent height into wrap content and if you used only card view as parent than also change its height to wrap content..might be it help you

Related

Cannot see textview

I am trying to make a layout with this code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
>
<android.support.v7.widget.CardView
app:cardCornerRadius="#dimen/cardview_corner_radius"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#f27181"
android:id="#+id/charity_overview_card"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.sharesmile.share.views.LBTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:padding="9dp"
android:text="Women Empowerment"
android:id="#+id/iv_charity_category_title"
/>
<ImageView
android:background="#color/colorPrimaryDark"
android:layout_width="128dp"
android:layout_height="126dp"
android:id="#+id/iv_charity_overview"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.sharesmile.share.views.LBTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_charity_amount"
android:textColor="#color/black"
android:textSize="15sp"
android:text="Test"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
but the last textview is not visible, even in the preview it is not showing, it shows like this :
As you can see the textview is not visible, i haven't given any weight, still facing this issue.
Also when i increase the size of the textview the value is visible as you can see here :
LinearLayout inside other parent LinearLayout with dynamic size will produce this type of issues. You should avoid nesting layout inside layout as much as possibile.
This issue can be simply fixed by removing the parent layout orientation.
For improvement
<CardView>
<LinearLayout> vertical
//Add 'N' child items here
</LinearLayout>
</CardView>
Change the following properties of your main LinearLayout, Make height and width to match_parent
android:layout_width="match_parent"
android:layout_height="match_parent"

Recyclerview not housing all my content but restrict itself to screen height

I am having issues trying to make my recyclerview house my whole text when i populate them inside but it seems to focus on the screen height of the phone in use and therefore some of my text are lost. How can i make it house them all.
show partly of the text
layout recycler holder view code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp"
android:layout_margin="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:orientation="vertical">
<TextView
android:id="#+id/txtDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat"
tools:text="D"
android:textSize="16sp"
android:textStyle="normal|bold" />
</linear.......................
RecyclerBox layout is like these
<LinearLayout
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:focusable="true">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/recycleNView">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
The root LinearLayout in the view holder has
android:layout_height="match_parent"
This will make each row match the RecyclerView's height regardless of its content.
Change it to wrap_content and it should work just fine.

Excessive padding between Cardviews in RecyclerView?

I am having difficulty reducing padding between Cards in RecyclerView
Padding Issue Screenshots
The screenshots above were taken in Developer Mode's "Show Layout Bounds" option so the issue appears to be with the padding.
When the CardView is removed it returns to normal padding, although I would not make this change because I want CardView
I manually added negative and zero paddings which didn't work.
I also added card_view:cardUseCompatPadding="true" which didn't work either.
My Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp">
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="225dp"
android:layout_margin="10dp"
android:clickable="true"
android:elevation="2dp"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="-25dp"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/card_view"
android:layout_gravity="left|center_vertical"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/Ayoub"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="fill_vertical|fill_horizontal"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Change this :
android:layout_height="225dp"
to :
android:layout_height="wrap_content"
Your first RelativeLayout should wrap_content not match_parent

Should CardView always wrap a layout first?

I have a cardview with only one textview.
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:foreground="#drawable/selector_normal"
android:clickable="true"
card_view:cardCornerRadius="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txt_command"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawablePadding="#dimen/padding_standard"
android:padding="#dimen/padding_standard"
android:textColor="#color/colorLightBlue"
android:textSize="#dimen/text_size_medium_small" />
</LinearLayout>
</android.support.v7.widget.CardView>
Apparently the LinearLayout does nothing other than wrapping the TextView. However if I remove the LinearLayout, having the CardView wrap just the TextView, my entire TextView disappear. Is this not allowed?
Is it possible to remove the LinearLayout?
I want to reduce my layout hierarchy by removing redundant layout.
No, it is not necessary to have LinearLayout above than android.support.v7.widget.CardView
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:clickable="true"
android:foreground="#drawable/selector_normal"
card_view:cardCornerRadius="2dp">
<TextView
android:id="#+id/txt_command"
android:layout_width="match_parent" //change here to match_parent
android:layout_height="wrap_content"
android:drawablePadding="#dimen/padding_standard"
android:padding="#dimen/padding_standard"
android:textColor="#color/colorLightBlue"
android:hint="Your Text Here"
android:textSize="#dimen/text_size_medium_small"/>
</android.support.v7.widget.CardView>

First view in RelativeLayout expand to fill remaining space

I am working on a layout with a cardview, a checkbox and a button with the initial structure as shown in the first image:
In this case the listview is not shown until the user clicks an image inside the cardview, so when this happens the dessired structure is like
the second image
However as the listview is actually inside a fragment I can't achieve the dessired layout because wrap_content and match_parent for the cardview gives me the next result
And as you can see the cardview overlaps the button and the checkbox goes beyond the screen
Right now this is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#android:color/white">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_alignParentTop="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/checkBox"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"/>
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_below="#+id/checkBox"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_alignParentBottom="true"
style="#android:style/Widget.DeviceDefault.Button.Borderless"
/>
I hope you can help me to set the max height of the card view to stop growing when the space is filled.
I have also tried to set the checkbox always at top of the bottom and the cardview to fill the remaining space and although it gives me the correct structure when the listview is expanded, it doesn't work for the list hidden since the cardview fills the space with nothing.
Update
As suggested I have tried changing the root layout to LinearLayout using weight, however, I got the same result as before and if I change the weight of the cardview to 1 and the checkbox to 0 I am able to get the desired layout for the expanded list but not for the hidden case.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/check"
android:id="#+id/check"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"
/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:textStyle="bold"
android:textColor="#android:color/white"
/>
You'll need to use a LinearLayout and use Weight for the childs.
You can change all views weight on click.
But I think you'll need to put your CheckBox inside a layout and set this layout weight. Otherwise you'll mess with the height.
Didn't look to close to your layout, but you may need to do that for CardView too.
Just keep that in mind.
Hope this helps
To do what you are trying to do, you would have better luck using a LinearLayout with vertical orientation as your root element. Doing this, you could set the CardView to have a weight of 1 (and a 'height' of 0dp, because of how weight works) without giving a weight to the other elements, causing it to fill all available space not taken by the other two elements. The method for doing this can be found here:
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight

Categories

Resources