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

PaulMeuris

Active Member
Licensed User
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

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

Andrew (Digitwell)

Well-Known Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Active Member
Licensed User
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:
resize_001.PNG


resize_002.PNG

After changing the text from the note the font size seems to be random...
I changed the code to:
B4X:
    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)

Well-Known Member
Licensed User
Longtime User
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
B4X:
 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
B4X:
    #if b4a
    tfnt = xui.CreateFont(lbl.Typeface,lbl.textsize)
    #else   
    tfnt = lbl.Font
    #End If
 

PaulMeuris

Active Member
Licensed User
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
B4X:
 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
B4X:
    #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
 
Top