Scroll down large texts in specific area In Screen Thunkable Makeroid AppInventor

If you are going to make an app that is made up of large text and should have scroll down or up, as well as other components, should appear in a specific area on the screen without scrolling but This is pretty hard to the beginners right or some thunkers don't know how to do this.

To scroll down the screen there is an option called Scroll Screen in Screen properties as well as Vertical Scroll Arrangement also. But what about the scrolling should take in a particular area in the screen that means Scrolling will be taken place in the middle of the screen only with No scrolling on the up and down components of the Screen.

Like for example, an app is consist of Three parts in screen i.e. Up, Middle and Down. Up part of the screen there is a Title along with some Icons and Options and Middle Part of the screen is for Content to be scrolled and it is the only part to be scrolled and Down part is also made up of some icons like Back and favorite and other Icons which should not be scrolled along with content.

Here Default Title will not Scroll along with content whereas Custom Title will Scroll. But don't worry this method works for both Default or Custom Titles also.

As we said We recommend to use custom Title instead of Default Title. If you don't know how to create a Custom Title then you can have the Tutorial here
πŸ‘‰Click HereπŸ‘ˆ

For the Above example if we use Screen Scroll option then Down part also scrolls along with Content which we don't want.
Else if we use Vertical Arrangement it may occupy the Down part and also may be down parts will be scrolled along with the content also or Down part will only appear when the total Content is scrolled up that means the Down part only appears below the content which will appear when the complete content in Scroll arrangement scrolled.
Well if we use Vertical Scroll Arrangement by customizing the Width and Height of the Arrangement then it will not scroll and also content will not appear.
Then What should we Do?
Well, there is a way to this problem that is we are using layouts to make parts different.

So let's get started in a step by steps
Step1
Add a vertical Arrangement and a Horizontal Arrangement below the Vertical Arrangement to the screen and Customise Height and Width of the Arrangements to Set for your Requirement Content Scrolling Place and Below for the Icons and other options as shown below.
Note:- Should not set Height of the Arrangement to Fill Parent as it occupies the whole screen, so it's better to set the Height of the Arrangements by Checking Live. And set Width To Fill Parent for both Arrangements.

Step2
Now It's all about to finish just add a Vertical Scroll Arrangement in Vertical Layout1 and just set Width of the Vertical Scroll Arrangement to Fill Parent and Height to Automatic only.
Note:- Make sure Vertical Scroll Arrangement Height set to Automatic otherwise it will not scroll even though there is pretty enough content.

Here we added Horizontal because it arranges components side by side else if we use Vertical Arrangement instead of Horizontal the components will be arranged in One by one Method.

In Horizontal arrangement, you can add any components and turn them into Icons.
If you don't know how to use Horizontal arrangement Then you can have the Tutorial here
πŸ‘‰Click HereπŸ‘ˆ
If you don't know how to change components into Icons Then you can have the Tutorial here
πŸ‘‰Click HereπŸ‘ˆ
Arrange the Content Components in Vertical Scroll arrangement only like a Text box or Images or Labels, etc.

Notes that you should Take In designing.
  • Do not enable Screen Scrollable option 
  • Do not Set Vertical Scroll Arrangement Height Fill Parent or customize it using percentage(%) or Pixels.
  • If you want to customize the Height and Width to content and Icons then customize Vertical Layout and Horizontal Layout only but not Vertical Scroll Arrangement as it makes the inverse of the result and it will not scroll and also collapse the content and components.
  • Better customize the Vertical and Horizontal Layout using Live Tests as it makes easy to arrange the arrangements to Screen ratio.

Tip:-Set the Screen to responsive in screen1 to Make the Components fit the Device measurements automatically.
That's it, for now, we will be back again with a new Tutorial in next post

Happy tHunking😎😎

Post a Comment

0 Comments