{"id":1605,"date":"2013-09-15T12:02:18","date_gmt":"2013-09-15T00:02:18","guid":{"rendered":"https:\/\/www.deltics.co.nz\/blog\/?p=1605"},"modified":"2013-09-15T12:02:18","modified_gmt":"2013-09-15T00:02:18","slug":"anatomy-of-a-camera-app","status":"publish","type":"post","link":"https:\/\/www.deltics.co.nz\/blog\/posts\/1605\/","title":{"rendered":"Anatomy of a Camera App"},"content":{"rendered":"[Estimated Reading Time: <\/span> 7<\/span> minutes]<\/span><\/span>

Part 1<\/strong> in an as yet unknown number of articles using a (very) simple camera application to demonstrate building first class Android<\/strong> applications using “Pascal for Java<\/em>” – i.e. Oxygene Cooper<\/em><\/strong>. In this first instalment we will look at the basics – the components we are going to need and the basic UI of the application.<\/p>\n

<\/p>\n

As I said, this will be a very simply camera application. As such it will have the bare minimum of user interface elements, consisting of simply a preview or viewfinder and a button for actually capturing the photo.<\/p>\n

So first, let’s create a new project.<\/p>\n

Getting Started<\/h3>\n
\"Starting<\/a>
Starting a new Android Project<\/figcaption><\/figure>\n

This is very straightforward. We simply choose the Android application template provided with Oxygene. I named it “nz.co.deltics.demo.camera<\/strong>“. The default project template actually contains some layout and some code that we will not need, but initially it’s the only template we have. Being VisualStudio we can of course create our own project template for future use if we prefer to start with something completely “empty”.<\/p>\n

For now though, this will do and we are created a project consisting of almost everything we need for our app:<\/p>\n

\"The<\/a>
The Initial Project Contents<\/figcaption><\/figure>\n

The “Properties” item in our project contains the Android manifest for our app but is also the item that provides access to various configurable aspects of our project such as the target Android version, the location of asset and resource folders, compiler settings etc etc.<\/p>\n

For our purposes the manifest, layout and the initial activity of our app are our first areas of interest.<\/p>\n

Manifest Declarations<\/h3>\n

First we must add some permissions and features to the manifest that our application is going to need. Since we are implementing a camera application we must ensure that our app indicates it’s reliance on camera hardware being present and requests permission to use it. The two might seem to go hand in hand, but we might be writing an app which can use an existing camera app to take pictures in which case we would want to be sure that a camera exists but don’t need permission to use it ourselves since we would be asking another app to take pictures for us.<\/p>\n

But in this case we will be taking the pictures ourselves so we need both the hardware and the permission to use it.<\/p>\n

Also, since we intend capturing images and saving them, we will need permission to write to storage on the Android device. These are all declared in the application manifest. This is an XML file AndroidManifest.android-xml<\/strong>, and in this project initially looks like this:<\/p>\n

\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<manifest xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\r\n\t\tpackage="nz.co.deltics.demo.camera">\r\n  <!-- the android:debuggable="true" attribute is overwritten by the compiler when the debug info option is set -->\r\n  <application \r\n        android:label="@string\/app_name"\r\n        android:icon="@drawable\/icon"\r\n        android:debuggable="true">\r\n    <activity android:label="@string\/app_name" android:name="nz.co.deltics.demo.camera.MainActivity">\r\n      <intent-filter>\r\n        <action android:name="android.intent.action.MAIN" \/>\r\n        <category android:name="android.intent.category.LAUNCHER" \/>\r\n      <\/intent-filter>\r\n    <\/activity>\r\n  <\/application>\r\n  <uses-sdk android:minSdkVersion="4" \/>\r\n<\/manifest>\r\n<\/pre>\n
First we add the camera hardware feature that we need.  Oxygene<\/strong> provides code completion support for Android<\/strong> XML files in the Visual Studio editor.  In this case the entry we need is a uses-feature<\/strong>:<\/p>\n
\"Adding<\/a>
Adding a feature dependency<\/figcaption><\/figure>\n
We also need to add two uses-permission<\/strong> entries, one for CAMERA<\/strong> (to be given permission to access the camera that we said must exist) and the other for WRITE_EXTERNAL_STORAGE<\/strong>.  When we’re done, our manifest now looks like this:<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<manifest xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\r\n\t\tpackage="nz.co.deltics.demo.camera">\r\n  <!-- the android:debuggable="true" attribute is overwritten by the compiler when the debug info option is set -->\r\n  <application \r\n        android:label="@string\/app_name"\r\n        android:icon="@drawable\/icon"\r\n        android:debuggable="true">\r\n    <activity android:label="@string\/app_name" android:name="nz.co.deltics.demo.camera.MainActivity">\r\n      <intent-filter>\r\n        <action android:name="android.intent.action.MAIN" \/>\r\n        <category android:name="android.intent.category.LAUNCHER" \/>\r\n      <\/intent-filter>\r\n    <\/activity>\r\n  <\/application>\r\n  <uses-sdk android:minSdkVersion="4" \/>\r\n  <uses-feature android:name="android.hardware.camera" \/>\r\n  <uses-permission android:name="android.permission.CAMERA" \/>\r\n  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"\/>\r\n<\/manifest>\r\n<\/pre>\n
One last thing to look at in the manifest is the label<\/strong> attribute of the Application<\/strong> element.  This is the name of our application as it will appear on screen in the Android launcher.  The value of this attribute indicates that the text for the name will be taken from a string resource called “app_name<\/strong>“.<\/p>\n
In our project there is a “values<\/strong>” item and within that a strings.android-xml<\/strong> file.  Opening that in the editor we find:<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<resources>\r\n  <string name="app_name">nz.co.deltics.demo.camera<\/string>\r\n  <string name="my_button_text">Click Me!<\/string>\r\n  <string name="my_button_text_2">%1$d clicks!<\/string>\r\n<\/resources>\r\n<\/pre>\n
Here we can change the name of our application to something a little more user friendly and we won’t be needing the other two entries so we can simply remove those, leaving us with:<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<resources>\r\n  <string name="app_name">Demo Camera<\/string>\r\n<\/resources>\r\n<\/pre>\n
Now we can turn our attention to the user interface.<\/p>\n
The User Interface<\/h3>\n
On Android, just as with iOS, the user interface can be assembled programmatically in code or pre-defined in a resource file.  On Android these resources are XML files called a layout<\/strong> and in our project we have a layout item and within that we can see that we already have a layout<\/strong> file created for us called main.layout-xml<\/strong>.  Opening that we find:<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n  <LinearLayout xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\r\n    android:orientation="vertical"\r\n    android:layout_width="fill_parent"\r\n    android:layout_height="fill_parent"\r\n    android:gravity="center_vertical|center_horizontal">\r\n\r\n    <Button\r\n      android:id="@+id\/MyButton"\r\n      android:text="@string\/my_button_text"\r\n      android:layout_width="wrap_content"\r\n      android:layout_height="wrap_content" \/>\r\n\r\n  <\/LinearLayout>\r\n<\/pre>\n
This layout consists of a LinearLayout<\/strong> element configured to center any content both vertically and horizontally.  Being the root element of the layout, this will fill the screen and so it’s content – a single button – will be centered on the screen.  We see that the text<\/strong> (i.e. caption) for the button is a reference to one of those string entries that we removed from the strings xml file.<\/p>\n
We need something a little different.  I want the majority of the screen to be dedicated to a preview of the camera, with a button to capture an image tucked to one side.  As far as I know, there is no specific “Camera Preview<\/strong>” control as such as there is for a “Button<\/strong>” for example.  So for the preview\/viewfinder we will place a FrameLayout<\/strong> which we will later configure in code.<\/p>\n
I’m still learning Layout techniques (one reason for keeping things very simple in this example) so the layout I ended up with may not be the ideal way to define what I want, but it works (or seems to) and this is what I have:<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<LinearLayout xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\r\n    android:orientation="horizontal"\r\n    android:layout_width="fill_parent"\r\n    android:layout_height="fill_parent"\r\n    >\r\n <FrameLayout\r\n   android:id="@+id\/camera_preview"\r\n   android:layout_width="fill_parent"\r\n   android:layout_height="fill_parent"\r\n   android:layout_weight="1"\r\n    \/>\r\n\r\n  <Button\r\n   android:id="@+id\/button_capture"\r\n   android:text="Capture"\r\n   android:layout_width="wrap_content"\r\n   android:layout_height="wrap_content"\r\n   android:layout_gravity="center"\r\n    \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
Just to demonstrate that it’s possible, the text<\/strong> of my Button<\/strong> does not use the “@string\/<\/strong>” format so on this occasion the button text will be simply what I have specified in the layout.  It generally makes sense to use string references to ensure consistent use throughout an application (and to facilitate support for different languages), but it’s not mandatory.<\/p>\n
The “id<\/strong>” attributes of the FrameLayout<\/strong> and Button<\/strong> are important as these are how we will identify these layout elements in our code later on.  So far we have been dealing only with the resources in our application.<\/p>\n
Now let’s look at some code.<\/p>\n
The MainActivity<\/h3>\n
So far, everything we have looked at will be very familiar to anyone who has done any Android work with Eclipse or Android Studio or any other Java IDE for Android.  The code is where Oxygene set’s itself apart from the Java world, whilst simultaneously remaining firmly planted within it.  Here is the implementation of the MainActivity class created for us in our project:<\/p>\n
\r\n\r\n  namespace nz.co.deltics.demo.camera;\r\n\r\ninterface\r\n\r\n  uses\r\n    java.util,\r\n    android.app,\r\n    android.content,\r\n    android.os,\r\n    android.util,\r\n    android.view,\r\n    android.widget;\r\n\r\n  type\r\n    MainActivity = public class(Activity)\r\n    private\r\n      Count: Integer := 0;\r\n    public\r\n      method onCreate(savedInstanceState: Bundle); override;\r\n      method ButtonOnClick(v: View);\r\n    end;\r\n\r\n\r\nimplementation\r\n\r\n  method MainActivity.onCreate(savedInstanceState: Bundle);\r\n  begin\r\n    inherited;\r\n    \/\/ Set our view from the "main" layout resource\r\n    ContentView := R.layout.main;\r\n\r\n    \/\/ Get our button from the layout resource,\r\n    \/\/ and attach an event to it\r\n    var myButton: Button := Button(findViewById(R.id.MyButton));\r\n    myButton.OnClickListener := new interface View.OnClickListener(onClick := @ButtonOnClick);\r\n  end;\r\n\r\n  method MainActivity.ButtonOnClick(v: View);\r\n  begin\r\n    inc(Count);\r\n    (v as Button).Text := WideString.format(String[R.string.my_button_text_2], Count);\r\n  end;\r\n\r\nend.\r\n<\/pre>\n
This is obviously recognisable as Pascal but if you were to show it to an Android developer familiar with Java they would also recognise it as an Android application.<\/p>\n
We will take a closer look in the next article in the series.  For now let’s just remove the code that is part of the project template that we don’t need.  As we have already seen, the project template consists of an app with a single button.  The code in the MainActivity configures that button to respond to a Click event by incrementing a counter and then updating the button caption to indicate the number of clicks that have taken place.<\/p>\n
We aren’t interested in the counter, but the business of the button responding to clicks is something that we can keep although we will change the names of some things so that they make a bit more sense:<\/p>\n
\r\n\r\n  namespace nz.co.deltics.demo.camera;\r\n\r\ninterface\r\n\r\n  uses\r\n    java.util,\r\n    android.app,\r\n    android.content,\r\n    android.os,\r\n    android.util,\r\n    android.view,\r\n    android.widget;\r\n\r\n  type\r\n    MainActivity = public class(Activity)\r\n    public\r\n      method onCreate(savedInstanceState: Bundle); override;\r\n      method CaptureClick(v: View);\r\n    end;\r\n\r\n\r\nimplementation\r\n\r\n  method MainActivity.onCreate(savedInstanceState: Bundle);\r\n  var\r\n    btnCapture: Button;\r\n  begin\r\n    inherited;\r\n\r\n    \/\/ Set our view from the "main" layout resource\r\n    ContentView := R.layout.main;\r\n\r\n    \/\/ Get our button from the layout resource,\r\n    \/\/ and attach an event to it\r\n    btnCapture := Button(findViewById(R.id.button_capture));\r\n    btnCapture.OnClickListener := new interface View.OnClickListener(onClick := @CaptureClick);\r\n  end;\r\n\r\n  method MainActivity.CaptureClick(v: View);\r\n  begin\r\n    \/\/ TODO: Capture image from the camera\r\n  end;\r\n\r\nend.\r\n<\/pre>\n
What did we do:<\/p>\n
    \n
  • We removed the Count member variable of the MainActivity class<\/li>\n
  • I changed from an inline variable declaration for the Button reference to a more ‘traditional’ Pascal pre-declaration.  Oxygene supports both.  This is just my preference.  And I changed the name to btnCapture.  Again, just my preference.<\/li>\n
  • The ID passed to findViewById() was change to the id assigned to the button in the layout.  Notice that this is not a string but a reference to a member of the id<\/strong> member of an R<\/strong> object.  The R member is generated for us from the resources in a build step that occurs prior to compilation.  Again, this is identical to “normal” Android development.<\/li>\n
  • I changed the name of the method that responds to the button click to CaptureClick<\/strong> to better reflect it’s use.<\/li>\n
  • Finally, I removed the code from the CaptureClick() method and put a TODO item to remind me that this is where I need to add code to actually capture the camera image, when the time comes.<\/li>\n<\/ul>\n
    That’s it.<\/p>\n
    We now have an app with a UI ready to function as a very simple camera application.<\/p>\n
    Next time I will show how I implemented the camera preview to provide a “viewfinder” for the camera.<\/p>\n","protected":false},"excerpt":{"rendered":"
    [Estimated Reading Time: <\/span> 7<\/span> minutes]<\/span><\/span> Part 1 in an as yet unknown number of articles using a (very) simple camera application to demonstrate building first class Android applications using “Pascal for Java” – i.e. Oxygene Cooper. In this first instalment we will look at the basics – the components we are going to need and the basic UI of the […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[212,205,4,180],"tags":[153,215,181],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1TKYv-pT","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1624,"url":"https:\/\/www.deltics.co.nz\/blog\/posts\/1624\/","url_meta":{"origin":1605,"position":0},"title":"Exploring Listeners With Oxygene","date":"16 Sep 2013","format":false,"excerpt":"Part 2 in a short series demonstrating the development of a simple camera app for Android using Oxygene. In the previous instalment we looked at the basic framework of our app. For this instalment I was going to show how to implement the camera preview or viewfinder for this instalment,\u2026","rel":"","context":"In "Android"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1503,"url":"https:\/\/www.deltics.co.nz\/blog\/posts\/1503\/","url_meta":{"origin":1605,"position":1},"title":"Sharing Code Across Platforms in Oxygene","date":"22 Aug 2013","format":false,"excerpt":"There seems to be a perception among some people that Delphi is in the unique position of allowing developers to share and re-use code across the various platforms that it's compiler can now (and will soon) target. But this is not the case. Oxygene has had this capability right from\u2026","rel":"","context":"In "Cooper"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1658,"url":"https:\/\/www.deltics.co.nz\/blog\/posts\/1658\/","url_meta":{"origin":1605,"position":2},"title":"Crash Bang Wallop, What a Picture!","date":"19 Sep 2013","format":false,"excerpt":"The fourth and final part in the not-as-short-as-I-thought-it-would be series on building a camera app for Android using Oxygene. In this penultimate instalment we will add the capability to actually take a picture. But that won't take very long, so then we will spend a bit of time tidying up\u2026","rel":"","context":"In "Android"","img":{"alt_text":"Very Ugly Duckling","src":"https:\/\/i0.wp.com\/www.deltics.co.nz\/blog\/wp-content\/uploads\/Screenshot_2013-09-19-19-38-56-1024x640.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2252,"url":"https:\/\/www.deltics.co.nz\/blog\/posts\/2252\/","url_meta":{"origin":1605,"position":3},"title":"Making a Noise About on a Thread","date":"13 Aug 2014","format":false,"excerpt":"I'm working on an Android app at the moment, and for a bit of fun I decided to add a startup sound to brighten the day of every user that launches it. Which gives me another opportunity to present some of the advanced language features in Oxygene that make threading\u2026","rel":"","context":"In "Android"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.deltics.co.nz\/blog\/wp-content\/uploads\/Audio-Resource.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1634,"url":"https:\/\/www.deltics.co.nz\/blog\/posts\/1634\/","url_meta":{"origin":1605,"position":4},"title":"An App With View","date":"17 Sep 2013","format":false,"excerpt":"Not a Merchant Ivory production, but Part 3 in the Oxygene for Java camera app for Android series. So far we have seen that we can work directly with the Android platform manifest and layout files and how the Oxygene language is a first class citizen in the Java platform\u2026","rel":"","context":"In "Android"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1700,"url":"https:\/\/www.deltics.co.nz\/blog\/posts\/1700\/","url_meta":{"origin":1605,"position":5},"title":"Honourable Intentions","date":"22 Sep 2013","format":false,"excerpt":"This is it. The home straight. The final part of my series on writing a camera app using Oxygene for Android. In this concluding part I shall look at making my application a well behaved Android citizen. As well as pointing out (and fixing) some mistakes I have made along\u2026","rel":"","context":"In "Android"","img":{"alt_text":"Post a photo from Google+","src":"https:\/\/i0.wp.com\/www.deltics.co.nz\/blog\/wp-content\/uploads\/Google+-Main-1024x640.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/posts\/1605"}],"collection":[{"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/comments?post=1605"}],"version-history":[{"count":10,"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/posts\/1605\/revisions"}],"predecessor-version":[{"id":1618,"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/posts\/1605\/revisions\/1618"}],"wp:attachment":[{"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/media?parent=1605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/categories?post=1605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.deltics.co.nz\/blog\/wp-json\/wp\/v2\/tags?post=1605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}