Learn Python


Click to Learn Python3

Thursday, April 21, 2011

Google map example in android with info window (Popup) and multiple markers and zoom controls

Through this application we can populate a google map with the info window, zoom controls and marker features. The image of the running application is shown below



First of all, we can run the application with the google api sdk only, we can use from API level 3, but the Google api sdk should be used to run the application.

Custom Linear layout is used on this application




LocationViewers.java

package com.icons.draw.view;

import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ZoomControls;

import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.icons.draw.R;

public class LocationViewers extends LinearLayout {

private MapLocationOverlay overlay;

// Known lat/long coordinates that we'll be using.
private List mapLocations;

public static MapView mapView;

public LocationViewers(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public LocationViewers(Context context) {
super(context);
init();
}

public void init() {

setOrientation(VERTICAL);
setLayoutParams(new LinearLayout.LayoutParams(android.view.ViewGroup.LayoutParams.FILL_PARENT,android.view.ViewGroup.LayoutParams.FILL_PARENT));
String api = getResources().getString(R.string.map_api_key);
mapView = new MapView(getContext(),api);
mapView.setEnabled(true);
mapView.setClickable(true);
addView(mapView);
overlay = new MapLocationOverlay(this);
mapView.getOverlays().add(overlay);
mapView.getController().setZoom(5);
mapView.getController().setCenter(getMapLocations().get(0).getPoint());
}


public List getMapLocations() {
if (mapLocations == null) {
mapLocations = new ArrayList();
mapLocations.add(new MapLocation("Avinashi road, Coimbatore",11.0138,76.9871));
mapLocations.add(new MapLocation("Marina Beach, Chennai",13.0548,80.2830));
mapLocations.add(new MapLocation("Taj Mahal, New Delhi",28.6353,77.2250));
mapLocations.add(new MapLocation("Meenakshi Temple, Madurai",9.9195,78.1208));
}
return mapLocations;
}

public MapView getMapView() {
return mapView;
}
}



In this LocationViewers.java only we are using the MapView, then this file will be called in the map.xml


map.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/home_container" android:layout_width="fill_parent"
android:layout_height="fill_parent">

<com.icons.draw.view.LocationViewers
android:id="@+id/map_location_viewer" android:layout_width="fill_parent"
android:layout_height="fill_parent" >


</com.icons.draw.view.LocationViewers>

<ZoomControls android:id="@+id/zoomcontrols"
android:gravity="bottom"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>


In the above mentioned xml file we had used the ZoomControls also, this will be given the zoom listener on the java file


DrawIcons.java

package com.icons.draw;

import com.google.android.maps.MapActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ZoomControls;
import com.icons.draw.view.LocationViewers;

public class DrawIcons extends MapActivity {
@Override
public void onCreate(Bundle icicle) {

super.onCreate(icicle);

setContentView(R.layout.map);


ZoomControls zoomControls = (ZoomControls) findViewById(R.id.zoomcontrols);
zoomControls.setOnZoomInClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
LocationViewers.mapView.getController().zoomIn();
}
});
zoomControls.setOnZoomOutClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
LocationViewers.mapView.getController().zoomOut();
}
});
}

/**
* Must let Google know that a route will not be displayed
*/
@Override
protected boolean isRouteDisplayed() {
return false;
}
}



While pressing the zoom controls plus or minus, this listener will be called and the zoom functionality will be occurs. Then we are going to see two files MapLocation.java and MapLocationOverlay.java, where in the MapLocationOverlay file we will be drawing the marker and the info window for each marker, you can get the code from the zip file below.

The main thing to run the application is adding the internet permission and google library in the AndroidManifest.xml file


AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.icons.draw"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".DrawIcons"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<uses-library android:name="com.google.android.maps" />
</application>
<uses-permission android:name="android.permission.INTERNET" />
<uses-sdk android:minSdkVersion="4" />

</manifest>



The code is fulling checked so you can run the code after downloading it itself.

You can download the full source code


Download source


Have a good day.

Tuesday, April 5, 2011

Animated customized dialog or popup transparent layout with Button and Linear layout gradient effect in android

The image shown below is an example of animated customized popup with transparent layout for button and linearlayout, and the linearlayout and button is given gradient effect


How to get a transparent layout? For that we need to use a transparent class


TransparentPanel.java
package com.popup.design.layers;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class TransparentPanel extends LinearLayout
{
private Paint innerPaint, borderPaint ;

public TransparentPanel(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public TransparentPanel(Context context) {
super(context);
init();
}

private void init() {
innerPaint = new Paint();
innerPaint.setARGB(225, 0, 0, 0);
innerPaint.setAntiAlias(true);

borderPaint = new Paint();
borderPaint.setARGB(255, 0, 0, 0);
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
borderPaint.setStrokeWidth(2);
}

public void setInnerPaint(Paint innerPaint) {
this.innerPaint = innerPaint;
}

public void setBorderPaint(Paint borderPaint) {
this.borderPaint = borderPaint;
}

@Override
protected void dispatchDraw(Canvas canvas) {

RectF drawRect = new RectF();
drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());

canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
canvas.drawRoundRect(drawRect, 5, 5, borderPaint);

super.dispatchDraw(canvas);
}
}


We need to use this transparentPanel class in the xml file, where we need the transparent layout, in the popup.xml we are using the com.popup.design.layers.TransparentPanel instead of LinearLayout, see in the code


popup.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/white"
android:layout_width="fill_parent" android:layout_height="fill_parent">

<Button android:id="@+id/show_popup_button" android:layout_gravity="bottom"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginBottom="25px" android:text="Show Popup" />

<com.popup.design.layers.TransparentPanel
android:id="@+id/popup_window" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_gravity="bottom" android:gravity="left" android:padding="1px"
android:background="@drawable/white">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="right"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="@drawable/button_bar_gradient">

<Button android:id="@+id/hide_popup_button"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_marginTop="5px"
android:layout_marginRight="10px" android:paddingLeft="5px"
android:paddingRight="5px" style="?android:attr/buttonStyleSmall"
android:textStyle="bold" android:textColor="@drawable/white"
android:textSize="12px" android:text=" Close " android:background="@drawable/button_close"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="1px" android:layout_marginTop="5px"
android:layout_below="@+id/hide_popup_button" android:background="@drawable/white" />
</RelativeLayout>

<TextView android:id="@+id/location_name"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textSize="16px" android:textColor="@drawable/white"
android:layout_marginTop="5px" android:layout_marginLeft="5px" />

<TextView android:id="@+id/location_description"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textColor="@drawable/white" android:layout_margin="5px" />

</com.popup.design.layers.TransparentPanel>

</FrameLayout>


Customized Popup is the com.popup.design.layers.TransparentPanel, initially we will hide this layout, and on the button click will show this layout. The java code is as follows


AnimatePopup.java
package com.popup.design;

import com.popup.design.layers.TransparentPanel;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

/**
*
* @author http://www.android-codes-examples.blogspot.com/
*
*/
public class AnimatePopup extends Activity {

private Animation animShow, animHide;

@Override
public void onCreate(Bundle icicle) {

super.onCreate(icicle);

setContentView(R.layout.popup);

initPopup();
}

private void initPopup() {

final TransparentPanel popup = (TransparentPanel) findViewById(R.id.popup_window);

// Start out with the popup initially hidden.
popup.setVisibility(View.GONE);


animShow = AnimationUtils.loadAnimation( this, R.anim.popup_show);
animHide = AnimationUtils.loadAnimation( this, R.anim.popup_hide);

final Button showButton = (Button) findViewById(R.id.show_popup_button);
final Button hideButton = (Button) findViewById(R.id.hide_popup_button);
showButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
popup.setVisibility(View.VISIBLE);
popup.startAnimation( animShow );
showButton.setEnabled(false);
hideButton.setEnabled(true);
}});

hideButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
popup.startAnimation( animHide );
showButton.setEnabled(true);
hideButton.setEnabled(false);
popup.setVisibility(View.GONE);
}});


final TextView locationName = (TextView) findViewById(R.id.location_name);
final TextView locationDescription = (TextView) findViewById(R.id.location_description);

locationName.setText("Animated Popup");
locationDescription.setText("Animated popup is created by http://www.android-codes-examples.blogspot.com/"
+ " Transparent layout is used on this example, and animation xml is also used"
+ " on this example. Have a Good day guys.");
}
}


For giving gradient effect we need to use this xml file as the background for the linearlayout or button. The xml file is


button_bar_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#C0C0C0"
android:endColor="#505050"
android:angle="90"/>
<corners android:radius="2px" />
</shape>



In the popup.xml we had used the button_bar_gradient as a background. This button_bar_gradient.xml will be in drawable folder.

You can download the full source code


Download source


Have a good day.

Monday, April 4, 2011

ListActivity with remembering the last clicks of the radio button in android

We are going to see about using the ListActivity with radio button example and we are going to see, how to remember the last clicked on this listactivity before going to another activity. The view will be like this

The ListActivity with radio button can be done by using this xml code in the layout


XML

<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#2c0bf9"
android:cacheColorHint="#2c0bf9"
android:drawSelectorOnTop="false"
/>


In the above mentioned xml, we used the android:id as @android:id/list, it is because we are going to use ListActivity. After that we need to insert the code in the java file as


Java

setListAdapter(new ArrayAdapter(this,
android.R.layout.simple_list_item_single_choice, items));


and for check operation we need to call the selector function, in that itemClicked is a int array where we will be storing whether the row is clicked or not, this will be maintained of item click, the selector and item click functions are follows


Java

private void selector(int first,int total) {
for (int i = 0; i < total; i++) {
View v = getListView().getChildAt(i);
CheckedTextView check = (CheckedTextView) v;
if(itemClicked[first+i]==1)
check.setChecked(true);
else
check.setChecked(false);
}
}

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
selectFlag = true;
CheckedTextView check = (CheckedTextView) v;
boolean click = !check.isChecked();
check.setChecked(click);
if (click) {
itemClicked[position] = 1;
} else {
itemClicked[position] = 0;
}
}


We need the scroller listener, so that the last checked can be checked while scrolling, for implementing the scroll first we need to implement scroll listener as


Java

public class StoreClicks extends ListActivity implements ListView.OnScrollListener


then in the onscroll we need to call the selector method


Java

@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {

if(visibleItemCount == 6 && !firstTimeFlag) {
selector(0,6);
firstTimeFlag = true;
}
}

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
switch (scrollState) {
case OnScrollListener.SCROLL_STATE_IDLE:
int first = view.getFirstVisiblePosition();
int last = view.getLastVisiblePosition();
int childCount = view.getChildCount();
selector(first,childCount);
break;

case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
break;

case OnScrollListener.SCROLL_STATE_FLING:
break;
}

}


In the onScroll method the selector will be called only one time, after that onScrollStateChanged selector method will be called, this is why means, for the first page only the items will be visible, we can check or uncheck, so only we are doing like this. The full StoreClicks.java file will be like this


StoreClicks.java

package com.clicks.list;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.CheckedTextView;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.AbsListView.OnScrollListener;

/**
*
* @author http://www.android-codes-examples.blogspot.com/
*
*/

public class StoreClicks extends ListActivity implements
ListView.OnScrollListener {
private static String[] items = { "Joseph", "George", "Mary", "Antony",
"Albert", "Michel", "John", "Abraham", "Mark", "Savior",
"Kristopher", "Thomas", "Williams", "Assisi", "Sebastian",
"Aloysius", "Alex", "Daniel", "Anto", "Alexandar", "Brito",
"Robert", "Jose", "Paul", "Peter" };
private int[] itemClicked = new int[25];
private boolean selectFlag = false; // this will be changed to true if a
private boolean firstTimeFlag = false;
// item is clicked

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button click = (Button) findViewById(R.id.click);

Bundle extras = getIntent().getExtras();
try{
itemClicked = (int[])extras.getIntArray("clicks");
}catch(NullPointerException e){}
if(null == itemClicked)
{
itemClicked = new int[25];
for (int i = 0; i < 25; i++) {
itemClicked[i] = 0;
}
}
click.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
if (selectFlag) {
Intent intent = new Intent(StoreClicks.this, TabPage.class);
Bundle extras = new Bundle();
extras.putIntArray("clicks", itemClicked);
intent.putExtras(extras);
startActivity(intent);
finish();
} else {
Toast.makeText(StoreClicks.this,
"You must select atleast an item",
Toast.LENGTH_SHORT).show();
}
}
});
setListAdapter(new ArrayAdapter(this,
android.R.layout.simple_list_item_single_choice,
items));
getListView().setOnScrollListener(this);
}

private void selector(int first,int total) {
for (int i = 0; i < total; i++) {
View v = getListView().getChildAt(i);
CheckedTextView check = (CheckedTextView) v;
if(itemClicked[first+i]==1)
check.setChecked(true);
else
check.setChecked(false);
}
}

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
selectFlag = true;
CheckedTextView check = (CheckedTextView) v;
boolean click = !check.isChecked();
check.setChecked(click);
if (click) {
itemClicked[position] = 1;
} else {
itemClicked[position] = 0;
}
}

@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {

if(visibleItemCount == 6 && !firstTimeFlag) {
selector(0,6);
firstTimeFlag = true;
}
}

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
switch (scrollState) {
case OnScrollListener.SCROLL_STATE_IDLE:
int first = view.getFirstVisiblePosition();
int last = view.getLastVisiblePosition();
int childCount = view.getChildCount();
selector(first,childCount);
break;

case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
break;

case OnScrollListener.SCROLL_STATE_FLING:
break;
}

}

}



The itemClicked array should be passed in the bundle to the next activity and vice verse to this activity, so that the clicks will be maintained and we can check it explicitly

You can download the full source code


Download source


Have a good day.