Saturday, March 11, 2017

Android TabLayout Tutorial - Material Design Support Library

TabLayout is excellent user experience design component to arrange heterogeneous data in similar fashion aka categorization. Even Google Play store categorize Apps, Games, Magazines apps under tabs. Drilling down in depth Apps are categorized as Top Paid Apps, Free Apps, Trending Apps and even more as Sliding Tabs. Tabs became famous when they were introduced in Google I/O iosched application where it was implemented using SlidingTabLayout with help of viewpager component, co-ordinating the both working TabLayout was born and brought to Support library as plug and play UI component.




Download:

You can check out the source code from github repo.

Use case:

  1. When you are able categorize different types of tag containing huge amount of similar data
  2. Manage different options as tabs under single activity

Prerequisites:

  1. Android Studio with Appropriate SDK installed - Installation Steps for Ubuntu 16.04
  2. Android Support Repository installed via SDK manager
  3. Create New Android Studio project

Getting Started:

compile 'com.android.support:appcompat-v7:25.2.0'
compile 'com.android.support:design:25.2.0'
compile 'com.android.support:support-v4:25.2.0'    

Add these dependencies to buid.gradle file and hit the gradle sync button. Once you've synced these libraries and methods are available for you in offline.

Adding XML layout:

Setting up Tablyout for your application is pretty simple and straight forward. open your main activity.xml file and start typing the sample code given below.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ivisionblog.apps.materialtabsexample.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />
</LinearLayout>
Here AppBarLayout contains Toolbar and TabLayout which co-ordinates the scrolling behavior, and then Viewpager to help to manage different fragments corresponding to the tabs by managing memory efficiently.

Bind Fragments to Tabs:

After creating XML design layout, we need to bind layout to corresponding Fragments with Tabs using Adapter. So, we need to create TabAdapter to hold all our fragments which is used by viewpager to manage those fragments and its corresponding memory.

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

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

        Toolbar mtoolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mtoolbar);
        getSupportActionBar().setTitle("Customer App");

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        addFragmentsToViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

    }
    private void addFragmentsToViewPager(ViewPager viewPager) {
        TabAdapter adapter = new TabAdapter(getSupportFragmentManager());
        adapter.addFragment(new CustomersFragment(), "Customers");
        adapter.addFragment(new ContactsFragment(), "Contacts");
        viewPager.setAdapter(adapter);
    }

}

TabAdapter.java:

class TabAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public TabAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}
Thus above code maintains fragment and title as List which is extended from FragmentPagerAdapter and override the getItem and getCount method to implement. Whenever Viewpager(While swipeing or changing the tabs) requires the Fragment it calls the getItem method and which returns the Fragment to inflate into the view.

Sample Fragment:

I've added sample Fragment containing Recyclerview which is populated with Contacts data with Contacts Adapter and bind the data into the Recyclerview single contact view. The most important thing is it's good to write the recyclerview implementation in onActivityCreated method inside the fragment.


public class ContactsFragment extends Fragment {

    private RecyclerView mRecyclerview;

    public ContactsFragment() {
        // Required empty public constructor
    }

    public static ContactsFragment newInstance() {
        ContactsFragment fragment = new ContactsFragment();
        Bundle args = new Bundle();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

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

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mRecyclerview = (RecyclerView) getActivity().findViewById(R.id.contactlist);

        ContactsAdapter contactsAdapter = new ContactsAdapter(generateData());
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getContext());
        mRecyclerview.setLayoutManager(layoutManager);
        mRecyclerview.setAdapter(contactsAdapter);
    }

    private ArrayList<ContactsModal> generateData(){
        ArrayList<ContactsModal> contactsModals = new ArrayList<>();

        contactsModals.add(new ContactsModal("Midhun Vignesh S","987654321"));
        contactsModals.add(new ContactsModal("Shivasurya S","987654321"));
        contactsModals.add(new ContactsModal("Aswin Vayiravan","987654321"));
        contactsModals.add(new ContactsModal("Muthu Alagappan M","987654321"));
        contactsModals.add(new ContactsModal("SriramaMoorthy S","987654321"));
        contactsModals.add(new ContactsModal("Puviyarasu V","987654321"));
        contactsModals.add(new ContactsModal("Arun Kumar K R","987654321"));
        contactsModals.add(new ContactsModal("Venkat Raman","987654321"));

        return contactsModals;
    }
}
    

Sample RecyclerView Adapter & Holder:

Check out the sample recyclerview adapter and holder class to support our recyclerview which is embedded in our fragment xml file.

public class ContactsAdapter extends RecyclerView.Adapter<ContactsAdapter.ContactsHolder> {

    private ArrayList<ContactsModal> mContactsModals;
    private FragmentManager mFm;

    public ContactsAdapter(ArrayList<ContactsModal> contactsModals){
        mContactsModals = contactsModals;
    }

    @Override
    public ContactsHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        Context context = parent.getContext();
        LayoutInflater inflater = LayoutInflater.from(context);

        View contactView = inflater.inflate(R.layout.single_contact, parent, false);

        ContactsHolder viewHolder = new ContactsHolder(contactView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ContactsHolder holder, int position) {
        ContactsModal contact = mContactsModals.get(position);

        holder.mPhoneView.setText(contact.getmPhoneNumber());
        holder.mContactsNameView.setText(contact.getmName());
    }

    @Override
    public int getItemCount() {
        return mContactsModals.size();
    }


    public static class ContactsHolder extends RecyclerView.ViewHolder{

        TextView mContactsNameView;
        TextView mPhoneView;

        public ContactsHolder(View itemView) {
            super(itemView);
            mContactsNameView = (TextView) itemView.findViewById(R.id.nameView);
            mPhoneView = (TextView) itemView.findViewById(R.id.phoneNumberView);
        }

    }
}

And finally Fragment and single contact xml file code goes below,

<FrameLayout 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"
    tools:context="com.ivisionblog.apps.materialtabsexample.fragments.ContactsFragment">
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/contactlist"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>
</FrameLayout>
Single Contact XMl file which used by contacts adapter to inflate inside recyclerview,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"
    android:background="?android:attr/selectableItemBackground"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="match_parent"
                android:src="@mipmap/ic_launcher_round"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="8"
            android:orientation="vertical"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="match_parent"
                android:text="Shivasurya S"
                android:textSize="18sp"
                android:layout_marginTop="15dp"
                android:layout_marginLeft="15dp"
                android:textStyle="bold"
                android:id="@+id/nameView"
                android:layout_height="wrap_content" />
            <TextView
                android:layout_width="match_parent"
                android:text="9788029400"
                android:textSize="15sp"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="15dp"
                android:id="@+id/phoneNumberView"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:background="#e7e7e7"
        android:layout_marginTop="5dp"
        android:layout_height="3dp"/>
</LinearLayout>
Thus, We have successfully integrated Tabs with Recyclerview inside fragments in our application. If you want customization of tabs in your application you can check the table and attribute into your TabLayout xml code as app:attribute namespace

The most important properties available are listed below:
NameOptionsDescription
tabBackground@drawable/imageBackground applied to the tabs
tabGravitycenterfillGravity of the tabs
tabIndicatorColor@color/blueColor of the tab indicator line
tabIndicatorHeight@dimen/tabhHeight of the tab indicator line
tabMaxWidth@dimen/tabmaxwMaximum width of the tab
tabModefixedscrollableSmall number of fixed tabs or scrolling list
tabTextColor@color/blueColor of the text on the tab

Hope you have enjoyed this post, checkout official Google Android documentation for further updates in forcoming support library versions. Feel free to comment below for doubts or chat with me in Google+/Facebook or drop me e-mail for replies. Share is care.

Friday, March 10, 2017

Android Bottom Sheet Example - Android Support Library Tutorial

Bottom Sheets is excellent user experience design component when comparing long press dialog pop-up box, context menu where the user can consume options easily from the bottom with attractive and meaningful user interface. So, let us dive into the implementation of Bottom Sheets in the Android application using official android support library.


Android Bottom Sheet Example - Android Support Library Tutorial

Prerequisites:

  1. Android Studio and SDK installed - How to install android studio
  2. Bottom Navigation Drawer Tutorial - If you're interested check out this article

Getting Started:

Add support library dependency in build.gradle file and sync it via android studio

compile 'com.android.support:design:25.2.0'
compile 'com.android.support:support-v4:25.2.0'    
Use gradle sync to download all the support libraries and import to your project.

Adding Layout: 

In order to add Bottom sheets to the activity, NestedScrollView is used with additionally bottom sheet behaviour with other options. check out the layout xml file below.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.ivisionblog.apps.bottomsheetexample.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/recyclerview"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:clipToPadding="true"
        app:behavior_hideable="true"
        android:elevation="14dp"
        android:background="@android:color/holo_blue_light"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Bottom Sheet behavior is adopted for the nested scroll view with attribute named as app:layout_behavior which implements the bottom sheet behavior.

Java Implementation:

We'll try to add Bottom Sheet dialog box behavior in this tutorial, simply extend your fragment class with BottomSheetDialogFragment and start implementing the onCreateView method for building the fragment user interface, check the code below for understanding.



public class BottomDialogFragment extends BottomSheetDialogFragment {
    public static BottomDialogFragment getInstance() {
        return new BottomDialogFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view =  inflater.inflate(R.layout.bottom_sheet_fragment, container, false);
        ((TextView)view.findViewById(R.id.name)).setText("Elon Musk");
        return view;
    }
}

Thus this will help in creating fragment and inflating into the bottom sheet view, now let us see how to control the bottom sheet from our activity by responding to user clicks. Since i've used Recyclerview added click event and binding the bottom sheet behavior with recyclerview click event.


public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private BottomSheetBehavior mBottomSheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));

        View bottomSheet = findViewById( R.id.bottom_sheet );
        mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
        mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                    mBottomSheetBehavior.setPeekHeight(0);
                }
            }

            @Override
            public void onSlide(View bottomSheet, float slideOffset) {

            }
        });
        ContactsAdapter contactsAdapter = new ContactsAdapter(generateData(),mBottomSheetBehavior,getSupportFragmentManager());
        mRecyclerView.setAdapter(contactsAdapter);
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

    }
}

Bottom Sheet behavior based on Recyclerview click Event:

Now let us map recyclerview click event with bottom sheet behavior event, so that whenever it is clicked bottom sheet opens up with transition from down. check the Recyclerview adapter code for detailed understanding.


 @Override
    public void onBindViewHolder(ContactsHolder holder, int position) {
        ContactsModal contact = mContactsModals.get(position);

        holder.mPhoneView.setText(contact.getmPhoneNumber());
        holder.mContactsNameView.setText(contact.getmName());
        holder.mLinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                BottomDialogFragment bottomSheetDialog = BottomDialogFragment.getInstance().getInstance();
                bottomSheetDialog.show(mFm, "Custom Bottom Sheet");
            }
        });
    }

Bottom Sheet Useful Methods:

  1.  BottomSheetDialog.show() - To open the Bottom sheet dialog from hidden state to expanded state
  2.  BottomSheetBehavior.setState() - To set the state of the bottom sheet behavior from java code based on events.
  3. BottomSheetBehavior.setPeekHeight(int) - To set the Peek Height of the bottom sheet from the bottom.  
For full working sample, follow the Github repo. Just clone and open in android studio to execute the bottom navigation drawer view android example application. This Bottom Sheet view is bundled with Android support library officially and it's worth trying out in your application.

Hope you have enjoyed the post, post you own thoughts, additional points as comments. For complete code, projects, hugs/bugs just drop me mail/ chat in Facebook/Google+. share is care.

Thursday, March 09, 2017

Bottom Navigation Drawer view Android Example - Android Support Library Tutorial

A few days back tried Bottom Navigation View from official support library for Android and 
got some good impression over it and try to solve problems like lifecycle management while switching between fragments or bottom navigation view tabs. So, let us dive into the topic to configure Bottom Navigation Drawer view for android app.

Bottom Navigation Drawer view Android Example - Android Support Library Tutorial

Prerequisites :

  1. Android Studio and SDK installed - How to install android studio

Getting Started

Note: If you're using Android studio 2.3 latest version as of March 2017 you can create bottom navigation view directly from New => Activity Gallery.

Add support library dependency in build.gradle file and sync it via android studio.

compile 'com.android.support:design:25.2.0'
compile 'com.android.support:support-v4:25.2.0'    
Use gradle sync to download all the support libraries and import to your project.

Adding Layout: 

We need to wrap the bottom navigation view with the Linear layout and make it as a bottom with gravity option so that it can be meaningful as the name specifies.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ivisionblog.apps.bottomnavigationdrawer.MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">


    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

</LinearLayout>

The above XML code contains linear layout with Framelayout and bottom navigation view. Frame layout contains the fragments which is yet to be replaced while clicking the bottom tabs.

Adding menu navigation with Icon:

Now we can add navigation icons with title via predefined xml file for the bottom navigation drawer view. 
  1. android:icon represents the icon present in the navigation drawer
  2. android:title represents the title below the icon in the bottom navigation drawer
  3. android:checked represent the currently selected icon 
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:checked="true"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

Java code Implementation:

Now take reference of the xml view and setting bottom navigation view with listener. check out the code below,

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

        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
        changeFragment(new HomeFragment());
  }

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    changeFragment(new HomeFragment());
                    return true;
                case R.id.navigation_dashboard:
                    changeFragment(new ButtonFragment());
                    return true;
                case R.id.navigation_notifications:
                    changeFragment(new ItemFragment());
                    return true;
            }
            return false;
        }

    };

    private void changeFragment(Fragment fm){
        android.support.v4.app.FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.content, fm);
        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
        ft.addToBackStack(null);
        ft.commit();
    }

As you can check the above code in which, on Bottom Navigation Drawer clicks are handled and changed the fragment accordingly with Fragment manager replace methods.

For Full working sample, follow the Github repo. Just clone and open in android studio to execute the bottom navigation drawer view android example application. This Bottom Navigation Drawer view is bundled with Android support library officially and it's worth trying out in your application.

Hope you have enjoyed the post, post you own thoughts, additional points as comments. For complete code, projects, hugs/bugs just drop me mail/ chat in Facebook/Google+. share is care.

Tuesday, March 07, 2017

How To Install and Use Android Studio on Ubuntu 16.04

This week started with frustrating incident my windows machine crashed and that result in complete loss of data. Thanks to +Aswin Vayiravan  for rescuing me and suggested me to go completely for ubuntu environment for productivity.

Android Studio is complex software from Google for Android developers to build android apps for phone, tablet, wearables, glasses, TV and android things. So, let us see how to install and use android studio on Ubuntu 16.04 machine. Installing Android studio is'nt big task because the whole process has become simpler nowadays. Lets's dive into the step by step tutorial.

How To Install and Use Android Studio on Ubuntu 16.04

Prerequisites : 

  • 64 Bit Ubuntu Machine.
  • Sudo user access and active network connection.

Step 1 : Installing Dependencies

But first, let's update the package database:
  • sudo apt-get update
Open your terminal and start typing the command. remeber that you need sudo privildge to do so below command.

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

Step 2 : Download Android Studio

Visit Official Android Studio Developer page - Link and start downloading Android Studio Zip file which will be around 400 - 500 MB.
  • Unzip the Android Studio Zip package and extract to your /home/username directory
Extract archive.
$ unzip android-studio-ide-145.3360264-linux.zip -d ~/bin
$ sudo ~/bin/android-studio/bin/studio.sh

if necessary add chmod u+x execute permission for studio shell script file

Step 3 : Android Studio Customization

After executing the above command now, Android studio automatically starts up and asks for customization of IDE and installing relevant android sdk for network.

1) Click Next to start

Installation step - How To Install and Use Android Studio on Ubuntu 16.04

2) Now select Standard in Install type while installing android studio in ubuntu 16.04. This will auto configure for you without wasting any time.


Installation step - How To Install and Use Android Studio on Ubuntu 16.04

3) Now this is to show a review of the Android SDK verification screen where you would be shown amount of SDK to be installed via internet. use some good network connection to download all those relevant SDK for development.
Installation Step - How To Install and Use Android Studio on Ubuntu 16.04

4)  Android studio detects whether your machine and OS can run emulator for testing android apps and automatically checks the virtual device image file for download. I strongly recommend you to try latest virtual device 7.1 Android Nougat for very fast and speed emulator for testing.

Installation Step - How To Install and Use Android Studio on Ubuntu 16.04

5) Click Finish and now the download starts for you.

Installation Step - How To Install and Use Android Studio on Ubuntu 16.04

After downloading click finish and now Android Studio is set  ready to use for Development purpose. Check for updates via Help -> check for updates in Android studio for regular updates. because improvised android studio versions are much speeder that older one which i felt in my own personal experience.

Installation Step - How To Install and Use Android Studio on Ubuntu 16.04


To make you more productive use these below plugins,
  1.  Android Wifi Debugging - Link - This allows you to connect to Android phone without any USB connection for debugging, but connected in same network
  2.  SVG2VectorDrawables - Link - This plugin allows you to convert SVG to drawables without leaving Android studio

Conclusion

There's a whole lot more to Android studio than has been given in this article, but this should be enough to getting you started working with it on Ubuntu 16.04. Like most open source projects, Android studio is built from a fast-developing Android application, so make a habit of visiting the project's blog page for the latest information.