How to configure right vertical scroll for Delphi FMX Android TFramedVertScrollBox? - android

I have Delphi FMX Android TFramedVerScrollBox with:
Margins.Right:=20;
ShowScrollbars:=True;
TouchTargeExpansion.Right:=80;
Width:=800;
which has a set of TLayout components as a set of children with individual settings for each TLayout:
Align:=Top;
Anchors:=[akLeft, akTop, akRight]
Size.Wdith:=800; //But I guess this is irrelevant, as Size should be determined automatically for children with Align:=Top
My question is - how can I set properties in a way, that:
TLayout children components give some space in their correct size for scrollbars to become visible? If TLayout.Padding.Right:=0, then TLayout children sit solidly in the place where the vertical scrollbar should be. If TLayout.Padding.Right:=50, then the entire children are moved to the left side - this is really strange. If width is computed automatically for the Align:=Tope children, then this Width should take into account the Padding of the children automatically and accordingly become smaller, less comprehensive.
Even I move the children to the left side and the scrollbar becomes visible - it is very, very narrow, just some 5-10 pixels. How can I increase the width of the scrollbar of TFramedVerScrollBox?

First :
"Padding" adds space to the inner side of the control (between the control borders and its children), while "Margins" adds space to the outer side of the control (to the borders of its Parent or between the control borders and another control within the same Parent).
So when you need to set distance between a TLayout and its "Parent" border (Right border of the TFramedVertScrollBox) then you must go either for Padding in the TFramedVertScrollBox or for Margins in its children controls.
But it is not necessary to set space for scrollbars. Because when a scrollbox (in Delphi apps like in anywhere else) is resized and its children are not completely visible, the scrollbox client area is resized automatically for letting space for showing scrollbars. And even if you set "Margins" for children controls, the scrollbox client area is resized and the children margins are moved. So you will get more margins that will ruin your UI design.
That size adaptation is common on Windows where the scrollbars are always completely shown with their classical aspect. While on Android, scrollbars are not explicitly shown, you may only see their "thumbs" when you try to drag on the side having the scrollbar.
Second :
The width of the scrollbar in TFramedVertScrollBox, like all layout controls, is defined by the style. You have to customize the style or create your own style where you can set the size and even the position of the scrollbar.

Related

Can the space of Safe Area be filled with anything?

I would like to have a bottom aligned button which has text positioned above safe area in a way that allows me to fill that space with the color of button and, ideally, is clickable too.
I was thinking about adding a Container with Gesture Detector there but can't figure out how to do it in a way that won't ruin layout on phones without safe area. That's how huge it looks when wrapped in SafeArea. Ideally there would be little to no margin above text in this button, something like this.
You can use flutter_screenutil instead of SafeArea, knowing the bottom and top safearea height by these 2 functions:
ScreenUtil.bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight //Status bar height , Notch will be higher Unit px
you can then control the height of safearea yourself

What exaclty is the meaning of MATCH_CONSTRAINT?

I am new to Android and recently I came up with a term 'match constraint' while using ConstraintLayout.
As per doc it says 'Dimension will be controlled by constraints', I don't understand what exactly mean by this ?
As far as I could understand , it's somehow can be used as replacement of match-parent but not sure how ?
First of all, lets look at what the word Constrain means. According to Google, Constrain means to
Compel or force to follow a particular course of action
Severely restrict the scope, activity or extent of
Bring about by compulsion
When using ConstraintLayout we align/position our items by applying Constraints to that particular item. What these Constraints do is that they limit (or allow) the position of that item in the screen. Lets say I have a button which I constrain to be between the left and right edge of the screen. By doing so, the button can move anywhere in the screen as long as it is within the left and right edges of the screen. Similar is the case if I constrain the button to be between the top and bottom of the screen.
Now what does MATCH_CONSTRAINT mean? It means, that the view will take up as much space as the Constraints allow it to take. So, if I constrain a view to be between the left and right edge of the screen, then the view will expand its width to be equal to the width of the screen (if no margins are set).
It means it will take the available space in the main constraint layout. For more details, you can read it from here

How to handle accessibility zoom / font size changes?

When I modify accessibility settings zoom and font size in Android my app layout is all broken.
I'can't find information about good practice to avoid this.
Most of my screen are not lists and are not scrollable, I have a bottom area with button, and in the middle I have complete layout with text fields / buttons / input / ...
Font size is too big so the text gets clipped vertically and horizontally.
Buttons don't fit in the width and display one over the other.
Do I have to manage this with different layouts depending on screen size?
Is there a way to automatically truncate text with "..."?
Is there a way to prevent some part of my layout to zoom (ex navigation part / lower button area)?
How do I prevent view from displaying one over the other (I use contraint layout)?
If I had to take a guess though, you probably are using a constraint or relative layout and haven't made the appropriate adjustments for all the child objects.
For truncating, try looking here - Android: TextView automatically truncate and replace last 3 char of String
For font sizes, it's recommended to use "sp" for the unit type, e.g. "15sp".
For constraint layouts, you need to set the anchors for each child object or they end up bunching up in the middle together.
this is a tutorial on constraint layouts - https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Fio2018#0

android layouts overlapping with changing sizes

I have a problem with a specific layout in Android.
What I want to achieve is approximately this:
http://imgur.com/xiN0u
The green area should always be visible at the bottom of the screen (size can change, but only marginally)
The red area should fill the rest of the screen on top.
The cyan area (inside the red layout) is a ScrollView and can change size and should not grow bigger than the space available
What happens is this: when the list expands, depending on the layout (i have tried linear, relative, mix of those,...), either the red or green area is overlapped with the other and is not accessible any more:
http://imgur.com/b7leA
I have tried this for a day now and whatever I do, some part of the layout is always overlapped. Is there a way to tell a ScrollView to only expand to a certain height? I know maxHeight doesn't exist. I highly appreciate every input as this is driving me crazy now! Is this possible at all with Android?

Android ScrollView: Automatically scroll to a few pixels (dips) above a certain view

I am aware that I should decide how many pixels based on density.. not hard coded.
I have section headers and items displayed in a scrollview and I want to scroll to a certain section header (the one for the current date) while making it clear that it is not the top of the screen (show about half of the previous item).
How can I do that? I do not want this automatic scroll to be animated.
With View.requestRectangleOnScreen() you can scroll to show a particular rectangle (the linked method allows disabling animation). You still will have to calculate that rectangle, but once you have the position of the particular child (your header) you can easily do that getting the size of the ScrollView. You could consider the small offset you want in calculating that rectangle or just do a scrollBy() after requestRec....() (the former way is better I think).
An easy way to use a density independent dimension is to define it in xml as a dimension resource.
-- edit: you get the position of the child in parent with getLeft() / getTop().

Categories

Resources