Add Firebase Crashlytics In Ionic Application

Firebase is combination of really nice tools/services for the developers like Crashlytics, Cloud messaging, Real time Database, Analytics and much more. From them Crashlytics is widely used by developers to get real time crash events and problem insights from the Mobile applications. Crashlytics was initially developed by Twitter and It was under the Fabric services. But From March 2020 Crashlytics have joined the Firebase services family.


In this tutorial I am going to use this cordova plugin. Plugin has latest AndroidX compatible firebase libraries. so app can support Android-29+ Api.


Github Link - dpa99c/cordova-plugin-firebasex


Step - 1 

Create Project in Firebase console

Goto Firebase Console, then click on add project if it was not created prior to this. If its first time you will see form like below to create your project.

 


Step - 2

Now project is created. So let's start crashlytics for the project. In side menu Quality > Crashlytics or you can swipe down on main page till you can see crashlytics menu. 

Enable crashlytics for project by filling form like below. You have fill few details of your project like Project name, Project application Id/ Bundle identifier and SHA-1 key for debug build. You can check this Stackoverflow post for SHA-1. 

 

 

After that step make sure you download google-services.json. This file contains configuration regarding project. complete all the steps and skip in last step as we need to code yet for logging events from the app. Make sure you put this json file in root directory of your project.


Step - 3 

Add plugin into project

cordova plugin add cordova-plugin-firebasex


Step - 4 

Create class to handle all errors at runtime

AppErrorHandler.ts

import { Injectable, ErrorHandler } from '@angular/core';
import * as stacktrace from 'stacktrace-js';
import { FirebaseX } from "@ionic-native/firebase-x/ngx";


@Injectable({providedIn: 'root'})
export class AppErrorHandler implements ErrorHandler {

  public Tag = "AppErrorHandler"

  constructor (private firebase: FirebaseX) {}

  handleError(error: any): void {
      
      // do something with the error
      console.log(error);

      stacktrace.get().then(
          trace => this.firebase.logError(this.Tag + " Error =>" + error + "Trace =>" + trace)
      );
  }

}

Step - 5 

Define above class as Custom error handler in 

App.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy, ModalController } from '@ionic/angular';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


import { Diagnostic } from '@ionic-native/diagnostic/ngx';
import { FirebaseX } from "@ionic-native/firebase-x/ngx";

import { CommonUtilService } from './services/commonutil.service';
import { AppErrorHandler } from './services/apperrorhandler';


@NgModule({
  declarations: [AppComponent, NotificationsComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IonicModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: ErrorHandler, useClass: AppErrorHandler },
    StatusBar,
    Diagnostic,
    FirebaseX
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }


Well setup and coding both done. now run the app in android emulator or device. As it has dependency on android platform. For testing put below code in your main page to simulate crash.
this.firebase.sendCrash();
That's it from my side. Now run the app and see the result. If you have any query please let me know in below comment box.

keep coding... :)

Espresso Web - UI Test Framework For Android Webview

Espresso web library give you an Espresso-like feel to interacting with WebViews. From espresso 2.2 webview support module was added to the espresso lineup.

Prerequisite - You must have used espresso for native UI test cases. otherwise some of the methods you don't know we have used in code. 

Espresso Web allows to perform ViewActions using Web Driver Atoms. Atoms is a thin wrapper around javascript. So it turns out specifying element and action are executed by the atoms. DriverAtom is utils collection class with useful methods like clearElement, webClick, webKeys etc.


Espresso Web - UI Test Framework For Android Webview

Some time in mobile application we open web pages inside our app for some of features like login or registration or various payment methods etc. and those module required to test thoroughly so to do that espresso provide Espresso Web Api.


There are many ways to identify HTML element to perform action on element like using its Id, Name, Tag ,XPath etc you can find more about in Locator class in espresso web library. In this tutorial I am going to write the most used Locators for writing test cases for web pages in android.

Gradle file change

// For espresso web view testcases
androidTestImplementation 'com.android.support.test.espresso:espresso-web:3.0.2'

OR if you are using androidx libraries add
androidTestImplementation 'androidx.test.espresso:espresso-web:3.1.0'

private void withIdHasTextInWebView(int webViewId, String elementId, String text) {
    Web.onWebView(ViewMatchers.withId(webViewId))
            .withElement(DriverAtoms.findElement(Locator.ID, elementId))
            .withNoTimeout()
            .check(WebViewAssertions.webMatches(DriverAtoms.getText(),
             Matchers.equalTo(text)));
}

In above code as you can see we are testing weather particular element has given text (label test) in HTML code in webview. To find element from HTML code we are using static findElement() method from DriverAtoms util class.   WithNoTimeout() method disable wait of javascript thread. Javascript takes some time pause of few millisecond before delivering result but we don't want that to happen so we are using this method. After that we are using check() method same as we have in espresso core library.

private void withTagHasTextInWebView(int webViewId, String tagName, String text) {
    Web.onWebView(ViewMatchers.withId(webViewId))
            .withElement(DriverAtoms.findElement(Locator.TAG_NAME, tagName))
            .withNoTimeout()
            .check(WebViewAssertions.webMatches(DriverAtoms.getText(),
                Matchers.equalTo(text)));
}
You can also perform above test on the basis of element tag also. If you know element tag instead of its Id or have same id used for multiple elements. So as you can see we are testing particular label with "xyz" tag have "xyz" text.

private void withXPathHasTextInWebView(int webViewId, String xpath, String text) {
    Web.onWebView(ViewMatchers.withId(webViewId))
            .withElement(DriverAtoms.findElement(Locator.XPATH, xpath))
            .withNoTimeout()
            .check(WebViewAssertions.webMatches(DriverAtoms.getText(),
                    Matchers.equalTo(text)));
}

Some time you don't know Id or even element have no Tag defined but still we need to test particular label has given text or not. so espresso even support XPath of the element from HTML code.

That's it from my side. Now run the app and see the result. If you have any query please let me know in below comment box.

keep coding... :)

Source code

Load Custom Error Page in Android WebView

Network connectivity is very fluctuating in mobile devices. User may be using your app in Hi-Speed internet or low-Speed internet. whenever there is low internet connection or no connection User device Android webview display actual URL with some error messages. So you have to check your app in all environments. Otherwise you may leak your website URL accidentally which may consist of URL parameters. You never know your user is normal user or hacker so this way you can leak some data to any one. So to make your app secure follow this tutorial and create your own error page for your application.

Load Custom Error Page

Android Webview widget have very handful methods which you can use to identify error types and display message accordingly. In this tutorial I am going to display my default error page in all cases and network message if internet connection is not available. But you can implement it as per your requirement with different error types like Unauthorized web page, SSL error etc.


WebViewCustomizationDemo.java
package com.androprogrammer.tutorials.samples;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.net.http.SslError;
import android.os.Build;
import android.os.Bundle;
import android.transition.Explode;
import android.transition.Transition;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.webkit.JavascriptInterface;
import android.webkit.SslErrorHandler;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

import com.androprogrammer.tutorials.R;
import com.androprogrammer.tutorials.activities.Baseactivity;
import com.androprogrammer.tutorials.util.Common;

import butterknife.Bind;
import butterknife.ButterKnife;

public class WebViewCustomizationDemo extends Baseactivity {

    @Bind(R.id.progress_loading)
    ProgressBar progressLoading;
    @Bind(R.id.wv_customization)
    WebView wvCustomization;

    private View viewLayout;

    private String pageUrl = "https://www.androprogrammer.com/errorPage.html";

    private String DEFAULT_ERROR_PAGE_PATH = "file:///android_asset/html/default_error_page.html";

    private static final String TAG = "WebViewCustomization";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

            //set the transition
            Transition ts = new Explode();
            ts.setDuration(5000);
            getWindow().setEnterTransition(ts);
            getWindow().setExitTransition(ts);
        }

        super.onCreate(savedInstanceState);

        setReference();

        setSimpleToolbar(true);
        setToolbarElevation(getResources().getDimension(R.dimen.elevation_normal));

        setToolbarSubTittle(this.getClass().getSimpleName());

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    }

    @Override
    public void setReference() {

        viewLayout = LayoutInflater.from(this).inflate(R.layout.activity_web_customization, container);

        ButterKnife.bind(this, viewLayout);

        wvCustomization.clearHistory();
        wvCustomization.getSettings().setAppCacheEnabled(false);
        wvCustomization.getSettings().setJavaScriptEnabled(true);

        wvCustomization.addJavascriptInterface(new SimpleWebJavascriptInterface(this), "Android");
        wvCustomization.setWebViewClient(new MyWebViewClient());

        wvCustomization.loadUrl(pageUrl);

    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        
        switch (item.getItemId()) {
            // Respond to the action bar's Up/Home button
            case android.R.id.home:
                finish();
                break;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onBackPressed() {
        if (wvCustomization.canGoBack()) {
            wvCustomization.goBack();
        } else {
            finish();
        }
    }

    private class MyWebViewClient extends WebViewClient {

        @Override public boolean shouldOverrideUrlLoading(WebView view, String url) {

            Log.d(TAG, "--" + url);

            return true;
        }

        @Override
        public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
            String message = null;
            switch (error.getPrimaryError()) {
                case SslError.SSL_UNTRUSTED:
                    message = "The certificate authority is not trusted.";
                    break;
                case SslError.SSL_EXPIRED:
                    message = "The certificate has expired.";
                    break;
                case SslError.SSL_IDMISMATCH:
                    message = "The certificate Hostname mismatch.";
                    break;
                case SslError.SSL_INVALID:
                    message = "SSL connection is invalid.";
                    break;
            }

            // display error dialog with title and message
            Common.showDialog(WebViewCustomizationDemo.this, "SSL Certificate Error", message,
                    getResources().getString(android.R.string.ok),
                    null, null, 1);
        }

        @SuppressLint("NewApi")
        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            if (request.isForMainFrame() && error != null) {
                view.loadUrl(DEFAULT_ERROR_PAGE_PATH);
            }
        }

        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            if (errorCode != WebViewClient.ERROR_UNSUPPORTED_SCHEME && errorCode != WebViewClient.ERROR_HOST_LOOKUP) {
                view.loadUrl(DEFAULT_ERROR_PAGE_PATH);
            }
        }

        @Override public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            if (progressLoading != null) {
                progressLoading.setVisibility(View.VISIBLE);
                wvCustomization.setVisibility(View.GONE);
            }
        }

        @Override public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            if (progressLoading != null) {
                progressLoading.setVisibility(View.GONE);
                wvCustomization.setVisibility(View.VISIBLE);
            }
        }
    }
}
layout/activity_web_customization_demo.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout_webView_loader"
    android:background="@android:color/transparent"
    tools:background="@android:color/black"
    android:fitsSystemWindows="false">

    <ProgressBar
        android:id="@+id/progress_loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:visibility="gone"
        style="?android:attr/progressBarStyle" />

    <WebView
        android:id="@+id/wv_customization"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Android webview even allow custom javascript interface also which allow to instantiate our class method also from webpage. But this is only available after Android Kitkat (Android Api 19). Below code will allow you to listen java script actions in webview and on the basis of that you can  call class methods. As you can see it display my custom html page insted of url and native UI for webview this way it won't leak any info of my website incase of any error.

public class SimpleWebJavascriptInterface {

 Activity activity;

 public SimpleWebJavascriptInterface(Activity activity) {
  this.activity = activity;
 }

 @JavascriptInterface
 public void reloadWebPage() {

  activity.runOnUiThread(new Runnable() {
   @Override public void run() {
    wvCommonViewer.loadUrl(pageUrl);
   }
  });
}


That's it from my side. for html code checkout my github repo. Now run the app and see the result. If you have any query please let me know in below comment box.

keep coding... :)

Source code

Detect QR Code Using Google Play Service Library

In Google play service v7.8 goole developers have provided Api for Barcode & QR Code detection. Now it as been improved with new features like OCR and Object tracking and Face detection. Recently usage of QR code and Barcode scan using smart phones has become so common. So google developers have come up with official solution as Mobile Vision Api. The Mobile vision api supports both 1D and 2D bar codes, in a number of sub formats. like EAN-13, EAN-8, UPC-A, QR Code, Data Matrix etc.

Mobile vision api has following benefits. which makes it best available option for scanning QR and Barcode

- Fast and reliable,
- Works Offline,
- Can read barcode in any orientation (Orientation free) and
- Multiple barcode scan feature at the same time.

In one tutorial we can not cover all scanning options so we will create sample which scan QR code and Data Matrix using device's camera.

Note:
As this sample is part of my full project Tutorial. You may find some methods directly used from BaseActivity so please check out full project on Github.


androprogrammer.com


Please follow all steps to get expected outcome using Mobile vision api.

Step - 1

Add Vision package only from google play service

compile "com.google.android.gms:play-services-vision:10.2.4"

Step - 2
Add permission and meta in AndroidManifest file.

<uses-feature android:name="android.hardware.camera" />
 
<!-- put under application tag -->
<meta-data
    android:name="com.google.android.gms.vision.DEPENDENCIES"
    android:value="barcode" />

In value attribute you can use these 3 different values.

- barcode
- face
- ocr 

Step - 3
As we have taken SurfaceView to display camera output you can add custom controls over camera preview. 

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_barcodeReader_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      >

    <SurfaceView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/camera_view_barcode"
        />

  </LinearLayout>
</android.support.design.widget.CoordinatorLayout>


Step - 4
To read QR code or Barcode data we have to use BarcodeDetector class and BarcodeDetector.Builder class for configuration. Using Inbuilt camera, library scan QR codes and using native library for parsing it gives data from the QR code. In this tutorial i have set Barcode detector to read QR code and Barcode ISBN code using setBarcodeFormats() method of builder class. you can set different formats as per your requirement.

QRCodeScanDemo.java

package com.androprogrammer.tutorials.samples;

import android.Manifest;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.content.pm.PackageManager;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v4.app.ActivityCompat;
import android.transition.Explode;
import android.transition.Transition;
import android.util.Log;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.Window;

import com.androprogrammer.tutorials.R;
import com.androprogrammer.tutorials.activities.Baseactivity;
import com.androprogrammer.tutorials.util.Common;
import com.google.android.gms.vision.CameraSource;
import com.google.android.gms.vision.Detector;
import com.google.android.gms.vision.barcode.Barcode;
import com.google.android.gms.vision.barcode.BarcodeDetector;

import java.io.IOException;

import butterknife.Bind;
import butterknife.ButterKnife;

public class QRCodeScanDemo extends Baseactivity {


 // permission request codes need to be < 256
 private static final int RC_HANDLE_CAMERA_PERM = 11;

 private View viewLayout;

 @Bind(R.id.layout_barcodeReader_container)
 CoordinatorLayout layoutBarcodeReaderContainer;
 @Bind(R.id.camera_view_barcode)
 SurfaceView cameraViewBarcode;

 private CameraSource mCameraSource;

 private static final String TAG = "BarcodeReaderActivity";

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

   //set the transition
   Transition ts = new Explode();
   ts.setDuration(5000);
   getWindow().setEnterTransition(ts);
   getWindow().setExitTransition(ts);
  }

  super.onCreate(savedInstanceState);

  // base class methods
  setSimpleToolbar(true);
  setToolbarElevation(getResources().getDimension(R.dimen.elevation_normal));
  setToolbarSubTittle(this.getClass().getSimpleName());

  // To display back arrow
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);


  setReference();

 }

 @Override
 public void setReference() {
  viewLayout = LayoutInflater.from(this).inflate(R.layout.activity_qr_codescan_demo, container);

  ButterKnife.bind(this, viewLayout);

  // Check for the camera permission before accessing the camera.  If the
  // permission is not granted yet, request permission.
  int rc = ActivityCompat.checkSelfPermission(this, Manifest.permission.CAMERA);
  if (rc == PackageManager.PERMISSION_GRANTED) {
   createCameraSource(true);
  } else {
   requestCameraPermission();
  }
 }

 /**
  * Handles the requesting of the camera permission.  This includes
  * showing a "Snackbar" message of why the permission is needed then
  * sending the request.
  */
 private void requestCameraPermission() {
  Log.w(TAG, "Camera permission is not granted. Requesting permission");

  final String[] permissions = new String[]{Manifest.permission.CAMERA};

  if (!ActivityCompat.shouldShowRequestPermissionRationale(this,
    Manifest.permission.CAMERA)) {
   ActivityCompat.requestPermissions(this, permissions, RC_HANDLE_CAMERA_PERM);
   return;
  }


  View.OnClickListener listener = new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    ActivityCompat.requestPermissions(QRCodeScanDemo.this, permissions, RC_HANDLE_CAMERA_PERM);
   }
  };

  layoutBarcodeReaderContainer.setOnClickListener(listener);
  Snackbar.make(layoutBarcodeReaderContainer, R.string.permission_camera_rationale,
    Snackbar.LENGTH_INDEFINITE).setAction(android.R.string.ok, listener).show();
 }

 /**
  * Callback for the result from requesting permissions. This method
  * is invoked for every call on {@link #requestPermissions(String[], int)}.
  * <p>
  * <strong>Note:</strong> It is possible that the permissions request interaction
  * with the user is interrupted. In this case you will receive empty permissions
  * and results arrays which should be treated as a cancellation.
  * </p>
  *
  * @param requestCode  The request code passed in {@link #requestPermissions(String[], int)}.
  * @param permissions  The requested permissions. Never null.
  * @param grantResults The grant results for the corresponding permissions
  *                     which is either {@link PackageManager#PERMISSION_GRANTED}
  *                     or {@link PackageManager#PERMISSION_DENIED}. Never null.
  * @see #requestPermissions(String[], int)
  */
 @Override
 public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions,
                                        @NonNull int[] grantResults) {
  if (requestCode != RC_HANDLE_CAMERA_PERM) {
   Log.d(TAG, "Got unexpected permission result: " + requestCode);
   super.onRequestPermissionsResult(requestCode, permissions, grantResults);
   return;
  }

  if (grantResults.length != 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
   Log.d(TAG, "Camera permission granted - initialize the camera source");
   // permission granted, so create the camera source
   createCameraSource(true);
   return;
  }

  Log.e(TAG,
    "Permission not granted: results len = " + grantResults.length + " Result code = "
      + (grantResults.length > 0 ? grantResults[0] : "(empty)"));

 }

 /**
  * Creates and starts the camera.  Note that this uses a higher resolution in comparison
  * to other detection examples to enable the barcode detector to detect small barcodes
  * at long distances.
  * <p>
  * Suppressing InlinedApi since there is a check that the minimum version is met before using
  * the constant.
  */
 @SuppressLint("InlinedApi")
 private void createCameraSource(boolean autoFocus) {
  Context context = getApplicationContext();

  // A barcode detector is created to track barcodes.  An associated multi-processor instance
  // is set to receive the barcode detection results, track the barcodes, and maintain
  // graphics for each barcode on screen.  The factory is used by the multi-processor to
  // create a separate tracker instance for each barcode.
  BarcodeDetector barcodeDetector =
    new BarcodeDetector.Builder(context)
      .setBarcodeFormats(Barcode.QR_CODE | Barcode.ISBN)
      .build();

  if (!barcodeDetector.isOperational()) {
   Log.w(TAG, "Detector dependencies are not yet available.");

   // Check for low storage.  If there is low storage, the native library will not be
   // downloaded, so detection will not become operational.
   IntentFilter lowstorageFilter = new IntentFilter(Intent.ACTION_DEVICE_STORAGE_LOW);
   boolean hasLowStorage = registerReceiver(null, lowstorageFilter) != null;

   if (hasLowStorage) {
    Common.showToast(this, getString(R.string.low_storage_error));
    Log.w(TAG, getString(R.string.low_storage_error));
   }
  }

  cameraViewBarcode.getHolder().addCallback(new SurfaceHolder.Callback() {
   @Override
   public void surfaceCreated(SurfaceHolder holder) {

    try {
     mCameraSource.start(cameraViewBarcode.getHolder());
    } catch (IOException ie) {
     Log.e("CAMERA SOURCE ERROR", ie.getMessage());
    }

   }

   @Override
   public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
   }

   @Override
   public void surfaceDestroyed(SurfaceHolder holder) {
    mCameraSource.stop();
   }
  });

  barcodeDetector.setProcessor(new Detector.Processor<Barcode>() {
   @Override
   public void release() {
   }

   @Override
   public void receiveDetections(Detector.Detections<Barcode> detections) {

    final SparseArray<Barcode> barcodes = detections.getDetectedItems();

    if (barcodes.size() != 0) {

     Snackbar.make(layoutBarcodeReaderContainer, barcodes.valueAt(0).displayValue,
       Snackbar.LENGTH_INDEFINITE).show();
    }
   }
  });

  // Creates and starts the camera.  Note that this uses a higher resolution in comparison
  // to other detection examples to enable the barcode detector to detect small barcodes
  // at long distances.
  CameraSource.Builder builder =
    new CameraSource.Builder(getApplicationContext(), barcodeDetector).setFacing(
      CameraSource.CAMERA_FACING_BACK)
      .setRequestedPreviewSize(640, 480)
      .setRequestedFps(15.0f);

  // make sure that auto focus is an available option
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
   builder.setAutoFocusEnabled(autoFocus);

  }

  mCameraSource = builder.build();

 }
}

Final lines

As google play services available on around 80-90% devices in the market it is easy and safe to use as compare to other options available to perform same task.

That's it from my side. now run the app and see the result. if you have any query or suggestion please let me know in below comment box.

keep coding... :) 
 
Source code

Bottom Navigation View With Fragments

In March 2016 support design library update Google announced that there’s a new element to be added in Material Design components and it’s the Bottom Navigation View. As per documentation it should be used when application has three to five top-level destinations. Basically this is same as Tab Layout but with some more enhancement and animations. Although it is same but you can not use view pager with it. as it also explained as bad practice by google material design guidelines.

Why we need Bottom Navigation View and Tab Layout both ?
This is really great question we should ask google support library developers. but according to me most of the people liked to use phone with just one hand. with that and huge size of mobile screen you can change tabs if they are at bottom not on top. so may be considering UIUX google may have added this beautiful component in support library so you can implement it with back word compatibility also.

Today in this tutorial I am going to cover Bottom Navigation View with fragments. In Bottom view you can provide options using menu resource file or using inflateMenu(int resId) method. For this tutorial i have used five (max) value so you can confirm how it looks.


androprogrammer.com


To add Bottom navigation view you have to include support design library.
compile "com.android.support:design:25.0.1"

Now you have to put bellow code in your layout file.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/primary_green"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/bottom_navigation_main"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        />

  </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

app:menu : Menu resource file (options to be displayed).

app:itemIconTint : Change icon color when gets selected.

app:itemBackground : background color by default it will be your app primary color.

Now layout part is set. For color codes and images and other resources check out my repo on Github.

BottomBarDemo.java
package com.androprogrammer.tutorials.samples;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.app.Fragment;
import android.support.v4.content.ContextCompat;
import android.support.v4.graphics.drawable.DrawableCompat;
import android.transition.Explode;
import android.transition.Transition;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;

import com.androprogrammer.tutorials.R;
import com.androprogrammer.tutorials.activities.Baseactivity;
import com.androprogrammer.tutorials.fragments.FragmentOne;
import com.androprogrammer.tutorials.fragments.FragmentThree;
import com.androprogrammer.tutorials.fragments.FragmentTwo;
import com.androprogrammer.tutorials.util.Common;

import butterknife.Bind;
import butterknife.ButterKnife;


public class BottomBarDemo extends Baseactivity {

 @Bind(R.id.bottom_navigation)
 BottomNavigationView bottomNavigation;

 private View viewLayout;

 private static final String TAG = "BottomBarDemo";

 private int[] bottomBarColors;

 @Override
 protected void onCreate(Bundle savedInstanceState) {

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

   //set the transition
   Transition ts = new Explode();
   ts.setDuration(5000);
   getWindow().setEnterTransition(ts);
   getWindow().setExitTransition(ts);
  }

  super.onCreate(savedInstanceState);

  setReference();

  setSimpleToolbar(true);
  setToolbarElevation(getResources().getDimension(R.dimen.elevation_normal));

  setToolbarSubTittle(this.getClass().getSimpleName());

  getSupportActionBar().setDisplayHomeAsUpEnabled(true);

  int themeColor = Common.getThemeColor(this, R.attr.colorPrimary);

  bottomBarColors = new int[]{
    themeColor,
    R.color.color_skype1,
    R.color.color_blogger,
    R.color.color_gPlus,
    R.color.color_whatsApp
  };

  // For the first time setup
  changeBottomBarColor(bottomNavigation, 0);
  changeFragment(0);

  bottomNavigation.setOnNavigationItemSelectedListener(
    new BottomNavigationView.OnNavigationItemSelectedListener() {
     @Override
     public boolean onNavigationItemSelected(@NonNull MenuItem item) {
      switch (item.getItemId()) {
       case R.id.action_favorites:
        changeBottomBarColor(bottomNavigation, 0);
        changeFragment(0);
        break;
       case R.id.action_schedules:
        changeBottomBarColor(bottomNavigation, 1);
        changeFragment(1);
        break;
       case R.id.action_music:
        changeBottomBarColor(bottomNavigation, 2);
        changeFragment(2);
        break;
       case R.id.action_music1:
        changeBottomBarColor(bottomNavigation, 3);
        changeFragment(3);
        break;
       case R.id.action_favorites1:
        changeBottomBarColor(bottomNavigation, 4);
        changeFragment(4);
        break;
      }
      return true;
     }
    });
 }

 @Override
 public void setReference() {
  viewLayout = LayoutInflater.from(this).inflate(R.layout.activity_bottombar_demo, container);

  ButterKnife.bind(this, viewLayout);
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  // Handle action bar item clicks here. The action bar will
  // automatically handle clicks on the Home/Up button, so long
  // as you specify a parent activity in AndroidManifest.xml.
  switch (item.getItemId()) {
   // Respond to the action bar's Up/Home button
   case android.R.id.home:
    finish();
    overridePendingTransition(0, R.anim.activity_close_scale);
    break;
  }

  return super.onOptionsItemSelected(item);
 }


 /**
  * To change bottom bar color on the basis of index
  * @param bottomNavigationView bottom bar object
  * @param index menu index
  */
 private void changeBottomBarColor(BottomNavigationView bottomNavigationView, int index) {
  if (bottomBarColors != null) {
   int colorCode = 0;

   if (index == 0) {
    colorCode = bottomBarColors[index];
   } else {
    colorCode = ContextCompat.getColor(BottomBarDemo.this, bottomBarColors[index]);
   }

   DrawableCompat.setTint(ContextCompat.getDrawable(BottomBarDemo.this,
     R.drawable.drawable_bottombar_color),
     colorCode);

   bottomNavigationView.setItemBackgroundResource(R.drawable.drawable_bottombar_color);

   if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // If you want to change status bar color
    //getWindow().setStatusBarColor(ContextCompat.getColor(BottomBarDemo.this, colorCode));

    // If you want to change bottom device navigation key background color
    getWindow().setNavigationBarColor(colorCode);
   }
  }
 }

 /**
  * To load fragments for sample
  * @param position menu index
  */
 private void changeFragment(int position) {

  Fragment newFragment = null;

  if (position == 0) {
   newFragment = new FragmentOne();
  } else if (position % 2 != 0) {
   newFragment = new FragmentTwo();
  } else {
   newFragment = new FragmentThree();
  }

  getFragmentManager().beginTransaction().replace(
    R.id.fragmentContainer, newFragment)
    .commit();
 }
}


That's it from my side. now run the app and see the result. if you have any query or suggestion please let me know in below comment box.

keep coding... :)

Source code

Dependency Injection Using Dagger2

Android Application depends on different different components or on modules. Yes your whole application have lots of dependency like you require network component in many screens (Activities or Fragments) or  User data, Preference Data in app etc you get from some other class or object that can be dependency. your class depends upon some particular class which provide data to you and then you can process data or information. these are the just examples components you need to make better and best apps.

But we developer know how painful it is to write code for declaration and initialization and then also check for null (nightmare for java developers). in every class or whenever you need some information from the other class you have to do these things.
What if this things done by some magic :).

Well there is no such thing like magic in programming. So you have to do it by your own or you can use dependency injector library Dagger2. Which will create object graph and then inject required object in dependent class. If you don't know much more about Dagger2 check out my previous post Guide For Dependency Injection Using Dagger2. 


In this tutorial I am going to demonstrate sample app which i have created using Dagger2 , Volley and Gson.

Why volley ?
When you search for dagger2 samples on internet you will find lots of tutorials with Retrofit but what if i don't use retrofit. It is good library but require lots of boiler plate code for big apps (Too many interface when apps get bigger).

androprogrammer.com


Ok Shut up and show me code...

First of all create Module Class with whatever dependency you want to inject using this Module. Create methods and use @Provides annotation for methods so dagger2 will understand which object you want to provide.

package com.androprogrammer.dagger2sample.domain.di.modules;

import android.content.Context;

import com.google.gson.FieldNamingPolicy;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.androprogrammer.dagger2sample.domain.network.NetworkManager;

import javax.inject.Singleton;

import dagger.Module;
import dagger.Provides;


@Module
public class NetModule {
    
    private Context context;

    public NetModule(Context ctx) {
        this.context = ctx;
    }



    @Provides  // Dagger will only look for methods annotated with @Provides
    @Singleton
    NetworkManager provideNetworkManager() {
        NetworkManager networkManager = NetworkManager.getInstance(context);
        return networkManager;
    }

    @Provides  // Dagger will only look for methods annotated with @Provides
    @Singleton
    Gson provideGson() {
        GsonBuilder gsonBuilder = new GsonBuilder();
        gsonBuilder.setFieldNamingPolicy(FieldNamingPolicy.LOWER_CASE_WITH_UNDERSCORES);
        gsonBuilder.excludeFieldsWithoutExposeAnnotation();
        return gsonBuilder.create();
    }
}


Ok now create interface for this Module which will work as component for it. in the example i have created DashboardActivityComponent which having only one method inject. Inject method is require in component because in that you will pass context (Fragment or Activity) in which you want to perform injection. dependent classes which require object from different modules. check below code for further understanding.


package com.androprogrammer.dagger2sample.domain.di.components;


import com.androprogrammer.dagger2sample.domain.di.modules.AppModule;
import com.androprogrammer.dagger2sample.domain.di.modules.NetModule;
import com.androprogrammer.dagger2sample.ui.fragments.UserListFragment;

import javax.inject.Singleton;

import dagger.Component;


@Singleton
@Component(modules =  {NetModule.class, AppModule.class})
public interface DashboardActivityComponent {
    void inject(UserListFragment fragment);
}

UserListFragment.java
package com.androprogrammer.dagger2sample.ui.fragments;

import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.widget.RecyclerView;
import android.text.TextUtils;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.android.volley.Request;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.androprogrammer.dagger2sample.AppController;
import com.androprogrammer.dagger2sample.R;
import com.androprogrammer.dagger2sample.domain.adapters.DashBoardListAdapter;
import com.androprogrammer.dagger2sample.domain.listeners.RequestListener;
import com.androprogrammer.dagger2sample.domain.listeners.RowItemElementClickListener;
import com.androprogrammer.dagger2sample.domain.network.NetworkManager;
import com.androprogrammer.dagger2sample.domain.network.RequestBuilder;
import com.androprogrammer.dagger2sample.domain.util.Utility;
import com.androprogrammer.dagger2sample.models.UserDataResponse;

import java.lang.reflect.Type;
import java.util.ArrayList;
import java.util.List;

import javax.inject.Inject;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by wasim on 8/1/2016.
 */

public class UserListFragment extends BaseFragment implements RequestListener {

 @BindView(R.id.recycler_users)
 RecyclerView recyclerUsers;
 @BindView(R.id.tv_noData)
 TextView tvNoData;
 @BindView(R.id.layout_data)
 LinearLayout layoutData;
 @BindView(R.id.layout_progress)
 LinearLayout layoutProgress;

 private View view;

 @Inject
 SharedPreferences sharedPreferences;

 @Inject
 NetworkManager networkManager;

 @Inject
 Gson gsonParser;

 private List<UserDataResponse> mUserData;
 private DashBoardListAdapter mAdapter;

 private int reqId = -1;

 private static final String TAG = "UserListFragment";

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  //Log.d(TAG, "oncreate");
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
                          Bundle savedInstanceState) {
  // Inflate the layout for this fragment
  view = inflater.inflate(R.layout.fragment_userlist, container, false);

  initializeView();

  return view;

 }

 @Override
 public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
  super.onViewCreated(view, savedInstanceState);

  userList();
 }

 @Override
 public void onStop() {
  networkManager.removeListeners(this);

  super.onStop();
 }

 private void initializeView() {

  ButterKnife.bind(this, view);

  ((AppController) getActivity().getApplication()).getmNetComponent().inject(this);
 }

 private void userList() {

  networkManager.addListener(this);
  networkManager.isProgressVisible(true);

  reqId = networkManager.addRequest(RequestBuilder.getRequestParameter(null), getActivity(),
    TAG, Request.Method.GET, RequestBuilder.SERVER_URL_API);
 }

 @Override
 public void onSuccess(int id, String response) {

  try {
   if (!TextUtils.isEmpty(response)) {

    if (id == reqId) {

     Log.d(TAG, response);

     Type listType = new TypeToken<ArrayList<UserDataResponse>>() {
     }.getType();
     mUserData = gsonParser.fromJson(response, listType);

     if (mUserData != null) {

      mAdapter = new DashBoardListAdapter(getActivity(), mUserData);

      mAdapter.setAnimateItems(true);

      recyclerUsers.setAdapter(mAdapter);

      mAdapter.setAnimateItems(false);
     } else {
      recyclerUsers.setVisibility(View.GONE);
      tvNoData.setVisibility(View.VISIBLE);
     }

    }
   }
  } catch (Exception e) {
   e.printStackTrace();
  }

 }

 @Override
 public void onError(int id, String message) {
  Utility.showToast(getContext(), message);

  //Log.d(TAG, "onError: " + message);

 }

 @Override
 public void onStartLoading(int id) {
  layoutData.setVisibility(View.GONE);
  layoutProgress.setVisibility(View.VISIBLE);
 }

 @Override
 public void onStopLoading(int id) {
  layoutProgress.setVisibility(View.GONE);
  layoutData.setVisibility(View.VISIBLE);

 }
}


I have used NetModule (Volley class object , Gson class object) and DashboardComponent in this fragment. I have created sample user list using some open api. For full application code you can check out below github link. as i am also learning about Dagger2 and its sub component and much more i will post more on Dagger2 in future. so if you find this helpful and don't want to miss about Dagger2 subscribe to my blog for more updates.

Keep coding...

Source Code

Guide For Dependency Injection Using Dagger2


Hey! Finally I decided that now a good time to get back to the blog and share what I have dealing with for last few weeks. Well I am working on Dependency injection using Dagger 2. So let's start with it what it is Dagger 2 ? and why you require to learn. during this process of learning i have googled it lot but i couldn't find proper explanation about this library and from where to start with it. So i thought it would be good if i write some thing simpler that helps others in understanding WTF going on.


Dependency Injection Using Dagger2


Quick Overview

Dagger 2 is dependency injection framework. if you don't know about dependency injection you should check this video. Dagger2 is developed by Google and it is a forked from Dagger 1. which was created by Square.

In Dagger 1 All this process happens at run time. while in case of Dagger 2 all: graph validation, configurations done at compile time.

Dagger 2 generally for code generation and is based on annotations (explained below). During program execution object graph gets created by your application. And using abstraction your application create such a dynamic flow by observing object interactions.

Dagger 1 and 2 are based on standard set of annotations (and one interface). use on injectable classes in order to to maximize re usability, test ability and maintainability of java code.

I won't talk more about Dagger 1 because it is now no more in use because Dagger2 have increased speed in injection and also allows the use of proguard.

Annotations

@Scope: Scopes are very useful and powerful way to define scope or let's say availability of any particular object. Dagger 2 has a more concrete way to do scoping through custom annotations. It can be @PerActivity, @PerFragment etc. By default it provide only @singletone scope for root component. We will see this in an example later on.

@Module: Used in classes and methods which provide dependencies. Module class provide all the dependency objects when you require and when you use @Inject annotation.

@Provide: Inside modules we define methods containing this annotation which tells Dagger how we want to construct and provide those mentioned dependencies. it i used in Module class to provide particular object.

@Inject: Request dependencies. It an be used on a constructor, a field, or a method. Dagger2 will inject object into class from specific modules.

@Component: It is main an interface from where dagger2 create object graph for module and injected classes. It enable selected modules and used for performing dependency injection. Such an interface is used by Dagger 2 to generate code.

These are the common but not all annotations for Dagger2. but for starting with it you have to learn this much only. later on next part of tutorial i will go in deeper. this is just for staring and understanding purpose. because i think its good to know how library works and weather it is useful to you or not. in next tutorial i will explain how you can add Dagger2 into your project and from simple object injection to more complex structure for dependency injection.

The official source for Dagger 2, with some documentation of it’s own:
http://google.github.io/dagger/.

Keep coding...

Data Encryption and Decryption in Android

To store some of the user preference which are going to affect user login or any app module you should store it using some kind of encryption. Because with root permission if user will access your app preference your app will become vulnerable to attack or patch.

In this tutorial i am going to use Cipher. It is mechanism provided by Java to encrypt and decrypt data. Wit some Cryptographic algorithm like Data Encryption Standard (DES) is symmetric and prone to brute-force attacks. It is a old way of encrypting data. It is replaced by Advanced Encryption Standard (AES). It is more stronger encryption standard. If you want to use a string as the key, then you should use a strong hash function like SHA-256 against that key string. It is important to encode the binary data with Base64 to ensure it to be intact without modification when it is stored or transferred.



I have created JavaEncryption class to perform all encryption and decryption orations. For working sample code in activity check out EncryptionDemo activity. which is sample activity created to display encryption and decryption result.

JavaEncryption.java
package com.androprogrammer.tutorials.util;

import android.util.Base64;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.security.GeneralSecurityException;
import java.security.InvalidAlgorithmParameterException;
import java.security.InvalidKeyException;
import java.security.KeyException;
import java.security.NoSuchAlgorithmException;

import javax.crypto.BadPaddingException;
import javax.crypto.Cipher;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

/**
 * Created by Wasim on 20-04-2016.
 */
public class JavaEncryption {

    /**
     * @param value data to encrypt
     * @param key a secret key used for encryption
     * @return String result of encryption
     * @throws UnsupportedEncodingException
     * @throws InvalidKeyException
     * @throws NoSuchAlgorithmException
     * @throws NoSuchPaddingException
     * @throws InvalidAlgorithmParameterException
     * @throws IllegalBlockSizeException
     * @throws BadPaddingException
     */
    public String encrypt(String value, String key)
            throws UnsupportedEncodingException, InvalidKeyException, NoSuchAlgorithmException, NoSuchPaddingException, InvalidAlgorithmParameterException, IllegalBlockSizeException, BadPaddingException
    {
        byte[] value_bytes = value.getBytes("UTF-8");
        byte[] key_bytes = getKeyBytes(key);
        return Base64.encodeToString(encrypt(value_bytes, key_bytes, key_bytes), 0);
    }

    public byte[] encrypt(byte[] paramArrayOfByte1, byte[] paramArrayOfByte2, byte[] paramArrayOfByte3)
            throws NoSuchAlgorithmException, NoSuchPaddingException, InvalidKeyException, InvalidAlgorithmParameterException, IllegalBlockSizeException, BadPaddingException
    {
        // setup AES cipher in CBC mode with PKCS #5 padding
        Cipher localCipher = Cipher.getInstance("AES/CBC/PKCS5Padding");

        // encrypt
        localCipher.init(1, new SecretKeySpec(paramArrayOfByte2, "AES"), new IvParameterSpec(paramArrayOfByte3));
        return localCipher.doFinal(paramArrayOfByte1);
    }


    /**
     *
     * @param value data to decrypt
     * @param key a secret key used for encryption
     * @return String result after decryption
     * @throws KeyException
     * @throws GeneralSecurityException
     * @throws GeneralSecurityException
     * @throws InvalidAlgorithmParameterException
     * @throws IllegalBlockSizeException
     * @throws BadPaddingException
     * @throws IOException
     */
    public String decrypt(String value, String key)
            throws GeneralSecurityException, IOException
    {
        byte[] value_bytes = Base64.decode(value, 0);
        byte[] key_bytes = getKeyBytes(key);
        return new String(decrypt(value_bytes, key_bytes, key_bytes), "UTF-8");
    }

    public byte[] decrypt(byte[] ArrayOfByte1, byte[] ArrayOfByte2, byte[] ArrayOfByte3)
            throws NoSuchAlgorithmException, NoSuchPaddingException, InvalidKeyException, InvalidAlgorithmParameterException, IllegalBlockSizeException, BadPaddingException
    {
        // setup AES cipher in CBC mode with PKCS #5 padding
        Cipher localCipher = Cipher.getInstance("AES/CBC/PKCS5Padding");

        // decrypt
        localCipher.init(2, new SecretKeySpec(ArrayOfByte2, "AES"), new IvParameterSpec(ArrayOfByte3));
        return localCipher.doFinal(ArrayOfByte1);
    }

    private byte[] getKeyBytes(String paramString)
            throws UnsupportedEncodingException
    {
        byte[] arrayOfByte1 = new byte[16];
        byte[] arrayOfByte2 = paramString.getBytes("UTF-8");
        System.arraycopy(arrayOfByte2, 0, arrayOfByte1, 0, Math.min(arrayOfByte2.length, arrayOfByte1.length));
        return arrayOfByte1;
    }
}



Its not that much hard as it look or as its name suggest. you can use this with even server side also. if you want to send data to server with some encryption you can use cipher. you can do with little modification in it.
For more check this Stack overflow link.

Keep coding... :)


Source code

Social SignIn [Part - 2] - Fabric SDK For Twitter Login

Fabric SDK is newer SDK introduced by Twitter for Mobile Integration. Fabric SDK comes with many combined projects like Twitter Authentication For Twitter API, Crashlytics For crash reports and analysis, MoPub for advertisement etc. Before this sdk or alternative of this is Twitter4J library for Twitter API.

androprogrammer.com


This is 2nd Part of tutorial series so i am not going through all project setup steps you can find it at Social SignIn [Part - 1] - Integrate Google plus in Android App. To add Twitter authentication in your application you have to create application at Fabric.io and you can configure about which project you want to integrate into your project from Fabric sdk. Once you completely create application it will even help you to integrate Fabric sdk using Android Studio Plugins.

Once it gets installed  you can see icons like this image in toolbar. 

Just click on it and it will start like setup wizard you just have to click next. if you don't have developer account it will even create for you from Android Studio Plugin.


Wow That's easy... right ?

No, once you integrate all those things into project you might come across gradle error like this.
Error:Execution failed for task ':app:fabricGenerateResourcesDebug'.
> Crashlytics Developer Tools error.
Don't worry just comment this line in app > build.gradle file.
apply plugin: 'io.fabric'

If you only want to add Twitter login then only comment it. if you want other packages also then you have to use Fabric sdk. So now setup is done now let's see how you can add twitter button in your layout. If you want same twitter button added by Fabric sdk in your project you can skip this step. In this tutorial i have created TwitterLoginHelper class which actually does all things for me and for my view it just return result of that. But with TwitterLoginButton you don't have to do any thing. it has setCallBack method which allows you to get result into activity. but i am following MVP where my view don't know about callbacks and all it just consume result after all manipulation. Have look at my TwitterLoginHelper class.

TwitterLoginHelper.java 
package com.androprogrammer.socialsignin.util.helpers;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.androprogrammer.socialsignin.listeners.SocialConnectListener;
import com.androprogrammer.socialsignin.model.UserLoginDetails;
import com.twitter.sdk.android.Twitter;
import com.twitter.sdk.android.core.Callback;
import com.twitter.sdk.android.core.Result;
import com.twitter.sdk.android.core.TwitterException;
import com.twitter.sdk.android.core.TwitterSession;
import com.twitter.sdk.android.core.identity.TwitterAuthClient;
import com.twitter.sdk.android.core.services.AccountService;

/**
 * Created by Wasim on 24-Jan-16.
 */
public class TwitterLoginHelper {

    private TwitterAuthClient client;

    private AppCompatActivity activity;
    private UserLoginDetails userData;

    private SocialConnectListener userCallbackListener;

    private int identifier;
    private static final String TAG = "TwitterLoginHelper";

    public void createConnection(AppCompatActivity mActivity) {

        this.activity = mActivity;
        userData = new UserLoginDetails();
        client = new TwitterAuthClient();

    }

    public TwitterAuthClient getClient() {
        return client;
    }

    public void onActivityResult(int requestCode,int resultCode, Intent data) {

        client.onActivityResult(requestCode,resultCode,data);

    }

    public void signIn(final int mIdentifier) {

        if (client != null)
        {
            identifier = mIdentifier;
            client.authorize(activity, new Callback <twittersession>() {
                @Override
                public void success(Result <twittersession> twitterSessionResult) {
                    Log.d(TAG, "Logged with twitter");
                    final TwitterSession session = twitterSessionResult.data;

                    AccountService ac = Twitter.getApiClient(twitterSessionResult.data).getAccountService();
                    ac.verifyCredentials(true, true, new Callback <com .twitter.sdk.android.core.models.user>() {
                        @Override
                        public void success(Result <com .twitter.sdk.android.core.models.user> result) {

                            userData.setIsSocial(true);
                            userData.setIsAndroid(true);
                            userData.setTwittersLogin(true);
                            userData.setTwitterID(String.valueOf(session.getUserId()));
                            userData.setFullName(result.data.name);
                            //userData.setEmail(result.data.email);
                            userData.setEmail(getUserEmail(session));
                            userData.setUserImageUrl(result.data.profileImageUrl);

                            if (userCallbackListener != null)
                            {
                                userCallbackListener.onUserConnected(identifier,userData);
                            }
                        }

                        @Override
                        public void failure(TwitterException e) {

                            if (userCallbackListener != null)
                            {
                                userCallbackListener.onConnectionError(identifier,e.getMessage());
                            }

                        }
                    });

                    /**/


                }

                @Override
                public void failure(TwitterException e) {
                    Log.e(TAG, "Failed login with twitter");
                    e.printStackTrace();
                    if (userCallbackListener != null)
                    {
                        userCallbackListener.onConnectionError(identifier,e.getMessage());
                    }
                }
            });
        }

    }

    public void signOut()
    {
        Twitter.getSessionManager().clearActiveSession();
    }

    public void setUserCallbackListener(SocialConnectListener userCallbackListener) {
        this.userCallbackListener = userCallbackListener;
    }

    private String getUserEmail(TwitterSession session)
    {
        final String[] userEmail = new String[1];

        client.requestEmail(session, new Callback <string>() {
            @Override
            public void success(Result <string> result) {
                // Do something with the result, which provides the email address
                Log.d(TAG,"Email found - " + result.toString());
                userEmail[0] = result.data;
            }

            @Override
            public void failure(TwitterException exception) {
                // Do something on failure
                Log.d(TAG,"Email not found - " + exception.getMessage());
                userEmail[0] = "";
            }
        });

        return userEmail[0];
    }
}


This class actually does every thing for me and it is like central class for all operation of Twitter. you can create method here for getTweets or user timeline etc. benefits of such way is you don't have to create Twitter client object for different task into different classes. To get user email your app has to be on their whitlist applications.  To request email you have to submit this form.

Well now have look at below code where you can see how i have user this class.

private void startTwitterLogin() {
 Log.d("onclick", "clicked");
 if (Utility.isConnectivityAvailable(LoginActivity.this)) {
  runOnUiThread(new Runnable() {
   @Override
   public void run() {
    layout_full_twitter.setBackgroundColor(getResources().getColor(R.color.view_disable));
    layout_full_twitter.setEnabled(false);
    layout_twitter.setVisibility(View.GONE);
    pb_twitterLoader.setVisibility(View.VISIBLE);
   }
  });

  twitterHelper.createConnection(LoginActivity.this);
  twitterHelper.signIn(TWITTER_SIGN_IN);

 } else {
  Utility.showToast(LoginActivity.this,getString(R.string.msg_noInternet));
 }
}

So That's it from my side. this tutorial only covers Twitter authentication but for more like get tweets or timeline or post tweet etc subscribe to our news latter so you can get more tutorials in your inbox.

I have created this project in Kotlin language also so if you want please check out here.

Source Code

Keep coding... :)