Guide: Android programmering för nybörjare - 2016

Trädvy Permalänk
Medlem
Registrerad
Sep 2011

Guide: Android programmering för nybörjare - 2016

Android programmering för nybörjare!
Efter fyra år är jag tillbaka med en ny och uppdaterad guide.

Fick väldigt positiv respons i förra tråden http://www.sweclockers.com/forum/trad/1130711-guide-android-p... så nu, fyra år senare, fick jag et tryck och bestämde mig för att göra det igen. Jag bestämde mig för att skriva om den från grunden då en del har ändrats.

Precis som i förra tråden så uppskattar jag all feedback jag kan få. Observera att jag inte går igenom allt som händer och förklarar varje detalj utan mer visar hur man gör/skriver koden och vad resultatet blir.

1: Ladda ner och installera Java JDK och Android Studio

Först ska vi installera Java JDK. Det gör vi genom att gå in på lhttp://www.oracle.com/technetwork/java/javase/downloads/jdk8..., acceptera villkoren och sedan väljer du vilken JDK du vill ha. I mitt fall väljer jag ”Windows x64” eftersom jag kör Windows 64-bit. När filen är nerladdad kan du klicka på den och börja installera.

Nu ska vi ladda ner Android Studio som är ett program där vi kommer att skriva vår kod i. Gå in på https://developer.android.com/studio/index.html och ladda ner Android Studio. När filen är nerladdad kan du klicka på den och starta installationen.

När du startar Android Studio för första gången så kommer du att behöva installera Android SDK. Det är bara att följa stegen så installeras allt nödvändigt. Du kan behöva kryssa i Android Emulator (osäker på om det är gjort per automatik). Emulatorn låter oss testa vår app på datorn. Du behöver alltså ingen Androidenhet för att utveckla appar!

Nu har vi installerat allt vi behöver för att komma igång!

2: Skapa ett nytt projekt

När du startar Android Studio kommer det att dyka upp ett fönster. Välj ”Start a new Android Studio project”. Under ”Application name:” skriver du in det namn som appen kommer att heta på din enhet. Jag kommer att döpa den till Hello Sweden. Under ”Company Domain:” gäller det att du har ett unikt namn eftersom att om en annan app har samma namn på Google Play kommer du inte kunna ladda upp den. Jag kommer att skriva ”alexm.com” och då ser du nedanför att ditt ”Package name:” blir com.alexm.hellosweden. På nästa sida ska du välja vilken version av Android din app ska vara kompatibel med. Jag kommer att välja Android 4.0.3 vilket betyder att alla enheter som kör Android 4.0.3 och senare kommer att kunna köra den här applikationen. Tryck på ”Next”. Välj ”Empty Activity” och tryck på ”Next” igen. Låt fälten ”Activity Name” och ”Layout Name” vara, vi behöver inte ändra dessa namn. Nu kan du trycka på ”Finish”.

3: Undersöka mapparna och dess innehåll

Till vänster kan du trycka på ”Project”, där hittar du ditt projekt. Om du öppnar upp mappen ”app” så kommer du att se ett flertal undermappar. Om du öppnar upp ”java” och sen mappen med ditt projektnamn kommer du se en fil som heter ”MainActivity.java”. Du kan tänka dig att denna ”java” mapp är mappen med alla java filer, det är här vi skriver alla vår javakod. Under ”res” hittar du bland annat ”layout”. Om du öppnar upp den ser du en fil som heter ”activity_main.xml”. Det är här vi kommer att sköta all layout i appen. ”activity_main.xml” är just nu den första layouten vi kommer att se när vi startar appen.

4: Testa applikationen

Om du nu vill testa appen så klickar du på ”run” högst upp och sedan ”run app”. Tryck på ”Create New Emulator”. Välj förslagsvis Nexus 5X, tryck på ”Next”, välj Android 7.0, tryck på ”Next” igen och slutför genom att trycka på ”Finish”. Markera emulatorn du precis skapade och tryck på ”OK”.

Nu öppnas ett nytt fönster med emulatorn och du kan nu se din app!

5: Layout

När vi håller på med layouts så finns det två stycken olika flikar att växla mellan. ”Design” och ”Text”. Under Design-fliken ser du det som du skulle sett i emulatorn/mobilen. Under text-fliken ser du all xml-kod. Koden som du ser just nu är en kod som projektet redan hade med som ett exempel.

Kodraden längst upp behöver du inte bry dig om just nu, den kommer alltid att vara där. Under den raden ser du hur det står ”RelativeLayout”. Inne i ”RelativeLayout ”ligger en ”TextView”.

Du ser under text-fliken hur det står ”android:layout_width=” och ”android:layout_height=” lite överallt. Efter det står det antingen ”match_parent” eller ”wrap_content”. Testa att växla mellan de två i ”TextView:n” för att ta reda på vad som händer. ”match_parent” fyller alltså ut hela ytan och ”wrap_content” omger bara den yta den behöver.

I din ”TextView” kan du se att det står

android:text="Hello World"

Radera det och skriv istället

android:text="valfri text"

Du ser nu under Design-fliken att det står det du skrev in. På det viset kan du alltså skriva ut text på skärmen.

Ändra texten så att det står ”Summan är 0”. Du kan även ändra textstorlek genom att skriva

android:textSize="45dp"

Skriv också in en ny kodrad där det står

android:layout_centerHorizontal="true"

för att få texten centrerad.

Nu ska vi lägga till en knapp genom att skriva in

<Button android:layout_width="250dp" android:layout_height="wrap_content" android:text="+1" android:textSize="20dp" android:layout_centerHorizontal="true" />

Kopiera knappens xml-kod och klistra in under så att du har två knappar. Byt ut texten ”+1” till ”-1”.

För att vi ska kunna referera till knappen i vår java-fil måste vi ge knapparna ett id. Så skriv in

android:id="@+id/bPlus"

för addera-knappen och

android:id="@+id/bMinus"

(b står för Button) för subtrahera-knappen. Ge även din ”TextView” ett id genom att skriva samma kod men byt ut bPlus/bMinus till tvSumma (tv=TextView). Så det ska bli

android:id="@+id/tvSumma"

Nu måste vi tala om för vår text och våra knappar att de ska ligga under varandra och inte på varandra. Lägg till

android:layout_below="@+id/tvSumma"

inuti koden på den första knappen. Gör samma sak på den andra knappen men byt ut ”tvSumma” till ”bPlus” så att vår andra knapp hamnar under den första.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.alexm.helloswed.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="45dp" android:id="@+id/tvSumma" android:layout_centerHorizontal="true" android:text="Summan är 0" /> <Button android:layout_width="250dp" android:layout_height="wrap_content" android:text="+1" android:id="@+id/bPlus" android:layout_below="@+id/tvSumma" android:textSize="20dp" android:layout_centerHorizontal="true" /> <Button android:layout_width="250dp" android:layout_height="wrap_content" android:text="-1" android:textSize="20dp" android:layout_below="@+id/bPlus" android:id="@+id/bMinus" android:layout_centerHorizontal="true" /> </RelativeLayout>

Dold text

6: Java-klasser

Öppna nu upp din .java-fil under ”java”. Från ”public class”-raden till ”}”-tecknet är din klass. Först ska vi sätta upp en variabel mellan den blå textraden (”public class…” och ”@override”. Skriv

int counter;

På nästa rad skriver du

Button add;

Du kommer få ett fel vid Button så tryck på Alt+Enter för att importera ”Button”. Nu borde felet försvinna. Skriv sedan till sub efter add så att det står

Button add, sub;

Skriv på raden under Button

TextView display;

Glöm inte importera ”TextView” som du gjorde med Button.

Under ”SetContentView” skriver du

counter = 0;

Under den raden skriver du

add = (Button) findViewById (R.id.bPlus);

Nu kopplar du alltså ihop knappen ”add” med knappen i layouts. Gör samma sak på raden under fast med den andra knappen, alltså

sub = (Button) findViewById (R.id.bMinus);

Och sist gör du det med din TextView

display = (TextView) findViewById (R.id.tvSumma);

Under den senaste raden du skrev (TextView) ska du göra en ”OnClickListener” som berättar för knappen vad den ska göra. Skriv

add.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub } });

Glöm inte att importera View (Alt+Enter). Kopiera det och klistra in så att du får en till ”OnClickListener” men ändra ”add” till ”sub”.

Nu ska vi berätta för knappen vad den ska göra och det gör vi under”//TODO Auto-generated method stub”. Skriv

counter ++;

Detta gör att vi adderar 1 varje gång vi klickar på denna knapp. Nu går vi ner till samma ställe fast för den andra knappen. Fast denna gång skriver du

counter--;

Under

counter++;

skriver du

display.setText("Summan är " + counter);

Skriv samma sak under

counter--;

Detta skriver du för att TextView:n ska kunna skriva ut det du adderar eller subtraherar.

package com.alexm.hellosweden; import android.support.v7.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; Button add, sub; TextView display; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); counter = 0; add = (Button) findViewById (R.id.bPlus); sub = (Button) findViewById (R.id.bMinus); display = (TextView) findViewById (R.id.tvSumma); add.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub counter ++; display.setText("Summan är " + counter); } }); sub.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub counter --; display.setText("Summan är " + counter); } }); } }

Dold text

7: Testa den färdiga applikationen

Testa att köra appen. Nu borde du ha en simpel miniräknare som kan addera och subtrahera.

8: Arbeta med flera olika java-klasser och layouter

Börja med att högerklicka på ditt projektnamn under ”java”. Välj ”New” och ”Java Class”. Döp klassen till StartActivity och tryck på ”OK”.

Skriv in all den här koden

package com.alexm.hellosweden; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class StartActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_start); } }

Första raden ska självklart innehålla ditt projektnamn och inte mitt.
Du kommer märka att ”activity_start” är rödmarkerad och det beror på att vi inte har en layout med det namnet.
Syftet med raden (setContentView)är att koppla ihop vår javaklass kod med en layout.

Vår nästa uppgift blir alltså att skapa en layout med det namnet.
Högerklicka på mappen ”layout”, välj ”New” och sen ”Layout Resource File”.
Döp den till ”activity_start” och tryck på “OK”.

Gå in på text-fliken och lägg till en knapp inuti RelativeLayout.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="250dp" android:layout_height="wrap_content" android:text="Miniräknare" android:layout_centerHorizontal="true" android:id="@+id/bCalc" android:textSize="20dp"/> </RelativeLayout>

Gå in I din nya javaklass (StartActivity.java).
Nu ska vi lägga till en knapp och en OnClickListener precis som vi gjorde tidigare.

Mellan ”public class” och ”@Override” skriver du

Button calc;

Efter raden setContentView skriver du

calc =(Button)findViewById(R.id.bCalc); calc.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub } });

Nu ska vi, precis som tidigare, skriva in vad som ska hända när vi trycker på knappen. Det vi vill är att öppna vår miniräknare. För att gå från en class till en annan så använder vi oss av följande kod

Intent intent = new Intent(StartActivity.this, MainActivity.class); startActivity(intent);

package com.alexm.hellosweden; import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; public class StartActivity extends AppCompatActivity { Button calc; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_start); calc =(Button)findViewById(R.id.bCalc); calc.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub Intent intent = new Intent(StartActivity.this, MainActivity.class); startActivity(intent); } }); } }

Dold text

Nu måste vi göra två saker. Först måste vi se till så att det är vår nya javafil som öppnas först när vi startar vår app. Detta gör vi genom att gå in på AndroidManifest.xml under ”manifest”.

Där kommer du att se följande kod

<activity android:name=".MainActivity">

Ändra den raden till

<activity android:name=".StartActivity">

Det vi måste göra nu är att lägga till en Activity för vår klass MainAcitivty.java. Gör det genom att lägga till

<activity android:name="MainActivity"/>

Mellan

</activity>

Och

</application>

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.alexm.hellosweden"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="HelloSweden" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".StartActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="MainActivity"/> </application> </manifest>

Dold text

Om vi nu tar och testar vår app så borde den öppna vår nya java-klass och se ut så här

Om vi trycker på knappen så borde den ta oss till vår java-klass med miniräknaren

9: Skicka text mellan olika java-klasser

Nu när vi startar vår app så får vi direkt upp en layout med en knapp där det står ”Miniräknare”. Det vi vill göra nu är att lägga till en ny knapp som kan ta oss till vår nya klass som vi ska skapa nu. I den här klassen ska jag lära er hur man göra för att ta text som användaren skriver in och sedan skicka texten till en annan java-klass.

Vi börjar med att gå till activity_start.xml och lägga till en ny knapp.
Kopiera bara den knapp som redan finns men glöm inte ändra knappens ”id” och ”text”. Vi måste även komma ihåg att lägga till ”layout_below”.

<Button android:layout_width="250dp" android:layout_height="wrap_content" android:text="Exempel" android:layout_centerHorizontal="true" android:id="@+id/bExample" android:layout_below="@+id/bCalc" android:textSize="20dp"/>

Nu går vi till StartActivity.java. Vi börjar med att lägga till vår nya knapp.

Button calc, example;

Och även

example =(Button)findViewById(R.id.bExample); example.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub Intent intent = new Intent(StartActivity.this, ExampleActivity.class); startActivity(intent); } });

package com.alexm.hellosweden; import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; public class StartActivity extends AppCompatActivity { Button calc, example; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_start); calc =(Button)findViewById(R.id.bCalc); calc.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub Intent intent = new Intent(StartActivity.this, MainActivity.class); startActivity(intent); } }); example =(Button)findViewById(R.id.bExample); example.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub Intent intent = new Intent(StartActivity.this, ExampleActivity.class); startActivity(intent); } }); } }

Dold text

Nu skapar vi en ny javaclass som heter “ExampleActivity”.

package com.alexm.hellosweden; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class ExampleActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_example); } }

Och så behöver vi en layout som heter “activity_example”.
I vår nya layout ska vi lägga till en ”EditText” och en knapp.
EditText är en textruta där användare kan skriva in valfri text.
T.ex. när du är inne i en app och ska skriva in din e-post, då använder man sig av EditText.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <EditText android:layout_width="250dp" android:layout_height="wrap_content" android:hint="Skriv in ditt namn" android:layout_centerHorizontal="true" android:id="@+id/etName" android:textSize="20dp"/> <Button android:layout_width="250dp" android:layout_height="wrap_content" android:text="Skicka" android:layout_centerHorizontal="true" android:id="@+id/bSend" android:layout_below="@+id/etName" android:textSize="20dp"/> </RelativeLayout>

Som du kan se så har vi inte använt “android:text” I vår EditText. Vi har istället använt oss av ”android:hint”. Det betyder att vi kan skriva in ett meddelande till användare, i detta fall ”skriv in ditt namn”. Man talar alltså om för användaren vad man ska skriva in i textfältet. När användare börjar skriva så försvinner meddelandet.

Nu kan vi gå tillbaka till ExampleActivity.java och lägg till vår EditText och knapp. Inuti vår OnClickListener ska vi se till så att knappen tar oss till en ny klass och även tar med sig namnet från vår EditText.

package com.alexm.hellosweden; import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.EditText; public class ExampleActivity extends AppCompatActivity { public final static String EXTRA_MESSAGE = "com.alexm.hellowsweden.MESSAGE"; Button send; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_example); send =(Button)findViewById(R.id.bSend); send.setOnClickListener(new View.OnClickListener(){ public void onClick(View v) { //TODO Auto-generated method stub Intent intent = new Intent(ExampleActivity.this , DisplayNameActivity.class); EditText editText = (EditText) findViewById(R.id.etName); String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent); } }); } }

Nu måste vi skapa en ny klass som vi döper till ”DisplayNameActivity” och en ny layout som vi döper till ”activity_display”.

I DisplayNameAcitivty.java skriver vi in följande kod

package com.alexm.hellosweden; import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.ViewGroup; import android.widget.Button; import android.widget.TextView; public class DisplayNameActivity extends AppCompatActivity { TextView tv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_display); Intent intent = getIntent(); String message = intent.getStringExtra(ExampleActivity.EXTRA_MESSAGE); tv =(TextView)findViewById(R.id.tvDisplay); tv.setText(message); } }

Med hjälp av den här koden tar vi alltså texten från förra klassen och lägger in den i en TextView.

I activity_display.xml använder vi den här koden

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.alexm.hellosweden.MainActivity"> <TextView android:layout_width="wrap_content" android:textSize="45dp" android:id="@+id/tvDisplay" android:layout_centerHorizontal="true" android:layout_height="wrap_content" /> </RelativeLayout>

Vi får inte glömma att lägga till våra två senast java-klasser I AndroidManifest

<activity android:name="ExampleActivity"/> <activity android:name="DisplayNameActivity"/>

Nu kan du testa applikationen!

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Mar 2004

Snyggt! Du tog upp väldigt mycket som ingår i en grundkurs i androidutveckling!

"Happiness is only real when shared"

Trädvy Permalänk
Medlem
Plats
Stockhom
Registrerad
Jun 2004

Toppenguide!

Och för er som känner er "varma i kläderna", har jag gjort en spelguide för ett halvår sedan[Android].

Guiden hittar ni här: http://www.swedroid.se/forum/threads/hur-du-goer-ett-mobilspe...

Ryzen 7 - 1700 @ 3.7 | 16 Gb | RX 480
--------------------------------------------------
Grundare av MaseApps. Se våra spel: www.maseapps.com. För IOS och Android.

Trädvy Permalänk
Medlem
Registrerad
Dec 2003

Vet inte om det här är en supporttråd, men jag tänkte jag skulle lära mig Android Studio. Kommer dock inte förbi uppstarten av första projektet.

Android Studio verkar hänga sig vid "Building ... gradle project info". Några tips?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2007

Grymt bra guide! Pedagogisk och toppen med "försöka själv" + facit.

Spel: Ryzen 7 1800x, R9 270, 16GB DDR4 Flare X
Har haft dessa GPUer: Tseng ET6000, Matrox M3D, 3DFX Voodoo 1-3, nVidia Riva 128, TNT, TNT2, Geforce 256 SDR+DDR, Geforce 2mx, 3, GT 8600m, GTX460 SLI, GTX580, GTX670 SLI, 1080 ti AMD Radeon 9200, 4850 CF, 6950@70, 6870 CF, 7850 CF, R9 390, Vega 64
Lista beg. priser GPUer ESD for dummies

Trädvy Permalänk
Medlem
Plats
Östergötland
Registrerad
Apr 2012

Bra jobbat och tack för en bra guide!