Android Material CardView with HorizontalScrollView - android

i need to show CardViews in HorizontalScrollView like below tutorial
http://examples.javacodegeeks.com/android/core/ui/horizontalscrollview/android-horizontalscrollview-example/
and here is what i've tryed:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:id="#+id/view2"
android:layout_width="170dp"
android:layout_height="220dp"
android:layout_alignParentEnd="true"
android:layout_alignTop="#+id/horizontalScrollView"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="3sp"
card_view:cardUseCompatPadding="true" />
</RelativeLayout>
</HorizontalScrollView>
<android.support.v7.widget.CardView
android:id="#+id/view5"
android:layout_width="170dp"
android:layout_height="220dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="3sp"
card_view:cardUseCompatPadding="true"
android:layout_alignTop="#+id/horizontalScrollView"
android:layout_alignParentEnd="true"
android:layout_marginEnd="33dp" />
</RelativeLayout>
But i can't use more than two cardview in this layout.(inHorizontalScrollView)
should i use another widget for this porpose or what is the problem if i need to show 5 CardView in this Horizontal ScrollView?
Cheers!

You can use RecyclerView which comes in the android support library and u can see how to add it to your project here. It is a better implementation on list view which comes with a Layout manager by which you can configure it to be used as Horizontal or vertical Scroll mode.
mRecyclerLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

Related

focusable not working in a recyclerview - why?

Hi i have a main recyclerview which is set to vertical and inside that recyclerview i have another recyclerview which is set to horizontal and inside horizontal recyclerview i have cardview with imageview and textview, i'm currently making my layout for android t.v so in order to work this code i have to add focus in my cardview so that user can easily navigate through the cards but the issue is if i'm adding
android:focusable="true"
in my cardview nothing works, my guess is because i have 2 recyclerviews that's why cardview is not receiving focus any idea how to fix it..
Here's my code
This is my main recyclerview
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerviewMainCarousels"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="afterDescendants"/>
This is my second recyclerview
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerviewCarousel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="beforeDescendants"/>
And this is my cardview
<androidx.cardview.widget.CardView
android:id="#+id/bollyAlbumCardView"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#android:color/transparent"
app:cardElevation="0dp"
app:contentPadding="3dp"
app:cardUseCompatPadding="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true">
<LinearLayout
android:padding="0dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_gravity="center_horizontal"
android:layout_width="180dp"
android:layout_height="180dp">
<com.hirazo.utilities.HZImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription"
android:scaleType="fitXY" />
<ImageView
android:id="#+id/playIcon"
android:visibility="gone"
android:layout_centerInParent="true"
android:src="#drawable/icon_play_new"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<TextView
android:textSize="12sp"
android:id="#+id/title"
android:paddingTop="8dp"
android:maxLines="2"
android:ellipsize="marquee"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#fff" />
</LinearLayout>
</androidx.cardview.widget.CardView>
You have to add this line of code somewhere (Adapter?)
textView.setSelected(true);

android recyclerview gridview item not showing properly

I am using recyclerview gridview to show product. But its showing like this
this is the view
my xml view code is
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/tools"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="#dimen/cover_height"
android:layout_height="wrap_content"
android:layout_gravity="center"
card_view:cardUseCompatPadding="true"
android:elevation="7dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.makeramen.roundedimageview.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/thumbnail"
android:src="#drawable/placeholder_image"
android:scaleType="fitXY"
app:riv_oval="false"
app:riv_corner_radius_top_left="6dp"
app:riv_corner_radius_top_right="6dp"
android:layout_height="#dimen/cover_height"
android:layout_width="match_parent" />
<pseudozero.smalam.com.finwallet.utils.TextViewPlus
android:id="#+id/tvProductTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/thumbnail"
android:textColor="#color/colorBlack"
android:textSize="15dp"
android:text="Wrist Watch"
android:padding="5dp"
app:customFont="fonts/Proxima_Nova_Bold.otf"/>
<pseudozero.smalam.com.finwallet.utils.TextViewPlus
android:id="#+id/tvProductVendor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvProductTitle"
android:textSize="13dp"
android:paddingLeft="5dp"
android:paddingBottom="5dp"
android:text="Rolex"
app:customFont="fonts/Proxima_Nova_Reguler.otf"/>
<pseudozero.smalam.com.finwallet.utils.TextViewPlus
android:id="#+id/tvPriceTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="500 BDT"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:textColor="#color/colorWhite"
android:textSize="13dp"
android:padding="10dp"
android:background="#drawable/price_tag_back_n"
app:customFont="fonts/Proxima_Nova_Bold.otf"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
I am using a card view inside linearlayout. But I am getting this
I am loading all data from server. Only the second item is going up. I want that all items will be decorated.
Use fixed height of CardView and RoundedImageView
Use attribute android:scaleType="centerCrop" instead of android:scaleType="fitXY" to RoundedImageView.
Hope this will help~
RelativeLayout Height should be wrap_content
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
to
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
And in your code you do not close parent LinearLayout.

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

Android ListView with CardView: Last Card not fully displayed when scrolling

I have created a ListView to which I've added CardView.
As you can see in the image, when I start scrolling, the last Card in the ListView is not completely displayed. It scrolls up but it does not come above Android's navigation bar at the bottom. I've been testing on a HTC One M8.
Here is the ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ListView
android:id="#+id/wanna_list"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:divider="#null"/>
</LinearLayout>
And here is the CardView that I inflate and set into the adapter of the listview:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<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="200dp"
android:id="#+id/cv"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
card_view:cardCornerRadius="6dp"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="2dp">
<!-- compat padding is required if using AppCompat -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp" >
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/thumbnail"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp"
android:src="#drawable/india"
android:scaleType="centerCrop" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/firstLine"
android:layout_toRightOf="#+id/thumbnail"
android:layout_alignParentTop="false"
android:textSize="20sp"
android:text="Tennis with Peter"
android:layout_alignTop="#+id/thumbnail" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/secondLine"
android:layout_below="#+id/firstLine"
android:text="10 Oct at 7pm"
android:layout_alignLeft="#+id/firstLine" />
<Button
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="YES"
android:id="#+id/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignLeft="#+id/thumbnail" />
<Button
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="NO"
android:id="#+id/button4"
android:layout_toRightOf="#+id/button3"
android:layout_alignBottom="#+id/button3"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="false" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I have also tried my card view layout without wrapping it in a LinearLayout and it still does not work.
Is there a setting in the layout xml that will take care of this?
Thanks in advance.
android:layout_marginBotton=" "
add margin bottom should try once.
So adding a margin to the bottom of listView worked, as below:
<ListView
android:id="#+id/wanna_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#null"
android:layout_marginBottom="80dp" />
Am surprised this is the only way to get it to work though. I would have assumed the Android framework took care of these things.
Is the ListView in a Fragment ? As far as I know, this is possible when you have used a Toolbar such as :
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll"
...
>
</android.support.v7.widget.Toolbar>
then change the attribute to:
app:layout_scrollFlags="enterAlwaysCollapsed"
Adding margin at the bottom of ListView is sort of a hack. I have given a probable cause for this. If this is the case, then you won't need to add the margin in ListView. There is always a reason behind the UI behavior. I hope this helps.

Android L cards using CardView

I am having a play with the new Android L SDK and I can't figure out how to implement CardView. Seems like I'm missing something - any advice is very much appreciated!
So far I have the following declared as part of my activity:
<android.support.v7.widget.CardView
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_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_below="#+id/waitingHeader"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:id="#+id/card_linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/notificationText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello"/>
<TextView
android:id="#+id/notificationTex"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello2"/>
</LinearLayout>
</android.support.v7.widget.CardView>
Naively I was hoping that would give me two cards with hello and hello2 however all I see is a single card with hello - the second card is missing. How can I create multiple cards using CardView?
Think of cardview as ViewGroup Like linear layout or Relative layout. If you want two cardview then use two cardview and keep root layout as Linear or Relative Layout.
<android.support.v7.widget.CardView
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_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_below="#+id/waitingHeader"
card_view:cardCornerRadius="4dp">
<TextView
android:id="#+id/notificationText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_below="#+id/waitingHeader"
card_view:cardCornerRadius="4dp">
<TextView
android:id="#+id/notificationTex"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello2"/>
</android.support.v7.widget.CardView>

Categories

Resources