GDG Ankara Devfest 2015 – Android101 Workshop

Hello, this tutorial shows what we have done at Android101 Workshops of GDG Ankara Devfest 2015. In this workshop, we try to make an android application that asks for username and password to user. If username name and password is correct, application shows a wellcome message on a second screen. Below video shows final application at the end of workshop.

Lets get started.

1. Installation for Environments
2. Starting First Project
     a. Designing Layouts
     b. Implementing Activities
3. Running the Project

1.Installation for Environments

If you don’t have any installation for android developing like Android Studio,JDK,Genymotion, you can follow section 1 : Installation for Environment of this tutorial. It is enough to complete section 1.

2.Starting First Project

At this step, I assume that you have completed all installations properly.

  • Open your Android Studio and click ‘Start a new Android Studio Project’Screen Shot 2015-10-06 at 16.32.04

 

  • Give your application name in below screen. Others will be generated from application name automatically. I have to give some information about this screen.
    Application name : Obviously app name. You can rename in project don’t worry.
    Package name : It is generated from company domain. Consider the package name as an id of application. So every application has an id on play market and their ids are their package name. You can rename this with clicking ‘Edit’ button. You can also do it in project. Give what you want here. Its up to you.
    Project Location : It is the location of your project files. Root directory name of your project is generated from application name but you can change it. Application name and Root directory name do not have to be the same.Screen Shot 2015-11-12 at 14.24.00

 

  • Select minimum sdk of your aplication. Minimum sdk means when your application released on market, it can be used by only devices has minimum sdk and higher. Click Next.Screen Shot 2015-10-06 at 16.54.08

 

  • Select Empty Activity and click Next.Screen Shot 2015-10-16 at 16.08.54

 

  • Leave this screen as itself and click Finish. Activity concept will be explained later.Screen Shot 2015-10-16 at 16.09.04

 

  • When finished, below screen is shown. Let me introduce project elements we use frequently at first stages.Screen Shot 2015-11-12 at 15.34.56
    1) net.mskurt.firstapplication  : This folder contains all java files. So you will write all java codes under this folder.

    2) res : This folder contains all resources which is used by application. Layouts, images, themes, colors, strings…etc.

    3) AndroidManifest.xml : This xml file is the manifest of application.In manifest, you can declare application’s theme,permissions,activities,services…etc.

  • Right now we are ready to developing. When an android app is developed, there are two main sides you deal with. Layout side (screen desingning) and java side. In layout side, you code a simple xml file. You decide your view elements (texts,images,buttons,pagers…etc) to show and place them at the screen. In java side, you bring dinamism,functionality to your app. For example, you declare that your app has a button in layout side, but you declare what will happen when that button is clicked in java side.
a. Designing Layouts
  • Open your res/layout/activity_main.xml. This folder decide that what view elements your app includes.
  • You can design your screen in two ways. First is drag – drop view elements(this generates xml codes automatically) and second is coding xml manually (which I prefer). I called them Design Mode and Text Mode. You can see how to switch modes on below video.

 

  • You can design your screen with drag-drop method in design mode like below. Also you can change features of your views and preview your screen different orientations and different screen sizes.

 

  • But as I said before, I suggest you to use Text mode. So your res/layout/activity_main.xml is opened. Switch to text mode and copy paste below xml code. Do not forget that we set an id for each view (example : android_id="@+id/username_edittext). We use these ids on java side.

 

  • Switch to design mode and see how your screen looks.Screen Shot 2015-11-13 at 10.29.55

 

  • If you want to learn more about designing layouts, follow this tutorial.

 

  • Our application contains two screen as you know. First screen is ready, lets design second one. Right click on res/layout folder and create a new layout resource file named activity_second like below.
    Screen Shot 2015-10-13 at 16.05.15
    Screen Shot 2015-10-25 at 12.58.54

 

  • Copy paste below to res/layout/activity_second.xml.
  • So designing screens are done here, lets continue with java side.
b. Implementing Activities
  • Before continue, I will explain simply what is activity.
    If I give the definition of activity from developer.android.com :“An Activity is an application component that provides a screen with which users can interact in order to do something, such as dial the phone, take a photo, send an email, or view a map.”So, you can assume activity as an application page-screen which is used by users to do somethings.In this scenario, we have to activities (screens). First one shows a login form and asks for some information to user. Second one just shows a wellcome message.For more information about Activities follow this.
  • Open your MainActivity (first screen) which is located in your package.Screen Shot 2015-11-13 at 11.10.49

 

  • Copy paste below code (excluding your package declaration, it is top of the MainActivity)

    setContentView method is important. It declares which layout design (we have two layouts, activity_main and activity_second) will be placed in this activity screen. MainActivity is the first screen of our application so we choose activity_main layout.

 

  • Run your application and see the result. If you don’t know how to run android application follow this tutorial. You should see below on your simulator or device screen.
    layout-2015-11-13-114359

 

  • Open your MainActivity again and find your two edittexts and button with their ids.

     
  • So,what will happen when button is clicked ? We set a click listener to button to create an event when it is clicked.

     
  • We want to know what is typed on username and passwrod edittexts so lets get them and check them for verifying. If they are empty or incorrect show toast messages.

     
  • Our first screen is ready, next is second. Right click your package and create new java class named SecondActivity.Screen Shot 2015-10-25 at 12.53.36Screen Shot 2015-10-25 at 12.53.50

 

  •  Open your SecondActivity and copy paste below code.

     
  • So we have a SecondActivity now, we need to start second activity from main activity (open second screen from first screen) but there is one important thing to do.
    Note

    If we create an activity, we need to declare it in AndroidManifest.xml. You can find it here.
    Screen Shot 2015-10-25 at 13.09.49


    In AndroidManifest.xml , you need to find an activity declaration. (It doesnt have to be the same just pay attention <activity> …. </activity> tag).

    This activity declaration is for MainActivity


    Declare SecondActivity below MainActivity declaration like this:


    You can ask yourself that what <intent-filter> tag is. Android applications may have lots of activities. So the system needs to know which activity is the first activity which comes to screen when application starts. So <intent-filter></intent-filter> indicates the MainActivity as the first activity of application.

  • Lets open SecondActivity from MainActivity. If username and password informations are correct start SecondActivity like below.
  • Everything is ok. Run your application and see the result. If you don’t know how to run android application follow this tutorial.
download_source_icon Download Source Code
If you don’t know how to open an existing Android Studio Project, follow this tutorial.

Bir Cevap Yazın