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.

Home Screen

Design

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.

Blocks

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

Main Screen

Design

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.

Blocks

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

AIA

if you face problem with above link then use partner link below

TSNews – v1

Video