How to create Daily News App with Kodular

So to create a dynamic daily news app, you have to use spreadsheet. So I am using Airtable Spreadsheet here for getting dynamic images and stories. First of all create a Splash Screen in your app that’s how your app looks more professional. I am skipping this process as I already told you How to create a splash screen before.
Let’s start with the Spreadsheet. Here I used 3 columns, i.e. image, story and title. Below you can see the image of the spreadsheet how I created this and you may create like this

Now here you have to put your own collected news, not copied from other website. If you copy from other websites then this will be copyright issue. In the image column put image’s link or URL that is already been uploaded to Cloudinary DB or to your own Websites. Here I copied the News and Images from NDTV website. I will use Pedroza Glide extension to show image from URL in the app.

Design

Let’s start with the Screen1. I designed the Screen in only one colour, you may design it as you want and look it professional and beautiful.
First of all drag a Vertical Arrangement and set height and width as fill parent and set Align horizontal and align vertical as center. Now drag a horizontal arrangement into the vertical arrangement and here News Title will appear so make the height as 10 percent and width as fill parent. Drag a Label into this horizontal arrangement where the Title will appear. So in Text write Please wait…. When the app is loading then the text will show as Please wait… Now rename this Label as title_label. Now after this again drag a horizontal arrangement where numbering will appear. So set height as 5 percent and width as fill parent. Now drag 3 Labels into this arrangement and first label will be for numbering so set Text as 0 and rename it as count, second label will be a of(/) text so set text as / and third Label will be as total news count so set text as 0 and rename it as total_story. Now after this arrangement drag a Image, where the image of the news will be appear. Now after this make space and drag a Vertical Scroll Arrangement. This arrangement will be scrollable because only the news can be scroll, not the whole screen. Remember all the arrangements should be in the Vertical Arrangement which I dragged at start of this tutorial. Now into this scroll arrangement drag a Label where the full story will appear. Rename this label as story_label. After that drag a horizontal arrangement and drag 3 Labels where Next, Share and Previous buttons will appear. Set height as 10 percent and width as fill parent for this arrangement. Enable the Clickable for all 3 labels. Set 1st Labels text as keyboard_arrow_left and set Font Type as Material Icons, because this is Material Icon’s code, set 2nd Label’s text as share and set font type as Material Icons and set 3rd label’s text as keyboard_arrow_right_left and set font type as Material Icons. Set this 3 labels font size as 50 and colour as white. And drag 5 percent width Space after and before this 3 Labels. Set 2nd or middle label’s width as fill parent so this will be at the middle.
Now designing is completed, just drag 2 Notifier(1 for Spreadsheet calls and another for Network), 3 Spreadsheets (Rename as title, story, image), Network, Activity Starter (for WhatsApp share), Pedroza Glide (link of this extension is given below), 2 Floating Action Bar(rename as zoomin, zoomout)
In 2 Floating Action Bar set Elevation as 5, Background Colour as None and for zoom in set Icon name as add and for zoom out Icon name as remove.

Blocks

Now let’s create blocks one by one

Global count’s initialize value have to be 1. And the Zoomin will be shown when Screen Initialize

getting all columns and the procedure of image and story is coming, scroll down

create this 2 procedures to run the app properly

blocks for next and previous labels or buttons

blocks for whatsapp share using activity starter

zoom in and zoom out blocks(floating action button)

block for internet connection

Download

Download Pedroza Glide extension from here

Video Tutorial