How To- Example Frame Layout Android App, Tablet Tutorials android,'
This Page Android Tablet Tutorial, How To Implement a 'Frame Layout' Prev Page Tablet Tutorial, Android 'Horizontal Scroll View'

Next Page How To Add Android Themes To Your App

If you are just arriving at this page; you can gohere to first - Create your simple Android app

Once you create your App you can follow along with each android tablet tutorial.

We are using AIDE, to create these tutorial apps on our 8.9" tablet with android version 4.2.2; using the Android Java XML programming language.

We are using the AIDE coding editor to code our pages; and then to Create - RUN our apps. AIDE is a SDK coding environment for android devices like a tablet or smartphone. AIDE has a free and paid version. The paid version is required if you want to create Java/xml template apps; and add a 'keystore' to your App. With a keystore, you can publish it to the market places like Google and Amazon.
Once you create your apps code pages, you need to RUN the app to build your apk package; then you INSTALL it on your tablet or smartphone. As of October, the paid version of AIDE is about $20 canadian.

You can also create; RUN your apps using the code in these tutorials, with Android Studio. Android Studio is for desktop computers. Choose Java XML as the programming language. Android Studio is free to install and use; and has helpful guides.

Complete Example Codes are available for each of our tutorials. With these example codes you can make a functioning android app in either AIDE or Android Studio.


First, create a java/xml android template app using AIDE, (or Android Studio). Then you can get the code for this app from the EXAMPLE CODE section on this page. Replace the code on the pages you need to(with our tutorial code); in order to create this app.
Sometimes, new pages have to be created.
All the other coded pages in your app can remain as they are; they don't need to be changed.

Create Your Android Template Java/xml App
When creating your app,(from left menu) choose:
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
Hello World App Java/xml
if your using the original version of AIDE

You can name your app whatever you like; if your using the name as shown in our example code use;

Frame Tutorial for the App Name and,
for the package name(next line) use:

If you want to name it differently, you can, just change the code to whatever name you choose where it says, com.acw.frame, in the coded pages, usually at the top of the java class pages like;

What the App 'Frame Tutorial' screen display will Look Like:

Once you add the code and images, your app should look similar to this one.

Frame tutorial Layout Example App Code


To add a frame layout view to your android app you need to add the frame layout coding as shown in this image.
It is coded in the main.xml file commonly referred to as the layout file.


For this frame layout example app we added several textviews ,so you can see how they are placed within the view. We named each textview with text as: frame1, frame2, frame3, frame4, frame6. Although we didn't add text, the ImageView is frame 5 which you can see by looking at the Image of the ScreenView. We also colored each textview frame.

Once you've added your FrameLayout code, you then add your TextViews to the same layout file. TextViews are commonly coded in the layout file as well as ImageView.

Text views can be used to add many things to your screen view; such as; adding text, or buttons, or to add a background color to your screen view, or as we have done in this Frame Tutorial; to add several frame squares with color.
android example textviews code
We used various sizes for the 'TextView' colored frames. We coded each frame square differently so that each square can be seen separate from the previous one. To do this, we used the width and height attributes.
example: android:layout_width="765dp", android:layout_height="665dp"


We added an image to the view as well, to show that it also layers itself over the previously coded frame square. We placed the image to the right side of the screen view, using the android:layout_gravity="right" code. You can also use: left, top, bottom attributes for the gravity coding.

All images are placed in the res/drawable-hdpi folder, you don't need to code the .png, because it is in the drawable folder the android system knows it is an image.


Coding for the App icon was placed in the manifest file as shown in this image, and coded as 'android:icon="@drawable/framelayouticon"

The App icon image is placed in the drawable-hdpi folder; at res/drawable-hdpi". for this AppProject "Frame Tutorial' , just browse to:
AppProjects/FrameTutorial/Res/drawable-hdpi, in your files hierachy in the AIDE coding editor.
android app icon - 225x225><br>

<img src=

To add text next to the Apps Icon at top of screen display, you use the code for: label
To code the label we use: android:label="@string/app_name", which is coded in the manifest file, in the application code. The actual text you use is placed in the strings.xml file, which is at res/values/strings.xml, and is coded as shown in this image. For this app our label text reads: Frame Tutorial
how to code strings in android app

Coding Tips - FYI

Frame Tutorial Layout

By default the textviews are placed on top of each other in the left top corner of the screen display.

We wanted to be able to see each frame so we coded them all with different colors and different widths and heights.

Because they align at left/top on the screen, we added a top margin to each so that we could see the text we added to each textview frame: frame1, frame2, frame3...... If we had not added the top margin to each 'TextView', each textview frame would position atop the previous one, and therefore, we would not be able to view the text from each one.

For our 'ImageView', we placed it to the right side of the screen view, by using the 'android:layout_gravity="right" code. We also coded the same image as the App Icon. The app icon is resized from the larger image to make it a small image icon for your app.

The app icon is coded in the manifest.xml file and the image for the ImageView is coded in the main.xml layout file. Even though they are coded in different pages of the app, you need only place the one image into the res/drawable-hdpi folder. The android system knows to select the image for both coded pages.

A frame layout can be used for placing various text views or image views over each other, or just one textview or imageview for a single view. For example: You can add a photo by adding it to the ImageView and then place text over the photo by using a TextView.

Additional reading and all available attributes for the 'Frame Tutorial" layout code class can be seen at Android Developer Website for 'frame layout'

....frame layout attributes

EXAMPLE CODE - Code For This Tutorial

JUST USE YOUR MOUSE to copy the code for this app 'Frame Tutorial ' Layout View tablet tutorial; and paste it into your layout file: main.xml

Also, code your manifest file to include the app icon name as shown in the image/example code on this page, and code your strings.xml file to say 'Frame Tutorial',and Frame1, Frame2, Frame3....for each TextView's text; and finally,

SAVE, the image shown in the Example Code to your tablet, then copy and paste the image into your AppProjects/Frametutorial App at res/drawable-hdpi folder.

App Name is 'Frame Tutorial' - located at AppProjects/FrameTutorial in AIDE, open the AIDE app, then open App Projects, THEN select the 'FrameTutorial', app from your files hierachy; then click on a file from the app, like strings.xml Make sure at top of page, the app name 'FrameTutorial' is there next to AppProjects like so: AppProjects/FrameTutorial, then you know you have the proper App. Once a file is in the editor, you can save it, then RUN your APP.

Make sure you SAVED EACH PAGE, before you RUN your code. SAVE, RUN, INSTALL, OPEN, your Frame Layout App. Once it has been installed on your tablet, you can open it Simply by Clicking on the App Icon, FRAME LAYOUT, from the apps directory on your tablet. Just look for the Frame Tutorial Layout icon, as shown in this tutorial.
If you make further changes to this Japanese App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app.

Example Code:
Use Mouse To Copy Paste the Code

Save this image to your tablet, then place in res/drawable-hdpi folder of the AppProject 'Frame Tutorial'
framelayouticon.png is your 'app icon' image; save it to the res/drawable-hdpi folder. It is coded in the manifest file for the app icon and also coded in the 'ImageView' as the image to show in the screen display - Its width and height are : 225x225.

This free script provided by
JavaScript Kit

Share This Page

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid - with Free create android Java/xml template apps and couple free android lessons. With paid some lessons included, create android Java/xml template apps; and create a keystore for your app. With a keystore you can publish your app at markets like Google.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
GoTo Android Studio Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas


The Coded Pages

Beginners Article
About Our Tutorials
Coding androidmanifest.xml
Coding main.xml
Coding strings.xml
Coding drawables

Tutorials II
Java XML Learning To Code
Create A Simple Android App

Change App Icon
Add Text and Style
Add Buttons To App
Placing Text
in Buttons

Change View
Background Color

Change Screen

Add Image to
Activity View

Add Horizontal
Scroll View

Add a Frame Layout
How to Add Themes
To Your App

How To Code
Customized Styles

Code a Toast Message

Coding Resource


How To Code
Screen Orientation

Clickable Button To URL
Image Button
with Selector

Linear Layout with
Weight Attribute

OnClick Displays

Screen Density
Coding Practices

and Courses
for tablets

Android Studio
for computers

Android Studio
Course - Paid

Java Programming
Course - Free

Git Hub Course


Code Canyon Paid From $1(can buy individually) Free and Paid From $1 (can buy individually)

About Our Images

All images on this page are copyrighted material.
You can use the images included with each tutorial for the purpose of creating your android app. These images are not to be distributed or sold.

APP Marketplace
Launching Your Android App
How To Be Successful

Android App Libraries
What are they and how
to implement them

How To Implement ScrollView

What is a WebView

View all Articles Here


How To Add Your Google Key
To Manifest.xml
Web Article

How To Sign Your APK Web Article

Google Developer Console
Create Account Submit Your App
Web Article

Amazon App DRM - APK KEY
Amazon Developer Portal
Create Account - Submit Your App

Google's In-App Billing for App monetization.

Monetizing Your App
How Tos

Follow Us On Twitter
Tweets by @codeandroidapps