Thursday, December 18, 2014

Footer coming Top of the keyboard when Softkeyboard up in Android

I am working in android application want to use common header and footer. so i tried like this. when softkeyboard up the footer coming up the top of the softkeyboard.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#fff">

    <!--  Header  Starts-->
    <LinearLayout android:id="@+id/header"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:background="@layout/header_gradient"
                  android:paddingTop="5dip"
                  android:paddingBottom="5dip">
        <!-- Logo Start-->
        <!--<ImageView android:src="@drawable/logo"-->
                   <!--android:layout_width="wrap_content"-->
                   <!--android:layout_height="wrap_content"-->
                   <!--android:layout_marginLeft="10dip"/>-->
        <!-- Logo Ends -->
    </LinearLayout>
    <!--  Header Ends -->
    <!-- Footer Start -->
    <LinearLayout android:id="@+id/footer"
                  android:layout_width="fill_parent"
                  android:layout_height="40dip"
                  android:background="@layout/footer_repeat"
                  android:layout_alignParentBottom="true">
    </LinearLayout>
    <!-- Footer Ends -->

    <!-- Login Form -->
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_below="@id/header">
        <!--  Username Label -->
        <TextView android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:textColor="#372c24"
                  android:text="Username"/>
        <EditText android:id="@+id/reg_username"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="5dip"
                  android:singleLine="true"
                  android:layout_marginBottom="20dip"
                  android:textColor="#000"/>
        <!-- Password Label -->
        <TextView android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:textColor="#372c24"
                  android:text="Password"/>
        <EditText android:id="@+id/reg_password"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:password="true"
                  android:singleLine="true"
                  android:layout_marginTop="5dip"
                  android:textColor="#000"/>
        <!-- Login Button -->
        <Button android:id="@+id/buttonLogin"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dip"
                android:isScrollContainer="false"
                android:text="Login"/>

    </LinearLayout>
    <!-- Login Form Ends -->
</RelativeLayout>
</RelativeLayout>


Solution:

I found the solution just add one attribute in your activity tag in android manifest.xml like this

If you want more detail about this attribute, please reference this:

wsoft

<activity android:windowSoftInputMode="adjustPan" . . . >


Monday, December 15, 2014

How to Tableview row dainamically in Android

I want to create tableview first i want to dispay one row when user want to another row just click the create row button.

It will created row automatically using this method.

@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    TableLayout tableLayout = new TableLayout(getApplicationContext());
    TableRow tableRow;
    TextView textView;

    for (int i = 0; i < 4; i++) {
        tableRow = new TableRow(getApplicationContext());
        for (int j = 0; j < 3; j++) {
            textView = new TextView(getApplicationContext());
            textView.setText("test");
            textView.setPadding(20, 20, 20, 20);
            tableRow.addView(textView);
        }
        tableLayout.addView(tableRow);
    }
    setContentView(tableLayout);
}

Align LinearLayout view content been shifted down in android

The weight system of LinearLayout makes using it to build rows with even spacing across the children simple and effective. However, as often as you may have done this, you might have also run into a perplexing issue that arises when the text of one or more elements inside the row gets long enough to force line wrapping.

Not only has the view content been shifted down, but the parent container isn’t sized to fit the larger height this creates, so part of the shifted view is clipped! Also notice that the view is shifted even in cases where the multiple lines don’t make the view inherently taller. This behavior makes absolutely no sense, until you understand what is actually going on under the hood. If we take a much closer look at the alignment of the child elements, something interesting emerges.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_baselineAligned="false"
    android:orientation="horizontal">
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="12dp"
        android:text="Last" />
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="12dp"
        android:text="Next" />
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="12dp"
        android:text="Reload Content" />
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="12dp"
        android:text="Exit" />
</LinearLayout>

Align RedioGroup Button in android LinearLayout Page

I am working in android application i want to align redioGroup button using linearLayout horizontal.

I tried half day to align this Rediogroup. just give layout_weight carefully. because we want to align comford all the device.

So just copy and past your xml file. you can implement like this.



<?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" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#E1E1E1"
        android:orientation="horizontal"
        android:padding="10dp"
        android:weightSum="2" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            android:text="Is your current financial year" />

        <RadioGroup
            android:id="@+id/radioGroup1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/radio0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="2dp"
                android:layout_weight=".25"
                android:checked="true"
                android:padding="5dp"
                android:text="Breakfast" />

            <RadioButton
                android:id="@+id/radio1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="2dp"
                android:layout_weight=".25"
                android:padding="5dp"
                android:text="Lunch" />
        </RadioGroup>
    </LinearLayout>

</RelativeLayout>

Thursday, December 11, 2014

Get the direction using google map in Phonegap

I am working in phonegap application i want to display the google map and get the current location and set the marker in google map.

I found the solution from stackoverflow it working goods.

Easy to implement in phonegap and jquery mobile. Just copy and past your project index.html file.

It will come google map in your divce.

Below you can find a basic example of using the Google Maps directions service in a jQuery Mobile page

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery mobile with Google maps geo directions example</title>
        <meta content="en" http-equiv="content-language">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">
            $(document).on("pageinit", "#map_page", function() {
                initialize();
            });

            $(document).on('click', '#submit', function(e) {
                e.preventDefault();
                calculateRoute();
            });

            var directionDisplay,
                directionsService = new google.maps.DirectionsService(),
                map;

            function initialize() 
            {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);

                var myOptions = {
                    zoom:10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: mapCenter
                }

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById("directions"));  
            }

            function calculateRoute() 
            {
                var selectedMode = $("#mode").val(),
                    start = $("#from").val(),
                    end = $("#to").val();

                if(start == '' || end == '')
                {
                    // cannot calculate route
                    $("#results").hide();
                    return;
                }
                else
                {
                    var request = {
                        origin:start, 
                        destination:end,
                        travelMode: google.maps.DirectionsTravelMode[selectedMode]
                    };

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response); 
                            $("#results").show();
                            /*
                                var myRoute = response.routes[0].legs[0];
                                for (var i = 0; i < myRoute.steps.length; i++) {
                                    alert(myRoute.steps[i].instructions);
                                }
                            */
                        }
                        else {
                            $("#results").hide();
                        }
                    });

                }
            }
        </script>
    </head>
    <body>
        <div data-role="page" id="map_page">
            <div data-role="header">
                <h1><a href="#">jQuery mobile - Google maps directions service</h1>
            </div>
            <div data-role="content">
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:300px;"></div>
                    <div data-role="fieldcontain">
                        <label for="from">From</label> 
                        <input type="text" id="from" value="Goteborg, Sweden"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="to">To</label> 
                        <input type="text" id="to" value="Stockholm, Sweden"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="mode" class="select">Transportation method:</label>
                        <select name="select-choice-0" id="mode">
                            <option value="DRIVING">Driving</option>
                            <option value="WALKING">Walking</option>
                            <option value="BICYCLING">Bicycling</option>
                        </select>
                    </div>
                    <a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
                </div>
                <div id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>
    </body>
</html>


Step: 1

The below example uses the current position which is automatically located and a target destination address which is given from the user.

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">

            var map,
                currentPosition,
                directionsDisplay, 
                directionsService,
                destinationLatitude = 59.3426606750,
                destinationLongitude = 18.0736160278;

            function initializeMapAndCalculateRoute(lat, lon)
            {
                directionsDisplay = new google.maps.DirectionsRenderer(); 
                directionsService = new google.maps.DirectionsService();

                currentPosition = new google.maps.LatLng(lat, lon);

                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 15,
                   center: currentPosition,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });

                directionsDisplay.setMap(map);

                 var currentPositionMarker = new google.maps.Marker({
                    position: currentPosition,
                    map: map,
                    title: "Current position"
                });

                // current position marker info
                /*
                var infowindow = new google.maps.InfoWindow();
                google.maps.event.addListener(currentPositionMarker, 'click', function() {
                    infowindow.setContent("Current position: latitude: " + lat +" longitude: " + lon);
                    infowindow.open(map, currentPositionMarker);
                });
                */

                // calculate Route
                calculateRoute();
            }

            function locError(error) {
               // the current position could not be located
            }

            function locSuccess(position) {
                // initialize map with current position and calculate the route
                initializeMapAndCalculateRoute(position.coords.latitude, position.coords.longitude);
            }

            function calculateRoute() {

                var targetDestination =  new google.maps.LatLng(destinationLatitude, destinationLongitude);
                if (currentPosition != '' && targetDestination != '') {

                    var request = {
                        origin: currentPosition, 
                        destination: targetDestination,
                        travelMode: google.maps.DirectionsTravelMode["DRIVING"]
                    };

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setPanel(document.getElementById("directions"));
                            directionsDisplay.setDirections(response); 

                            /*
                                var myRoute = response.routes[0].legs[0];
                                for (var i = 0; i < myRoute.steps.length; i++) {
                                    alert(myRoute.steps[i].instructions);
                                }
                            */
                            $("#results").show();
                        }
                        else {
                            $("#results").hide();
                        }
                    });
                }
                else {
                    $("#results").hide();
                }
            }

            $(document).live("pagebeforeshow", "#map_page", function() {
                // find current position and on success initialize map and calculate the route
                navigator.geolocation.getCurrentPosition(locSuccess, locError);
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a></h1>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
                <div id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>      
    </body>
</html>


Step:2

The below example locates the current position and it automatically calculates the distance and displays the route details between the current location and a static predefined destination location.

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">

            var map,
                currentPosition,
                directionsDisplay, 
                directionsService;

            function initialize(lat, lon)
            {
                directionsDisplay = new google.maps.DirectionsRenderer(); 
                directionsService = new google.maps.DirectionsService();

                currentPosition = new google.maps.LatLng(lat, lon);

                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 15,
                   center: currentPosition,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });

                directionsDisplay.setMap(map);

                 var currentPositionMarker = new google.maps.Marker({
                    position: currentPosition,
                    map: map,
                    title: "Current position"
                });

                var infowindow = new google.maps.InfoWindow();
                google.maps.event.addListener(currentPositionMarker, 'click', function() {
                    infowindow.setContent("Current position: latitude: " + lat +" longitude: " + lon);
                    infowindow.open(map, currentPositionMarker);
                });
            }

            function locError(error) {
                // initialize map with a static predefined latitude, longitude
               initialize(59.3426606750, 18.0736160278);
            }

            function locSuccess(position) {
                initialize(position.coords.latitude, position.coords.longitude);
            }

            function calculateRoute() {
                var targetDestination = $("#target-dest").val();
                if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') {
                    var request = {
                        origin:currentPosition, 
                        destination:targetDestination,
                        travelMode: google.maps.DirectionsTravelMode["DRIVING"]
                    };

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setPanel(document.getElementById("directions"));
                            directionsDisplay.setDirections(response); 

                            /*
                                var myRoute = response.routes[0].legs[0];
                                for (var i = 0; i < myRoute.steps.length; i++) {
                                    alert(myRoute.steps[i].instructions);
                                }
                            */
                            $("#results").show();
                        }
                        else {
                            $("#results").hide();
                        }
                    });
                }
                else {
                    $("#results").hide();
                }
            }

            $(document).live("pagebeforeshow", "#map_page", function() {
                navigator.geolocation.getCurrentPosition(locSuccess, locError);
            });

            $(document).on('click', '#directions-button', function(e){
                e.preventDefault();
                calculateRoute();
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a></h1>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
                <div data-role="fieldcontain">
                    <label for="target-dest">Target Destination:</label>
                    <input type="text" name="target-dest" id="target-dest" value=""  />
                </div>
                <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a>
                <div id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>      
    </body>
</html>

Friday, December 5, 2014

How to checkbox value assign in Phonegap using Jquery

I want to assign the default value true in checkbox using jquery. I tried some of the way to assign using like javascript

document.getElementById("checkbox-1").value()=true;


and

$("#checkbox-1").checked(true);
$("#checkbox-1").attr("checked","checked");


the checkbox value i does not assign the value.

Finally i tried this I fixed. Its working

 $("#checkbox-1").attr("checked",true).checkbox("refresh");

Thursday, December 4, 2014

Get PhoneNumber and mobile IMEI Number from Android Device using Phonegap

I was a bit surprised when my friend asked me how to do this in one day. I find the solution for Get Phone imei number and PhoneNumber using Phonegap. Its just very easy to implement in phonegap android application.
Just follow this steps:
Step:1
Select your cordovaActivity file from the phonegap src folder.
copy this javascriptInterface and past in your cordovaActivity class onCreate method.

Change your Class name in javascriptInterface Parameter.

 appView.addJavascriptInterface(this, "CordovaApp");             
        Log.d(TAG, " after finish toast " );   


Step:2

This method is get imei number from the Android phone. just copy and past your cordovaActivity class inside.

 @JavascriptInterface
  public String get_imei() 
  {
  String imei="";
  try
  {
  TelephonyManager telephonyManager = (TelephonyManager)getSystemService(Context.TELEPHONY_SERVICE);
     imei = telephonyManager.getDeviceId();
  }catch(Exception e)
  {
  Log.e(TAG, "Exception at onCreate()" + e.toString()); 
  }
    return imei;    
  }


Step:3

This method is get Phonenumber which you insert in your Android mobile. just copy and past your cordovaActivity class inside.

@JavascriptInterface
  public String getMobileNumber() 
  {
  String PhoneNumber="";
  try
  {
 TelephonyManager tm = (TelephonyManager) getSystemService(Context.TELEPHONY_SERVICE);
      PhoneNumber = tm.getLine1Number();
  }catch(Exception e)
  {
  Log.e(TAG, "Exception at getMobileNumber()" + e.toString()); 
  }
 return PhoneNumber;    
  }


Step:4

Just add all the blow Packages in your cordovaActivity class.

import android.telephony.TelephonyManager;
import android.webkit.JavascriptInterface;
import android.widget.Toast;


Step:5

This one add in your androidmanifest.xml file.

<uses-permission 
    android:name="android.permission.READ_PHONE_STATE" />


Step:6

this is on javascript to get Phonenumber and imei number which you want to call this methods from the javascript.

var phone imei_number = window.CordovaApp.get_imei();
var phonenumber = window.CordovaApp.getMobileNumber();
This is on Final Code:
package com.example.timers;

import android.content.Context;
import android.os.Bundle;
import android.telephony.TelephonyManager;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.widget.Toast;
import org.apache.cordova.*;

public class CordovaApp extends CordovaActivity
{
  
 private static final String TAG = "CordovaApp";
 
 CustomNativeAccess cna; 
 
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        appView.addJavascriptInterface(this, "CordovaApp");             
        Log.d(TAG, " after finish toast " );       
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);  
    }
 
 @JavascriptInterface
  public String get_imei() 
  {
  String imei="";
  try
  {
  TelephonyManager telephonyManager = (TelephonyManager)getSystemService(Context.TELEPHONY_SERVICE);
     imei = telephonyManager.getDeviceId();
  }catch(Exception e)
  {
  Log.e(TAG, "Exception at onCreate()" + e.toString()); 
  }
    return imei;    
  }
 
 
 @JavascriptInterface
  public String getMobileNumber() 
  {
  String PhoneNumber="";
  try
  {
 TelephonyManager tm = (TelephonyManager) getSystemService(Context.TELEPHONY_SERVICE);
      PhoneNumber = tm.getLine1Number();
  }catch(Exception e)
  {
  Log.e(TAG, "Exception at getMobileNumber()" + e.toString()); 
  }
 return PhoneNumber;    
  }
 
 
}

this code only for an Android.