Guys!! It
was very difficult to believe that Android had introduced an entirely new API
(Fragment API) for Tablet App Development. Coming from Activity background, it
was really tough to digest this fragments concept while coding; even if it is
very interesting and more generalized one. Soon, i got to hear that we can
create a single apk file for both phone and Tablets by using Fragment API
itself. On digging more into it, it became quite easy and interesting to
implement.
Functional Concept
Basically, in such type of apps, we need to separate all
components of our application, and then convert each component to fragments.
For example- Dashboard Fragment for Dashboard screen, two fragments for List
and Details. Then, as our need, we can combine them to fit on the screens of
both phone and tablet based on the Space available and required functionality.
Technical Concept
The earlier concept (for mobile versions) was to have
activity class for each screen having business logic written for the respective
screen functionality. Here we will write the business logic once but only
different main screen layouts for both phone and tablet screens. Now, we will
have smaller components as Fragment classes & layouts and their respective
business logic in them.
As we know, we cannot show fragment directly on screen as it
needs to be in the form of Activity class.
So for phone, we will convert the fragment to FragmentActivity class and
for tablet we will have separate layouts containing two or more fragments and
their respective FragmentActivity classes.
Now, on deploying the same apk file to both phone and
tablet, it should take respective layouts for both.
Sample Application
So here is what i have created a way or you can say a ‘BASE
STRUCTURE’ for any Phone-Tablet Android Application.
Application Name:
TestPhoneTablet
Deployment platforms:
Phone and Tablet versions both, i.e. Android 2.x & 3.x
External Jar file:
android-support-v4.jar (When we need to deploy our application on both phone
and tablet, all Fragment and Fragment Activity classes in our project should
extend from this jar).
Description: In
the application for phone, a list of countries will be displayed on first
screen; on clicking any of them, the country name will be displayed on the
second screen.
On the other hand in case of Tablet, on a single screen, the
list of countries will be displayed on left hand side and on clicking any of
them; the country name will be displayed on right side.
·
com.deepak.test
: This package is for all the classes which will be common elements for both
phone and tablet build.
§ BaseActivity.java: This class extended
by FragmentActivity class is the base
class for our whole project. A base activity that defers common functionality across
app activities to an ActivityHelper.
This class shouldn't be used directly; instead, activities should inherit from BaseSinglePaneActivity or BaseMultiPaneActivity.
§ BaseMultiPaneActivity.java: This class
extended by BaseActivity class and
all Tablet activities will extend to this class. It can contain multiple panes,
and has the ability to substitute fragments for activities when intents are
fired using BaseActivity#openActivityOrFragment(android.content.Intent).
§ BaseSinglePaneActivity.java: This class
extended by BaseActivity class and
all Phone activities will extend to this class. It simply contains a single
fragment. The intent used to invoke this activity is forwarded to the fragment
as arguments during fragment instantiation.
§ Home Activity.java: This Activity class
is the launcher activity for our application and is only class which directly
extends to the BaseActivity class
after BaseSinglePaneActivity and BaseMultiPaneActivity classes. It sets
the layout activity_home.xml on
screen which is defined for both phone and tablet in their respective layout
folders.
§ List_Fragment.java: This is List
Fragment class, containing a list of countries which is the first screen of our
application.
§ DetailFragment.java: This is a Fragment
class which shows the selected country name.
·
com.deepak.test.phone
: The package for all phone activity classes.
§
DetailActivity.java:
The FragmentActivity class on converting the DetailFragment class to an
activity and used to show only on Phone.
·
com.deepak.test.tablet
: The package for all tablet activity classes.
·
com.deepak.test.Utils
: The package for utility/helper classes in our project.
§
ActivityHelper.java:
A class that handles some common activity-related functionality in the app,
such as setting up the action bar. This class provides functionality useful for
both phones and tablets, and does not require any Android 3.0-specific
features.
§
ActivityHelperHoneycomb.java:
An extension of ActivityHelper that provides Android 3.0-specific functionality
for Honeycomb tablets. It thus requires API level 11.
§
SimpleMenu.java:
An implementation of Menu Interface to show the action bar and Options menu in
tablet and phone respectively.
§
SimpleMenuItem.java: An implementation of
MenuItem interface.
§
UIUtils.java:
A utility class which can have many UI helper functions like- to know the
version of device OS on which the app is deployed so that it could render
respective activities and layouts.
·
res/layout:
The layout files used for Fragments and Phone screens or we can say that common
layout files for phone and tablets.
·
res/layout-xlarge-v11:
the layout files for tablet screens.
If we want to make the same
layout look different on both phone and tablet, we can put the same layout with
same name and different design in both layout folders. On deployment, we will
automatically render to the respective folder. Similary for drawable
& drawable-xlarge-v11 and menu & menu-xlarge-v11 folders
App Screenshots:
Tablet Screen
Phone Screen:
Here is link for source code. Enjoy doing some creative stuff and meeting your requirements.
http://code.google.com/p/testphonetablet-androidapp/downloads/list
http://code.google.com/p/testphonetablet-androidapp/downloads/list
Folks!! This is all about the project structure and files for this particular requirement. Please provide your comments, ques and suggestions J
Great idea.Your blog logic is really good.This is one of the Important post.Thanks for share with us.
ReplyDeleteThanks.
ReplyDeleteThanks for this simplified version of the I/O Google application. The concepts are much clearer when you look at this example. The only thing that it bugs me, is when you check for the type of the device (phone or tablet) you do this by checking the version of the operating system. (if it is API >= 11 then it's a tablet) But what about those tablets running ice cream sandwich? ICS can also be run on smartphones. I think that this check is not correct. Maybe it should be something about the screen size? Hope to hear what you think.
ReplyDeleteThx for the example
It's giving unable to instantiate activity component info ClassNotFoundException
ReplyDeletejava.lang.classNotFoundException:com.deepak.test.HomeActivity
Please check in Manifest file whether you have registered HomeActivity?
Deletefollow this steps :
ReplyDelete1- project right click->properties->java build path -> prder and export tab. then check box for android private library
2- project right click-> android tools -> fix project properties.
3- clean and run the project. it should work