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>
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);
}
});
}
}
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);
}
});
}
}
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>
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);
}
});
}
}
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!
