B4A Library MSCardView

This library ports the CardView present in the android v7 compatibility libraries.
CardView is used to show information organized as cards. You can use these cards in a scrollview or a listview (ULV) or gridview etc.
The CardView is just a view that contains a panel.

Setup:
You do not need to reference and library to work with this, however you need to reference the resource files.
Add the following in your project attributes:

#AdditionalRes: H:\Eclipse\adt-bundle-windows-x86_64\sdk\extras\android\support\v7\cardview\res

*Replace the path with your AndroidSDK path. Also note you need to update your SDK and support libraries.

Copy MSCardView.xml and MSCardView.jar from this post into your Addtional Libraries folder.

CardView Specific Properties and Methods:
MaxElevation, Elevation, Radius, setPadding
These are all self explanatory.

Using CardView:

Example usage:

'Create a Holder panel
Dim spanel AsPanel

spanel.Initialize("")
Activity.AddView(spanel, 0dip, 0dip, 100%x, 100%y)

'Create the CardViews
   Dim cv As MSCardView
    cv.Initialize("CV")
    cv.MaxElevation = 10dip
    cv.Elevation = 4dip
    spanel.AddView(cv, 10dip, 255dip, 100%x - 20dip, 96dip)

    Dim cv2,cv3 As MSCardView
    cv2.Initialize("")
    cv3.Initialize("")
    spanel.AddView(cv2, 10dip, 370dip, 50%x - 20dip, 60dip)
    spanel.AddView(cv3, 50%x , 370dip, 50%x - 20dip, 60dip)

    cv2.Radius = 50
    cv3.MaxElevation = 1dip
    cv3.Elevation = 2dip
    Dim etnew As EditText
    etnew.Initialize("")
    cv3.setPadding(50dip,5dip,10dip,5dip)
    cv3.Panel.AddView(etnew,0,0,-1,-1)

MSCardView
Author: thedesolatesoul
Version: 0.01

• MSCardView
  Methods:
  • BringToFront
  • Initialize (EventName As String)
  • Invalidate
  • Invalidate2 (arg0 As Rect)
  • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • IsInitialized As Boolean
  • RemoveView
  • RequestFocus As Boolean
  • SendToBack
  • SetBackgroundImage (arg0 As Bitmap)
  • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • setPadding (l As Int, t As Int, r As Int, b As Int)
  Properties:
  • Background As Drawable
  • Color As Int [write only]
  • Elevation As Float
  • Enabled As Boolean
  • Height As Int
  • Left As Int
  • MaxElevation As Float
  • Panel As PanelWrapper [read only]
  • Radius As Float
  • Tag As Object
  • Top As Int
  • Visible As Boolean
  • Width As Int

 

[freedom2000]

Probably try the one here: https://www.b4x.com/android/forum/threads/msmaterialmenu-animating-icons.44735/page-2#post-291365
I cant really guarantee anything is going to work though, I'm not actively developing this anymore.

Great !
This one works, no compilation error/

However I can't see what is the result of this method "setTransformationOffset "

Thank you

 

[thedesolatesoul]

Great !
This one works, no compilation error/

However I can't see what is the result of this method "setTransformationOffset "

Thank you

The result is the changing of the icon to morph to a frame between A and B.

 

[freedom2000]

The result is the changing of the icon to morph to a frame between A and B.

Thank you again

 

[Peter Simpson]

I've been using MSCardView in a new app of mine. I've not talk about this app on here as yet but I will do shortly when it's finished. It's only a simply little app but this library is just great for it.

Thanks for this library, it's greeeeeeeeeeeeeeeeeeeeeeat.

Right, it's time to go out for a game of snooker

 

[shashkiranr]

Hi @thedesolatesoul ,

Thank you so much for this lib. . I am using the cardview for the ULV items and it looks simple great. Only one problem is that the click event of the ULV is not detected as the cardview is capturing the click function. Is it possible to disable the click function of the cardview ?

Thank you for your kind attention.

Regards,
SK

 

[thedesolatesoul]

The CardView just uses a standard B4A panel inside it.
If you define the _Click event then it will take control, but if you do not define it then it will pass the click to the underlying object (i.e. ULV).
Try to remove the CardView_Click sub.
Alternatively try to 'Return False' from CardView_Click sub so it doesnt consume it (but im not sure if this works or not).

 

[RichyK68]

Hi, I've just started using the CardView and I when I create an object of that type and set an object to its Tag property, within the click event handler for the CardView I try to extract the object with

    Dim b As MSCardView = Sender
    Dim sch As Schedule = b.Tag

but it tells me it is null. I've also tried using a Map to correlate the CardView with the object, but it won't find the item in the Map after converting Sender to MSCardView and looking for it.

Do I need to cast it another way?

Richard

 

[jvilaro]

Hi, I've just started using the CardView and I when I create an object of that type and set an object to its Tag property, within the click event handler for the CardView I try to extract the object with

    Dim b As MSCardView = Sender
    Dim sch As Schedule = b.Tag

but it tells me it is null. I've also tried using a Map to correlate the CardView with the object, but it won't find the item in the Map after converting Sender to MSCardView and looking for it.

Do I need to cast it another way?

Richard

I used to have the same problem. You should tag the panel inside de cardview, which raises de Click event. On the click event, cast to Panel.
It worked for me.

...
CardView.Initialize("CVEvent")
CardView.Panel.Tag ="The tag"
...


Sub CVEvent_Click
...
panel =Sender
log(panel.tag)
...
End Sub

Regards,
Chiki

 

[RichyK68]

Thank you!!

 

[woniol]

Hello,
Is there a way to add ripple effect to the card while clicked for lollipop and above?

 

[susu]

I used your MSCardView lib, it's great! However, all attributes of cardview show in logcat. How can I disable it? Thanks.

 

[joneden]

Great lib, thank you.

I am noticing an issue. Working on the basis that the inner panel that you assign things to should be the card rather than the surrounding shadow etc if I do cv.Panel.Width then that should be less than cv.Width. At the moment I get -1 as the value of cv.Panel.Width so am having to use cv.Width BUT that is bigger than the panel width because of the extras added.

I am assuming that the -1 is simply the fill parent shorthand? Any pointers on the most accurate way of calculating what the actual interior dimensions are?

Regards

Jon

 

[joneden]

Also in addition to my comment above I've noticed that in the initialize call there are two logs added - could these be removed or added to the add to view event along with a toggle to disable them? Small issue but adds to my logs and I could see it being a pain when dealing with a lot on one page.

Cheers

Jon

 

[joneden]

Hi All,

Following my comments above I added some functions for working with the panel width / heights. Widths were easy but height needed a little work to figure out the calculation. I think the following code will work (I need to test on other devices to make sure that the dip calc works on other dimensions, mine is a Nexus 5 where 1dip = 3). There are 4 functions, 2 get the panel width/height for a given cardview and another 2 get the needed width/height of the cardview if the inner panel needs to be of a specific size.

' Get the inner panel width on a MSCardView object - ignoring rounded corner dimensions
Sub GetMsCardViewInnerPanelWidth(objMsCardView As MSCardView) As Int
    ' Width - border values - elevation widths
    Return objMsCardView.Width - 2 - (2 * objMsCardView.Elevation)
End Sub

' Get the required width of a MSCardView object for a specific inner panel width - ignoring rounded corner dimensions
Sub GetMsCardViewWidthFromInnerPanelWidth(objMsCardView As MSCardView, innerPanelWidth As Int) As Int
    ' Panel width + border values + elevation widths
    Return innerPanelWidth + 2 + (2 * objMsCardView.Elevation)
End Sub

' Get the inner panel height on a MSCardView object - ignoring rounded corner dimensions
Sub GetMsCardViewInnerPanelHeight(objMsCardView As MSCardView) As Int
    Dim returnValue As Int = 0
  
    If (1dip * objMsCardView.Elevation) Mod 2 == 0 Then
        returnValue = (1dip * objMsCardView.Elevation)
    Else
        returnValue = (1dip * objMsCardView.Elevation) + 1
    End If

    Return objMsCardView.Height - returnValue - 2
End Sub

' Get the required height of a MSCardView object for a specific inner panel height - ignoring rounded corner dimensions
Sub GetMsCardViewHeightFromInnerPanelHeight(objMsCardView As MSCardView, innerPanelHeight As Int) As Int
    Dim returnValue As Int = 0
          
    If (1dip * objMsCardView.Elevation) Mod 2 == 0 Then
        returnValue = (1dip * objMsCardView.Elevation)
    Else
        returnValue = (1dip * objMsCardView.Elevation) + 1
    End If

    Return innerPanelHeight + returnValue + 2
End Sub

Cheers

Jon

 

[joneden]

After testing I realised that 1dip = 1 and 1dip = 2 devices work different. So I now have this as the calc in case anyone needs it

    returnValue = (3 * elevation)
    If 1dip Mod 2 <> 0 And elevation Mod 2 <> 0 Then
        returnValue = returnValue + 1
    End If

 

[Kwame Twum]

So I now have this as the calc in case anyone needs it

please, within your code, which sub gets replace by the new code?

 

[joneden]

Thats in the GetMsCardViewInnerPanelHeight and the GetMsCardViewHeightFromInnerPanelHeight functions although I'd pull it out into a single function...

 

[Kwame Twum]

Thanks @joneden,
I figured... tried it, yet my card still displays at a height that is far smaller than the content

 

[joneden]

Ah, what you could do is add loads of them to a page with different elevation values, screenshot it and then in excel work out what the difference is. I did elevation of 1 - 10. i had to do that on a 1dip = 1,2 and 3 device. Haven't seen anything other than that yet.

 

[lomosami]

Hiya all,
This is my attempt at an Android 5.0 Lollipop look and feel, it all started with this library.

Attached you will find the zip file for this bad attempt at manipulating MSCardView, MSMaterialMenu(BURGER and ARROW only, no X), StdActionBar, StdActionBarHelper, AHNavigationDrawer and mListView. I hope that you find this code useful, you can easily manipulate all the colours and the Navigationdrawer to suite your apps look and feel.
View attachment 30302
View attachment 30303

Enjoy...

I can't find nineoldandroids-2.4.0.xml. In the library there is only jar fire.