Tuesday, 20 September 2016

Steps to Capture Image Using Camera/Photo Gallery (iOS)

In this tutorial I will describe how to capture image, using iPhone/iPad Device Camera or Photo Gallery, step by step. Using this tutorial you can implement image capturing functionality within 1 hour.

Step-1: In your user interface create an UIImageView and two UIButton and place them on interface as per your requirement. Image view to show captured image, one button to open camera and second button to open image gallery.

Step-2: Confirm to required protocols in your controller .h file


@interface YourViewController : UIViewController <UIImagePickerControllerDelegate, UINavigationControllerDelegate>
- (IBAction)takePhoto:(UIButton *)sender {


Step-3: Declare an IBOutlet for image in .m file.

@interface YourViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIImageView *imageView;
@end

Step-4: Define an IBAction takePhoto method as below:

UIImagePickerController *picker = [[UIImagePickerController alloc] init];
picker.delegate = self;
picker.allowsEditing = YES;
picker.sourceType = UIImagePickerControllerSourceTypeCamera;
[self presentViewController:picker animated:YES completion:NULL];
}


Step-5: Define selectPhoto method as below:

- (IBAction)selectPhoto:(UIButton *)sender {
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
picker.delegate = self;
picker.allowsEditing = YES;
picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
[self presentViewController:picker animated:YES completion:NULL];
}


Step-6: In interface builder connect UIImageView with imageView property. Connect buttons 'Touch up inside' action with takePhoto and selectPhoto methods.


Step-7: To handle UIImagePickerControllerDelegate, implement below two methods.


/*This method will be called when user capture/select an image*/
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
UIImage *chosenImage = info[UIImagePickerControllerEditedImage];
self.imageView.image = chosenImage;
[picker dismissViewControllerAnimated:YES completion:NULL];
}

/*This method will be called when user perform cancel operation*/
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker {
[picker dismissViewControllerAnimated:YES completion:NULL];
}


Enjoy learning and please let me know your feedback.




Sunday, 11 September 2016

AdMob Integration in Android Application

In this post I will first give a brief introduction of AdMob, then will tell how to integrate AdMob step by step in an Android application. By following these steps you can integrate AdMob in your app within 1 hour.

AdMob: AdMob currently support two kinds of ad units. One is Banner ad which occupies a portion of the screen. Other is Interstitial ad which occupies device full screen. Interstitial completely blocks your app UI and places the ad on top it.
AdMob Integration Steps:

Step-1: Add Google play service dependencies in app's build.gradle file
compile 'com.google.android.gms:play-services-ads:8.4.0'

Step-2: Create AdMob account if not already created on https://apps.admob.com.

Step-3: Create Ad Unit for the your app. To Create an Ad Unit you need to follow the below steps:
i) Sign into your AdMob account (If you don't have any existing AdMob account then you can create it using your google account on https://apps.admob.com)
ii) Click on Monetize tab.
iii) Select or Create the app and choose Android platform
iv) Select the ad format either Banner or Interstitial and give the ad unit a name.
v) Once the ad unit is created, you can notice the Ad unit ID on the dashboard. An example of ad unit id look like ca-app-pub-0664570763252260/3326342124
Note: If there are two activities in which you need to show Ad then you need to create two Ad Units. So create as many ad units required for your app.

Step-4: Add your Ad Unit in strings.xml file.

Step-5: Open AndroidManifest.xml and add the below mentioned permissions and other properties

i)  Add INTERNET & ACCESS_NETWORK_STATE permissions.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name = "android.permission.ACCESS_NETWORK_STATE"  />

ii) Add google play services version meta-data inside <application> tag.
<meta-data android:name="com.google.android.gms.version"             android:value="@integer/google_play_services_version" />

iii) Add the AdActivity adding configChanges and theme attributes.
<activity
 android:name="com.google.android.gms.ads.AdActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"            
android:theme="@android:style/Theme.Translucent" />

Step-6: In order to add the banner ad, you need to add com.google.android.gms.ads.AdView element to your xml layout.
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="@string/banner_home_footer">
</com.google.android.gms.ads.AdView>

Step-7: In your activity/fragment add the below code
private AdView mAdView;
//In onCreate method
mAdView = (AdView) findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();      
mAdView.loadAd(adRequest);

Step-8: Enabling Test Ads
As per AdMob Policies you are not allowed to click on your own live ads. In order to protect your AdMob account from getting suspended, use test ads during development as you might click the ads accidentally.
When you run the project, if you monitor the LogCat, you can find a similar line Use AdRequest.Builder.addTestDevice(“YOUR_DEVICE_ID”) to get test ads on this device. Copy the device id and add it to AdRequest as shown below. Note that this ID varies from device to device, By doing this, the test ads will be loaded instead of live ads.
In production you need to make sure that you removed addTestDevice() methods in order to render the live ads and start monetization.
AdRequest adRequest = new AdRequest.Builder().addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
// Check the LogCat to get your test device ID
.addTestDevice("YOUR_DEVICE_ID").build();

Addtional Note: It is a common requirement that AdView should only be visible only when Ads available otherwise not, so to achieve this functionality you should register AdListener in the respective activity/fragment and should show or hide AdView respectivity:

mAdView.setAdListener(new AdListener() {
    @Override
    public void onAdLoaded() {
        super.onAdLoaded();
        mAdView.setVisibility(View.VISIBLE);
    }

    @Override
    public void onAdFailedToLoad(int errorCode) {
        super.onAdFailedToLoad(errorCode);
        mAdView.setVisibility(View.GONE);
    }
});