Are you tired of looking at your blog or feed through a mobile website and thinking it sucks? If you’re like us, you’re probably not very happy with how your blog appears on phones and don’t really know how to make it better. In this tutorial, we’ll show you how to build a native android app that converts your blog into a beautiful page that’s as unique as you make it.
This is probably how your blog might look through a mobile phone (yawwwnn):
While it could be deemed functional, it’s not as pretty as you want it to be and it seems to be exactly the same as every one else’s. NOT GOOD!
We want to be different…better…unique for all of our mobile users and followers! To do so, we’re going to show you how to turn your WordPress or everyday blog (RSS feed) into a beautiful Android app that can look like the view below (without any programming):
To get started, make sure you download Rheti from the Google Play Store: https://play.google.com/store/apps/details?id=com.rheti.appcreator. The next thing you will need is to tell the application where to bring your data feed from (i.e.., add your RSS feed).
On the Rheti home screen, go to the Data icon. Then on top of the data screen, you will see a Add New Feed section with the RSS icon…tap on that. You will now see a screen like the one below so fill it out:
If you don’t know your RSS feed, you can tap on the little globe and go search it on your phone. Click OK and you’re done!
Designing your feed to look AMAZING
Now comes the fun part, designing your feeds. You can spend as much time on this step as you wish. I will show you how I designed the Cards RSS feed but if you have a different design, go for it.
1. Once you added your RSS feed, a new block will appear under the blue area indicating your feed name. This indicates that you are now tied in with that specific feed and you can design as many views as you’d like. To do so, click on the + icon. This opens up a dialog titled: “Columns Filter”…make sure you type in a title (you will use this to identify your upcoming design) and click ok…don’t worry about the other boxes being checked, they’re not necessary.
2. A blank feed editor will open up showing you your canvas. Here are the steps I took to build the cards UI:
- Made row height at bottom 80%
- Tap and hold inside the screen and added a vertical layout from the market (called it Vertical layout 1). Then edited it so it would be as wide and as tall as possible.
- Tap/hold inside vertical layout 1 and added another vertical layout (titled vertical layout 2). Made that as wide as possible and custom height 93%
- Tap/hold inside vertical layout 2 > selected configure icon (cog icon) > attributes icon (wrench icon) > background image > selected “Card: White with Shadow”
- Tap/hold inside vertical layout 2 and added an “image column item” – made it as wide as possible and 70% height
- Selected vertical layout 2 again, tap/hold and added a horizontal layout titled “horizontal layout1″
Hint: to switch between layers, simply double tap on the layer and the items will scroll through
- Tap/hold inside horizontal layout1 and added a vertical layout to add a little margin to my box (titled vertical layout3). Made it as tall as possible and custom width of 3%.
- Tap/hold inside horizontal layout1 and added another vertical layout (titled vertical layout 4). Made it as tall as possible and custom width of 95%.
- Tap/hold inside vertical layout 4 and added a horizontal layout to add some spacing between the image and my text. Made it as wide as possible with 10% custom height.
- Tap/ hold inside vertical layout 4 and added a Column Item…then selected that to be the “Title” and clicked ok. Made the title box as wide as possible and 70% height. Then I tap/hold inside the “title” box > configure > and edited my text color (black) , style (bold) , and size (15).
-Tap/hold inside vertical layout 4 and added another column item for publication date. Box was as wide as possible with 20% height. Then I tap/hold inside the publication date box > configure > and edited my text color (gray), style (italics), and size (8).
If you’ve done everything correctly, your new design will look like mine below:
Tap on save at the top right of the screen and you’re done with the feed design.
Adding your feed to your app
Now that you’ve designed your feed, you want to add it to your app – so simply click on new app in the Rheti home screen. You can start from a pre-designed layout but, in this case, we’re going to start one from scratch.
- Tap/hold in the builder screen and click on the + sign
- Select Feed List > Select
- Place it anywhere in your screen you would like – make it as wide and tall as you wish.
- Change your page title, action bar color, and add anything else to make it yours.
CONGRATULATIONS, your feed will now be live.
HINT: if you want to use a pre-designed layout, there is a Google Card layout already created with a grayish background and some great margins for your google card feed. Download it and then all you need to do is double tap inside the main squares until you reach vertical layout 4. Delete that box (all items inside of it will be deleted) and then add your feed in that space…you will have your app looking like the one below in no time.
Adding On click action to open in new page or browser
If you want to add functionality to your feed so that it opens up in a new page inside the app or in a page browser you’ll have one more step to do.
1) to add functionality so that it opens up in the browser, tap/hold inside the feed element and find the events icon (puzzle piece in control panel) > Add kit > Open RSS with Browser….DONE
2) to add functionality so that it opens up in a new page inside the app, you will need to add a new page. Then design the page however you want:
- add your image field (if you want an image to show from your feed)
- add rich text fields (where you want the text, title, or any other text from your RSS feed to appear)
Once you’re done designing it, make sure you tap/hold on every element that will show up from your feed on this page and click on the feeds icon (cloud), then select the RSS feed you want to tie into and tie it into the RSS Content Provider 1 (this refers to the feed you created initially) and then select what you want to appear in that box. Essentially, you’re telling that box (let’s say it was the title box) to fetch the title from the feed you placed in the previous page (RSS Content Provider1).
Repeat this until you’re finished assigning the sections of the article detail page.
- finally, go back to the original feed list (where your google cards design was created) and tap/hold on the list > cog (attributes) > events (puzzle piece).
- add kit > Open RSS with new page.
Congratulations, you’ve even programmed functionality and you’re on your way to be a rockstar with all your users!
TIP: search for pre-made templates that have this functionality already created to shorten your design time. You can also modify all functionality and design in any template.
Check out what a difference this made!