1.Tworzymy nowy projekt w AndroidStudio
File -> new -> newProject ->Empty Activity
2.Wchodzimy w folder app -> res -> layout -> activity_main.xml
3.W trybie graficznym układamy wygląd naszej aplikacji
a) Usuwamy wszystkie utworzone automatycznie elementy aplikacji
b) Wymaganie egzaminacyjne:
– „Zastosowany typ rozkładu liniowy wertykalny (Linear / Stack lub inny o tej idei) z zagłębionym rozkładem liniowym horyzontalnym dla przycisków.”
Aby spełnić wymaganie i poprawnie ustawić elementy naszej strony wybieramy zakładkę Layouts
Pierw ułożenie elementów w poziomie – Przeciągamy na widok naszej aplikacji LineralLayout (vertical). Utworzy to pewnego rodzaju „boxa” na nasze elementy i automatycznie będzie układać je w poziomie.
Aby spełnić wymaganie egzaminacyjne musimy ułożyć nasze przyciski w poziomie – tutaj przyda nam się LineralLayout (horizontal) który umieszczamy w naszym „boxie”
c) Przejdźmy do tworzenia elementów naszej aplikacji
– Tytuł:
Text -> TextView i umieszczamy w naszym boxie
Po kliknięciu na textView wchodzimy w atrybuty (Attributes) i zmieniamy wartości:
– id: musi odnosić się do tego czym jest nasz tekst, sugeruje: appTitle
– text: musi zawierać nasz tekst – w tym przypadku „Domek w górach”
– textColor: ustawiamy na szary (#808080)
– textSize: musi być największy spośród wszystkich tekstów na stronie, zastosujmy 34sp
– textAppearance: ustawiamy na „Large”
– Obrazek
Common -> ImageView
Wyszukujemy nasze zdjęcie i dodajemy je
Aby obraz wyrównał nam się do krawędzi wyszukujemy właściwość „scaleType” i ustawiamy ją na „fitXY”, możemy również opcjonalnie zmienić id naszego obrazka, jednak nie ma to większego znaczenia.
– Pod obrazkiem umieścimy nasze przyciski
Buttons – > Button i przeciągamy (UWAGA Przyciski należy przeciągnąć do LineralLayout (horizontal))
Ustawiamy atrybuty dla naszego layoutu oraz każdego przycisku po kolei zgodnie z wymaganiami egzaminacyjnymi:
Wracamy do trybu graficznego aby dodać kolejne elementy naszej aplikacji:
– Text – TextView -> do licznika polubień zastosujmy id counter
– Linia horyzontalna – Widgets -> Horizontal divider lub w kodzie xml
– Tekst – TextView – > ustawiamy pod sobą dwa text view na napis opis i treść naszego opisu
Finalny wygląd naszej aplikacji po stronie frontendu:
Po stronie kodu xml:
4. Przechodzimy do app -> java -> com.example.nazwa_aplikacji i otwieramy plik MainActivity.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | package com.example.domekwgorach; // package z nazwą aplikacji naszej import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; public class MainActivity extends AppCompatActivity { int counter = 0; // zmienna obsługująca licznik dla naszej aplikacji @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Tworzymy obiekty typu button dla naszych przycisków Button likeBtn = findViewById(R.id.like); Button dislikeBtn = findViewById(R.id.dislike); // Dodajemy event listenery dla naszych przycisków: // po kliknięciu na likeBtn zmienna counter inkrementuje się // a następnie funkcja setText wyświetla go w aplikacji // po kliknięciu dislikeBtn sprawdzamy czy wartość licznika // jest większa od 0, jeśli tak dekrementujemy, wypisujemy likeBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { counter++; // Pobieramy textview aby podmienić w nim tekst TextView likes = (TextView)findViewById(R.id.counter); likes.setText(counter + " polubień"); } }); dislikeBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (counter > 0){ counter--; // Pobieramy textview aby podmienić w nim tekst TextView likes = (TextView)findViewById(R.id.counter); likes.setText(counter + " polubień"); } } }); } } |
Nasza aplikacja jest gotowa!
Oto jej wygląd na przykładowym emulatorze: