How can I reduce the space between individual CardViews in a RecyclerView? - android

So I was learning to implement RecyclerViews along with CardViews. I'm finding that these individual CardViews have a lot of space between them. Here's the XML code for the RecyclerView as well as the CardView.
activity_main.xml
<?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"
tools:context=".MainActivity"
android:background="#android:color/transparent">
<TextView
android:id="#+id/bannerId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"
android:text="#string/favorite_artists_text"
android:textSize="27sp"
android:textAlignment="center"
android:fontFamily="#font/montserrat_alternates_bold"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/bannerId"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#android:color/transparent"
android:layout_marginTop="65dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
layout_listitems.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/primaryCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardMaxElevation="1dp"
app:cardElevation="1dp">
<RelativeLayout
android:id="#+id/housingRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="3dp">
<TextView
android:id="#+id/rank"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/old_standard_tt_bold"
android:text="#string/sample_rank"
android:textAlignment="center"
android:textSize="27sp" />
<View
android:id="#+id/separator_line"
style="#style/separator_line"
android:layout_below="#id/rank"/>
<TextView
android:id="#+id/songName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/separator_line"
android:layout_marginTop="15dp"
android:text="#string/sample_song_name"
android:textSize="17sp"
android:fontFamily="#font/varela_round"/>
<TextView
android:id="#+id/artistName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/songName"
android:text="#string/sample_artist_name"
android:textSize="17sp"
android:fontFamily="#font/varela_round"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
I checked out a few other answers here in Stack Overflow and one of them said that adding these lines:
app:cardMaxElevation="1dp"
app:cardElevation="1dp"
would fix the issue. But, it did nothing.

because you are using android:layout_margin="10dp" for cardView which mean you will add 10dp space all sides, the first item has now 10dp top & bottom, when adding the second item for recyclerView will add another 10dp on top so, now the second item has 20dp margin space.
How to fix?
you can set margins using top, start and end only.

Just like Moustafa EL-Saghier's solution, by putting this line of code in your XML
android:layout_margin="10dp"
You are basically telling the program to put 10dp worth of space in between all of your cards in the RecyclerView, including the sides.
For a horizontal RecyclerView, you would want to put:
android:layout_marginStart ="10dp"
android:layout_marginEnd = "10dp"
This will put space in between the cards on the left and right hand sides.
For a vertical Recyclerview, you would want to put:
android:layout_marginTop ="10dp"
android:layout_marginBottom = "10dp"
This will put space in between the cards on the top and bottom sides.
Again, this is just like Moustafa EL-Saghier's answer, just in a way that addresses your Cardview needs in simple code bits. Hope this helps!

Related

Is it Possible to remove child padding In Android

I have a linear layout. In Parent's view, I have padding defined. But I want to remove the padding from the child view. Is it possible to remove middle child view padding?. I know one solution is that I need to give padding separately. But i don't want to use this solution. So any alternative solution.
Layout
<?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:tool="http://schemas.android.com/tools"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:visibility="gone"
tool:text="Header text" />
<View
android:id="#+id/separator"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="10dp"
android:background="#cccccc"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#id/header" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/dialog_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp" />
</LinearLayout>
Above code looks like this
Expected Output
This could be done adding in the LinearLayout
android:clipToPadding="false"
and setting negative horizontal margins in the View:
android:layout_marginStart="-16dp"
android:layout_marginEnd="-16dp"
This works because you have a LinearLayout, it seems that negative margins are not supported for other ViewGroups than LinearLayout and RelativeLayout as this answer says: https://stackoverflow.com/a/10673572/7794806

Is there a way to center an element while enforcing it stays on screen in Android?

For the sake of simplicity, let's say I've got two text views A and B. A is a set size with a set margin between it and the parent. B is a variable size.
The goal is to position B centered below A if it fits but not have B go off the screen.
Here's the xml I've currently got for the two elements:
<?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"
tools:context=".MainActivity">
<TextView
android:id="#+id/element_A"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="elem_A"/>
<TextView
android:id="#+id/element_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#id/element_A"
app:layout_constraintEnd_toEndOf="#id/element_A"
app:layout_constraintTop_toBottomOf="#id/element_A"
android:text="sml"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The image below shows three figures: left is what I'm seeing when element B is small enough (great), middle is what I'm seeing when element B is too big (not good), and right is what I want to see when element B is too big.
As it turns out, switching from ConstraintLayout to LinearLayout actually fixes this problem. I'm still curious if this is possible using ConstraintLayout but for now I'll just use LinearLayout.
<?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="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
android:layout_gravity="end"
tools:context=".MainActivity">
<TextView
android:id="#+id/element_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:layout_weight="1"
android:text="elem_A"/>
<TextView
android:id="#+id/element_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_weight="1"
android:text="much much longer element B"/>
</LinearLayout>
First create LinearLayout and set orientation to horizontal And again you need to create child LinearLayout and wrap both text feilds into it and set it's layout_gravity to right also set orientation to vertical. After that you need to distribute weight of LinearLayout into both of text feilds equally and also set gravity and layout_gravity to center for both text feilds . Tip :- don't use hard-coded values,instead use match_parent / wrap_content for all elements.
I have made changes to your code, cop-paste all code to your xml file...
<?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"
tools:context=".MainActivity">
<TextView
android:id="#+id/element_A"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="32dp"
android:text="elem_A"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/element_B"
app:layout_constraintStart_toStartOf="#+id/element_B"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/element_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:text="sml"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="88dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

How can I make an element appear on top of a layout

I know this question has been asked many times. However all the answers I have tried to find have failed me. I want the textview to appear on top of the constraint layout but every time I try to run the application I just see the web view vidged which is connected to the constraint layout.
The last solution I tried was to reduce elevation of the layout to 1dp and increase elevation of the TextView to 2dp.
<?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"
tools:background="#drawable/green_border_background" android:elevation="1dp">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:elevation="2dp"
android:id="#+id/textView2"
tools:text="0"
android:textSize="30sp"
/>
At the moment I do not care if the textview is centered, vertically below or vertically above the layout. I just want it to be visible. It is under the layout (Z vise) and thereby invisible. Elevation is the problem I am facing.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<TextView
android:textSize="25sp"
android:layout_marginStart="50dp"
android:text="Title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
This code place the TextView on the top of the ConstraintLayout
Just check the ConstraintLayout.
Read the "Adjust the constraint bias" part, try to set the
app:layout_constraintVertical_bias="0"

Constraint layout button text center alignment

I'm using the new Constraint layout to build my layout. I need to have Button that occupies almost the entire screen width and that was easy using constraints.
As you can see in the image I am setting the width to 0dp (Any size), but the text don't stick at the center what's usually the normal for a button text.
I've tried:
- set gravity to center
- set textAlignment to center
Looks like this properties can't work with 0dp width (Any size).
So I've tried to set the width to match_parent using gravity center.
It's a little bit to the right.
Does any one know how to fix that behavior ?
Note that i'm using alpha4
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha4'
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:id="#+id/content_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="br.com.marmotex.ui.LoginActivityFragment"
tools:showIn="#layout/activity_login">
<Button
android:text="Log in"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/btLogin"
android:layout_marginTop="48dp"
app:layout_constraintTop_toBottomOf="#+id/textView6"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="#+id/content_login"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="#+id/content_login"
android:layout_marginLeft="16dp"
android:textColor="#android:color/white"
android:background="#color/BackgroundColor" />
</android.support.constraint.ConstraintLayout>
EDIT It was a bug in ConstraintLayout alpha4.
UPDATE Google has released alpha5, the above code now Works.
Release note
It's a little bit to the right.
I think margin(s) is causing these. And its not only affecting Buttons, in my experience. Margin is screwing TextInputEditText too.
Below is a working code but please pay attention to android:layout_width="match_parent" on the Button. Any time I clicked in the editor, it will change to android:layout_width="0dp", and ruin the button alignment.
<?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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/button_survey"
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/activity_main"
app:layout_constraintLeft_toLeftOf="#+id/activity_main"
app:layout_constraintRight_toRightOf="#+id/activity_main"
app:layout_constraintTop_toTopOf="#+id/activity_main"
tools:text="#string/main_activity_btn_survey"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp" />
</android.support.constraint.ConstraintLayout>
Inspired by Hobo joe's solution, below is the way i prefer to did it. His solution is working but still need to use padding to create spacing. If margin was used instead, the alignment of button's text will go slightly to the right. So I used padding on LinearLayout(or ConstraintLayout) instead of margin on button.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/activity_main"
app:layout_constraintTop_toTopOf="#+id/activity_main"
app:layout_constraintRight_toRightOf="#+id/activity_main"
app:layout_constraintBottom_toBottomOf="#+id/activity_main"
android:padding="16dp">
<Button
android:text="Button"
android:layout_width="match_parent"
android:layout_height="52dp"
android:id="#+id/button_survey"
android:layout_weight="1"
tools:text="#string/main_activity_btn_survey"
/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Have you tried ?
android:textAlignment="center"
This works for me.
This is a bug. However, you can work around it by placing the button inside a LinearLayout (Or other standard ViewGroup). Set the parent view and the button width to match_parent, and move whatever constraints you had on the button to the parent layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/parent_left"
app:layout_constraintTop_toTopOf="#+id/parent_top"
app:layout_constraintRight_toRightOf="#+id/parent_right">
<Button
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Centered Text"/>
</LinearLayout>
Well I think its because of these constraints
app:layout_constraintRight_toRightOf
app:layout_constraintLeft_toLeftOf
replace your current button with this one :
<Button
android:text="Log in"
android:layout_width="match_parent"
android:layout_height="48dp"
android:id="#+id/btLogin"
android:textColor="#android:color/white"
android:background="#color/BackgroundColor"
android:gravity="center"
android:textAlignment="center"
android:layout_marginTop="100dp"
tools:layout_editor_absoluteX="-1dp"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
Hope this will help.
It seems that the issue is with android:layout_width="match_parent" when using inside ConstraintLayout.
Just set android:layout_width="0dp" and add constraints app:layout_constraintStart_toStartOf="parent" & app:layout_constraintEnd_toEndOf="parent", it'd just work fine.
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Continue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />

CardView goes on top of FrameLayout, but declared first

I have simple FrameLayout with support CardView as first item, and TextView as second, so TextView must be on top of inflated view. This works on pre-Lolipop but on 21+ card takes toppest place in layout, why that's so and how to fix this? Same thing with RelativeLayout.
Layout:
<?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:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
In case someone gets here and the solution for setting elevation doesn't work for them (like in my case, where I needed to draw an image above the CardView and having a shadow on it was not acceptable), you can solve the issue by wrapping the CardView inside another FrameLayout. In the example provided, it would look something like this:
<?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:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- This is the added FrameLayout -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false"
/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="i am top view!"
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:textAllCaps="true"
android:textColor="#00ff00"
android:background="#0000ff"
/>
</FrameLayout>
I might be joining the discussion a bit late, but if you can afford giving up the CardView's elevation, you can just set the cardElevation property of the CardView in your XML layout to 0dp.
Like so:
app:cardElevation="0dp"
Just add your text view inside the card view, far as I know the z order is undefined inside a frame layout, but last laid out view should be drawn last.
This probably had to do with that card views in lollipop use elevation while they fall back on border drawing code pre lollipop.
This worked for me!
<?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:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Add this layout as parent of CardView -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#ff0000"
app:cardUseCompatPadding="false" />
</LinearLayout>
<!--Close parent layout-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#0000ff"
android:gravity="center"
android:text="i am top view!"
android:textAllCaps="true"
android:textColor="#00ff00"
android:textSize="30sp" />
</FrameLayout>

Categories

Resources