Introduction: Android App Part 1: Splash Screen Using Fragments/Kotlin

By

Hello again,

most probably you have some "free" time at home due to COVID19 and you can go back to check topics you wanted to learn in the past.

Android App development is definitely one of them for me and I decided a few weeks ago to give a second try.

Programming in Kotlin definitely reduces the effort of coding and helps to achieve results in quite short time. It is Really Great!

In this tutorial series, I will explain how to develop a Tennis Score Tracker . This App can be used when you play with friends and/or family ( you can give the tablet to your child and keep him/her busy :)). This App is based on following Kotlin Counter example.

The tutorial has following parts:

Part 1: Splash Screen using Fragments (we are here now)

Part 2: Match Configuration - Properties

Part 3: Match Score tracker

The main idea is to split the app in 3 different screens each of them will call the next one , once completed or when the user presses the respective button.

In this first part, I will explain how to create an intro screen -> check video above.

Supplies

Android Features used in this Part:

  • Fragments
  • Animation
  • Vibration
  • Media Player
  • Listeners

Required Tools:

  • Android Studio
  • Kotlin 1.3.61
  • API level 28

Required Assets

  • A beep sound file

Step 1: User Experience Design

Let's explain the features of our Intro screen.

  1. we want to have a full screen in white colour
  2. we want to have the screen always in landscape mode
  3. we want our logo-text colour in grey
  4. we want our ball colour in tones of green
  5. we want our logo-text to fade in
  6. we want a tennis ball moving in the screen ( bouncing ball)
  7. we want to play a sound every time the ball touches a surface
  8. we want to trigger a phone vibration when a sound is played
  9. we want the intro duration to be less than 4s.

Step 2: Fragment Manager and 3 Screens

Let's recall the main idea of our App, we want to have 3 screens (Intro,Properties and Match Score). For this we are going to use Fragments. So we need 3 of them one for each screen. Refer to first code snippet.

In the second one, we can find how we call our first fragment. The Splash fragment is the one to be used for our Intro.

Step 3: App and Intro Screen Layout

  • In order to fix the position of the screen and ignore any rotation of the phone , we need to add following code Picture 1 in AndroidManifest.xml.
  • In order to remove Action Bar from all screens, we need to add following code Picture 2 in styles.xml
  • In order to push full screen in all screens, we need to set some flags as in Picture 3 at 2 different methods. Oncreate() and onWindowFocusChanged.


Step 4: Defining Logo and Ball Syles

  • we defined before our text as grey, this is done under styles.xml file. Refer to Pic 1.
  • we defined as well that the ball should be in green tones.For this, we create ball.xml under drawable folder. Check Pic 2

Step 5: Animation Description

I will explain here the logic and sequence of the animation. I think it does not make sense to add code snippets here, better you go through the code yourself.


The idea of the animation is as follows:

  • After the fragment is created, the text logo is created and started
  • Once the text logo animation is completed, the tennis ball first parabolic move is invoked
  • Once the first parabolic movement is completed, a sound is played and the phone vibrates..and next parabolic movement is invoked
  • Once the last parabolic movement is completed and sound/vibration is executed we reach the point to call our second screen.

Remark: I did not create an abstract class for animations, because I wanted to keep the code flat... easier to follow at least for me:)

I will post the second part of the series in the next days, follow me if you like this part and if not, I would be glad to get your feedback.

Attachments