Unable to remove extra space between CardView items - Scrollable RecyclerView - android

Folks,
I am out of options while attempting to removing extra space between cardview items in my recyclerview below is the current output. Please suggest.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#303030"
android:id="#+id/cv"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="5dp"
android:foreground="?android:attr/selectableItemBackground"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:padding="5dp"
android:longClickable="true"
android:background="#303030">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_photo"
android:background="#drawable/vector_red"
android:layout_alignBottom="#+id/txtSub" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/txtMain"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/person_photo"
android:layout_toEndOf="#+id/person_photo"
android:elevation="4dp"
android:textSize="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="#+id/txtSub"
android:layout_below="#+id/txtMain"
android:layout_toRightOf="#+id/person_photo"
android:layout_toEndOf="#+id/person_photo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
My Recycler view
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
card_view:cardUseCompatPadding="false"
card_view:cardPreventCornerOverlap="false"
android:background="#0fffffff" />
</RelativeLayout>


I have not implemented a RecyclerView, however I have replicated two rows in a linear layout, minus the padding from your original question:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:background="#303030"
android:id="#+id/cv1"
card_view:cardElevation="5dp"
android:foreground="?android:attr/selectableItemBackground"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="4dp"
android:longClickable="true"
android:background="#303030">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_photo"
android:background="#drawable/vector_red"
android:layout_alignBottom="#+id/txtSub" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/txtMain"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/person_photo"
android:layout_toEndOf="#+id/person_photo"
android:elevation="4dp"
android:textSize="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="#+id/txtSub"
android:layout_below="#+id/txtMain"
android:layout_toRightOf="#+id/person_photo"
android:layout_toEndOf="#+id/person_photo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:background="#303030"
android:id="#+id/cv1"
card_view:cardElevation="5dp"
android:foreground="?android:attr/selectableItemBackground"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="4dp"
android:longClickable="true"
android:background="#303030">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_photo"
android:background="#drawable/vector_red"
android:layout_alignBottom="#+id/txtSub" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/txtMain"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/person_photo"
android:layout_toEndOf="#+id/person_photo"
android:elevation="4dp"
android:textSize="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="#+id/txtSub"
android:layout_below="#+id/txtMain"
android:layout_toRightOf="#+id/person_photo"
android:layout_toEndOf="#+id/person_photo" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Play around with the padding and you will get better results. You can also try adding a background color to your card, then you can get rid of layout margins in your RelativeLayout!


All you need to do is remove the following two lines from the xml for the CardLayout:
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
What this does is sets the seperation between the two layouts, in this case you have 4dip (2 at the top and 2 at the bottom). You can also try to reduce it to 1 dip and verify the effect it gives you.
Hope this helps :)


Can you please try this one ?
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
...
...
...
</android.support.v7.widget.CardView>
I have checked, it works fine for me.
Check screenshot:
Hope this will help you.


change your card layout to
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#303030"
android:id="#+id/cv"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true">


In the card view xml change in the overall parent layout width to wrap content.
android:layout_width="match_parent"
to
android:layout_width="wrap_content"

Related

Why adding the switch or checkbox button in Relative layout messes up the entire layout?

I want to add a switch or checkbox button to a fragment layout. When i add it, it loads the layout until the checkbox comes, and it kinda "destroy" the layout, mixing it with the previous layout fragment.
I tried using switch and checkbox and it messes up, using another textview instead it works fine.
Here is a photo with switch in xml: Image with switch
As you can see, the left margin is cutted and at his bottom there are elements from previous layout, and they are not clickable.
Here is a photo with a textview instead of the switch element: image without switch
Here, the layout works perfectly.
Here is the xml layout, with a not simple structure for creating the layout i wanted. At the bottom of the layout file, you can see the switch element, which i think it ruins the entire layout.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:app="http://schemas.android.com/tools"
android:background="#E8E8E8"
app:ignore="NamespaceTypo">
<!-- Here you put the rest of your current view-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
>
<android.support.design.card.MaterialCardView
android:id="#+id/acquisto_cardview_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardElevation="2dp"
android:layout_margin="8dp"
card_view:cardCornerRadius="5dp"
card_view:strokeColor=" #696969"
card_view:strokeWidth="1dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp">
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_info_intestazione"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/acquisto_cardview_info_intestazione_text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/info_intestazione"
android:background="#drawable/textview_sottolineato"
style="#style/italictext_summary"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_info_tot_articoli"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#id/acquisto_cardview_info_intestazione"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/acquisto_cardview_info_tot_articoli_txt_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info_totale_articoli"
style="#style/acquisto_card_textview"
android:layout_alignParentStart="true"
android:ellipsize="end"
/>
<TextView
android:id="#+id/acquisto_cardview_info_tot_articoli_txt_prezzo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
style="#style/acquisto_card_textview"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_info_punti_guadagnati"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#id/acquisto_cardview_info_tot_articoli"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/acquisto_cardview_info_punti_guadagnati_txt_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info_punti_guagnati"
style="#style/acquisto_card_textview"
android:layout_alignParentStart="true"
android:ellipsize="end"
/>
<TextView
android:id="#+id/acquisto_cardview_info_punti_guadagnati_txt_prezzo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
style="#style/acquisto_card_textview"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</android.support.design.card.MaterialCardView>
<android.support.design.card.MaterialCardView
android:id="#+id/acquisto_cardview_impo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardElevation="2dp"
android:layout_margin="8dp"
card_view:cardCornerRadius="5dp"
card_view:strokeColor=" #696969"
card_view:strokeWidth="1dp"
android:layout_below="#id/acquisto_cardview_info"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp">
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_impo_intestazione"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/acquisto_cardview_impo_intestazione_text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/impo_intestazione"
android:background="#drawable/textview_sottolineato"
style="#style/italictext_summary"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_impo_carta_addebitata"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#id/acquisto_cardview_impo_intestazione"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/acquisto_cardview_impo_carta_addebitata_txt_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/impo_carta_addebitata"
style="#style/acquisto_card_textview"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:layout_toStartOf="#id/acquisto_cardview_impo_carta_addebitata_txt_prezzo"
/>
<TextView
android:id="#+id/acquisto_cardview_impo_carta_addebitata_txt_prezzo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visa :x 5748"
style="#style/acquisto_card_textview"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_impo_sconto_disponibile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#id/acquisto_cardview_impo_carta_addebitata"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/acquisto_cardview_impo_sconto_disponibile_txt_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/impo_sconto_disponibile"
style="#style/acquisto_card_textview"
android:layout_alignParentStart="true"
android:ellipsize="end"
/>
<TextView
android:id="#+id/acquisto_cardview_impo_sconto_disponibile_txt_prezzo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
style="#style/acquisto_card_textview"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_impo_applica_sconto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#id/acquisto_cardview_impo_sconto_disponibile"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--inserire checkbox qui-->
<Switch
android:id="#+id/acquisto_cardview_impo_applica_sconto_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/impo_checkbox_sconto"
style="#style/acquisto_card_textview"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:textOn="#string/on"
android:textOff="#string/off"
android:layoutDirection="rtl"
app:switchPadding="16dp"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</android.support.design.card.MaterialCardView>
<android.support.design.card.MaterialCardView
android:id="#+id/acquisto_cardview_finale"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardElevation="2dp"
android:layout_margin="8dp"
card_view:cardCornerRadius="5dp"
card_view:strokeColor=" #696969"
card_view:strokeWidth="1dp"
android:layout_below="#id/acquisto_cardview_impo"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp">
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_finale_intestazione"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/acquisto_cardview_finale_intestazione_text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/finale_intestazione"
android:background="#drawable/textview_sottolineato"
style="#style/italictext_summary"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_finale_totale_ordine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#id/acquisto_cardview_finale_intestazione"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/acquisto_cardview_finale_totale_ordine_txt_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/finale_totale_ordine"
style="#style/acquisto_card_textview"
android:layout_alignParentStart="true"
android:ellipsize="end"
android:layout_toStartOf="#id/acquisto_cardview_finale_totale_ordine_txt_prezzo"
/>
<TextView
android:id="#+id/acquisto_cardview_finale_totale_ordine_txt_prezzo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
style="#style/acquisto_card_textview"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/acquisto_cardview_finale_bottone_acquisto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#id/acquisto_cardview_finale_totale_ordine"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</android.support.design.card.MaterialCardView>
</RelativeLayout>
</ScrollView>
Please help me, i dont know what's happening here.

Use ConstraintLayout root view group for your layout.
You will get at least 2 positive things:
You will remove "view to view" side effects.
You will have flatten layout with better performance.

Android LinearLayout overlapping imageView

I am trying to use a cardview to have an imageview and to the right of it a linearlayout, the problem i am having is the linearlayout is getting drawn on top of my imageview.
I am using a listview to get items and display each item on the menu.
The blue square is my linearlayout, the image is the highlighted part
axml 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"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="8dp"
android:layout_margin="5dp"
android:background="#drawable/listitemshadow"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<ImageView
android:id="#+id/menuItemImageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="5dp"
android:src="#drawable/picking" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_marginLeft="0.0dp">
<TextView
android:id="#+id/menuItemNameTextView"
android:layout_width="200dp"
android:textSize="16dp"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:layout_alignParentLeft="true"
android:textStyle="bold"
android:gravity="left" />
<TextView
android:id="#+id/shortDescriptionTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:textSize="12dp"
android:textColor="#android:color/black"
android:layout_below="#+id/menuItemNameTextView" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

You should use RelativeLayout otherwise you will have to use too many layouts that are bad for performance. And also don't use cardView as a parent because it will overlap the elements. Use it inside a RelativeLayout or a constraintLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/listitemshadow"
android:padding="8dp">
<ImageView
android:id="#+id/menuItemImageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="5dp"
android:src="#drawable/picking" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/menuItemImageView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
android:paddingLeft="10dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0.0dp"
android:paddingLeft="10dip">
<TextView
android:id="#+id/menuItemNameTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:textColor="#android:color/black"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:id="#+id/shortDescriptionTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/menuItemNameTextView"
android:gravity="left"
android:textColor="#android:color/black"
android:textSize="12dp" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

don't use card view as the main layout, always use another layout inside cardview because cardview works as frame layout, the whole thing put under another layout and that layout should under cardview
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:background="#drawable/ic_launcher_background"
android:padding="8dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/menuItemImageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:background="#color/colorPrimary"
android:padding="5dp"
android:src="#drawable/ic_launcher_foreground" />
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/menuItemImageView"
android:background="#color/colorAccent"
android:orientation="vertical"
android:paddingLeft="10dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0.0dp"
android:paddingLeft="10dip">
<TextView
android:id="#+id/menuItemNameTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:textColor="#android:color/black"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:id="#+id/shortDescriptionTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/menuItemNameTextView"
android:gravity="left"
android:textColor="#android:color/black"
android:textSize="12dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>

Try putting your linearlayout and image in another horizontal linearlayout instead of putting them directly inside cardview.
<?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"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="8dp"
android:layout_margin="5dp"
android:background="#drawable/listitemshadow"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/menuItemImageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="5dp"
android:src="#drawable/picking" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_marginLeft="0.0dp">
<TextView
android:id="#+id/menuItemNameTextView"
android:layout_width="200dp"
android:textSize="16dp"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:layout_alignParentLeft="true"
android:textStyle="bold"
android:gravity="left" />
<TextView
android:id="#+id/shortDescriptionTextView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:textSize="12dp"
android:textColor="#android:color/black"
android:layout_below="#+id/menuItemNameTextView" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

In the card view, use a list view.
After that, make a custom layout for the list item i.e, make an XML file for the list item layout. After that create a custom adapter for adapting the list item to the list layout in the card view.
You can take the reference from this video:-
https://youtu.be/A-_hKWMA7mk

Cradview left space between items

my problem is with Cardview in Android Studio.I am parsing data from XML feed and using cardview to display it.Everything seems okay, but cardview left free space after every row. My code from layout is below.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/cardview"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/date_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Small Text" />
<ImageView
android:id="#+id/thumb_img"
android:layout_width="350dp"
android:layout_height="150dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/date_text"
android:src="#drawable/test" />
<TextView
android:id="#+id/title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/thumb_img"
android:layout_centerHorizontal="true"
android:background="#006699"
android:gravity="center"
android:lines="1"
android:text="TextView" />
<TextView
android:id="#+id/description_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/thumb_img"
android:text="TextView" />
</RelativeLayout>

You need to change your CardView and RelativeLayout height from match_parent to wrap_content
Use changes layout XML this will fix your problem
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/cardview"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/date_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Small Text" />
<ImageView
android:id="#+id/thumb_img"
android:layout_width="350dp"
android:layout_height="150dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/date_text"
android:src="#drawable/test" />
<TextView
android:id="#+id/title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/thumb_img"
android:layout_centerHorizontal="true"
android:background="#006699"
android:gravity="center"
android:lines="1"
android:text="TextView" />
<TextView
android:id="#+id/description_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/thumb_img"
android:text="TextView" />
</RelativeLayout>
</android.support.v7.widget.CardView>

Try changing android:layout_height="match_parent" to android:layout_height="wrap_content".
Right now, you're telling android to make the cardview the height of the wrapping layout, and I think what you want is for it to just take up as much height as it needs to display you information.

Text in CardView is overlapping Android

In my android app I have created two TextView inside CardView layout. The first TextView will show the description of one item and second TextView will show a link of that item. but whenever I run my app, the second text is overlapping with the first one. I want to implement in such a way that after finishing the first text the second one with start. but I fail to implement that.
Here is my code for CardView layout.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/news_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/large_text"/>
<TextView
android:id="#+id/webLink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/link"
android:layout_gravity="bottom"
android:textAppearance="?android:attr/textAppearanceSmall" />
</android.support.v7.widget.CardView>
</RelativeLayout>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/news_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/large_text"/>
<TextView
android:id="#+id/webLink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/link"
android:layout_gravity="bottom"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

make your layout like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="#+id/news_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/large_text" />
<TextView
android:id="#+id/webLink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/link"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

Use the RelativeLayout or LinearLayout inside the CardView like this:
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/news_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dklfjkdsjfsd"
/>
<TextView
android:id="#+id/webLink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/news_description"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Hope this will help you out.....

You have put two TextViews inside CardView. The super class of CardView is FrameLayout. Putting your TextVeiws inside a LinearLayout or Relative Layout can solve your problem.
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/news_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/large_text"/>
<TextView
android:id="#+id/webLink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/link"
android:layout_gravity="bottom"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</android.support.v7.widget.CardView>

How add title in imageview?

i have this:
enter image description here
But i wanna:
enter image description here
My XML:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="380dp"
android:layout_margin="0dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:paddingBottom="-10dp"
android:scaleType="fitCenter"
android:src="#drawable/dog_full"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/thumbnail"
android:padding="8dp"
android:textColor="#222"
android:textSize="22dp"
android:textStyle="bold" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:padding="8dp"
android:textColor="#222"
android:textSize="18dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
How i can did this? Thank you!
Could you show us how to make this markup? Could you show us how to make this markup?

Since your title is already in a RelativeLayout and it is below the thumbnail, you can add a negative marginTop to the title. Something like:
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/thumbnail"
android:padding="8dp"
android:marginTop="-30dp"
android:textColor="#222"
android:textSize="22dp"
android:textStyle="bold" />
You can adjust the dp as needed.

Just use android:layout_alignBottom
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
android:layout_marginLeft="#dimen/card_margin"
android:layout_marginRight="#dimen/card_margin">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_card"
android:layout_width="match_parent"
android:layout_height="#dimen/cafe_img"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_size_large_plus"
android:layout_alignBottom="#id/img_card"
android:textColor="#color/colorBackground"
android:background="#color/transparentColor"/>
</RelativeLayout>
</android.support.v7.widget.CardView>

You can try this using relative layout https://stackoverflow.com/a/19065295/7505436 or using frame layout http://www.tutorialspoint.com/android/android_frame_layout.htm

Categories

Resources