Az első tutorial alapján egy olyan alkalmazást hozunk létre, ahol két gomb és egy számláló látszik. A Click gombra kattintva a számláló elkezd növekedni, míg a Reset gombra kattintva visszaáll nullára.

1. Ehhez nyissuk meg az AndroidStudio-t

2. Hozzunk létre egy új projektet File/New/New Project…

• Az alkalmazás neve (Application Name) legyen Clicker (vagy amit jónak látunk). A Company Domain igazándiból mindegy, hogy mi, ebből lesz a package neve. Next.
• Phone & tablet legyen kipipálva, hisz erre a két platformra akarunk elsősorban alkalmazást írni. Next.
• Activity-t adunk az alkalmazásunkhoz. Az EmptyActivity-t választjuk. Ehhez hasonlít a BlankActivity, ami az EmptyActivity-nek egy bővített “verziója”, mivel a jobb alsó sarokban találhatunk egy plusz jelet, illetve a jobb felső sarokban a három pontot, ami a menü-re utal. Next.
• Az Activity neve marad MainActivity. Finish.

Miután a Grade Build befejeződik, automatikusan az (res/layout/)activity_main.xml és a MainActivity.java (az Activity neve) nyílik meg.

3. Nyissuk meg az activity_main.xml-t. Design nézetben láthatjuk, hogy hogyan is néz ki az adott platformon az alkalmazásunk. Alapértelmezetten felül, a kék sávban az alkalmazásunk neve, és alatta egy TextView-ban a Hello World szöveg látszik. A Design nézet mellett létezik a Text nézet. A Text nézetben az xml nyelv segítségével alakíthatjuk az alkalmazásunk kinézetét, míg Design nézetben egyszerűbb módon, különböző ún. Widget-ek segítségével készíthetjük el az alkalmazás egy részét, amit a Palettáról (Palette) tudunk kiválasztani.

4. Két gombra (Button) lesz szükségünk (Click és Reset), illetve az alapértelmezett HelloWorld TextView-t használjuk fel számlálóként. Két gombot húzzunk be a felületünkre a palettáról. Az első gombra kattintva jobb oldalt megjelenik a Properties. Keressük meg a Text-et, és írjuk be, hogy Click. Ez fog látszódni a gombon. Ugyanezt megtehetjük az Text nézetben. A másik gombot (Reset) így csináljuk meg. Láthatjuk, hogy a 3 widget-nek több, különböző “tulajdonsága” van. Keressük meg azt a Button-t, aminek a neve még nem lett átírva, és írjuk át:

android:text="Reset"

A TextView-nál pedig a HelloWorld-öt írjuk át 0-ra. Menjünk vissza Design nézetbe, és a TextView Properties-nél keressük meg a TextSize-t, amit állítsunk 32dp-re, hogyan jobban látszódjon a számolás. Text nézetben, a TextView-nál a tutorial szerint átírjuk az id-t , de nálam nem volt id,így az alábbi sort illesztettem be:

android:id="@+id/textViewCount"

mivel a Click gomb és a TextView összetartozik, ezért a layout_below tulajdonságot átírjuk:

android:layout_below="@+id/textViewCount"

Az id pedig legyen:

android:id="@+id/buttonClick"

Összességében a Click gomb Text nézetben így néz ki:

<Button
    android:text="Click"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textViewCount"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="48dp"
    android:id="@+id/buttonClick" />

A Reset gombnál kicsit másabb a helyzet:

android:text="Reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/buttonClick"
android:layout_alignLeft="@+id/buttonClick"
android:layout_alignStart="@+id/buttonClick"
android:layout_marginTop="32dp"
android:id="@+id/buttonReset"

Reset lesz a szöveg, ami megjelenik a gombon, és mivel a Reset gomb a Click gombbal tartozik össze, ezért az id kivételével a többi helyen a Click gombhoz “kapcsolódik”.

5. Nyissuk meg a MainActivity.java-t. Az Android Studio alapértelmezetten így hozza létre:

package nagy.anita.Clicker;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

Ezt egészítsük ki az alábbi módon:

Az @Override elé írom az alábbiakat, amivel létrehozzuk az objektumainkat. Két darab Button típusú gombot, és egy TextView típusú szöveget, ami a számlálónk.

Button btnClick;
Button btnReset;

TextView txtCount;

A létrehozás során a Button pirosan “mutatkozik”. Ha rávisszük az egeret, azt írja, hogy cannot resolve symbol ‘Button’. Az alt+enter megnyomásával importálja a szükséges osztályt, amit megtehetünk manuálisan is, legfelülre begépeljük ezt:

import android.widget.Button;

A txtCount-nál hasonló hibával találkozunk, ekkor az android.widget.TextView osztály lesz importálva.

Az onCreate metódusunkba “kössük össze” az előbb létrehozott gombokat és a szöveget azokkal a gombokkal és szöveggel, amit az xml-ben hoztunk létre:

btnClick = (Button)findViewById(R.id.buttonClick);
btnReset = (Button)findViewById(R.id.buttonReset);

txtCount = (TextView)findViewById(R.id.textViewCount);

Írjuk meg, hogy mi történjen akkor, amikor rákattintunk a Click gombra (szintén az onCreate metóduson belül):

btnClick.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String countValue = txtCount.getText().toString();

        int  intCountValue = Integer.parseInt(countValue);
        intCountValue++;

        txtCount.setText(String.valueOf(intCountValue));
    }
});

A String countValue = txtCount.getText().toString(); sorban meghívjuk a számlálónkat, mint egy sztring típusú “objektumot”, amit a következő sorban átalakítunk integerré, majd ezt növeljük a következő sorban, végül ezt az értéket visszaadjuk a TextView-nak.

6. Mentsük el az alkalmazást, majd próbáljuk ki. Mivel nekem a futtatás során az Android Studio azt a hibát írta ki, hogy “Your CPU does not support NX”, ezért azt a megoldást találtam, hogy egy külső “meghajtón” próbálom ki az alkalmazást (amúgy is telefonra írom/írjuk elsősorban az alkalmazásokat, így jobb is, ha azon próbálgatom az alkalmazásokat). Ezt egy tutorial videó segítségével oldottam meg, amit itt lehet megnézni.

Természetesen a Reset gombunk még nem működik, mivel azzal még nem foglalkoztunk, de a Click gombot nyomkodva szépen növekszik a számlálónk egyesével.

7. A Reset gomb működéséhez írjunk még egy ClickOnListener-t:

btnReset.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        txtCount.setText(String.valueOf(0));
    }
});

Ez egy egyszerűbb Listener lesz, mivel itt csak annyi a dolgunk, hogy a számlálónkat 0-ra állítsuk.

8. Mentsük el ismét az alkalmazást és próbáljuk ki mind a két gombunkat.

Ez a tutorial egy kicsit átalakítva a későbbiekben jó lehet majd az alapanyagok mennyiségének beállításánál is.