Saturday, October 5, 2013

ToggleButton and Switch

android.widget.ToggleButton is a button allows the user to change a setting between two states, ON and OFF. Android 4.0 (API level 14) introduces another kind of toggle button, android.widget.Switch, that provides a slider control. The ToggleButton and Switch controls are subclasses of CompoundButton and function in the same manner, so you can implement their behavior the same way. ~ reference: Toggle Buttons guide.

Example:
ToggleButton and Switch
ToggleButton and Switch


<LinearLayout 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"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToogleSwitch" />
<ToggleButton
android:id="@+id/mytogglebutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="ToggleButton On"
android:textOff="ToggleButton Off" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Switch" />
<!-- Switch require API Level 14 -->
<Switch
android:id="@+id/myswitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Switch On"
android:textOff="Switch Off" />

<TextView
android:id="@+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>


package com.example.androidswitch;

import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.TextView;
import android.widget.ToggleButton;
import android.app.Activity;

public class MainActivity extends Activity {

ToggleButton myToggleButton;
Switch mySwitch;
TextView info;

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

info = (TextView)findViewById(R.id.info);
myToggleButton = (ToggleButton)findViewById(R.id.mytogglebutton);
myToggleButton.setOnCheckedChangeListener(myOnCheckedChangeListener);


mySwitch = (Switch)findViewById(R.id.myswitch);
mySwitch.setOnCheckedChangeListener(myOnCheckedChangeListener);
}

CompoundButton.OnCheckedChangeListener myOnCheckedChangeListener =
new CompoundButton.OnCheckedChangeListener(){

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
info.setText(
"Button: " + buttonView.toString() + "\n" +
"icChecked: " + String.valueOf(isChecked));
}

};
}


Wednesday, October 2, 2013

Change color of View by applying ColorFilter

The example change color of Views (Button, EditText and ImageView) by applying ColorFilter of various PorterDuffColorFilter.

Views with ColorFilter of various PorterDuffColorFilter
Change color of View by applying ColorFilter


package com.example.androidviewcolorfilter;

import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;

public class MainActivity extends Activity {

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

Button button1 = (Button)findViewById(R.id.button1);
Button button2 = (Button)findViewById(R.id.button2);
EditText edittext3 = (EditText)findViewById(R.id.edittext3);
ImageView imageview4 = (ImageView)findViewById(R.id.imageview4);
ImageView imageview5 = (ImageView)findViewById(R.id.imageview5);
ImageView imageview6 = (ImageView)findViewById(R.id.imageview6);

//Solid Blue
ColorFilter filter1 = new PorterDuffColorFilter(
Color.BLUE, PorterDuff.Mode.MULTIPLY);
//Transparency Blue
ColorFilter filter2 = new PorterDuffColorFilter(
Color.BLUE & 0x00ffffff | 0x50000000,
PorterDuff.Mode.MULTIPLY);

ColorFilter filter3 = new PorterDuffColorFilter(
0x2000FF00,
PorterDuff.Mode.MULTIPLY);

ColorFilter filter4 = new PorterDuffColorFilter(
Color.RED,
PorterDuff.Mode.MULTIPLY);
ColorFilter filter5 = new PorterDuffColorFilter(
Color.RED,
PorterDuff.Mode.DST_ATOP);
ColorFilter filter6 = new PorterDuffColorFilter(
Color.BLACK,
PorterDuff.Mode.XOR);

button1.getBackground().setColorFilter(filter1);
button2.getBackground().setColorFilter(filter2);
edittext3.getBackground().setColorFilter(filter3);
imageview4.setColorFilter(filter4);
imageview5.setColorFilter(filter5);
imageview6.setColorFilter(filter6);
}

}


<LinearLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />
<Button
android:id="@+id/button0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Default Button" />
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<EditText
android:id="@+id/edittext3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EditText 3" />
<ImageView
android:id="@+id/imageview4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"/>
<ImageView
android:id="@+id/imageview5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"/>
<ImageView
android:id="@+id/imageview6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"/>

</LinearLayout>


Sunday, September 29, 2013

Request focus on a specified EditText view in startup, in XML

Last example show Java code to "Request focus on a specified EditText view in startup, by calling requestFocus()". Alternative, it can be achieve by specifying <requestFocus /> in XML.

It's a example to request focus on edittext3, modify layout from last example.

    <EditText
android:id="@+id/edittext3"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<requestFocus />
</EditText>


focus on edittext3
Focus on edittext3, defined in XML.

Request focus on a specified EditText view in startup, by calling requestFocus()

The example force a specified EditText, editText2, to be focused when the app start-up, by calling its requestFocus().

Remark: somebody advise to specify android:focusable="true" and android:focusableInTouchMode="true" in XML.

For reference, I display the focus view in onCreate(). And also implement OnGlobalLayoutListener() to monitor the focus view after layout finished, and when focus view changed.

focus on a specified EditText view
focus on a specified EditText view


package com.example.androidfocus;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

TextView textInfo;
EditText editText1, editText2, editText3;

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

textInfo = (TextView)findViewById(R.id.info);
editText1 = (EditText)findViewById(R.id.edittext1);
editText2 = (EditText)findViewById(R.id.edittext2);
editText3 = (EditText)findViewById(R.id.edittext3);

editText2.requestFocus();

View focusViewOnCreate = getWindow().getCurrentFocus();
if(focusViewOnCreate == null){
Toast.makeText(MainActivity.this,
"NO View get focus onCreate()!", Toast.LENGTH_LONG).show();
}else{
Toast.makeText(MainActivity.this,
"focus onCreate(): " + focusViewOnCreate.toString(),
Toast.LENGTH_LONG).show();
}

ViewTreeObserver viewTreeObserver = textInfo.getViewTreeObserver();
viewTreeObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener(){

@Override
public void onGlobalLayout() {
/*
* onGlobalLayout() will be called whenthe global layout state
* or the visibility of views within the view tree changes.
*
* In this case, it will be called after layout displayed, or
* focus view changed.
*/

View focusViewOnGlobalLayout = getWindow().getCurrentFocus();
if(focusViewOnGlobalLayout == null){
textInfo.setText("NO View get Focus!");
}else{
textInfo.setText("Focus View:\n" + focusViewOnGlobalLayout.toString());
}
}});
}

}


<LinearLayout 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"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />

<EditText
android:id="@+id/edittext1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="android-coding" />

<EditText
android:id="@+id/edittext2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />

<EditText
android:id="@+id/edittext3"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>


Alternatively, you can also Request focus by defining in layout XML.

Sunday, September 22, 2013

Create Dialog with List, using AlertDialog.Builder setItems()

You can add list to Dialog, use the setItems() method of AlertDialog.Builder. Because the list appears in the dialog's content area, the dialog cannot show both a message and list.


Dialog with ListView, using AlertDialog.Builder setItems()
Dialog with ListView, using AlertDialog.Builder setItems()

package com.example.androidlistdialog;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;

public class MainActivity extends Activity {

Button buttonOpenDialog;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonOpenDialog = (Button)findViewById(R.id.opendialog);
buttonOpenDialog.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View arg0) {
openDialog();
}});
}

private void openDialog(){

final String[] days = {
"Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"
};

AlertDialog.Builder myDialog =
new AlertDialog.Builder(MainActivity.this);
myDialog.setTitle("My Dialog with ListView");
  myDialog.setItems(days, new DialogInterface.OnClickListener(){

@Override
public void onClick(DialogInterface dialog, int which) {
String item = days[which];
Toast.makeText(MainActivity.this,
item, Toast.LENGTH_LONG).show();

}});

myDialog.setNegativeButton("Cancel", null);

myDialog.show();
}

}


<LinearLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />
<Button
android:id="@+id/opendialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Open Dialog"/>

</LinearLayout>


Related: Create Dialog with traditional ListView, using AlertDialog.Builder.

Saturday, September 21, 2013

Create Dialog with ListView, using AlertDialog.Builder.

Dialog with ListView
Dialog with ListView

package com.example.androidlistdialog;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Toast;
import android.widget.ListView;
import android.app.Activity;
import android.app.AlertDialog;
import android.graphics.Color;

public class MainActivity extends Activity {

Button buttonOpenDialog;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonOpenDialog = (Button)findViewById(R.id.opendialog);
buttonOpenDialog.setOnClickListener(new OnClickListener(){

@Override
public void onClick(View arg0) {
openDialog();
}});
}

private void openDialog(){

String[] days = {
"Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"
};

AlertDialog.Builder myDialog =
new AlertDialog.Builder(MainActivity.this);
myDialog.setTitle("My Dialog with ListView");

ListView listView = new ListView(MainActivity.this);
listView.setBackgroundColor(Color.argb(255, 255, 255, 255));
ArrayAdapter<String> adapter =
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, days);
listView.setAdapter(adapter);

listView.setOnItemClickListener(new OnItemClickListener(){

@Override
public void onItemClick(AdapterView<?> parent,
View view, int position, long id) {
String item = (String)parent.getItemAtPosition(position);
Toast.makeText(MainActivity.this,
item, Toast.LENGTH_LONG).show();
}});

myDialog.setNegativeButton("Cancel", null);

myDialog.setView(listView);
myDialog.show();
}

}


<LinearLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />
<Button
android:id="@+id/opendialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Open Dialog"/>

</LinearLayout>


Related: Create Dialog with List, using AlertDialog.Builder setItems()

Friday, September 20, 2013

New Features in the Google Maps Mobile APIs for Android and iOS

Maps Live: New Features in the Google Maps Mobile APIs for Android and iOS

Google Maps API Team members Daniel Schramm and Chris Broadfoot discuss exciting new cross platform features in the Google Maps Android API v2 (http://goo.gl/5k18Es) and the Google Maps SDK for iOS (http://goo.gl/r2c2e). New to the latest versions are map padding, marker rotation, and flat markers.