Android Entwicklung Teil 4 [Tutorial]

Im vierten Teil dieser Serie verbessern wir die App aus unserem letzten Tutorial. Wir lernen verschiedene Widgets kennen und werden unsere App etwas komplexer gestalten.

Im letzten Tutorial haben wir eine App erstellt, welche deinen Namen in einer Variable speichert und anschließend einen Satz daraus bildet. Jetzt werden wir uns wieder mit dieser App befassen.

Widgets

Im Bereich der Android Entwicklung bezeichnet man jegliche Elemente, welche die Kommunikation mit dem User ermöglichen, als Widget. Also ist der Button, jedes Textfeld und jede Checkbox ein Widget. In unserem letzten Tutorial haben wir lediglich eine Textview, einen Button und einen EditText benötigt. Die wichtigsten Elemente in der Android App Entwicklung habe ich hier aufgeführt:

TextViewEin einfacher angezeigter Text
EditTextEin Textfeld, welches dem Nutzer ermöglicht Nummern oder Texte zu übermitteln
ButtonSollte selbstverständlich sein 🙂
Toggle ButtonEin Button, welcher Zwei Stati einnehmen kann (Ein/Aus)
Check BoxEine Box, welche zwei Stati einnehmen kann (Ein/Aus, Ja/Nein)
Radio ButtonWird ein Radio Button geklickt, so sind alle anderen automatisch deaktiviert
SwitchEin Ein/Aus Schalter
Web ViewEin Web View kann eine Webseite innerhalb der App anzeigen
Tab HostDie bekannten Reiter unter der ActionBar, welche verschiedene Layouts öffnen
Image ViewZeigt ein Bild an
Image ButtonBilder werden als Button verwendet

Selbstverständlich gibt es noch weitaus mehr UI-Elemente, doch diese werden wir erst später verwenden.

 

Die Idee

Unsere App soll nun je nachdem, welcher Radio Button geklickt wurde verschiedene Texte anzeigen und erkennen, welcher Name eingegeben wurde. Des weiteren wird die App einen Toast (eine Meldung, welche kurz aufpoppt) zeigen, sollte alles funktionieren. Des weiteren werden wir ein Menü hinzufügen, welcher ein neues Layout mit einer Web View anzeigt. Wir verwenden dabei die App aus dem vorhergehenden Tutorial, wer dieses Tutorial noch nicht gemacht hat, sollte sich dieses durchlesen.

 

Der Code

Wir fügen zunächst zwei Radio Buttons und ein weiteres TextView zu unserem Layout activity_main hinzu. Das sollte dann insgesamt so aussehen:

 

<RelativeLayout xmlns:tools=“http://schemas.android.com/tools“
xmlns:android=“http://schemas.android.com/apk/res/android“
android:id=“@+id/container“
android:layout_width=“match_parent“
android:layout_height=“match_parent“
tools:context=“de.mobilethingsblog.test.MainActivity“
tools:ignore=“MergeRootFrame“ >

<Button
android:id=“@+id/btn_clickme“
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:layout_centerHorizontal=“true“
android:layout_centerVertical=“true“
android:onClick=“btn_clickme“
android:text=“Klick mich!“ />

<TextView
android:id=“@+id/textView_yourtext“
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:layout_alignParentBottom=“true“
android:layout_centerHorizontal=“true“
android:layout_marginBottom=“45dp“
android:text=“Dein Text wird hier erscheinen :)“
android:textAppearance=“?android:attr/textAppearanceMedium“ />

<EditText
android:id=“@+id/editText_personname“
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:layout_alignParentTop=“true“
android:layout_centerHorizontal=“true“
android:layout_marginTop=“71dp“
android:ems=“10″
android:hint=“Dein Name hierhin“
android:inputType=“textPersonName“ >

<requestFocus />
</EditText>

<RadioGroup
android:id=“@+id/radioGroup1″
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:layout_above=“@+id/btn_clickme“
android:layout_alignParentLeft=“true“
android:layout_alignParentRight=“true“
android:layout_marginBottom=“15dp“ >

<RadioButton
android:id=“@+id/radio0″
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:checked=“true“
android:text=“Freundlich begrüßen“ />

<RadioButton
android:id=“@+id/radio1″
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:text=“Unfreundlich begrüßen“ />
</RadioGroup>

<TextView
android:id=“@+id/textView1″
android:layout_width=“wrap_content“
android:layout_height=“wrap_content“
android:layout_alignParentBottom=“true“
android:layout_centerHorizontal=“true“
android:text=“Deine Person erscheint hier“
android:textAppearance=“?android:attr/textAppearanceSmall“ />

</RelativeLayout

Nun müssen wir wieder unsere MainActivity verändern. In die Methode btn_clickme fügen wir folgenden Code ein:

 

package de.mobilethingsblog.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

private WebView webView;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}
public void btn_clickme (View view){
EditText Name_Feld = (EditText) findViewById(R.id.editText_personname); //Name_Feld ist editText_personname (EditText)
TextView Ausgabe = (TextView) findViewById(R.id.textView_yourtext); //Ausgabe ist textView_yourtext (Textview)
TextView Person = (TextView) findViewById(R.id.textView_person); //Ausgabe ist textView_yourtext (Textview)
RadioButton freundlich = (RadioButton) findViewById(R.id.radio_freundlich);
RadioButton unfreundlich = (RadioButton) findViewById(R.id.radio_unfreundlich);

String Benutzer_Name = Name_Feld.getText().toString(); //String Benutzer_Name ist Inhalt von EditText

if (Benutzer_Name == „Henrik“){ //Ist der Benutzername Henrik?
Person.setText(„Es handelt sich um den Autor dieses Tutorials“);
}

if (freundlich.isChecked()) { //Ist freundlich ausgewählt worden?
Ausgabe.setText(„Hallo “ + Benutzer_Name + „! Wie geht´s?“); //freundliche Begrüßung
}
if (unfreundlich.isChecked()) { //Ist unfreundlich ausgewählt worden?
Ausgabe.setText(„Ey “ + Benutzer_Name + “ Was willst du?!“); //unfreundliche Begrüßung
}
Toast.makeText(getApplicationContext(), „Wunderbar! Es funktioniert!“, Toast.LENGTH_SHORT).show();

}

}

Wie du siehst, verwenden wir eine if-Abfrage. Damit können wir zum Beispiel einen Status überprüfen und anschließend handeln. Eine if-Abfrage wird immer folgendermaßen gebaut:

 

if (Bedingung == Zustand){
Tu´ was!
}

Wir fragen so ab, ob der Benutzername Henrik ist. Sollte dies der Fall sein, erscheint in unserem neu angelegtem TextView ein Vermerkt, dass es sich um den Autor dieses Tutorials handelt.

Außerdem wollen wir wissen, ob der Nutzer freundlich oder unfreundlich begrüßt werden möchte. Je nachdem wird dann eine freundliche oder unfreundliche Begrüßung in unserem im letzten Tutorial erstellten TextView erscheinen.

Zu guter Letzt geben wir einen Toast aus, das alles geklappt hat.

Nun müssen wir nur noch ein Menü erstellen. Dazu navigieren wir in folgenden Ordner: Projekt -> Res -> Menu -> main.xml. Sollte die Datei main.xml nicht existieren erstelle eine neue .xml Datei mithilfe eines Rechtsklicks auf den Menu Ordner. Kopiere folgendes in die Datei:

 

<menu xmlns:android=“http://schemas.android.com/apk/res/android“
xmlns:app=“http://schemas.android.com/apk/res-auto“
xmlns:tools=“http://schemas.android.com/tools“
tools:context=“de.mobilethingsblog.test.MainActivity“ >

<item
android:id=“@+id/action_neu“
android:orderInCategory=“100″
android:title=“Neues Layout öffnen“
app:showAsAction=“always“/>

</menu>

Nun müssen wir wieder in die MainActivity wechseln. Hier müssen wir der App noch sagen, was sie tun soll, wenn auf den Menüpunkt „Neues Layout öffnen“ geklickt wurde. Dies machen wir mit folgender, neuer Methode:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_neu:
setContentView(R.layout.webview);
webView = (WebView) findViewById(R.id.webview_mobilethings);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(„http://mobilethings.de/“);
default:
return super.onOptionsItemSelected(item);
}
}
}

Nun müssen wir noch das Layout webview erstellen. Klicke dazu mit der rechten Maustaste auf den Ordner layout und wähle New > Android xml file. In das Layout fügen wir nur ein einziges Element ein:

?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webview_mobilethings" >

</WebView

Um der App Internetzugriff zu gewehren, müssen wir noch die nötigen Berechtigungen in die Manifest Datei eintragen. Öffne die Datei und wähle den Reiter permissions an. Klicke auf add… -> Uses Permission. Trage in das Feld „Name“ folgendes ein:

android.permission.INTERNET

Speichere deine App und probiere sie aus. Nun wird unsere App beim Klick auf den Menüpunkt die Internetseite von Mobilethings.de in deiner App anzeigen.

 

Wir haben jetzt bereits eine verhältnismäßig komplexe App erstellt. Nächstes Mal werden wir eine neue App erstellen und uns tiefer in das Thema „Android-Apps-Entwickeln“ einarbeiten. Bleib´ dran! 🙂

 

Zum letzten Tutorial dieser Serie

Zum nächsten Tutorial dieser Serie

Was denkst du darüber?