Gallery with Paging Dots Only

This is the post that demonstrate the gallery with paging dots.

The gallery contains the small white and grey dots at bottom of the screen. The small dots will be updated when user moves the gallery images. The small dots represent the position of the image in the gallery.

Below is the code for the layout. This contain an extended gallery and a linear layout for placing the small dots.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
                   android:layout_width="fill_parent" android:layout_height="fill_parent" > 
                   
     <RelativeLayout android:id="@+id/gallery_paging"
        android:layout_width="fill_parent"
        android:layout_height="800dp">
    
        <com.common.vmi.ExtendedGallery android:id="@+id/mygallery01"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:spacing="0px" 
            android:fadingEdge="none"/>
        
        <LinearLayout android:id="@+id/image_count"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:background="#00000000"
            android:layout_alignParentBottom="true" >    
        </LinearLayout>
    
    </RelativeLayout>
                    
</RelativeLayout>

Note : Use can change the height of the relative layout android:id="@+id/gallery_paging" depends on your screen size. I am using the height as 800 as my gallery.

I am using a linear layout android:id="@+id/image_count" for placing and updating the small white and gray dots.

Below is the code for ExtendedGallery

package com.common.vmi;

import android.content.Context;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.widget.Gallery;

public class ExtendedGallery extends Gallery{

    private boolean stuck = false;

    public ExtendedGallery(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
    }

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

    public ExtendedGallery(Context context) {
      super(context);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
      return stuck || super.onTouchEvent(event);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
      switch (keyCode) {
      case KeyEvent.KEYCODE_DPAD_LEFT:
      case KeyEvent.KEYCODE_DPAD_RIGHT:
        return stuck || super.onKeyDown(keyCode, event);
      }
      return super.onKeyDown(keyCode, event);
    }

    public void setScrollingEnabled(boolean enabled) {
      stuck = !enabled;
    }
    
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY){
        return super.onFling(e1, e2, 0, velocityY);
    }
}

Below is the code for MainActivity

package com.example.galarypagingdots;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.common.vmi.ExtendedGallery;

public class MainActivity extends Activity 
{
LinearLayout count_layout;
TextView page_text[];
int count = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ExtendedGallery mGallery = (ExtendedGallery) findViewById(R.id.mygallery01);
        mGallery.setAdapter(new AddImageAdapter(this));
        mGallery.setScrollingEnabled(true);
        
        count_layout = (LinearLayout) findViewById(R.id.image_count);
        count = mGallery.getAdapter().getCount();
        System.out.println("Gallery Image Count======>>>" + count);

        page_text = new TextView[count];
        for (int i = 0; i < count; i++) 
        {
            page_text[i] = new TextView(this);
            page_text[i].setText(".");
            page_text[i].setTextSize(45);
            page_text[i].setTypeface(null, Typeface.BOLD);
            page_text[i].setTextColor(android.graphics.Color.GRAY);
            count_layout.addView(page_text[i]);
        }
        mGallery.setOnItemSelectedListener(new OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view,
                    int pos, long id) {
                // TODO Auto-generated method stub
                System.out.println("Item Selected Position=======>>>" + pos);
                for (int i = 0; i < count; i++) {
                    page_text[i]
                            .setTextColor(android.graphics.Color.GRAY);
                }
                page_text[pos]
                        .setTextColor(android.graphics.Color.WHITE);
            }

            @Override
            public void onNothingSelected(AdapterView<?> arg0) {

            }
        });
    }


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

Below is the code for AddImageAdapter.

package com.example.galarypagingdots;

import android.content.Context;

import android.content.res.TypedArray;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

public class AddImageAdapter extends BaseAdapter

{

Context mycontext = null;

    int galitembg = 0;

    

    public int[] IMAGE_IDS = { R.drawable.flower_01, R.drawable.flower_02,

        R.drawable.flower_03, R.drawable.flower_04,

        R.drawable.flower_05, R.drawable.flower_06,

        R.drawable.flower_07, R.drawable.flower_08,

        R.drawable.flower_09, R.drawable.flower_10};

    

    public AddImageAdapter(Context c) 

    {

        mycontext = c;

        TypedArray typArray = mycontext.obtainStyledAttributes(R.styleable.GalleryTheme);

        galitembg = typArray.getResourceId(R.styleable.GalleryTheme_android_galleryItemBackground, 0);

        typArray.recycle();

    }

@Override

public int getCount()

{

return IMAGE_IDS.length;

}

@Override

public Object getItem(int position) 

{

return position;

}

@Override

public long getItemId(int position) 

{

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) 

{

ImageView imageview = new ImageView(mycontext);

        imageview.setImageResource(IMAGE_IDS[position]);

        imageview.setScaleType(ImageView.ScaleType.FIT_XY);

        return imageview;

}

}

Create a drawable folder in res directory. Add your favorite images in the drawable folder. I am added some 10 images in the drawable folder and added that images in the AddImageAdapter class as like below.

public int[] IMAGE_IDS = { R.drawable.flower_01, R.drawable.flower_02,

        R.drawable.flower_03, R.drawable.flower_04,

        R.drawable.flower_05, R.drawable.flower_06,

        R.drawable.flower_07, R.drawable.flower_08,

        R.drawable.flower_09, R.drawable.flower_10};

Add attrs.xml file in the res/values directory. Below is the code for attrs.xml file.

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

<resources>

    

    <declare-styleable name="GalleryTheme">

<attr name="android:galleryItemBackground" />

</declare-styleable>

    

</resources>

Below is the AndroidManifest.xml file for Gallery with paging dots application.

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

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

    package="com.example.galarypagingdots"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="18" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.example.galarypagingdots.MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

I am using the android jelly bean version for running this application. But it will run from api version 8 also.

Run the application in android device or emulator and the result will be like the below sample images.

Small dots at first position.

Small dot at third position.

Small dot at sixth position.

Small dot at tenth position.

Android Hello World

This is the post for creating your first Android Hello World application.

Open eclipse, Right click to the project explorer window, select New-->>Others, the new wizard will be displayed like below

In new wizard select Android and expand the android option and select Android Application Project and then click Next button. The next screen will look like the below image

Application Name : Enter your application name. After entering your application name, the Project Name and the Package name will be inserted.

If you are entering Application name as "HelloWorld", then the project name will be same as your application and the package name will be displayed as "com.example.helloworld". You can change the Project name and the Package name as you like if you not go with the default values in the Project and Package name.

If you are installed latest android SDK, then the Minimum Required SDK, Target SDK, Compile With and Theme options are set by default.

Minimum Required SDK is the lowest version of Android that your app support.

Target SDK  Indicates the highest version of Android with which you have tested with your application.

Compile With is the platform version against which you will compile your app. By default, this is set to the latest Android version in your SDK.

Theme specifies the Android UI style to apply for your app.

Click Next button in wizard. The Project configure screen will be displayed.

In this screen, The check box "Create custom launcher icon" is selected. It is used to create the launcher icon of your application. You can choose your custom launcher icon for your app in next screen.

Create Activity check box is selected, used to create a Main activity of your application.

Click Next button in wizard. The Configure Launcher Icon screen will be displayed.

In this screen, you can choose your launcher icon by clicking the browse button. If no image will be selected, by default the android image will become the launcher icon for your application.

Click Next button in wizard, The Create Activity screen will be displayed.

In this screen you can choose your activity.

Blank Activity : Create a blank activity with contain header.
Full screen Activity : Create an activity without header.
Master/Detail Activity : Create an activity master on left and details on right of the screen. This activity used for tablets.

Click next button, The Blank Activity screen will be displayed.

In this screen, you should have to enter the followings.

Activity Name : Name of your Activity, By default it is MainActivity.
Layout Name : Name of your layout, By default it is activity_main. Layout name will be in lower case.
Navigation Type : None.

Click Finish button to close the wizard. After clicking the finish button, a new android project will be created in eclipse and below is the project structure of your application.

All your source code will go under the src directory. All layout will go under the layout folder. All images used in your app will go under drawable-hdpi for high density devices, drawable-ldpi for low density devices, drawable-mdpi for medium density devices, drawable-xhdpi for extra high density devices and drawable-xxhdpi for larger density devices.

All your string values will go under the strings.xml file under values folder.

For hello world application you dont need to code anything. Once you created an android project successfully, the hello world application is created by default.

Below is the code for MainActivity.java. It will coded by default.

package com.example.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

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


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

Below is the code for activity_main.xml. It will coded by default.

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

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

</LinearLayout>

The text  android:text="@string/hello_world" will be refered from strings.xml file that are present under values directory.

Below is the code for strings.xml file. It will also coded by default.

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

<resources>

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

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

    <string name="hello_world">Hello world!</string>

</resources>

For each application an Android manifest xml file will be created (AndroidManifest.xml). Below is the code for AndroidManifest.xml file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.helloworld"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.helloworld.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Run the Android Application:

To run your android application, click the run configuration button in eclipse. the run configuration screen will be displayed like below.

Browse your project main program . Select "Launch Default Activity" radio button. Click Target tab in run configuration screen

In this screen, select the target device that you are going to run your application. Click Common tab in run configuration screen.

In this screen select the check box Run. Click Apply and Run button in Run configuration screen. your application will be launched in selected device. If device is an emulator, then your application will be launched in emulator.

The below is the result of Android Hello World Application.

Eclipse and Android Integration

This is the post for integrating Android to the eclipse. Following is the requirement for creating the hello world app.

1. Android Integration with eclipse
     To integrate android in eclipse, first download eclipse from eclipse.org/downloads/. After downloading eclipse launch the eclipse and goto Help-->>Install New Software.. The screen looks like below.

Click add button, the below image will be displayed.

Enter Name : Android

Location :  https://dl-ssl.google.com/android/eclipse/

and click OK. The available software for android will be displayed in available software window, like below

Select Developer Tools check box and click next button. The selected tools will be downloaded from the repository and integrated with eclipse. The download will may take three to four hours for slower net connection. After integration the android tool bar will be added to the eclipse like below. The three icons inside the rectangle is the android toolbar.

First icon is the Android SDK Manager.

Second icon is Android Virtual Device Manager.

Third icon is New Android XML File.

After integrating the Android ADT, you need to install the Android SDK. Click the Android SDK Manager icon to install SDK.

Note : I already installed "Tools", "Android4.3(API 18)" and "Android 4.3(API 17)". Hence the status displayed as "Installed". Otherwise the status will displayed as"Not Installed".

Select the latest android SDK (ie., Android4.3(API 18)) checkbox and click Install packages button. After clicking the Install packages button, you should have to accept the license to install the selected packages. After accepting the license the SDK downloading for selected packages will be started. The downloading will may take two to three hours for slower net connection.

After the successful completion of android SDK, you need to create Android Virtual Device(AVD). The AVD is used for running your application in emulator.

To create AVD, click the second icon in the android toolbar. The below screen will be displayed.

Click New button for creating the new AVD.

AVD Name : Enter name for AVD.

Device : Select device size of AVD.

Target : Select the target of AVD.

CPU/ABI : Select the CPU type to run the AVD and application.

The above mention details should need to enter for creating the new AVD. You can change the Internal storage details like RAM and VMHeap if your application required more than 512 MB of RAM..

Click OK to create the new AVD with above details.

You can create different AVD that suits for your application.