Android Spinner (Drop down list) - Simple Example

Below is the simple example of Spinner element in Android:

There are three steps to generate Spinner control in Android:

• Define list of items in strings.xml file using "string-array".
• Assign string array to "entries" property of Spinner control.
• "getSelectedItem()" at code base will give selected item from the list.

Strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Practicework</string>
    <string name="action_settings">Settings</string>
<string name="btn1">Check Status</string>

<string-array  name="countryname">
<item>Australia</item>
<item>New Zealand</item>
<item>England</item>
<item>Germany</item>
<item>France</item>    
        <item>India</item>
<item>Sri Lanka</item>
</string-array>
</resources>

activity_practice.xml

<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:background="#d0d0d0"

    tools:context=".PracticeActivity" >

<Spinner 

   android:id="@+id/spnr1"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:entries="@array/countryname"

   android:layout_margin="20dp"

   />

    <Button

        android:id="@+id/btn1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/btn1"

        android:layout_margin="20dp"

        />

</LinearLayout>

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Spinner;

import android.widget.Toast;

public class PracticeActivity extends Activity implements OnClickListener {

Button oBtn1;

Spinner oSpnr1;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        

        oBtn1 = (Button) findViewById(R.id.btn1);

        oSpnr1 = (Spinner) findViewById(R.id.spnr1);

        oBtn1.setOnClickListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

if (arg0.getId() == R.id.btn1){

StringBuffer oStr1 = new StringBuffer();

oStr1.append(oSpnr1.getSelectedItem().toString());

Toast.makeText(this, "Country : " + oStr1.toString(), Toast.LENGTH_LONG).show();

}

}

}

First, select the country name from the spinner control and then click on Button "Check Status" will toast name of selected country.

ToggleButton in Android

ToggleButton allows to select either states of the action. See below code.

activity_practice.xml

<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:background="#d0d0d0"
    tools:context=".PracticeActivity" >

    <ToggleButton 
        android:id="@+id/toggle1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        />

    <ToggleButton 
        android:id="@+id/toggle2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="Turn On"
        android:textOff="Turn Off"
        android:layout_margin="20dp"
        />
    
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn1"
        android:layout_margin="20dp"
        />
</LinearLayout>

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Toast;

import android.widget.ToggleButton;

public class PracticeActivity extends Activity implements OnClickListener {

ToggleButton oToggleB1, oToggleB2 ;

Button oBtn1;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        oToggleB1 = (ToggleButton) findViewById(R.id.toggle1);

        oToggleB2 = (ToggleButton) findViewById(R.id.toggle2);

        

        oBtn1 = (Button) findViewById(R.id.btn1);

        oBtn1.setOnClickListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

if (arg0.getId() == R.id.btn1){

StringBuffer oStr1 = new StringBuffer();

oStr1.append("\nToggle 1 : " + oToggleB1.getText().toString());

oStr1.append("\nToggle 2 : "+ oToggleB2.getText().toString());

Toast.makeText(this, "State : " + oStr1.toString(), Toast.LENGTH_LONG).show();

}

}

    

}

Strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Practicework</string>

    <string name="action_settings">Settings</string>

<string name="btn1">Check Status</string>

</resources>

When we add toggle button in the code, it will give ON of OFF state by default which you can see in the first toggle button. But in most of the cases, we need to display different text for ON or OFF state, which we can achieve through textOn and textOff attributes of ToggleButton which are highlighted in above code. getText() method will return the current state of ToggleButton.

Edit Text - its Features & Key Event handling

activity_practice.xml

<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:background="#d0d0d0"

    tools:context=".PracticeActivity" >

<EditText 

   android:id="@+id/edittxt1"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:layout_margin="20dp"

   />

</LinearLayout>

Practiceactivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class PracticeActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

  

}

Strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Practicework</string>

    <string name="action_settings">Settings</string>

</resources>

Above code will provide the simple edit box to enter the text. There is no heading for the text which might misguide the use. so Android provides a attributed called hint. Add below line in "Strings.xml" file.

<string name="txt1">Enter Value</string>

and below line to edittext element of activity_practice.xml file.

        android:hint="@string/txt1"

It will show you "Enter Value" text in the edit text field while it is run.

When user runs the application, it will show the default keyboard. although Android provides different types of keyboards to fulfill user's requirements like to enter numberic values, user should have numberic keyboard rather than text same as for phone number, email, web site URL etc. to achieve, Android provides a properties like inputType. Add below line to edittext element in activity_practice.xml file.

android:inputType="number"

It will show only number keyboard and android:inputType="phone" will show phone keyboard. 

Below source code explains about the handling of Key event. There are no changes in layout and string files only in the code base file. the updated code is given below.

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.util.Log;

import android.view.KeyEvent;

import android.view.Menu;

import android.view.View;

import android.view.View.OnKeyListener;

import android.widget.EditText;

import android.widget.Toast;

public class PracticeActivity extends Activity implements OnKeyListener {

EditText oET1;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        oET1 = (EditText) findViewById(R.id.edittxt1);

        oET1.setOnKeyListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

@Override

public boolean onKey(View v, int keyCode, KeyEvent event) {

// TODO Auto-generated method stub

if (v.getId() == R.id.edittxt1){

if (event.getAction() == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_ENTER)

Toast.makeText(this, oET1.getText().toString() , Toast.LENGTH_LONG).show();

return true;

}

else

return false;

}

   

}

Above code shows that whatever the text entered into the edit text field will be toasted while user taps on "Enter" button from key pad.

Difference Between Margin and Padding attributes

Let's start with example.

activity_practice.xml

<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:background="#d0d0d0"
    tools:context=".PracticeActivity" >

<Button 
   android:id="@+id/btn1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/btn1"
   />


</LinearLayout>

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class PracticeActivity extends Activity implements OnClickListener {

private Button oBtn1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_practice);
        
        oBtn1 = (Button) findViewById(R.id.btn1);

        oBtn1.setOnClickListener(this);

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.practice, menu);
        return true;
    }


@Override
public void onClick(View v) {
// TODO Auto-generated method stub

switch (v.getId())
{
case R.id.btn1:
Toast.makeText(this, "You clicked on Button 1 !!!", Toast.LENGTH_LONG).show();
break;


}
}
    

}

Strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Practicework</string>

    <string name="action_settings">Settings</string>

<string name="btn1">Button 1</string>

</resources>

When you run the above application will place the button element at left top corner of the screen. Margin attribute allows spacing surrounding the element. Add below line to button element of activity_practice.xml file.

android:layout_margin="20dp"

will add 20dp spacing surrounding the button element. but if you want to apply the spacing to specific side(s) then there are attributes called layout_margintop, layout_marginbottom, layout_marginleft and layout_marginright.

Now, we need to apply spacing surrounding the text of the button then there is attribute called "padding", add below line to button element.

android:padding="40dp"

It will add 40dp spacing to all side of text inside the button. there are other attributes like paddingLeft, paddingRight, paddingTop, paddingBottom, paddingStart, paddingEnd which will add spacing to specif side of the text.

Hope, now you are clear about the difference between margin and padding attributes.

 

Difference between Gravity and Layout_Gravity

Many android developers are asking me the difference between the properties like Gravity and Layout_Gravity. Below example will explain the differences.

In simple term, Gravity is related to position of the content of the view whereas Layout_gravity is related to the position of the view in its parent element.

You can easily observe that if you want to check the usage of Layout_gravity then you need to make sure that respective view width should be smaller than width of parent element. (check Btn1 attributes).

As i mentioned, Gravity is applied to content of the view. check the attributes of Btn2. Gravity attribute allows to align the text of the button within the button area. But ensure that the width of the view should be wider than text.

activity_practice.xml

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

    tools:context=".PracticeActivity" >

<Button 
   android:id="@+id/btn1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/btn1"
   android:layout_margin="40dp"
   android:layout_gravity="right"
   android:padding="20dp"
   />

<Button 
   android:id="@+id/btn2"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/btn2"
   android:layout_margin="40dp"
   android:gravity="right"
   android:padding="20dp"
   />
</LinearLayout>

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Toast;

public class PracticeActivity extends Activity implements OnClickListener {

private Button oBtn1, oBtn2;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        

        oBtn1 = (Button) findViewById(R.id.btn1);

        oBtn2 = (Button) findViewById(R.id.btn2);

        oBtn1.setOnClickListener(this);

        oBtn2.setOnClickListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

switch (v.getId())

{

case R.id.btn1:

Toast.makeText(this, "You clicked on Button 1 !!!", Toast.LENGTH_LONG).show();

break;

case R.id.btn2:

Toast.makeText(this, "You clicked on Button 2 !!!", Toast.LENGTH_LONG).show();

break;

}

}

    

}

Strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Practicework</string>

    <string name="action_settings">Settings</string>

<string name="btn1">Button 1</string>

<string name="btn2">Button 2</string>

</resources>

Canvas | Text API

Canvas API is providing feature of displaying text on Canvas. There are two methods (1) fillText and strokeText. fillText method will fill up the text with specified color while StrokeText will only apply outline to text. by using both methods, we can display text with filled color and outline with different color.

Below example will demonstrate you that whatever text you will enter will be displayed in canvas with Red color. here i have applied shadow as well.

Enter the title you want to display on canvas in text field and then click on "Click me" button will draw text on canvas.

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas | Text  Example</title>
</head>
<body>
<label for="txtTitle" id="lblTitle">Enter Title</label>
<input type="text" id="txtTitle" width="50"/>
<input type="button" id="btnOk" value="&nbsp;Click Me&nbsp;" onclick="fnClick()" />
</br>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>


function fnClick()
{
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.

var oTitle = document.getElementById("txtTitle").value; //get value of title entered by user
oContext.clearRect(0,0,500,500); //remove the content of canvas before drawing new text
oContext.font = "bold 60px tahoma"; //set font family, size and weight
oContext.fillStyle = "rgba(255,0,0,1)"; //set color to be filled
oContext.lineWidth = 2 ; //set border of the text
oContext.strokeStyle="rgba(0,0,0,1)"; //text outline color
oContext.shadowOffsetX = 10; //set shadowOffsetX
oContext.shadowOffsetY = 10; //set shadowOffsetY
oContext.ShadowBlur = 7; //blurness of shadow
oContext.shadowColor = "rgba(255,0,0,.5)"; //shadow color.
oContext.fillText(oTitle,100,100); //draw text at x-100 and y-100 location.
oContext.strokeText(oTitle,100,100); //draw outline text.
}
</script>
</html>

Canvas | Square or Rectangle Example

In HTML5, there are tools using them we can draw different shapes like square, rectangle, triangle and circles. I would first start with Square and rectangle shapes. below example will show you how to draw square and rectangle on Canvas and apply color to shape border.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.


oContext.strokeStyle = "#ff0000";  //color of border, applied Red color
oContext.lineWidth = 1; // width of the border
oContext.strokeRect (100,100,100,100); // strokeRect function draws square without filling color. parameters are x,y, width, height
oContext.strokeStyle = "#00ff00";  //color of border, applied Green color
oContext.strokeRect (100,250, 200,100); //will draw horizontal rectangle
oContext.strokeStyle = "#0000ff";  //color of border, applied Blue color
oContext.strokeRect (350,100, 100,200); //will draw horizontal rectangle


</script>
</html>

Above example shows square and rectangle shapes. now i will show you how to apply shadow to shapes.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.


oContext.strokeStyle = "#ff0000";  //color of border, applied Red color
oContext.lineWidth = 1; // width of the border
oContext.shadowOffsetX = 10; // X offset
oContext.shadowOffsetY = 10; // Y offset
oContext.shadowColor = "rgba(255,0,0,.4)"; // parameters of rgba function are Red, Green, blue and level of Opacity
oContext.shadowBlur = 10; // at what level, shadow to be blurred.
oContext.strokeRect (100,100,100,100); // strokeRect function draws square without filling color. parameters are x,y, width, height
</script>
</html>