A simple to do lists app tutorial using custom listviews, text files and notes with additions for CLVExpandable and CLVDragger.

[PaulMeuris]

This is a beginners tutorial to create a simple app to have some multi-purpose lists on your smartphone.
The app uses text files to store the information (so no database knowledge required).
In the app the user can specify a category and subcategory that an item belongs to.
In the fine tuning section 2 classes are used to add some more functionality to the app: CLVExpandable and CLVDragger.
Have a look at: B4A tutorial lists textfiles notes
Enjoy!
If you want the tutorial in PDF format then contact me for it (this forum doesn't allow a file size of 1.44 MB)

 

[PaulMeuris]

Some early viewers might have noticed a glitch in my website... The issue is fixed now.
Happy testing!

 

[AnandGupta]

I have checked it. Looks good. ?
Thanks for creating the tutorial.

 

[PaulMeuris]

I have checked it. Looks good. ?
Thanks for creating the tutorial.

Thank you Anand.
Did you find a solution for the display of more than 9 lines in the note?
Greetings,
Paul

 

[Andrew (Digitwell)]

This is a very comprehensive tutorial.

A couple of observations/suggestions.

• you haven't used both left and right anchors when laying out items in the designer This would allow the control to shrink and grow with the width of the actual phone screen.
• TO solve the 9 line problem you can use a resizing text control. You can use the resizing text component from here. https://www.b4x.com/android/forum/t...se-on-dynamic-text-content.133275/post-842390
  It is a bit more complicated for your tutorial as it is another custom view.

Cheers

 

[AnandGupta]

Thank you Anand.
Did you find a solution for the display of more than 9 lines in the note?
Greetings,
Paul

No I did not checked the project. I just went through your tutorial and replied on it.
Andrew already replied on the line problem. You can try that.

 

[PaulMeuris]

This is a very comprehensive tutorial.

A couple of observations/suggestions.

• you haven't used both left and right anchors when laying out items in the designer This would allow the control to shrink and grow with the width of the actual phone screen.
• TO solve the 9 line problem you can use a resizing text control. You can use the resizing text component from here. https://www.b4x.com/android/forum/t...se-on-dynamic-text-content.133275/post-842390
  It is a bit more complicated for your tutorial as it is another custom view.

Cheers

Thank you Andrew.
You have a good point about the design of the layout where items can be anchored to the screen width.
As for the resizing text control... it can be used in the expandable panel but it behaves somewhat strange...
I used your class ResizingTextComponent with this result:

After changing the text from the note the font size seems to be random...
I changed the code to:

    Private lblresize As B4XView = CreateSizingItem(Label1.Width,note)
    pnlExpanded.AddView(lblresize,0,0,pnlExpanded.Width,pnlExpanded.Height-10dip)
    'Label1.Text = note

So your code can be used but... the text is sometimes a little bit too small...
Thanks again for testing the tutorial.
Greetings,
Paul

 

[Andrew (Digitwell)]

Firstly, you need to set the height of the expanded panel to the height of the Resized text control. That is why it is still being cut off.
something like

 Private lblresize As B4XView = CreateSizingItem(pnlexpanded.width,note)
 pnlExpanded.AddView(lblresize,0,0,pnlExpanded.Width,lblresize.height)
 pnlexpanded.height = lblresize.height
 or
 pnlexpanded.SetLayoutAnimated(0,pnlexpanded.left,pnlexpanded.top,pnlexpanded.width,lblresize.height)

Secondly, if you just cut and pasted the example, the font size is Random
RTCS.SetTextFont(xui.CreateFont(Typeface.LoadFromAssets("montserrat-extrabold.ttf"),Rnd(10,20)))
as shown in the sample code. This was done in the example to show that the control could support resize to correctly with different font sizes.
You need to choose an appropriate size for your app.

If you don't set the font size, it is picked up from the label in the Designer.

Code from DesignerCreateView

    #if b4a
    tfnt = xui.CreateFont(lbl.Typeface,lbl.textsize)
    #else   
    tfnt = lbl.Font
    #End If

 

[PaulMeuris]

Firstly, you need to set the height of the expanded panel to the height of the Resized text control. That is why it is still being cut off.
something like

 Private lblresize As B4XView = CreateSizingItem(pnlexpanded.width,note)
 pnlExpanded.AddView(lblresize,0,0,pnlExpanded.Width,lblresize.height)
 pnlexpanded.height = lblresize.height
 or
 pnlexpanded.SetLayoutAnimated(0,pnlexpanded.left,pnlexpanded.top,pnlexpanded.width,lblresize.height)

Secondly, if you just cut and pasted the example, the font size is Random
RTCS.SetTextFont(xui.CreateFont(Typeface.LoadFromAssets("montserrat-extrabold.ttf"),Rnd(10,20)))
as shown in the sample code. This was done in the example to show that the control could support resize to correctly with different font sizes.
You need to choose an appropriate size for your app.

If you don't set the font size, it is picked up from the label in the Designer.

Code from DesignerCreateView

    #if b4a
    tfnt = xui.CreateFont(lbl.Typeface,lbl.textsize)
    #else  
    tfnt = lbl.Font
    #End If

This is an elegant solution, Andrew.
I prefer a font size setting between 14 and 18.
And next time I will take a little more time to thoroughly test the proposed code!
Thanks