Jei's Android Development Tutorial

Wednesday, February 12, 2014

Android Dual Navigation Drawer implementation.- ( Navigation Drawer on both sides).

Android Dual Navigation Drawer

Hi guys, Today we are going to implement a new feature in android which I call the "Android Dual Navigation Drawer".

Android Dual Navigation drawer is a unique implementation which can be seen in some of the apps today.Now lets start the implementation for the android dual navigation drawer.

The Android Dual Navigation Drawer that we are going to implement will be looking like this

Requirements

1) Make sure to add "android-support-v7-appcompat library" as library project to the project you have created.

For more reference to how to set up the android-support-v7-appcompat library please refer this link.

http://wptrafficanalyzer.in/blog/android-setting-up-actionbarcompat-support-library-in-eclipse/

Step 1

--------

1.1) Update the activity_main.xml like the following:

<android.support.v4.widget.DrawerLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#FFFFFF"

tools:context=".MainActivity" >

<FrameLayout

android:id="@+id/Frame_Layout"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

<ListView

android:id="@+id/drawer_list_left"

android:layout_width="240dp"

android:layout_height="match_parent"

android:layout_gravity="start"

android:divider="@android:color/transparent"

android:layout_marginLeft="-64dp"

android:background="#FFFFFF"/>

<ListView

android:id="@+id/drawer_list_right"

android:layout_width="240dp"

android:layout_height="match_parent"

android:layout_gravity="end"

android:divider="@android:color/transparent"

android:background="#FFFFFF"/>

</android.support.v4.widget.DrawerLayout>

Note:- The important fact that has to be noticed here is that the
1) Left side ListView's(drawer_list_left) layout gravity- start
2) Right side ListView's(drawer_list_right) layout gravity- end

1.2) Create a xml called data.xml and enter the following:

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

<TextView

android:id="@+id/txtData"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:layout_marginLeft="67dp"

android:layout_marginTop="16dp"

android:text="TextView" />

<ImageView

android:id="@+id/imgView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:src="@drawable/ic_launcher" />

</RelativeLayout>

1.3) Create a xml called header.xml and enter the following:

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

Step 2
---------
In the MainActivity.java do the following:

package com.example.androidduonavigationdrawer;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

ArrayList<String> dataArray_right=new ArrayList<String>();

ArrayList<Object> objectArray_right=new ArrayList<Object>();

ArrayList<String> dataArray_left=new ArrayList<String>();

ArrayList<Object> objectArray_left=new ArrayList<Object>();

DrawerLayout mDrawerlayout;
ListView mDrawerList_Left,mDrawerList_Right;
ActionBarDrawerToggle mDrawerToggle;
ImageButton imgLeftMenu,imgRightMenu;

ListItemsAdapter_Left Left_Adapter;
ListItemsAdapter_Right Right_Adapter;

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

//===============Initialization of Variables=========================//

mDrawerlayout=(DrawerLayout)findViewById(R.id.drawer_layout);
mDrawerList_Left=(ListView)findViewById(R.id.drawer_list_left);
mDrawerList_Right=(ListView)findViewById(R.id.drawer_list_right);
imgLeftMenu=(ImageButton)findViewById(R.id.imgLeftMenu);
imgRightMenu=(ImageButton)findViewById(R.id.imgRightMenu);

mDrawerlayout.setDrawerListener(mDrawerToggle);

//============== Define a Custom Header for Navigation drawer=================//

LayoutInflater inflator=(LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v=inflator.inflate(R.layout.header, null);

imgLeftMenu=(ImageButton)v.findViewById(R.id.imgLeftMenu);
imgRightMenu=(ImageButton)v.findViewById(R.id.imgRightMenu);

getSupportActionBar().setHomeButtonEnabled(true);

// getSupportActionBar().setDisplayHomeAsUpEnabled(true);

getSupportActionBar().setDisplayShowTitleEnabled(false);

getSupportActionBar().setDisplayUseLogoEnabled(false);

getSupportActionBar().setDisplayShowCustomEnabled(true);

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#1281A9")));

getSupportActionBar().setIcon(
new ColorDrawable(getResources().getColor(android.R.color.transparent)));

getSupportActionBar().setCustomView(v);

imgLeftMenu.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
if (mDrawerlayout.isDrawerOpen(mDrawerList_Right)){
mDrawerlayout.closeDrawer(mDrawerList_Right);
}
mDrawerlayout.openDrawer(mDrawerList_Left);
}
});

imgRightMenu.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if (mDrawerlayout.isDrawerOpen(mDrawerList_Left)){
mDrawerlayout.closeDrawer(mDrawerList_Left);
}
mDrawerlayout.openDrawer(mDrawerList_Right);
}
});

Fill_LeftList();
Fill_RightList();

RefreshListView();

}

// Filling the ArrayLists

public void RefreshListView() {
objectArray_left.clear();
for (int i = 0; i < dataArray_left.size(); i++) {
Object obj = new Object();
objectArray_left.add(obj);
}
Log.d("object array", "" + objectArray_left.size());
Left_Adapter = new ListItemsAdapter_Left(objectArray_left, 1);
mDrawerList_Left.setAdapter(Left_Adapter);

objectArray_right.clear();
for (int i = 0; i < dataArray_right.size(); i++) {
Object obj = new Object();
objectArray_right.add(obj);
}
Log.d("object array", "" + objectArray_right.size());
Right_Adapter = new ListItemsAdapter_Right(objectArray_right, 1);
mDrawerList_Right.setAdapter(Right_Adapter);

}

public void Fill_LeftList()
{

dataArray_left.clear();

dataArray_left.add("Option 1");
dataArray_left.add("Option 2");
dataArray_left.add("Option 3");
dataArray_left.add("Option 4");
dataArray_left.add("Option 5");

}

public void Fill_RightList()
{
dataArray_right.clear();

dataArray_right.add("Option 1");
dataArray_right.add("Option 2");
dataArray_right.add("Option 3");
dataArray_right.add("Option 4");
dataArray_right.add("Option 5");
}

// ============== Left Listview Adapter Implementation;=====================//

private class ListItemsAdapter_Left extends ArrayAdapter<Object>
{
ViewHolder holder1;

public ListItemsAdapter_Left(List<Object>items,int x) {
// TODO Auto-generated constructor stub
super(MainActivity.this, android.R.layout.simple_list_item_single_choice, items);
}

@Override
public String getItem(int position) {
// TODO Auto-generated method stub
return dataArray_left.get(position);
}

public int getItemInteger(int pos)
{
return pos;

}
@Override
public int getCount() {
// TODO Auto-generated method stub
return dataArray_left.size();
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub

LayoutInflater inflator=getLayoutInflater();

convertView=inflator.inflate(R.layout.data, null);

holder1=new ViewHolder();

holder1.text=(TextView)convertView.findViewById(R.id.txtData);

holder1.iv=(ImageView)convertView.findViewById(R.id.imgView);

convertView.setTag(holder1);

String text=dataArray_left.get(position);
holder1.text.setText(dataArray_left.get(position));

return convertView;
}

}

//=============Right Listview Adapter Implementation;================//

private class ListItemsAdapter_Right extends ArrayAdapter<Object>
{
ViewHolder holder1;

public ListItemsAdapter_Right(List<Object>items,int x) {
// TODO Auto-generated constructor stub
super(MainActivity.this, android.R.layout.simple_list_item_single_choice, items);
}

@Override
public String getItem(int position) {
// TODO Auto-generated method stub
return dataArray_right.get(position);
}

public int getItemInteger(int pos)
{
return pos;

}
@Override
public int getCount() {
// TODO Auto-generated method stub
return dataArray_right.size();
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub

LayoutInflater inflator=getLayoutInflater();

convertView=inflator.inflate(R.layout.data, null);

holder1=new ViewHolder();

holder1.text=(TextView)convertView.findViewById(R.id.txtData);

holder1.iv=(ImageView)convertView.findViewById(R.id.imgView);

convertView.setTag(holder1);

String text=dataArray_right.get(position);
holder1.text.setText(dataArray_right.get(position));

return convertView;
}

}

private class ViewHolder {
TextView text,textcounter;
ImageView iv;

}

}

Finally you will get a dual Navigation drawer that looks something like this.

Hope you Enjoyed it & See you in the Next tutorial.

Monday, August 5, 2013

Android Charts using A-Chart Engine- Part 1(Line Chart)

Line Charts Using A-Chart Engine

It is important that in today's world charts is an essential feature in most of the business enterprise applications. So therefore in this tutorial we'll take a look of how to implement some of the business charts. Let us begin with the simple Line Chart implementation.

Step 1

First of all download the latest version of the A-Chart Engine library from this link. Then copy the jar file into the libs folder of your project.

Step 2

Update the activity_main.xml like the following:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/Chart_layout"
android:orientation="vertical">

</LinearLayout>

</LinearLayout>

Step 3

In the main.java do the following steps.

// First Create a Graphical View object called mChart.

private GraphicalView mChart;

private String[] mMonth = new String[] {
"Jan", "Feb" , "Mar", "Apr", "May", "Jun",

"Jul", "Aug" };

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

OpenChart();
}

private void OpenChart()
{
/ / Define the number of elements you want in the chart.
int z[]={0,1,2,3,4,5,6,7};

int x[]={10,18,32,21,48,60,53,80};

// Create XY Series for X Series.
XYSeries xSeries=new XYSeries("X Series");

// Adding data to the X Series.
for(int i=0;i<z.length;i++)
{
xSeries.add(z[i],x[i]);

}

// Create a Dataset to hold the XSeries.

XYMultipleSeriesDataset dataset=new XYMultipleSeriesDataset();

// Add X series to the Dataset.
dataset.addSeries(xSeries);

// Create XYSeriesRenderer to customize XSeries

XYSeriesRenderer Xrenderer=new XYSeriesRenderer();
Xrenderer.setColor(Color.GREEN);
Xrenderer.setPointStyle(PointStyle.DIAMOND);
Xrenderer.setDisplayChartValues(true);
Xrenderer.setLineWidth(2);
Xrenderer.setFillPoints(true);

// Create XYMultipleSeriesRenderer to customize the whole chart

XYMultipleSeriesRenderer mRenderer=new XYMultipleSeriesRenderer();

mRenderer.setChartTitle("X Vs Y Chart");
mRenderer.setXTitle("X Values");
mRenderer.setYTitle("Y Values");
mRenderer.setZoomButtonsVisible(true);
mRenderer.setXLabels(0);
mRenderer.setPanEnabled(false);

mRenderer.setShowGrid(true);

mRenderer.setClickEnabled(true);

for(int i=0;i<z.length;i++)
{
mRenderer.addXTextLabel(i, mMonth[i]);
}

// Adding the XSeriesRenderer to the MultipleRenderer.
mRenderer.addSeriesRenderer(Xrenderer);

LinearLayout chart_container=(LinearLayout)findViewById(R.id.Chart_layout);

// Creating an intent to plot line chart using dataset and multipleRenderer

mChart=(GraphicalView)ChartFactory.getLineChartView(getBaseContext(), dataset, mRenderer);

// Adding click event to the Line Chart.

mChart.setOnClickListener(new View.OnClickListener() {

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

SeriesSelection series_selection=mChart.getCurrentSeriesAndPoint();

if(series_selection!=null)
{
int series_index=series_selection.getSeriesIndex();

String select_series="X Series";
if(series_index==0)
{
select_series="X Series";
}else
{
select_series="Y Series";
}

String month=mMonth[(int)series_selection.getXValue()];

int amount=(int)series_selection.getValue();

Toast.makeText(getBaseContext(), select_series+"in" + month+":"+amount, Toast.LENGTH_LONG).show();
}
}
});

// Add the graphical view mChart object into the Linear layout .
chart_container.addView(mChart);

}

}

Finally You will get a Line Chart that will look like this.

Hope you Enjoyed it & See you in the Next tutorial.

Tuesday, July 2, 2013

Android Localization

In this tutorial I'll be showing you how android localization can be done simply and not without any difficulties. Android localization is a very important feature when you're going to publish your app globally across many countries.

Now let's start developing the Android localization project.

Step 1:

First create values-fr (fr means French) and values-it (it means Italian) in the res folder.

Step 2:

Next declare the following statements in the following folders.

In values folder:

Strings.xml

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

<resources>

<string name ="app_name" > Localization_Android </string>
<string name ="action_settings" > Settings </string>
<string name ="hello_world" > Hello world! </string>
<string name ="text" > Hello! My name is Jei </string>

</resources>

In values-fr folder:

Strings.xml

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

< resources >

<string name = "text"> Bonjour! Mon nom est Jei </string>

</resources>

In values-it folder:

Strings.xml

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

< resources >

<string name = "text"> Ciao! Il mio nome è Jei </string>

</resources>

Step 3:

In main.xml declare these following components.

< LinearLayout xmlns: android="http://schemas.android.com/apk/res/android"
xmlns : tools="http://schemas.android.com/tools"
android : layout_width="fill_parent"
android : layout_height="fill_parent"
android : orientation="vertical">

<Spinner
android : id="@+id/spinner1"
android : layout_width="match_parent"
android : layout_height="wrap_content">
</Spinner>

<Button
android : id ="@+id/button1"
android : layout_width ="match_parent"
android : layout_height ="wrap_content"
android : text ="Submit"
android : onClick="onClick"/>

</LinearLayout>

Step 4:

Create another xml file called text.xml to display localization text.

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

< AbsoluteLayout
android : layout_width=" fill_parent "
android : layout_height=" fill_parent ">

< TextView
android : id="@+id/textView1"
android : layout_width="wrap_content"
android : layout_height="wrap_content"
android : text="@string/text"
android : textAppearance="?android:attr/textAppearanceLarge" />

</AbsoluteLayout >

</LinearLayout >

Step 5:

Now lets start coding the functionality in the MainActivity class. Now remember the most important functionality that we'll be using in this project is the locale function. Locales are used to alter the presentation of information such as numbers or dates to suit the conventions in the region they describe. So we'll be using the locale function to perform the localization for this project.

MainActivity.java

import java.util.Locale;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.res.Configuration;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MainActivity extends Activity {

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

Spinner spinner=(Spinner) findViewById (R.id.spinner1);
spinner.setPrompt ("select language");

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item,languages);

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);

spinner.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override
public void onItemSelected(AdapterView<?> arg0, View arg1,
int pos, long arg3) {
// TODO Auto-generated method stub

Configuration config=new Configuration();

switch(pos)
{
case 0:
config.locale=Locale.ENGLISH;
String languageToLoad="en";

break;

case 1:
config.locale=Locale.ITALIAN;
String languageToLoad1="it";

break;
case 2:
config.locale=Locale.FRENCH;
String languageToLoad2="fr";

break;

default:
config.locale=Locale.ENGLISH;
break;
}
getResources().updateConfiguration(config, null);
}

@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}

});
}

public void onClick(View v) {
startActivity(new Intent(getBaseContext(), TextActivity.class));
}

private String[] languages = { "English", "Italian", "French" };

}

TextActivity.java

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class TextActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.text);
}

public void onClickProceed(View view)
{
Intent intent=new Intent(TextActivity.this,TestingActivity.class);
startActivity(intent);

}

}

Screen Shots:

See you in the Next Tutorial. Take Care !