TimesSquare Calendar view for Android

12:55 PM 2 Comments

TimesSquare: a Calendar view for iOS and Android

Hello i am talking about how to integrate timesqaure calendar view today.There are few steps in order to integrate it in your project.
  1.  Download library from this link .
  2.  Include library in your project.
  3. Usage :
    Include CalendarPickerView in your layout XML.
    <com.squareup.timessquare.CalendarPickerView
        android:id="@+id/calendar_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    
    This is a fairly large control so it is wise to give it ample space in your layout. On small devices it is recommended to use a dialog, full-screen fragment, or dedicated activity. On larger devices like tablets, displaying full-screen is not recommended. A fragment occupying part of the layout or a dialog is a better choice.
    In the onCreate of your activity/dialog or the onCreateView of your fragment, initialize the view with a range of valid dates as well as the currently selected date.
    Calendar nextYear = Calendar.getInstance();
    nextYear.add(Calendar.YEAR, 1);
    
    CalendarPickerView calendar = (CalendarPickerView) findViewById(R.id.calendar_view);
    calendar.init(new Date(), new Date(), nextYear.getTime());
    
    To retrieve the currently selected date, call getSelectedDate() on the view.

Pros:

  1. This is very good option if you want to select single date and return to your activity.
  2. Very smooth scrolling.
  3. You can modify theme of calendar by changing colors in color.xml in library project.
    1 2



















    1.  <color name="calendar_active_month_bg">#1fc7fd</color>
        <color name="calendar_bg">#555555</color>
        <color name="calendar_divider">#fcc31f</color>
        <color name="calendar_inactive_month_bg">#6ddbfd</color>
        <color name="calendar_selected_day_bg">#555555</color>
        <color name="calendar_text_inactive">#fd7246</color>
        <color name="calendar_text_active">#fd7246</color>
        <color name="calendar_text_selected">#fd7246</color>
        <color name="calendar_text_unselectable">#fd7246</color>
    2.  <color name="calendar_active_month_bg">#014156</color>
        <color name="calendar_bg">#ffffffff</color>
        <color name="calendar_divider">#555555</color>
        <color name="calendar_inactive_month_bg">#027da3</color>
        <color name="calendar_selected_day_bg">#039aca</color>
        <color name="calendar_text_inactive">#ffffff</color>
        <color name="calendar_text_active">#FC541F</color>
        <color name="calendar_text_selected">#ffffff</color>
        <color name="calendar_text_unselectable">#c4c4c4</color>

Cons:

  1. It provides only one method getSelectedDate(). You can't get more information like selected cell position to do more with date cell.
  2. You can't get multi selection like you can't select all dates between first selected date to second selected date.
  3. You can't add symbol to notify special dates or can't add event symbol like birthdate.
    i.e 

 

Reference link:


    2 comments:

    Google Maps Android API V2

    12:20 PM 11 Comments

    Introduction :

    In Google map V2, You can use API calls to add markers, polygons, and overlays to a basic map, and to change the user's view of a particular map area.

    The API allows you to add these graphics to a map:



  1. Icons anchored to specific positions on the map (Markers).
  2. Sets of line segments (Polylines) for drawing shapes.
  3. Enclosed segments (Polygons), filled, unfilled or hollow.
  4. Bitmap graphics anchored to specific positions on the map (Ground Overlays).
  5. Sets of images which are displayed on top of the base map tiles (Tile Overlays). 


  6. First you must add Google Play services as an Android library project as follows:
    1. Select File > Import > Android > Existing Android Code Into Workspace and click Next.
    2. Select Browse..., enter <android-sdk-folder>/extras/google/google_play_services/libproject/google-play-services_lib, and click Finish.

    Getting Started :

    Obtaining an API Key

    If your application is registered with the Google Maps Android API v2 service, then you can request an API key. It's possible to register more than one key per project.
    To get the key
    1. In the left navigation bar, click API Access.
    2. In the resulting page, click Create New Android Key....
    3. In the resulting dialog, enter the SHA-1 fingerprint, then a semicolon, then your application's package name. For example:
      BB:0D:AC:74:D3:21:E1:43:67:71:9B:62:91:AF:A1:66:6E:44:5D:75;com.example.android.mapexample
    4. The Google APIs Console responds by displaying Key for Android apps (with certificates) followed by a forty-character API key, for example:
      AIzaSyBdVl-cTICSwYKrZ95SuvNw7dbMuDt1KG0
    5. Copy this key value. You will use it in the next step.
    Note: 
    1.  The Google Maps Android API v2 uses a new system of managing keys. Existing keys from a Google Maps Android v1 application, commonly known as MapView, will not work with the v2 API.
    2. To get SHA-1 fingerprint enter command in terminal: keytool -list -v -keystore debug.keystore

    Adding the API Key to your application

    1. In AndroidManifest.xml, add the following element as a child of the <application> element, by inserting it just before the closing tag</application>:
      <meta-data
          android:name="com.google.android.maps.v2.API_KEY"
          android:value="your_api_key"/>
      
      substituting your API key for your_api_key. This element sets the key com.google.android.maps.v2.API_KEY to the value your_api_key and makes the API key visible to any MapFragment in your application.
    2. Add the following elements to your manifest. Replace com.example.mapdemo with the package name of your application.
              <permission
                android:name="com.example.mapdemo.permission.MAPS_RECEIVE"
                android:protectionLevel="signature"/>
              <uses-permission android:name="com.example.mapdemo.permission.MAPS_RECEIVE"/>
          
    3. Save AndroidManifest.xml and re-build your application. 
    Specifying permissions
    Besides permissions required by other parts of your application, you must add the following permissions in order to use the Google Maps Android API:
    • android.permission.INTERNET Used by the API to download map tiles from Google Maps servers.
    • com.google.android.providers.gsf.permission.READ_GSERVICES Allows the API to access Google web-based services.

      <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
      
    • android.permission.WRITE_EXTERNAL_STORAGE Allows the API to cache map tile data in the device's external storage area.
    Requiring OpenGL ES version 2
    Because version 2 of the Google Maps Android API requires OpenGL ES version 2, you must add a <uses-feature> element as a child of the<manifest> element in AndroidManifest.xml:
    <uses-feature
      android:glEsVersion="0x00020000"
      android:required="true"/>
    

    Sample Code:

    Examples of how to add more robust code appear throughout this guide and in the sample code.
    1. In main.xml, add the following fragment.
      <?xml version="1.0" encoding="utf-8"?>
      <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment"/>
      
    2. In MainActivity.java, add the following code.
      package com.example.mapdemo;
      import android.app.Activity;
      import android.os.Bundle;
      public class MainActivity extends Activity {
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.main);
          }
      }
      
    3. Build and run your application. You should see a map. If you don't see a map, confirm that you've completed all of the steps appearing earlier in this document.

    Adding Map Code

    private GoogleMap mMap;
    ...
    mMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();

    Change the Map Type

    To set the type of a map, call the GoogleMap object's setMapType() method, passing one of the type constants defined in GoogleMap. For example, to display a satellite map:
    GoogleMap map;
    ...
    // Sets the map type to be "hybrid"
    map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
    

    Add a marker

    The below example demonstrates how to add a marker to a map. The marker is created at coordinates 0,0, and displays the string "Hello world" in an infowindow when clicked.
    private GoogleMap mMap;
    mMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
    mMap.addMarker(new MarkerOptions()
            .position(new LatLng(0, 0))
            .title("Hello world"));
    
    The below snippet creates a marker with a custom icon.
      private static final LatLng MELBOURNE = new LatLng(-37.81319, 144.96298);
      private Marker melbourne = mMap.addMarker(new MarkerOptions()
                                .position(MELBOURNE)
                                .title("Melbourne")
                                .snippet("Population: 4,137,400")
                                .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));
    

    Info windows

    An info window allows you to display information to the user when they tap on a marker on a map. By default, an info window is displayed when a user taps on a marker if the marker has a title set. Only one info window is displayed at a time. If a user clicks on another marker, the current window will be hidden and the new info window will be displayed. You can show an info window programmatically by calling showInfoWindow() on the target marker. An info window can be hidden by calling hideInfoWindow().

    Info window click events

    You can use an OnInfoWindowClickListener to listen to click events on an info window. You need to implement OnInfoWindowClickListener to activity.
    @Override
        public void onInfoWindowClick(Marker marker) {
               }

    Marker click events

    You can use an OnMarkerClickListener to listen for click events on the marker. To set this listener on the map, callGoogleMap.setOnMarkerClickListener(OnMarkerClickListener). When a user clicks on a marker, onMarkerClick(Marker) will be called and the marker will be passed through as an argument.

    Interacting with the map :

    The Maps API comes with some built-in UI controls that are similar to those found in the Google Maps application on your Android phone. You can toggle the visibility of these controls using the UiSettings class which can be obtained from a GoogleMap with the GoogleMap.getUiSettings method.

    Zoom controls

    The Maps API provides built-in zoom controls that appear in the bottom right hand corner of the map. These are enabled by default, but can be disabled by calling UiSettings.setZoomControlsEnabled(boolean).

    Compass

    The Maps API provides a compass graphic which appears in the top left corner of the map under certain circumstances.You can disable the compass appearing altogether by calling  UiSettings.setCompassEnabled(boolean).

    My Location button

    The My Location button appears in the top right corner of the screen only when the My Location layer is enabled. When a user clicks the button, the camera animates to focus on the user's current location if the user's location is currently known. You can disable the button from appearing altogether by callingUiSettings.setMyLocationButtonEnabled(boolean).

    Moving Camera

     The following code snippets illustrate some of the common ways to move the camera using the Maps API.
    private static final LatLng SYDNEY = new LatLng(-33.88,151.21);
    private static final LatLng MOUNTAIN_VIEW = new LatLng(37.4, -122.1);
    private GoogleMap map;
    ... // Obtain the map from a MapFragment or MapView.
    // Move the camera instantly to Sydney with a zoom of 15.
    map.moveCamera(CameraUpdateFactory.newLatLngZoom(SYDNEY, 15);
    // Zoom in, animating the camera.
    map.animateCamera(CameraUpdateFactory.zoomIn());
    // Zoom out to zoom level 10, animating with a duration of 2 seconds.
    map.animateCamera(CameraUpdateFactory.zoomTo(10), null, 2000);
    // Construct a CameraPosition focusing on Mountain View and animate the camera to that position.
    CameraPosition cameraPosition = new CameraPosition.Builder()
        .target(MOUNTAIN_VIEW)      // Sets the center of the map to Mountain View
        .zoom(17)                   // Sets the zoom
        .bearing(90)                // Sets the orientation of the camera to east
        .tilt(30)                   // Sets the tilt of the camera to 30 degrees
        .build();                   // Creates a CameraPosition from the builder
    map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

    11 comments: