Sunday, March 1, 2015

101 MySuperHero Android SplashScreen and StartActivity


.
101 MySuperHero Android SplashScreen and StartActivity

0) Starting Up

Continue from the previous tutorial or download startup files.

1) Adding a button to the layout

File: res/layout/activity_splash.xml
<RelativeLayout
    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:background="@drawable/repeatsuperherosmall"
    tools:context=".SplashActivity" >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/superhero"          
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
            />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:text="See My Hero"
        android:layout_centerHorizontal="true"
        android:textColor="#ffffff"
        android:background="#A21616"/>
</RelativeLayout>
OUTCOME.

2) Add a new activity SuperHeroesActivity

Type a name SuperHeroesActivity.
Check that you get the following files generated.

2.1) Layout File

File:res/layout/activity_super_heroes.xml
<RelativeLayout 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"
    tools:context=".SuperHeroesActivity" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
</RelativeLayout>

2.2) Controller File

File: SuperHeroesActivity.java
package com.example.mysuperhero;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class SuperHeroesActivity extends Activity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_super_heroes);
        }
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
                // Inflate the menu; this adds items to the action bar if it is present.
                getMenuInflater().inflate(R.menu.activity_super_heroes, menu);
                return true;
        }
}

3) Switch from Splash To SuperHeroes Activity

Assign onClick=showSuperHeroes attribute to Splash Layout.
Add showSuperHeroes() method in Splash Controller.
Use StartActivity to start the SuperHeroesActivity.

3.1) Add Button onClick attribute to Layout

File: res/layout/activity_splash.xml
<RelativeLayout 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:background="@drawable/repeatsuperherosmall"
    tools:context=".SplashActivity" >
        <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
                android:background="@drawable/superhero"          
                android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
            />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
        <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:text="See My Hero"
        android:layout_centerHorizontal="true"
        android:textColor="#ffffff"
        android:background="#A21616"
        android:onClick="showSuperHeroes" />
</RelativeLayout>

3.2) Add method showSuperHeroes to Controller

File: SplashActivity.java
package com.example.mysuperhero;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
public class SplashActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_splash, menu);
        return true;
    }
   
    public void showSuperHeroes (View v){
            startActivity(new Intent(SplashActivity.this,SuperHeroesActivity.class));
            finish();
    }
}

4) Auto Switching Using Delay

Besides the button clicks, we can program the apps to automatically start the SuperHeroesActivity after certain time delay.
We declare a method setNextActivity() and define a handler to run the delay process.
We also add a statement to cancel this handler if the user clicks the button.
File: SplashActivity.java
package com.example.mysuperhero;
import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.widget.Toast;
public class SplashActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        setNextActivity();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_splash, menu);
        return true;
    }
    public void showSuperHeroes (View v){
            startActivity(new Intent(SplashActivity.this,SuperHeroesActivity.class));
            /** Cancel delay handler **/
            handler1.removeCallbacksAndMessages(null);
            finish();
    }
    private void setNextActivity(){
        handler1.postDelayed(new Runnable() {
            // Using handler with postDelayed called runnable run method
            @Override
            public void run() {
                //display in short period of time
                //Toast.makeText(getApplicationContext(), "Ending now...", Toast.LENGTH_SHORT).show();
                    startActivity(new Intent(SplashActivity.this,SuperHeroesActivity.class));
                finish();
            }
        }, 5*1000); // wait for 5 seconds
    }
}

5) Creating Full Screen

Splash Screen normally occupies the whole screen.
Add statements to set Full Screen mode.
package com.example.mysuperhero;
import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
public class SplashActivity extends Activity {
        Handler handler1=new Handler();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /** Hiding Title bar of this activity screen */
        getWindow().requestFeature(Window.FEATURE_NO_TITLE);

        /** Making this activity, full screen */
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN);

        /** Sets a layout for this activity */
        setContentView(R.layout.activity_splash);
       
        /** Set delay time and call next activity */
        setNextActivity();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_splash, menu);
        return true;
    }
    public void showSuperHeroes (View v){
            startActivity(new Intent(SplashActivity.this,SuperHeroesActivity.class));
            /** Cancel delay handler **/
            handler1.removeCallbacksAndMessages(null);
            finish();
    }    
    private void setNextActivity(){
        handler1.postDelayed(new Runnable() {
            // Using handler with postDelayed called runnable run method
            @Override
            public void run() {
                //display in short period of time
                //Toast.makeText(getApplicationContext(), "Ending now...", Toast.LENGTH_SHORT).show();
                    startActivity(new Intent(SplashActivity.this,SuperHeroesActivity.class));
                finish();
            }
        }, 5*1000); // wait for 5 seconds
    }
}

6) Getting Rid Of Blank White Screen On Start Up

You may notice that there is a white blank screen that appears a short while before our SplashActivity comes out.
To get rid of this, add custom theme “splashscreen” to customize the settings.
superhero-splash-white-0.gif
File: res/values/styles.xml
<resources>
    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>
    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    <style name="SplashScreen">
        <item name="android:padding">0dp</item>
        <item name="android:windowBackground">@android:color/black</item>
        <item name="android:windowFrame">@null</item>
    </style>
</resources>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mysuperhero"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.mysuperhero.SplashActivity"
            android:theme="@style/SplashScreen"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.example.mysuperhero.SuperHeroesActivity"
            android:label="@string/title_activity_super_heroes" >
        </activity>
    </application>
</manifest>
superhero-splash.gif

DOWNLOAD


.

100 Getting Started With Android Developer Tools


.
100 Getting Started With Android Developer Tools
This tutorial series is about Android Apps Development using Android Developer Tools (ADT).
ADT version used for this tutorial is V.21.0.1 that includes Android Version 4.2 (API Level 17).
Google has stopped supporting ADT in favor of Android Studio.
Android Studio requires more spaces, resources and installation processes as compared to ADT which is actually a portable package that can be easily copied and pasted. ADT also runs on older machines with Win XP. Hence, ADT is more practical for beginners to quickly learn the concept and develop apps.
The materials for this tutorial are compatible with Android Studio. You can just import them into Android Studio and they should work. The codes, concepts and programming practices in general are the same.

1) Getting Started

If you do not have a copy of ADT, you can download it from here .
ADT requires Java SDK. Install Java JDK 1.7 before running ADT. Download JDK, http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html .
Run ADT and check that you are running the right version.

2) Project Creation Wizard

2.1) Select menu File/New/Android Application Project

2.2) Type Application Name.

Give the name MySuperHero.

2.3) Configure Project.

Accept default.

2.4) Configure Launcher Icon

Accept defaults.

2.5) Create Activity

Accept defaults.

2.6) Create Blank Activity

Give a name SplashActivity.
Project Creation done.

3) Observe Important Files

3.1) AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mysuperhero"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.mysuperhero.SplashActivity"
            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>

3.2) SplashActivity.java

package com.example.mysuperhero;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class SplashActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_splash, menu);
        return true;
    }
   
}

3.3) res/layout/activity_splash.xml

<RelativeLayout 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"
    tools:context=".SplashActivity" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
</RelativeLayout>

4) Android Emulator

Select menu File/Window/Android Virtual Device Manager.
Click New...
AVD Name: WQVGA33
Device: 3.3” WQVGA
Target: Android 4.2 - API Level 17
Wait until the emulator has fully loaded Android OS.

5) Running Android Apps on Emulator

Right-click the project name, select Run As/Android Application.

6) App Icon

ic_launcher.png
LDPI
MDPI
HDPI
XHDPI
Download the images above and replace the ic_launcher.png file in the folders below. Make sure that you save the correct image sizes to the respective folders.
OPTIONAL:
replace the file ic_launcher-web.png in the project root folder as well.
ic_launcher-web.png
OUTCOME.

7) Image Resources

7.1) ImageView Resource

We can further modify the layout by adding the super hero image to the activity.
Create a new folder res/drawable.
Put the image below as superhero.png.
superhero.png
Add ImageView to the layout
File: res/layout/activity_splash.xml
<RelativeLayout 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"
    tools:context=".SplashActivity" >
        <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/superhero"          
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />
        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
</RelativeLayout>
OUTCOME.

7.2) Layout Background Resource

Save the image below as res/drawable/superherosmall.png
ic_launcher.png
Create a new drawable XML file.
Type the name repeatsuperherosmall
File:res/drawable/repeatsuperherosmall
<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/superherosmall"
    android:tileMode="repeat" />
Edit Layout file to insert repeatsuperherosmall drawable item.
File: res/layout/activity_splash.xml
<RelativeLayout 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:background="@drawable/repeatsuperherosmall"
    tools:context=".SplashActivity" >
        <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/superhero"          
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />
        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
</RelativeLayout>
OUTCOME.

DOWNLOAD


.