askIT

Lommelykt tutorial

Denne tutorialen viser deg hvordan du kan lage en enkel applikasjon for Android. Den skal slå på og av lommelykten på en mobiltelefon.

fa16d77f167ad0c14875a2a8734d7da7 Last ned kildekode for lommelykt

01 Opprett prosjekt

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

01_nytt_prosjekt.jpg

01_nytt_prosjekt.jpg

Benytt API 21 (Android 5.0). Dette er minimum for å kjøre lommelykten.

03_nytt_prosjektb.jpg

Velg Empty Activity.

04_add_an_activity_to_mobile.jpg

05_customize_the_activity.jpg

02 Start emulatoren

Start opp emulatoren ved å klikke på 07_run.jpg «Run app». Du skal da få opp en tom applikasjon.

08_lunch_emulator.jpg.

09_ny_tom_app.jpg.

03 Design

Vi skal nå designe lommelykten. Først kan du laste ned bildene for lommelykt på og lommelykt av.
Disse filene lagres i mappen

C:\Users\bruker\Android\AndroidStudioProjects\Lommelykt\app\src\main\res\drawable

flashlight_off.png
flashlight_off.png

flashlight_on.png
flashlight_on.png

Start opp activity_main:
app -> res > layout > activity_main.xml

10_activity_main_xml.jpg

Dra inn en ToggleButton og en ImageView.

11_togglebutton_imageview.jpg
Figur: Drar inn ToggleButton og ImageView til designet.

11_designer_theme.jpg
Figur: Du kan endre temaet til lommelykten ved å klikke på Theme (dette er valgfritt).

Nå kan du bruke designeren til å fordele teksten øverst, lommelykt-ikonet i midten og bryteren nederst. Du kan også endre teksten fra «Hello World» til «Lommelykten er av». Hent inn bildet fra lommelykten.

12_designer.jpg
Figur: Dra på elementene slik at du får teksten øverst, ikonet i midten og bryteren nederst.

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"
    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">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Lommelykten er av"
        android:id="@+id/textView"
        android:gravity="center_horizontal" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/flashlight_off"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <ToggleButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="New ToggleButton"
        android:id="@+id/toggleButton"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

04 MainActivity utsende og knapp

Først kan du konsentrere deg om utsende av appen. Lommelykten starter i av-modus, og da skal designe reflektere dette. Når man klikker på knappen skal teksten endres og lommelys-ikonet skal lyse.

13_off.png 13_on.png

For å finne on-off knappen i designet benytter vi «findViewById». Vi oppretter en variabel med navnet «onOffButton» og tildeler den knappen:
    ToggleButton onOffButton = (ToggleButton) findViewById(R.id.toggleButton);

Deretter lager vi en listner på knappen. Hvis knappen blir klikket på skal en handling utføres.
onOffButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    }
});

Inni listneren legger vi inn en sjekk på om ToggleButton er slått på eller ikke. Hvis den er slått på endrer vi teksten og ikonet til 1 (på). Hvis den ikke er slått på endrer vi tekst og ikonet til 0 (av). Dette gjøres i metoden:
    changeTextAndIcon(0); for av.
    changeTextAndIcon(1); for på.

Metoden changeTextAndIcon programmerer vi slik:

void changeTextAndIcon(int modus) {
}

Denne skal endre teksten, også endre ikonet. Se hele koden for MainActivity nedenfor.

package com.nettport.lommelykt;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

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


                // Click button on or off
                ToggleButton onOffButton = (ToggleButton) findViewById(R.id.toggleButton);
                onOffButton.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                                // your click actions go here
                                if (((ToggleButton) v).isChecked()) {
                                        changeTextAndIcon(1);
                                } else {
                                        changeTextAndIcon(0);
                                }
                        }
                });

        }

        /*- Change text and icon ------------------------------------- */
        // modus = 1 -> turn on
        // modus = 0 -> turn off
        void changeTextAndIcon(int modus) {
                // Change text
                TextView statusText = (TextView) findViewById(R.id.textView);
                if (modus == 1) {
                        statusText.setText("Lommelykten er på"); // Flash is on
                } else {
                        statusText.setText("Lommelykten er av"); // Flash is off
                }

                // Change icon to off
                ImageView flashlightIcon = (ImageView) findViewById(R.id.imageView);
                if (modus == 1) {
                        flashlightIcon.setImageResource(R.drawable.flashlight_on);
                } else {
                        flashlightIcon.setImageResource(R.drawable.flashlight_off);
                }
        }
}

05 Android Manifest

Når selveste lommelykten skal programmeres må man ha tilgang til kameraet. Dette gjør man ved å skrive inn hva man ønsker tilgang til i Android Manifest.

15_androidmanifest.jpg

Åpne «app -> manifest --> AndroidManifest.xml». Legg til alt som står under «Allows access to the flashlight»

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.nettport.lommelykt">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        >
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>


    <!-- Allows access to the flashlight -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-feature android:name="android.hardware.camera.flash" />


</manifest>

06 Flash

Nå kan resten av programkoden til lommelykten programmeres.

package com.nettport.lommelykt;

import android.Manifest;
import android.content.pm.PackageManager;
import android.support.v4.app.ActivityCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ToggleButton;
import android.content.Context;
import android.graphics.SurfaceTexture;
import android.hardware.camera2.CameraAccessException;
import android.hardware.camera2.CameraCaptureSession;
import android.hardware.camera2.CameraCharacteristics;
import android.hardware.camera2.CameraDevice;
import android.hardware.camera2.CameraManager;
import android.hardware.camera2.CameraMetadata;
import android.hardware.camera2.CaptureRequest;
import android.util.Size;
import android.view.Surface;
import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {
        CameraManager cameraManager;
        CameraCharacteristics cameraCharacteristics;

        CameraDevice mCameraDevice;
        CameraCaptureSession mSession;

        CaptureRequest.Builder mBuilder;


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

                // Initialize camera
                initCamera();

                // Click button on or off
                ToggleButton onOffButton = (ToggleButton) findViewById(R.id.toggleButton);
                onOffButton.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                                // your click actions go here
                                if (((ToggleButton) v).isChecked()) {
                                        changeTextAndIcon(1);
                                        turnOnFlashLight();
                                } else {
                                        changeTextAndIcon(0);
                                        turnOffFlashLight();
                                }
                        }
                });

        }

        /*- Change text and icon ------------------------------------- */
        // modus = 1 -> turn on
        // modus = 0 -> turn off
        void changeTextAndIcon(int modus) {
                // Change text
                TextView statusText = (TextView) findViewById(R.id.textView);
                if (modus == 1) {
                        statusText.setText("Lommelykten er på"); // Flash is on
                } else {
                        statusText.setText("Lommelykten er av"); // Flash is off
                }

                // Change icon to off
                ImageView flashlightIcon = (ImageView) findViewById(R.id.imageView);
                if (modus == 1) {
                        flashlightIcon.setImageResource(R.drawable.flashlight_on);
                } else {
                        flashlightIcon.setImageResource(R.drawable.flashlight_off);
                }
        }

        @Override
        protected void onPause() {
                super.onPause();
                close();
        }

        private void initCamera() {
                cameraManager = (CameraManager) getSystemService(Context.CAMERA_SERVICE);
                try {
                        String[] id = cameraManager.getCameraIdList();
                        if (id != null && id.length > 0) {
                                cameraCharacteristics = cameraManager.getCameraCharacteristics(id[0]);
                                boolean isFlash = cameraCharacteristics.get(CameraCharacteristics.FLASH_INFO_AVAILABLE);
                                if (isFlash) {
                                        if (ActivityCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
                                                // TODO: Consider calling
                                                //        ActivityCompat#requestPermissions
                                                // here to request the missing permissions, and then overriding
                                                // public void onRequestPermissionsResult(int requestCode, String[] permissions,
                                                //                                                                                int[] grantResults)
                                                // to handle the case where the user grants the permission. See the documentation
                                                // for ActivityCompat#requestPermissions for more details.
                                                return;
                                        }
                                        cameraManager.openCamera(id[0], new MyCameraDeviceStateCallback(), null);
                                        Toast.makeText(this, "Camera initialized", Toast.LENGTH_LONG).show();
                                }
                        }
                }
                catch (CameraAccessException e)
                {
                        e.printStackTrace();
                        Toast.makeText(this, "Camera initialization error:\n" + e.toString(), Toast.LENGTH_LONG).show();
                }
        }

        class MyCameraDeviceStateCallback extends CameraDevice.StateCallback
        {
                SurfaceTexture mSurfaceTexture = new SurfaceTexture(1);

                @Override
                public void onOpened(CameraDevice camera)
                {
                        mCameraDevice = camera;
                        // get builder
                        try
                        {
                                mBuilder = camera.createCaptureRequest(CameraDevice.TEMPLATE_PREVIEW);
                                List list = new ArrayList();
                                Size size = getSmallestSize(mCameraDevice.getId());
                                mSurfaceTexture.setDefaultBufferSize(size.getWidth(), size.getHeight());
                                Surface mSurface = new Surface(mSurfaceTexture);
                                list.add(mSurface);
                                mBuilder.addTarget(mSurface);
                                camera.createCaptureSession(list, new MyCameraCaptureSessionStateCallback(), null);
                        }
                        catch (CameraAccessException e)
                        {
                                e.printStackTrace();

                        }
                }

                @Override
                public void onDisconnected(CameraDevice camera)
                {

                }

                @Override
                public void onError(CameraDevice camera, int error)
                {

                }
        }

        private Size getSmallestSize(String cameraId) throws CameraAccessException
        {
                Size[] outputSizes = cameraManager.getCameraCharacteristics(cameraId).get(CameraCharacteristics.SCALER_STREAM_CONFIGURATION_MAP).getOutputSizes(SurfaceTexture.class);
                if (outputSizes == null || outputSizes.length == 0)
                {
                        throw new IllegalStateException("Camera " + cameraId + "doesnt support any outputSize.");
                }
                Size chosen = outputSizes[0];
                for (Size s : outputSizes)
                {
                        if (chosen.getWidth() >= s.getWidth() && chosen.getHeight() >= s.getHeight())
                        {
                                chosen = s;
                        }
                }
                return chosen;
        }
        class MyCameraCaptureSessionStateCallback extends CameraCaptureSession.StateCallback
        {
                @Override
                public void onConfigured(CameraCaptureSession session)
                {
                        mSession = session;
                        try
                        {
                                mSession.setRepeatingRequest(mBuilder.build(), null, null);
                        }
                        catch (CameraAccessException e)
                        {
                                e.printStackTrace();
                        }
                }

                @Override
                public void onConfigureFailed(CameraCaptureSession session)
                {

                }
        }

        public void turnOnFlashLight()
        {
                try
                {
                        mBuilder.set(CaptureRequest.FLASH_MODE, CameraMetadata.FLASH_MODE_TORCH);
                        mSession.setRepeatingRequest(mBuilder.build(), null, null);
                        Toast.makeText(this, "Flash activated", Toast.LENGTH_LONG).show();
                }
                catch (Exception e)
                {
                        e.printStackTrace();
                        Toast.makeText(this, "Flash failed:\n" + e.toString(), Toast.LENGTH_LONG).show();
                }
        }

        public void turnOffFlashLight()
        {
                try
                {
                        mBuilder.set(CaptureRequest.FLASH_MODE, CameraMetadata.FLASH_MODE_OFF);
                        mSession.setRepeatingRequest(mBuilder.build(), null, null);
                        Toast.makeText(this, "Flash disabled", Toast.LENGTH_LONG).show();
                }
                catch (Exception e)
                {
                        e.printStackTrace();
                        Toast.makeText(this, "Flash failed:\n" + e.toString(), Toast.LENGTH_LONG).show();
                }
        }

        private void close()
        {
                Toast.makeText(this, "Camera closed", Toast.LENGTH_LONG).show();
                if (mCameraDevice == null || mSession == null)
                {
                        return;
                }
                mSession.close();
                mCameraDevice.close();
                mCameraDevice = null;
                mSession = null;
        }

}

07 IC Launcher

Det siste som må gjøres nå er å endre ikonet til applikasjonen. Ikonet er i fem forskjellige formater. Banen til ikonene er «C:\Users\bruker\Android\AndroidStudioProjects\Lommelykt\app\src\main es». Du kan enten lagre ikonene nedenfor i de respektive mappene, eller lage egne ikoner.

16_ic_launcher.jpg

mipmap-mdpi/ic_launcher.png
mipmap-mdpi

mipmap-hdpi/ic_launcher.png
mipmap-hdpi

mipmap-xhdpi/ic_launcher.png
mipmap-xhdpi

mipmap-xxhdpi/ic_launcher.png
mipmap-xxhdpi

mipmap-xxxhdpi/ic_launcher.png
mipmap-xxxhdpi

08 Start applikasjonen

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

07_run.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