TabLayout Example using ViewPager and Fragments in Android

If you are using the latest android application then you have noticed that now days android is following a design pattern. This is material design and it came with Android Lollipop (5.0). Though we can still use this design pattern for the older versions (>4.0) by using the support libraries. One of the component of material design is TabLayout. So in this TablLayout Example we will see how we can implement it in our android application.

What is TabLayout ?

Android TabLayout provides horizontal layout to display tabs. We can display more screens in a single screen using tabs. User can swipe the tabs quickly as you can see in the image below.

Creating a new project and add necessary libraries

Open Android Studio and create a new project. I have created DemoTabLayout.

After create a new project, First of all we have to need include design libraries in the dependencies section of our build.gradle file so include this libraries in your build.gradle file by below line.

Remove action bar from style

Now since we will be using Android Toolbar and TabLayout classes to show tabs, lets remove the action bar from layout by using styles,

Go to style.xml file and change the parent of theme which you are using in your app.Change parent with “Theme.AppCompat.Light.NoActionBar”. So now your style file will look like below code

Creating fragments

We are creating an application which will have three tabs, So let’s define three fragment and their layouts.

First Fragment

It’s layout

 

Second Fragment

it’s layout

Third Fragment

its layout

Now we will define a view pager adapter to create tab swipe functionality.

Now we will create an Activity named MainActivity which will hold the tabs . This Activity will have two part first is code file and second is layout file. layout file code given below

We can see above that here we add a Toolbar, second is Tablayout and third thing is Viewpager. Toolbar is for showing application name and menu icon. TabLayout is for showing Tabs and viewpager is for holding fragments. Now we write code for attach this layout with fragments in MainActivity code file. Code is given below:

That’s all, Now you can run your project.

Happy coding…

DatePicker Example in Android

In android, DatePicker is a control which will allow users to select the date by day, month and year in our application user interface.

The images of datePicker are given blow

Create DatePicker with xml

We can create DatePicker using <Datepicker> element in xml file, which is given below

There are two types of view of DatePicker

1. Complete Calendar view

2. Spinner View

Complete Calendar view :- We can create complete calendar view with below code

This is output

Spinner view :- We can create complete calendar view with below code

This is output

Now we will create an example of datePicker in which we will set date picker on edit text and we will create date picker using java code also. In this example we will create a Textview and a button also. On button click we will show date in TextView.

Create a new android application using android studio and give name DatePickerDemo.

Now Open activity_main.xml file from \res\layout path and write code which is given below

activity_main.xml

Now open MainActivity.java file and write code which is given below

MainActivity.java

In java code you can see that we set an Onclicklistener on EditText, when we click on EditText then will see calendar dialog, From which we can select date.

Output of example

That’s all . This is the final output of example.

Happy Coding…

Setup Xamarin Environment on Mac & Visual Studio

Below I have explained how to setup Xamarin environment on mac operating system step by step.

1. Download Visual studio : 

      Download Visual Studio with below link

     https://visualstudio.microsoft.com/downloads/

      

At Microsoft website, you will have three options of  Visual Studio edition to choose from. Choose one according to your need. To download Visual Studio just click on download button and an installer .dmg file will be downloaded.

2. Install Visual Studio:

   Click on downloaded dmg file and below screen will be presented

    

Select from the different Platforms you need to develop apps for on Xamarin and press the Install button. Once Visual Studio installation is complete, we need to setup environment for both Android and Apple.

3. Setup Android SDK:

    To setup Android SDK open Visual Studio and go to :-

    Tools -> SDK Manager ->Android -> Locations

    

Set path for SDK ,NDK and JDK to your local machine locations. Once correct  path is given a green tick will appear on right.This completes our Android SDK   setup.

4. Apple Setup (for both iOS and Mac apps development):

You need latest Xcode to setup Apple environment. If you have Xcode preinstalled on your machine then it automatically configures and we don’t  have to do anything. If you are installing Xcode after installation of Visual  Studio then follow below steps to setup.

a. Download latest Xcode from apple store and Install it on your machine.

b. Go to Tool -> SDK Manager -> Apple

 

Give path to your Xcode.app . You will see green check mark once the correct path is given. This completes Apple environment setup.

That is all.  Now you can start your Android and iOS development on Xamarin. Happy Coding!