During Rheti’s Beta, we have received a large number of user requests wanting to know how to easily build a native app about themselves using the Rheti Android application. In this blog, I thought I would share an easy way for you to build your own “About Me” application so that you can then share as a business card, portfolio, or a personal app that will showcase your awesome programming skills. Keep in mind that the same processes could hold for an app you will build for your business, your friends, even your community.
A personal background picture
A short biography about yourself
A personal website link
A personalized app launcher logo
Step 1 – Download the Rheti application from the Google Play Store: https://play.google.com/store/apps/details?id=com.rheti.appcreator and Open it.
Step 2 - Decide whether you want to build an Android app from scratch or build it from a pre-configured template. To view the templates, tap on the Rheti menu at the top left of the screen to pull out the slider. Then select templates. Find the one that you would like to use. In this example, you would select the “About Me” template.
If you have selected to Build from Template, simply go into the app and customize it as you see fit. By tapping and holding inside each element, you will be able to customize the design, background color, even behavior. It should take you a few minutes to customize the look and feel and then you’re done! Congratulations
If you want to build your app from scratch, simply select the Build New option from the home screen, and pick from any of the pre-configured layouts (in this example, you would choose Blank App”)
Step 3 – You should have a blank canvas. First thing you need to do is name your application by tapping on the bottom section that currently reads “UNTITLED”. To select your App Launcher logo (or App’s icon) click on the bottom square that currently says “Edit Icon”. You can add an icon from your phone’s gallery or select from any of the icons currently available in Rheti’s marketplace.
Step 4 – Design your app! You can design your app however you want by simply tapping and holding anywhere on the screen to add / edit elements in your app. For this example, we will do the following
a) add a background picture – Tap and hold on the bottom of the screen (where your app name is listed) and select the background icon. You can then add a background image or color…in this case, we’ll add an image.
b) Change your Action bar – tap and hold on the action bar to change the background color. To do this, make sure that you don’t tap and hold on the section saying “screen title” and that you actually tap on the action bar space to bring up this control panel. Select the paint image and then pick a color.
c) Let’s design the screen – you can set up your design with different layouts (anchor, vertical, horizontal). We will build one with a vertical layout (meaning, things are positioned right on top of each other). Lets begin
- tap and hold in the middle of the screen and click on the + item
- search for vertical layout in the “Select a Feature” screen
- tap on any of the anchor points in the screen, this will add the vertical layout to your screen. On the bottom of the screen you should have a black bar indicating what you’ve selected (vertical layout), tap on the configure icon on the bottom left
- Select the Radio buttons to be “As Wide as Possible” and “As Tall as Possible”. This will expand the vertical layout to be the width and height of the builder screen.
d) Now let’s design the biography space – the above app has some margins inside the main layout so we’ll add those. To do this, you tap and hold inside the vertical layout to bring out the control panel and add the following
- a horizontal layout – then changed height percentage to 5% and made it as wide as possible
- a second horizontal layout – then changed height percentage to 90% and made it as wide as possible
- a third horizontal layout – then changed height percentage to 5% and made it as wide as possible
Now you should have three different sections inside the parent layout.
TIP: to select between different items on top of each other simply double tap
- select the middle horizontal layout, tap and hold inside of it and add another vertical layout in it. I made it as tall as possible and added a width of 55%. Your app should now be looking like this.
- Tap and hold inside that “vertical layout2″ to modify it’s look. On the control panel, select the cog or “Configure” icon and then select the wrench or “Attributes” icon. Then select background color and pick whichever color you want and make sure you add a transparency to it.
e) Now let’s add our Bio – to do this, make sure you continue to tap and hold inside the block ‘vertical layout2′. Then click on the + icon to add the items. In this case I added (in this order)
- Rich Text – then configured it to say my name and changed the font size, family, and color. I made this one to be 10% height and as wide as possible.
- Rich Text – then configured it to say a 2nd headline or Tag, changed the font size, family, and color. I made this one to be 12% height and as wide as possible.
- Rich Text – then added my biographical text, changed the font size, family, and color. I made this one 40% height and as wide as possible.
f) now let’s add our social feature links (I added Facebook, Linked in, and Twitter. To make sure they’re aligned correctly, let’s add them inside a horizontal layout, make it as wide as possible with a 15% height. Next, tap and hold inside that horizontal layout and add three image buttons. Make sure all of these image buttons have a 33% width and are as tall as possible. To edit their background, image, etc…tap and hold, go to configure and then edit it as you want. Once you’re done, your app should look like this:
You can continue to add buttons below or next to them by using the same processes. In my example, I added another image button in the action bar.
- Add App Pages – What we want to do next is add a new page for each of these social network links so that you make sure no one is leaving your app to a different website/app. To add new pages, simply double swipe from the bottom and select the “Add” option. This will create a new page and launch it. You can then configure it to whatever design you want. In my case, I changed the name of the page in the action bar to be: my Facebook, my linked in, my twitter, etc)
g) On each of these pages, I want to showcase a web view of my social networks. Tap and hold on the screen, select the + icon, and find the web container feature in the feature marketplace. TMake it a full page view by making it as wide and as tall as possible.
- Now let’s tell each web container to show me my sites. To do so, tap and hold inside the blank web container, and click on the configure > attributes icon. This brings up a dialog where you will enter a URL. Enter your Facebook URL, Linkedin URL, or Twitter URL for whatever page you’re working on.
We now have a four page Android application with a home screen and three different pages. Note that we need to connect the buttons so that when you click on one of your buttons in the home screen, it will open up a new page.
TIP: To switch between pages, simply double swipe down-up and click on the page you want to go to. You can also double swipe from left-right or vice versa and it will change between pages.
g) Let’s edit the behavior for these buttons (here comes the really really fun part!) without writing any code. From the home screen
- tap and hold on first button (my Facebook icon) and click on configure icon and then select the puzzle piece icon or “events”. This will bring up Rheti’s script editor with a tab menu expanding from the bottom
- Select the Add Block square at the bottom. Then make sure you select the Feature Action option, and click on New. This will now open the Rheti marketplace titled “Actions”. Find the action that says “Show New Screen” and select it. Once done, you will see this screen
- Notice that there are warning sings that light up indicating that information is missing. In this case, tap on the green square and select the option “Use Placeholder”. This will then open up all of your app pages and you should select the app page where you want the button to take you. In this case, it was My Facebook. Once done, simply click on the save option at the top right.
Repeat the same processes for the rest of your buttons and done!
Congratulations, you have now programmed your first app from scratch (without programming) while adding your unique design twist using Rheti. I bet you even learned some programming methodologies without even realizing it!
If you have any questions or issues, feel free to contact us via our Google plus community page here.