askIT

BMI kalkulator tutorial

01_bmi_kalkulator_i_android_java.jpg
Figur: Slik skal appen se ut

Denne tutorialen viser deg hvordan du kommer i gang med Java i Android. Målet etter tutorialen er å lage en enkel BMI-kalkulator.

I prosjektet skal vi bruke tekstfelt EditText, enkel matematikk og i tillegg oppdatere tekstvisning TextView.

For å progarmmere til Android trenger du Android Studio og Java Development Kit installert på din pc. Disse kan lastes ned gratis fra linkene under.

android_studio.jpg Android studio: developer.android.com

java.png Java Development Kit: oracle.com

Når det gjelder BMI er matematikken ikke veldig komplisert. Man tar vekten og deler den på høyde * høyde. Dette gir følgende formel:

BMI =
m
h2

Der m er masse i kg og h er høyde i meter. Benevningen for BMI er kg/m2.

520a1d1f3fd7affd2231a833496115f6 Last ned kildekode   applications-multimedia.png Se video

01 Opprett prosjekt

Start opp Android Studio og velg nytt prosjekt. Klikk så neste til prosjektet er opprettet.

02_nytt_prosjekt_welcome.jpg

03_configure_your_new_project.jpg
Figur: Appliaction name = BMI kalkulator
Company domain = com.nettport

Benytt API 15 (Android 4.0.3). Denne fungerer på de fleste mobiltelefoner.

04_api_15.jpg

Velg Empty Activity.

05_empty_activity.jpg

06_customize_the_activity_mainactivity.jpg

02 Design i activity_main.xml

Før vi setter i gang med programmeringen er det enklest å designe applikasjonen. Dette gjøres ved å gå til

app > res > layout > activity_main.xml

Du må dra inn følgende elementer:

07_design_bmi_kalkulator.jpg

Du endrer teksten på et tekstelement ved å klikke på elementet og velge «Text» i «Properties» i rullegardinen på høyresiden.

08_endre_tekst.jpg

For å få tak på elementene i programkoden må gi gi de fornuftige ID-er. Dette gjøres ved å merke elementet og velge «ID» i «Properties» i rullegardinen på høyresiden.

09_endre_ij.jpg

Hvis du ikke får helt til kan du gå til XML-visning ved å klikke på «Text». Skriv så inn koden fra activity_main.xml under.
12_text.jpg.

activity_main.xml

<?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.nettport.bmikalkulator.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Din informasjon"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Din høyde:"
        android:id="@+id/textView2"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editTextHeight"
        android:layout_below="@+id/textView2"
        android:layout_alignLeft="@+id/textView2"
        android:layout_alignStart="@+id/textView2"
        android:layout_alignRight="@+id/textView2"
        android:layout_alignEnd="@+id/textView2"
        android:inputType="numberDecimal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="cm"
        android:id="@+id/textView3"
        android:layout_alignBottom="@+id/editTextHeight"
        android:layout_toRightOf="@+id/editTextHeight"
        android:layout_toEndOf="@+id/editTextHeight" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Din vekt:"
        android:id="@+id/textView4"
        android:layout_below="@+id/editTextHeight"
        android:layout_alignLeft="@+id/editTextHeight"
        android:layout_alignStart="@+id/editTextHeight"
        android:layout_marginTop="31dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editTextWeight"
        android:layout_below="@+id/textView4"
        android:layout_alignLeft="@+id/textView4"
        android:layout_alignStart="@+id/textView4"
        android:inputType="numberDecimal"
        android:layout_toLeftOf="@+id/textView3"
        android:layout_toStartOf="@+id/textView3" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="kg"
        android:id="@+id/textView5"
        android:layout_alignBottom="@+id/editTextWeight"
        android:layout_toRightOf="@+id/editTextWeight"
        android:layout_toEndOf="@+id/editTextWeight" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Resultat"
        android:id="@+id/textView6"
        android:layout_above="@+id/textView2"
        android:layout_toRightOf="@+id/textView"
        android:layout_toEndOf="@+id/textView"
        android:layout_marginLeft="43dp"
        android:layout_marginStart="43dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:id="@+id/textViewResult"
        android:layout_below="@+id/textView6"
        android:layout_alignLeft="@+id/textView6"
        android:layout_alignStart="@+id/textView6" />


</RelativeLayout>

Du kan starte applikasjonen ved å klikke på Run.
11_kjor_app_i_emulator.jpg.

03 MainActivity

Nå som designet er klart kan vi starte med programmeringen. Dette gjøres i MainActivity.java

app > java > com.nettport.bmikalkulator > MainActivity

Det første vi ønsker er å lage en metode calcualteBMI. Denne metoden skal inneholde programkoden for kalkuleringen av BMI.

void calcualteBMI(){
}

Det neste vi skal gjøre er å lage to listeners. Disse har til oppgave å utføre en programkode når det skjer en endring i EditText, altså høyden eller vekten. Disse to listnerene programmers inn i metoden onCreate. Når det er endringer i EditText-feltene skal det kalles på metoden calcualteBMI().

/* EditText Height listener */
EditText editTextHeight = (EditText)findViewById(R.id.editTextHeight);
editTextHeight.addTextChangedListener(new TextWatcher() {
        public void afterTextChanged(Editable s) {
                if (!(s.toString().equals(""))) {
                        // Min kode programmeres under her
                        calcualteBMI();
                }
        }

        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }

        public void onTextChanged(CharSequence s, int start, int before, int count) {
        }
});

/* EditText Weight listener */
EditText editTextWeight = (EditText)findViewById(R.id.editTextWeight);
editTextWeight.addTextChangedListener(new TextWatcher() {
        public void afterTextChanged(Editable s) {
                if (!(s.toString().equals(""))) {
                        // Min kode programmeres under her
                        calcualteBMI();
                }
        }

        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }

        public void onTextChanged(CharSequence s, int start, int before, int count) {
        }
});

Høyden

Nå kan vi gå til metoden calcualteBMI() og programmere den ferdig. Vi ønsker å ta inn høyden, så vekten, deretter kalkulere og til slutt skrive ut resultatet på skjermen til mobiltelefonen.

// Get Height
EditText editTextHeight = (EditText)findViewById(R.id.editTextHeight);
String heightString = editTextHeight.getText().toString();

double height = 0;
try {
        height = Double.parseDouble(heightString);
}
catch (NumberFormatException nfe){
        //Toast.makeText(this, "Tast inn tall", Toast.LENGTH_SHORT).show();
}
height = height * 1/100;
height = height*height;

Vekten

Vekten er tilnærmet lik høyden, men vi slipper å konvertere og multiplisere den med seg selv.

// Get Weight
EditText editTextWeight = (EditText)findViewById(R.id.editTextWeight);
String weightString = editTextWeight.getText().toString();

double weight = 0;
try {
        weight = Double.parseDouble(weightString);
}
catch (NumberFormatException nfe){
        //Toast.makeText(this, "Tast inn tall", Toast.LENGTH_SHORT).show();
}

Kalkuler resultat

Resultatet får vi nå ved å dele vekten på høyden.

// Calculate result
double result = Math.round(weight/height);

Print resultat

Til slutt benytter vi if og else til å skrive ut resultatet til en TextView i designet som har ID TextViewResult.

// Print result
TextView TextViewResult = (TextView)findViewById(R.id.textViewResult);


// If or else for values
/* Undervektig < 18,5
Normal kroppsvekt fra 18,5 til 24,9
Overvektig fra 25 til 29,9
Fedme fra 30 til 34,9
Fedme, klasse II fra 35 til 39,9
Fedme, klasse III (ekstrem fedme) > 40
*/

if(result < 18.5){
        TextViewResult.setText("Din BMI er " + result + "\nDu kategoriseres som undervektig.");
}
else{
        if(result < 24.9){
                TextViewResult.setText("Din BMI er " + result + "\nDu kategoriseres som normal kroppsvekt.");
        }
        else {
                if (result < 29.9) {
                        TextViewResult.setText("Din BMI er " + result + "\nDu kategoriseres som overvektig.");
                }
                else{
                        if(result > 30 && result < 34.9){
                                TextViewResult.setText("Din BMI er " + result + "\nDu kategoriseres som fedme.");
                        }
                        else {
                                if(result < 39.9){
                                        TextViewResult.setText("Din BMI er " + result + "\nDu kategoriseres som fedme klasse II.");
                                }
                                else{
                                        if(result < 40){
                                                TextViewResult.setText("Din BMI er " + result + "\nDu kategoriseres som fedme klasse III.");
                                        }
                                        else{
                                                TextViewResult.setText("");
                                        }
                                }
                        }
                }
        }
}

04 Hele MainActivity

Hvis du ikke har fått alt til å stemme helt kan du kopiere inn hele MainActivity.java nedenfor.

_img/java.png MainActivity

05 Start applikasjonen

Applikasjonen er nå ferdig og kan kjøres i gang!

11_kjor_app_i_emulator.jpg

mark_down.png Annonse

Akuratt nå: Ask IT bruker og anbefaler one.com for domener, e-post og webhotell!
hva-er-ditt-nye-domene.com
Besøk oss på one.com