Hi, after a long time I am back with a new tutorial, hope you all are doing well. So today I will show how to create a news app which will be a professional type.
Let’s get started with the Splash screen, I have created Splash screen for this app. I am not showing you how to make the splash screen because I already told you before that how to make it. So follow my previous tutorial for Splash Screen. Now Let’s go to the mail Screens.
Here I will be using some external extensions such as Colintree ListView, Vertical ScrollHandler
Here first I dragged a Swipe Refresh Layout as a main layout so that an user can refresh the screen by scrolling down and get latest updates. I used Swipe Refresh Layout and Vertical ScrollHandler to work the refresh function properly. If you only use Swipe Refresh Layout for Refresh screen then you may face some problem when someone refresh the screen. Into the Swipe Refresh Layout I have dragged a Vertical Arrangement which will work as a Slider (Slide Latest News) and into this arrangement, dragged 2 Labels one is for Time showing and another is for News Title showing and the background will be for Image showing. So next I dragged Custom Progress for Loading Screen animation. Then dragged Bottom Navigation to add Footer menus. Next dragged a Clock with Timer 5000ms and Turned Timer Always Fires & Timer Enabled on. Now drag 4 Airtables and it will be call image, title, category and time. Next drag Animation Utility for the Slider animation and drag Colintree ListView and lastly Drag Network for Online or Offline usage. Now Visible the Custom Progress and Invisible the Swipe Refresh Layout so that when an user open the app they first see the loading screen.
So I took 4 initial global values for 4 Airtables,
first ignore that corner cut of another Block, this is the main block where all items will be visible and loading will disappear, and also a show procedure will arrive
here I took an index for Slider and two Procedures for Slider, when 5 sec will finish slider will show next news, you can increase or decrease the news count from to next‘s get global index > 2 and change the number 2 to another
here is how Vertical Scroll Handler works, and also the Bottom Navigation Menu
ignore that views airtable block,
Now let’s go to Main screen
Here first I dragged a Vertical Scroll Arrangement where all the components will be visible. Here I will add Vertical Scroll Handler to show scroll animation and when someone scroll down then the title and the image will be invisible and the title will appear in the Title Bar. So now, drag a Vertical Arrangement where the image or the thumbnail will appear, then add a Label named as title_label where Title of the news will appear, after this drag a Horizontal Arrangement and into this arrangement drag 2 Labels named category_label and time_label where category and time of news added will appear. After this drag a space and fill parent the space and drag a label and fill text with  and turn on HTML and set font style to Font Awesome and it will appear as a Download icon. Now drag a label named as main where the full news will appear. Now drag 5 airtables named as title, image, category, main and time and fill all with same API Key, Base Id and Table name. Now drag Vertical Scroll Handler, Tiny DB, Floating Action Button, Snackbar and Activity Starter. Set Activity Starter’s Values as follows
Action : android.intent.action.SEND
Activity Class : com.whatsapp.ContactPicker
Activity Package : com.whatsapp
Data Type : text/plain
Extra Key : android.intent.extra.TEXT
It will allow users to share news through WhatsApp, it also need Extra Value which I will add in Block, where the message will go.
first took required global variables, where _saved variables will work for Offline savings using TinyDB
it will call all saved items to know whether offline values are empty or not, also it will help to save new news without error, then it will call all items from airtable by Cell number
it will call all values from airtable and show to the user and also save to the global variables
it will work for download news to offline , if already saved then shows a message
it works when scrolling screen
and lastly the Share floating button, WhatsApp use *text* to bold the text so I used Title to be bold and the news to be in normal
For Offline and OfflineMain screen I have used same blocks and same things just instead of Airtable I used TinyDB, so just follow up,let’s move to the Setup
Just go to all Airtble and set your Airtable Database’s API Key, Base Id and Table Name, I am giving you the sheet I have used so that you can simply copy this and use it.
just ignore the views column , and add image links in Image, Category name in Category,Tiles in Title column, news in News column and Times in Time column.
Here is the link of sheet – https://airtable.com/invite/l?inviteId=invXDx8Wkvv1IcZan&inviteToken=8945c56837d72e13fd2853692fb4ec2699b8559b322e9b1c1d77c65c59c65a11
if you face problem with above link then use partner link below