Understanding Request From API.AI

Connecting your Api.ai agent to your backend means having an intermediate webhook which would get a request from your agent whenever a intent is triggered. When intent is triggered Api.ai would send a request to our backend along with json of parameters it extracted from the conversation of you use the try it now console of Api.ai Agent we created then when an intent is triggered you can see a button at the bottom which says Show Json

,

By clicking on Show JSON you would be able to view the JSON format API.AI would be sending to our backend, so lets have a look at the format.

https://api.themoviedb.org/3/genre/movie/list?api_key=<<api_key>>&language=en-US

Now lets understand whats happening here, First we have a function.
Function : router.get()
Parameters :
1. location/url - Which url would this get request would be handling
2. Request Handler function - function(req, res, next)
req -  holds the incoming request
res - Is used to provide response to the requests.

Now If you go ahead and add a new route in users.js as following 

Step 8. Now open your your routes folder and add webhooks.js file as shown below this is where we are going to handle our API.AI incoming requests and provide a response. Read the comments for better understanding.



Now lets test our app locally, open cmd at your root folder of the express app we created and run the following command

So we have successfully created our Facebook bot which can handle basic conversations and extract out the parameters required to fulfill user requirement i.e movie recommendation.

In the next part we would connect this bot to movie API from TheMovieDb and thus provide user a movie recommendation as we had decided.

Here is the next part of this tutorial - How to make a node.js backend for Facebook Messenger Chat Bot

compile 'com.android.support:design:22.2.0

Let Us Understand Sliding Tabs/ Tab Layout 

Material design support library provides a class called TabLayout which is basically a view class, required to be added into you layout for creating Sliding Tabs. Most of the times you are going to add this view below your toolbar because thats where you want your Tabs to be placed. Before staring out lets have a look at what we are trying to build up in this tutorial.


As you can see the tabs viz. Home, Inbox, Star are hold by Tab Layout which is placed right below the Toolbar, below the tab layout we have a view pager which is going to be linked with tab layout to achieve the desired effect.

Steps To Build Sliding Tabs With Tab Layout

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="PrimaryColor">#2196F3</color>
    <color name="PrimaryDarkColor">#1976D2</color>
    <color name="indicator">#ecd95a</color>

</resources>

2. Now we need to create a state list selector for the tabs text, this state list selector will define the text color of the tabs when they are selected and also define the default text color (When the tab is not the selected tab) So go to res folder and create a new folder named Color. Now create a new file inside this folder and name it tab_selector.xml and add the following lines to that file.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_selected="true" android:color="@android:color/white" />
        <item android:state_focused="true" android:color="@android:color/white" />
        <item android:state_pressed="true" android:color="@android:color/white" />
        <item android:color="#d1c9c9" />
</selector>

Here the lines which define the color of text when either selected, focused or pressed are as following

<item android:state_selected="true" android:color="@android:color/white" />
<item android:state_focused="true" android:color="@android:color/white" />
<item android:state_pressed="true" android:color="@android:color/white" />

And the line below defines the default color for the text on tabs.

<item android:color="#d1c9c9" />

3. Now we need to define the style of our app for this project we are only going to define the color properties of our app, you can also define many other properties like text color, text type and font sizes and many more. To do that go to res->values->style.xml and add the following lines to your file. Again all this has been explained previously in my Toolbar tutorial.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/PrimaryColor</item>
        <item name="colorPrimaryDark">@color/PrimaryDarkColor</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

4. Now time to set up out tabs in our layout go to res->layout->activity_main.xml and add the following lines of code in your file. All we are doing here is basically we are having a relative layout as our root view inside which we are adding Toolbar, below Toolbar we have our Tab Layout and below Tab Layout we have ViewPager. We are setting the background color of the tabs to the primary color which is blue. The same color has been setup for toolbar as well.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#dfdfdf"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/toolbar"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/PrimaryColor"
        android:layout_below="@+id/tool_bar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabs"
        />

</RelativeLayout>

5. Now lets define how a single tabs content will look like, As you have seen we are not going to do anything fancy we are just having a simple text which says "Hello, This is a tab layout" which is placed in middle of the the screen. So go to res->layout and create a new layout name it tabs.xml and add the following lines of code to it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="This is a tab layout"
        android:id="@+id/textView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

6. Now we are pretty much done with the design part of the app so we can start coding it now. First of all we have added a view pager in the layout so we need to create a fragment which this view pager will hold. We are going to have three tabs but for ease of this tutorial I am only going to create one fragment which this view pager will hold and the same fragment will be shown when the tab changes. obviously you can create new fragment and add different content in them as per your requirement. We have already created the layout for the fragment (tabs.xml) now we need to code it so go to java->[package name] and create a new java class and name it TabFragment.java and add the following lines of code to that file.

package com.android4devs.slidingtabs;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Admin on 11-12-2015.
 */
public class TabFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tabs, container, false);
    }
}

7. Now as we have a view pager, we need to create an adapter for the view pager, So go to java->[package name] and create a new java class, name it ViewPagerAdapter.java and add the following lines of code to it. [Read the comments in the code bellow to understand whats happening]

package com.android4devs.slidingtabs;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
 * Created by Admin on 11-12-2015.
 */
public class ViewPagerAdapter extends FragmentStatePagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return new TabFragment();    // Which Fragment should be dislpayed by the viewpager for the given position
                                    // In my case we are showing up only one fragment in all the three tabs so we are
                                    // not worrying about the position and just returning the TabFragment
    }

    @Override
    public int getCount() {
        return 3;           // As there are only 3 Tabs
    }
   
}

8. Now we have everything in place to start coding our main activity, so go to java->[package-name]->MainActivity.java and add the following line of code to the file, [Read the comments in the file to understand whats happening]

package com.android4devs.slidingtabs;

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    //Declaring All The Variables Needed
    
    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ViewPagerAdapter viewPagerAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /*
        Assigning view variables to thier respective view in xml
        by findViewByID method
         */
        
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        /*
        Creating Adapter and setting that adapter to the viewPager
        setSupportActionBar method takes the toolbar and sets it as
        the default action bar thus making the toolbar work like a normal
        action bar.
         */
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(viewPagerAdapter);
        setSupportActionBar(toolbar);

        /*
        TabLayout.newTab() method creates a tab view, Now a Tab view is not the view 
        which is below the tabs, its the tab itself.
         */
        
        final TabLayout.Tab home = tabLayout.newTab();
        final TabLayout.Tab inbox = tabLayout.newTab();
        final TabLayout.Tab star = tabLayout.newTab();

        /*
        Setting Title text for our tabs respectively
         */
        
        home.setText("Home");
        inbox.setText("Inbox");
        star.setText("Star");

        /*
        Adding the tab view to our tablayout at appropriate positions
        As I want home at first position I am passing home and 0 as argument to 
        the tablayout and like wise for other tabs as well
         */
        tabLayout.addTab(home, 0);
        tabLayout.addTab(inbox, 1);
        tabLayout.addTab(star, 2);
        
        /*
        TabTextColor sets the color for the title of the tabs, passing a ColorStateList here makes
        tab change colors in different situations such as selected, active, inactive etc
        
        TabIndicatorColor sets the color for the indiactor below the tabs
         */
        
        tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.tab_selector));
        tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.indicator));

        /*
        Adding a onPageChangeListener to the viewPager
        1st we add the PageChangeListener and pass a TabLayoutPageChangeListener so that Tabs Selection
        changes when a viewpager page changes.
         */
        
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @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.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

9. Now if you run the project you would have a working demo of sliding tabs as shown below.



10. Now many a times you wont be needing text on tabs but you would be needing icons in place of text, Well with the TabLayout thats very easy to add as well. So to get Icons instead of text first of all copy paste your icons into your projects drawable folder, I have downloaded 

ic_home_grey.png,
ic_inbox_grey.png
ic_star_grey.png 

ic_home_white.png
ic_inbox_white.png
ic_star_white.png

grey icon for non selected tab and white for selected tab. I copy pasted all 6 icons in my project

11. Now open up MainActivity and Replace the following line of code

with the code below

home.setIcon(R.drawable.ic_home_white);
inbox.setIcon(R.drawable.ic_inbox_grey);
star.setIcon(R.drawable.ic_star_grey);

First Icon (Home) is set to white and rest to grey because by default home tab will be selected when app is going to open up.

12. Now I need to change the icons as soon as some other tab is selected by the user, for that we add a onPageListner to the ViewPager and in the method onPageSelected we change the icons appropriately. To do this open up your main activity and add the following code to it. So MainActivity.java for tabs with icon looks something like this.

package com.android4devs.slidingtabs;

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    //Declaring All The Variables Needed

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ViewPagerAdapter viewPagerAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /*
        Assigning view variables to thier respective view in xml
        by findViewByID method
         */

        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        /*
        Creating Adapter and setting that adapter to the viewPager
        setSupportActionBar method takes the toolbar and sets it as
        the default action bar thus making the toolbar work like a normal
        action bar.
         */
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(viewPagerAdapter);
        setSupportActionBar(toolbar);

        /*
        TabLayout.newTab() method creates a tab view, Now a Tab view is not the view
        which is below the tabs, its the tab itself.
         */

        final TabLayout.Tab home = tabLayout.newTab();
        final TabLayout.Tab inbox = tabLayout.newTab();
        final TabLayout.Tab star = tabLayout.newTab();

        //Setting Icons to our respective tabs

        home.setIcon(R.drawable.ic_home_white);
        inbox.setIcon(R.drawable.ic_inbox_grey);
        star.setIcon(R.drawable.ic_star_grey);

        /*
        Adding the tab view to our tablayout at appropriate positions
        As I want home at first position I am passing home and 0 as argument to
        the tablayout and like wise for other tabs as well
         */
        tabLayout.addTab(home, 0);
        tabLayout.addTab(inbox, 1);
        tabLayout.addTab(star, 2);

        /*
        TabTextColor sets the color for the title of the tabs, passing a ColorStateList here makes
        tab change colors in different situations such as selected, active, inactive etc

        TabIndicatorColor sets the color for the indiactor below the tabs
         */

        tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.tab_selector));
        tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.indicator));

        /*
        Adding a onPageChangeListener to the viewPager
        1st we add the PageChangeListener and pass a TabLayoutPageChangeListener so that Tabs Selection
        changes when a viewpager page changes.
        
        2nd We add the onPageChangeListener to change the icon when the page changes in the view Pager
         */

        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        /*
                        setting Home as White and rest grey
                        and like wise for all other positions 
                         */
                        home.setIcon(R.drawable.ic_home_white);
                        inbox.setIcon(R.drawable.ic_inbox_grey);
                        star.setIcon(R.drawable.ic_star_grey);
                        break;
                    case 1:
                        home.setIcon(R.drawable.ic_home_grey);
                        inbox.setIcon(R.drawable.ic_inbox_white);
                        star.setIcon(R.drawable.ic_star_grey);
                        break;
                    case 2:
                        home.setIcon(R.drawable.ic_home_grey);
                        inbox.setIcon(R.drawable.ic_inbox_grey);
                        star.setIcon(R.drawable.ic_star_white);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @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.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

13. Now If you run the app you would get your app running and it would look like this.



14. So with that we have a working sliding tabs demo with text as well as icons.

Bonus Tip

@Overridepublic CharSequence getPageTitle(int position) {
    switch (position){
        case 0:
            return "Home";
        case 1:
            return "Inbox";
        case 2:
            return "Star";
    }
    return "Default Text";
}

By doing so, your tabs would get title text from this method instead of setting them like

home.setText("Home");
inbox.setText("Inbox");
star.setText("Star");

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center_horizontal"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="16sp"
        android:textStyle="bold" />

</LinearLayout>

        View HomeView = getLayoutInflater().inflate(R.layout.coustom_view,null);
        ImageView iconHome = (ImageView) HomeView.findViewById(R.id.imageView);
        TextView textView = (TextView) HomeView.findViewById(R.id.textView2);
        iconHome.setImageResource(R.drawable.ic_home_grey);
        textView.setText("Home");

        View InboxView = getLayoutInflater().inflate(R.layout.coustom_view,null);
        ImageView iconIn = (ImageView) InboxView.findViewById(R.id.imageView);
        TextView textViewIn = (TextView) InboxView.findViewById(R.id.textView2);
        iconIn.setImageResource(R.drawable.ic_inbox_grey);
        textViewIn.setText("Inbox");

        View StarView = getLayoutInflater().inflate(R.layout.coustom_view,null);
        ImageView iconStar = (ImageView) StarView.findViewById(R.id.imageView);
        TextView textViewStar = (TextView) StarView.findViewById(R.id.textView2);
        iconStar.setImageResource(R.drawable.ic_inbox_grey);
        textViewStar.setText("Star");

        home.setCustomView(HomeView);
        inbox.setCustomView(InboxView);
        star.setCustomView(StarView);

        tabLayout.addTab(home, 0);
        tabLayout.addTab(inbox, 1);
        tabLayout.addTab(star, 2);