Android e Commerce App Tutorial Tutorial

Splash Screen

In the first article, of our e-Commerce app tutorial, we will create a Splash Screen. Every time when a user opens our "dealsato.xyz" E-Commerce App we will display a splash screen. We are going to start by creating a new Android Studio Project. The following image shows what we are going to achieve in this article.

Refer the Adobe XD app prototype document. We will create all the screens available in this Document. It is an Adobe XD CC Application Prototyping tutorial.

https://vlemonn.com/tutorial/adobe-xd-cc/prototype/

Start with creating a new Android Studio Project.

Next Resources: We need to create the following resources for our Splash Screen.

Splash Screen Background Image

As per our reference image, we need an image for the splash screen. For this, we downloaded the following PSD file from freepik.com.

https://www.freepik.com/free-psd/shopping-bag-mockup-with-stylish-woman_1577542.htm#term=shopping%20bag&page=4&position=30

Download and open it. You can use Adobe Photoshop or Adobe Illustrator. We need to create the splash screen image with following resolutions.

  • LDPI:
    • Portrait: 200x320px
    • Landscape: 320x200px
  •  MDPI:
    • Portrait: 320x480px
    • Landscape: 480x320px
  • HDPI:
    • Portrait: 480x800px
    • Landscape: 800x480px
  • XHDPI:
    • Portrait: 720px1280px
    • Landscape: 1280x720px
  • XXHDPI
    • Portrait: 960x1600px
    • Landscape: 1600x960px
  • XXXHDPI 
    • Portrait: 1280x1920px
    • Landscape: 1920x1280px

In the splash screen background images ignore landscape. We only interested in Portrait mode. Create a new Adobe Illustrator Document with the resolution 320 x 480.

Once you are done with splash screen background image editing. Export it. Rename the "artboard" to "i_splash_screen". We need to export it as per Android Screens. Select the Android option and export the final image. Adobe Illustrator exports your splash screen for all the required resolutions.

Copy all the images in the respective folders.

Application Logo

We created an app logo in our Adobe XD CC Tutorial. We will use the same. Download the following document. Open it in Adobe XD CC. Select the main logo and export it in SVG format.

FileDownload
Dealsatoxyz_Logo.xdLogin to Download

Open the exported SVG file for the logo. We are using Adobe Illustrator. Resize "artboard", the new "artboard" size must be 48 x 48. Arrange logo in the centre.

Export logo of Android Application. Adobe Illustrator will create copies based on all the required resolutions.

Copy all the images in the respective folders. Ignore round launcher icon. We can change it later. For the time being, create a copy for "ic_launcher" and rename it to "ic_launcher_round".

Finally, open Main Logo.svg file in Adobe Illustrator. Export it in SVG format. Import Main Logo SVG Asset inside Android Studio.

We have all our required image resources now. Next, we will add a Splash Activity.

Splash Screen Activity

Now we need to create our first Activity. Right click on "res" folder and select a "BlankActivity". Make it a Launcher Activity. We are using the Constraint Layout for the activity.

Open "activity_splash.xml" file. We need to use @mipmap/i_splash_screen as the background image.

Next, we need to add a logo. Add an ImageView. User source drawable XML file for "ic_launcher". Arrange ImageView so it looks a the cente of the shopping bag. Next, we need to add a "TextView" with text Best Quality Deals.Now we need to add three buttons. Arrange button as per the reference image. Use following string resources for colors and text.

Code

<pre class="brush:as3;">
&lt;resources&gt;
&nbsp; &nbsp; &lt;string&nbsp;name=&quot;app_name&quot;&gt;Dealsatoxyz&lt;/string&gt;
&nbsp; &nbsp; &lt;string&nbsp;name=&quot;best_quality_deals&quot;&gt;Best Quality Deals&lt;/string&gt;
&nbsp; &nbsp; &lt;string&nbsp;name=&quot;sign_in&quot;&gt;Sign In&lt;/string&gt;
&nbsp; &nbsp; &lt;string&nbsp;name=&quot;sign_up&quot;&gt;Sign Up&lt;/string&gt;
&nbsp; &nbsp; &lt;string&nbsp;name=&quot;skip&quot;&gt;Skip&lt;/string&gt;
&lt;/resources&gt;</pre>

<p>&nbsp;</p>

colors.xml

Code

<pre class="brush:as3;">
&lt;color&nbsp;name=&quot;whiteTransButton&quot;&gt;#e1ffffff&lt;/color&gt;
&lt;color&nbsp;name=&quot;blackTranButton&quot;&gt;#e1000000&lt;/color&gt;</pre>

<p>&nbsp;</p>
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="whiteTransButton">#e1ffffff</color>
    <color name="blackTranButton">#e1000000</color>
</resources>

 

We are almost done with the activity_splash.xml file. Following is the final code for "activity_splash.xml" file.

Code

<pre>
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;android.support.constraint.ConstraintLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
    xmlns:tools=&quot;http://schemas.android.com/tools&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;
    android:background=&quot;@mipmap/i_splash_screen&quot;
    tools:context=&quot;xyz.dealsato.blog.dealsatoxyz.SplashActivity&quot;&gt;


    &lt;ImageView
        android:id=&quot;@+id/imageView2&quot;
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:layout_marginBottom=&quot;8dp&quot;
        android:layout_marginEnd=&quot;8dp&quot;
        android:layout_marginStart=&quot;8dp&quot;
        android:layout_marginTop=&quot;8dp&quot;
        android:src=&quot;@drawable/ic_main_logo&quot;
        app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
        app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintHorizontal_bias=&quot;0.502&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot;
        app:layout_constraintTop_toTopOf=&quot;parent&quot;
        app:layout_constraintVertical_bias=&quot;0.612&quot; /&gt;

    &lt;Button
        android:id=&quot;@+id/btnSignIn&quot;
        android:layout_width=&quot;0dp&quot;

        android:layout_height=&quot;wrap_content&quot;
        android:background=&quot;@color/whiteTransButton&quot;
        android:text=&quot;@string/sign_in&quot;
        app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
        app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintHorizontal_bias=&quot;0.5&quot;
        app:layout_constraintStart_toEndOf=&quot;@+id/btnSignUp&quot; /&gt;

    &lt;Button
        android:id=&quot;@+id/btnSignUp&quot;
        android:layout_width=&quot;0dp&quot;
        android:layout_height=&quot;wrap_content&quot;

        android:text=&quot;@string/sign_up&quot;
        android:background=&quot;@color/blackTranButton&quot;
        android:textColor=&quot;@android:color/white&quot;
        app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
        app:layout_constraintEnd_toStartOf=&quot;@+id/btnSignIn&quot;
        app:layout_constraintHorizontal_bias=&quot;0.5&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot; /&gt;

    &lt;Button
        android:id=&quot;@+id/btnSkip&quot;

        android:layout_width=&quot;0dp&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:background=&quot;@color/whiteTransButton&quot;
        android:text=&quot;@string/skip&quot;
        app:layout_constraintBottom_toTopOf=&quot;@+id/btnSignIn&quot;
        app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot; /&gt;

    &lt;TextView
        android:id=&quot;@+id/textView&quot;
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;wrap_content&quot;
        android:layout_marginEnd=&quot;8dp&quot;
        android:layout_marginStart=&quot;8dp&quot;
        android:layout_marginTop=&quot;16dp&quot;
        android:text=&quot;@string/best_quality_deals&quot;
        android:textColor=&quot;@android:color/black&quot;
        app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot;
        app:layout_constraintTop_toBottomOf=&quot;@+id/imageView2&quot; /&gt;
&lt;/android.support.constraint.ConstraintLayout&gt;
</pre>

Run the app. Refer image for the output. Following image shows the App execution.

Now we need to edit the SplashActivity.java file. The first thing we need to hide the toolbar. Open SplashActivity.java file. Add the following line above the "setContentView(R.layout.activity_splash);" line.

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

 getSupportActionBar().hide();

Finally, Initialize all the buttons. Define a set a setOnClickListener and assign a function call for each button. As per our reference image, we have three buttons. We initialize three buttons. We are calling “openHome”, “openSignIn” and "openSignUp" on respective button click inside setOnClickListener. 

On all the three function calls we will open respective activities. We don't have all the activities yet. For this first, let's create two blank activity and one navigation drawer activity. Following is the activity's name

  1. SignInActivity Type Empty Activity
  2. SignUpActivity Type Empty Activity
  3. HomeActivity Type NavigationDrawerActivity

Note: Ignore the content for all the new activities. We will create it in the upcoming articles.

Finally, we need to add code for open activity. Add following code in the respective functions

openHome

    Intent homeIntent = new Intent(this,HomeActivity.class);

    startActivity(homeIntent);

openSignIn

    Intent signIn = new Intent(this,SignInActivity.class);

    startActivity(signIn);

openSignUp

    Intent signUp = new Intent(this,SignUpActivity.class);

    startActivity(signUp);

Launch our app and click on Skip Button. It will open Home Activity. Great this we want. Click on back key. On back key, we saw our Splash Screen again. We don't want this behavior. To avoid going back to the splash screen, add the following line after the startActivity call.

finish();

Launch our app and click on Skip Button. It will open Home Activity. Click on back key. It will close our app. We can add confirm close logic later.

What Next?

Currently, we have the assumptions user is not logged in. So we need to display all the three buttons. In case the user is already logged in then we need to hide all the three buttons and open Home Activity after 3 seconds. We are assuming after successful login we are storing a Login Token in Shared Preference. We will use the same to check the user Login Status. For this, we need to first create a Common class to access Shared Preferences. 

We are going to start with creating a new package named "data". Next, we need to create a class "UserPreferenceManager". Add the following line of code inside UserPreferenceManager class.

Code

<pre>
package xyz.dealsato.blog.dealsatoxyz.data;

import android.content.Context;
import android.content.SharedPreferences;

/**
 * Created by vlemonn_mac on 02/06/18.
 */

public class UserPreferenceManager {
    Context context;
    private SharedPreferences sharedPreferences;
    private SharedPreferences.Editor editor;

    public UserPreferenceManager(Context context) {
        this.context = context;
        openSharedPreference();
    }

    public void openSharedPreference()
    {
        sharedPreferences = context.getSharedPreferences(AppConstants.PREFERENCE_NAME, Context.MODE_PRIVATE);
    }

    public void openEditor()
    {
        editor = sharedPreferences.edit();
    }

    public void editorCommit()
    {
        editor.commit();
    }

    public void setSharedPreference(String property, String value)
    {
        openSharedPreference();
        openEditor();
        editor.putString(property,value);
        editorCommit();
    }
    public String getSharedPreference(String property,String defaultValue)
    {
        openSharedPreference();
        return sharedPreferences.getString(property,defaultValue);
    }

    public void clear()
    {
        openSharedPreference();
        openEditor();
        editor.clear();
        editorCommit();
    }
}
</pre>

Note: We will have a specific page for shared preference. You can use it to understand the code for "UserPreferenceManager" class.

For each app, we need to define the SharedPreference name. We are using an AppConstant interface to store all the Constants. Why? If we will reuse the code from another e-Commerce application. We only need to change the AppConstant interface file. For example, we are working on dealsato.xyz app shared preference name "dealsatoxyz". Let's assume we are reusing the AppConstant for amazon.in. Then we need to edit constants based on Amazon.in. Create a new Interface AppConstant inside the data package with the following code.

Code

<pre>
package xyz.dealsato.blog.dealsatoxyz.data;

/**
 * Created by vlemonn_mac on 02/06/18.
 */

public interface AppConstants {

    /* Shared Preference Name */
    String PREFERENCE_NAME=&quot;dealsatoxyz&quot;;

    /* Shared Preference Keys*/
    String PF_KEY_LOGIN_TOKEN = &quot;LoginToken&quot;;

}
</pre>

Note: It will work without changing the user preference name. But it is an example to store all the constants inside a single file.

We have done with all the required classes. Next, open SplashActiviy.java and use the following code for SplashActivity.java class.

Code

<pre>
package xyz.dealsato.blog.dealsatoxyz;

import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;

import xyz.dealsato.blog.dealsatoxyz.data.AppConstants;
import xyz.dealsato.blog.dealsatoxyz.data.UserPreferenceManager;

public class SplashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /* Hide Toolbar and Status Bar*/
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_splash);

        /* User Preference Check for login Token */
        UserPreferenceManager upm = new UserPreferenceManager(this);
        String loginToken = upm.getSharedPreference(AppConstants.PF_KEY_LOGIN_TOKEN,null);

        /* Initialize Buttons */
        Button SkipButton = findViewById(R.id.btnSkip);
        Button SignInButton = findViewById(R.id.btnSignIn);
        Button SignUpButton = findViewById(R.id.btnSignUp);

        /* If we have Login Token redirect user to Home Screen after 3 Seconds */
        if(loginToken == null)
        {
            
            SkipButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    openHome();
                }
            });
            SignInButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    openSignIn();
                }
            });
            SignUpButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    openSignUp();
                }
            });
        }
        else
        {
            SkipButton.setVisibility(View.GONE);
            SignInButton.setVisibility(View.GONE);
            SignUpButton.setVisibility(View.GONE);
            openHomeAfterNSec(3000);
        }
    }

    /* Open Home after N Seconds */
    private void openHomeAfterNSec(long seconds)
    {
        try {
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    openHome();
                }
            }, seconds);
        }
        catch (Exception e){
            openHome();
        }
    }

    /* Open Home Activity */
    private void openHome()
    {
        Intent homeIntent = new Intent(this,HomeActivity.class);
        startActivity(homeIntent);
        finish();
    }

    /* Open Sign In Activity */
    private void openSignIn()
    {
        Intent signIn = new Intent(this,SignInActivity.class);
        startActivity(signIn);
        finish();
    }

    /* Open Sign Up Activity */
    private void openSignUp()
    {
        Intent signUp = new Intent(this,SignUpActivity.class);
        startActivity(signUp);
        finish();
    }
}
</pre>

What we added to the above code. We use our "UserPreferenceManager" class to check the existence of the login token. If it exists, then we need to call "openHomeAfterNSec" function with 3000 milliseconds. This function will call openHome after n number of seconds. What is n? It is the argument for "openHomeAfterNSec" function. We called it with value 3000.

Launch the App and test your code. No changes. Yes, because our Login Token is null. So how to test the second part of our code. It's simple for the testing change the if condition from "if(loginToken == null)" to "if(loginToken != null)". After testing doesn't forget to revert the changes.

Note: It is very important to revert all the changes after the testing.

Note: Login token is very important and we need to secure it to avoid wrong use. For example, if any hackers get the hand on login token, he can miss use it. We will cover it in the future articles.

We are almost done with all the changes for Splash screen. One important thing in the above logic is login token validation. We are assuming if the login token is available, then it is correct. We don't have any code yet to verify the login token. We will cover it in the future articles. For the time being, assume if it is available, then it is a valid login token.

Finally, following is the source code for this article.

FileDownload
Dealsatoxyz_SplashScreen.zipLogin to Download

In the next article, we will learn How to create a Login Screen for our e-Commerce Application.

Other resources.

  1. Adobe XD Application Prototype tutorial
  2. Kotlin version of this tutorial
...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add