Firebase Analytics

Firebase Analytics is a measurement solution that provides information free apps on using the app and user interaction with the event logs within the app. In addition, we can define custom audiences in the Firebase console according data we want to target.

firebase_analytics

Firebase collects two main types of information:

  • Events: What is happening within our application as system events, user actions or errors.
  • User Properties: This information is used to segment the user who is using the application as language or geolocation.

To use Firebase Analytics in our app we have to add the ‘firebase-core’ library which already included the analytical module. To integrate our application with Firebase we can follow the previous post.

In the activity (or activities) where we will use the statistics must initialize:

private FirebaseAnalytics firebaseAnalytics = FirebaseAnalytics.getInstance(context);

Once we have initialized the Firebase instance can already use it to send the statistics we want to register. We can record both custom and predefined events. Predefined events are very common to several applications. We can see a list of predefined events on the link. We have to record only important events in our app.

For this, we must use the method ‘LogEvent’ that accepts a (predefined or custom) event and an object of type Bundle containing more statistical parameters.

Bundle bundle = new Bundle();
bundle.putString(FirebaseAnalytics.Param.ITEM_ID, id);
bundle.putString(FirebaseAnalytics.Param.ITEM_NAME, name);
firebaseAnalytics.logEvent(FirebaseAnalytics.Event.SELECT_CONTENT, bundle);

Another example:

Bundle params = new Bundle();
params.putString("user_id", id);
params.putString("user_name", name);
firebaseAnalytics.logEvent("user", params);

Finally, we can include data concerning users, for example tastes or trends.

mFirebaseAnalytics.setUserProperty("hobby", user_hobby);

Analytics can analyze easily user interactions in our app and help us to detect the most important sections and less-used parts of our app.

Advertisements

An Introduction to Firebase

Firebase is a suite of tools to help us develop our mobile application. Google tries with this set of tools that developers don’t use third-party libraries when we add new functionality to our app. We can even mount a server simply and easily in a few steps without knowing any other programming language.

firebase

The requirements to develop our app are:

  • Our application must support the API 2.3 (Gingerbread) as minimum version of Android.
  • Use Google Play Services 9.0 version or higher.
  • Having installed the SDK Google Play services.

We must register our project in Firebase console. We click on New Project and enter a name to identify the project and the country where we live.

Now we need to register our Android application within our project in Firebase.

At the first step, we will be asked for the name of our application package. It is important to enter the exact name of the package that you are using in your app. It can only be set when you create an app to your Firebase project. Also, and optionally, you can enter a nickname and a signing certificate debug SHA-1 to try developing some features (dynamic links, invitations and support login Google in Auth).

At the second step, configuration file is downloaded automatically and we must to add in our Android project. Switch to Android Studio Project view to see the ‘root’ directory of your project. Move the ‘google-services.json’ file that you just downloaded in the ‘root’ module of your Android application directory.

android_studio_project_panel2x

Finally, we must to integrate Firebase libraries in our Android project. To do it, we should modify our ‘build.gradle’ files.

  • In the ‘build.gradle’ main root directory must be added:
    buildscript {
       // ...
       dependencies {
         // ...
         classpath 'com.google.gms:google-services:3.0.0'
       }
    }
    
  • And in the ‘build.gradle’ module where we will use Firebase we will include the following lines:
    android {
      // ...
    }
    
    dependencies {
      // ...
      compile 'com.google.firebase:firebase-core:9.6.1'
    }
    
    // ADD THIS AT THE BOTTOM
    apply plugin: 'com.google.gms.google-services'
    

    Analytical functionality is already included in ‘firebase-core’ library, but we can add more libraries to include more Firebase functionality.

Gradle dependency Service
com.google.firebase:firebase-database:9.6.1 Analytics
com.google.firebase:firebase-database:9.6.1 Realtime Database
com.google.firebase:firebase-storage:9.6.1 Storage
com.google.firebase:firebase-crash:9.6.1 Crash Reporting
com.google.firebase:firebase-auth:9.6.1 Authentication
com.google.firebase:firebase-messaging:9.6.1 Cloud Messaging / Notifications
com.google.firebase:firebase-config:9.6.1 Remote Config
com.google.firebase:firebase-invites:9.6.1 Invites / Dynamic Links
com.google.firebase:firebase-ads:9.6.1 AdMob
com.google.android.gms:play-services-appindexing:9.6.1 App Indexing

Change font to tabs of a TabLayout

If you want to divide your content into subcategories you should use tabs or tabs in your Android application. The TabLayout is a component that facilitates switching between contents of a section.

There are many other blog post where they talk about how to add this component to your application and how to style. The purpose of this post is to explain that there are possible ways to change the font of text for each tab.

The first and the fastest way is to run the following method to change the text font for all tabs from the children of TabLayout.

private void changeTabsFont() {
  ViewGroup childTabLayout = (ViewGroup) tabLayout.getChildAt(0);
  for (int i = 0; i < childTabLayout.getChildCount(); i++) {
    ViewGroup viewTab = (ViewGroup) childTabLayout.getChildAt(i);
    for (int j = 0; j < viewTab.getChildCount(); j++) {
      View tabTextView = viewTab.getChildAt(j);
      if (tabTextView instanceof TextView) {
        Typeface typeface = Typeface.createFromAsset(getAssets(), "fonts/gotham-ultra.ttf");
        ((TextView) tabTextView).setTypeface(typeface);
        ((TextView) tabTextView).setTextSize(TypedValue.COMPLEX_UNIT_DIP, getResources().getDimension(R.dimen.text_small));
      }
    }
  }
}

With this method we can easily change the font of all tabs of TabLayout component.

Second way is customizing our custom tabs defining our own xml.
We need to define our custom TextView and set the font with the ‘setTypeface’ method.


public class TabTextView extends TextView {

  private final Context context;

  public TabTextView(Context context) {
    super(context);
    this.context = context;

    init();
  }

  public TabTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;

    init();
  }

  public TabTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.context = context;

    init();
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public TabTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    this.context = context;

    init();
  }

  private void init() {
    setTypeface(Typeface.createFromAsset(context.getAssets(),"fonts/gotham-ultra.ttf"));
  }
}

To define the view of each tab we have to create a xml with out custom TextView.


<?xml version="1.0" encoding="utf-8"?>
<com.example.ui.textviews.TabTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab_item" android:layout_width="match_parent" android:layout_height="match_parent" android:textColor="@color/white" android:gravity="center" android:textSize="@dimen/text_14" />

At the end, in our activity we inflate our custom view and add it to the TabLayout as a Tab. The following code shows how to add a custom tab.


TabTextView tabTextView = (TabTextView) inflater.inflate(R.layout.tab_toolbar_item, null);
tabTextView.setText(titleTab);

TabLayout.Tab tab = tabLayout.newTab().setCustomView(tabTextView);
tabLayout.addTab(tab, isFirstSelectedTab);

Changing the Status Bar aspect

Android has several ways to customize the status bar. Depending on the API version of the device in which our application is installed, the status bar will have some configuration options.

Coloring the status bar

Since Material Design theme was added in Android 5.0 (Lollipop), we have the option to change the color of the status bar to display the same colors of our application.

To do this, in our XML style must add the following lines:

<style name="MainAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--darker variant for the status bar and contextual app bars-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

screenshot_api_21_color

Colored status bar in Lollipop

 Turning transparent the Status bar

Android gives us the option to put the status bar as transparent in our application. In Lollipop, we get the status bar all transparent, but in Kitkat, Android will add a black transparency.

To achieve it, we must distinguish between the versions of Android 19 () and 21 (Lollipop)  because they use different ways to perform it. We have to create two new value folders for the api version 19 and 21.

assets001

In the main style XML stays as follow:

<style name="AppTheme" parent="MainAppTheme"/>
<!-- Base application theme. -->
<style name="MainAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Your app branding color for the app bar -->
<item name="colorPrimary"&gt;@color/colorPrimary&lt;/item&gt;
<!-- Darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!-- Theme UI controls like checkboxes and text fields -->
<item name="colorAccent">@color/colorAccent</item>
</style>

Two styles are defined in the main XML. ‘MainAppTheme’ style has the shared theme attributes and ‘MainAppTheme’ style has the unique attributes per API version.

The style XML created in the values-v21 folder  has:

&lt;style name="AppTheme" parent="MainAppTheme"&gt;
&lt;item name="android:statusBarColor"&gt;@android:color/transparent&lt;/item&gt;
&lt;/style&gt;

The style XML created in the values-v21 folder has:

<style name="AppTheme" parent="MainAppTheme">
<item name="android:windowTranslucentStatus">true</item>
</style>

If we want to turn transparent the status bar, we have to add the following line in the onCreate method of each activity.

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
screenshot_api_19

Black Transparent Status Bar in Kitkat

screenshot_api_16

Transparent Status Bar in Lollipop

You can take a look in this repository of Github .