fbpx Drücke „Enter”, um zum Inhalt zu springen.

Android Studio Benutzerverwaltung mit Server

Tobbe Erklärt

Nachdem es schon eine erste Videoreihe zu dem Thema Log In und Registrierungsapp auf meinem Youtube Kanal gab, folgt dieses mal eine zweite, weitaus fortgeschrittenere. In der damaligen App ging es um das System, wie man eine Benutzerverwaltung innerhalb eines Gerätes durchführen kann. Außerdem war auch das Design der App nur funktionsorientiert.

Diese App wird anders: Dieses Mal kommunizieren wir mit Hilfe von PHP-Skripten mit einem Server. Auf dem Server werden wir noch eine Benutzerdatenbank erstellen. Aber von Anfang. In diesem ersten Teil dieser Video-/ Tutorialreihe kümmern wir uns um das Layout für die Login Activity.


Web hosting

Unser Activity Layout ändern wir im ersten Schritt von einem ConstraintLayout in ein lineares mit der Orientierung vertikal.

<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical"
tools:context=".LogIn"
>

</LinearLayout>

Innerhalb dieses Layouts benötigen wir drei weitere vertikale LinearLayouts. Das oberste bekommt die Gewichtung layout_weight = 1.5 die anderen beiden bekommen eine Gewichtung von 2. Durch diese Gewichtung ist das Layout oben größer als die anderen beiden. Das mittlere und das untere haben die gleiche Höhe. Die Weite aller Layouts belassen wir bei match_parent. Im oberen Bereich des Bildschirms, also in dem LinearLayout welches als erstes in unserem Komponentenbaum vorkommt, fügen wir ein ImageView, einen vertikalen Divider und ein TextView ein.

Funktional ist dieser Bereich nicht, jedoch sieht (meiner Meinung nach) der Login Screen eleganter aus. Das ImageView bekommt mein Profilbild als Bildquelle, dem Trennstrich geben wir eine Weite von 130dp und einen Abstand nach oben von 15dp. Das TextView bekommt den Schriftzug Tobbe Erklärt, eine Schriftgröße von 30sp, die Textfarbe darker_gray und eine zentrierte Textorientierung.

Der XML Code zum oberen Bereich:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.5"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/profilbild_round" />

<View
android:id="@+id/divider"
android:layout_width="130dp"
android:layout_height="1dp"
android:layout_marginTop="15dp"
android:background="?android:attr/listDivider" />

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tobbe Erklärt"
android:textAlignment="center"
android:textColor="@android:color/darker_gray"
android:textSize="30sp" />
</LinearLayout>

Im zweiten Teil des Bildschirms sollen zwei EditText Felder angezeigt werden. Eins vom InputType textPersonName, also ganz normaler Text und eins vom InputType textPassword. Das Passwort wird durch diesen InputType, wie in eigentlich allen Passwortfeldern verdeckt angezeigt. Die beiden Textfelder sind innerhalb des zweiten LinearLayouts mit der Gewichtung 2 enthalten.

Layout der Textfelder: Um unsere Textfelder etwas schöner zu gestalten, legen wir im Ordner drawable mit Rechtsklick > New > Drawable resource file eine neue XML Datei an. Diese bekommt den Namen layout_edit_text Standardmäßig beginnt der Tag in der zweiten Zeile der Datei mit dem Begriff selector. Dieses ändern wir in shape. Innerhalb dieses Tags ändern wir die Farbe auf ein material gray, runden die Ecken mit einem Radius von 30dp ab und fügen einen unsichtbaren Rahmen (Padding) von oben, unten und rechts 10dp und links 15dp ein. Durch padding hat der Text im Feld einen Abstand zum eigentlichen Rahmen.

Der XML Code zu dem Layout vom EditText sieht so aus:

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

<solid android:color="#fafafa"/>
<corners android:radius="30dp"/>
<padding android:right="10dp" android:bottom="10dp" android:top="10dp" android:left="15dp"/>

</shape>

Unsere Textfelder sollen natürlich noch einen sogenannten Hint bekommen. Das ist der Text, der angezeigt wird und verschwindet sobald der Nutzer auf das Textfeld klickt. Für die Hints erstellen wir in der Datei strings.xml (Dateipfad: res > values > strings.xml) zwei neue Strings. Das ist nützlich, wenn die App mehrsprachig sein soll, oder du oft gleiche Texte nutzt, um so die Texte zentral gespeichert zu haben. Die Strings für die beiden Hints sind diese:

// Strings for Hints for Edittext
<string name="hint_username">Benutzername</string>
<string name="hint_password">Passwort</string>


Nachdem wir die beiden Strings für die Hints der Textfelder und das Layout der Textfelder erstellt haben, müssen wir diese noch den beiden Textfeldern zuweisen. Das machen wir, indem wir den Hintergrund der beiden Textfelder mit @drawable/layout_edit_text festlegen. Somit sehen die beiden Textfelder schon einmal gleich aus. Außerdem müssen wir noch die jeweiligen Hints hinzufügen. Dafür geben wir im Feld Hint @string/ und dann den jeweils erstellten String ein.

In XML sieht das so aus:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:orientation="vertical">

<EditText
android:id="@+id/etLogInUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/layout_edit_text"
android:ems="10"
android:hint="@string/hint_username"
android:inputType="textPersonName" />

<EditText
android:id="@+id/etLogInPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="@drawable/layout_edit_text"
android:ems="10"
android:hint="@string/hint_password"
android:inputType="textPassword" />
</LinearLayout>

Zum Abschluss dieses Teils des Tutorials fehlt nur noch der letzte Abschnitt des Bildschirms. Hier sollen zwei Buttons eingefügt werden. Ein Button soll ein Layout, welches wir im nächsten Schritt erstellen, als Hintergrund bekommen. Mit diesem Button kann der Nutzer seine Eingaben bestätigen und mit dem Login Vorgang beginnen. Der zweite Button hat die Funktion, falls der Nutzer noch kein Konto hat, in die Activity für die Registrierung (Die kommt im nächsten Teil) zu wechseln.

Layout der Buttons: Wir erstellen auf die gleiche Weise wie beim EditText eine XML Datei mit dem Namen layout_button. Der XML Code ist exakt der, wie beim EditText. Lediglich die Farbe, also den Wert im Tag <solid android:color= > ändern wir auf das Blau meines Kanals.

Der XML Code für die XML Datei layout_button:

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

<solid android:color="@color/colorPrimary"/>
<corners android:radius="30dp"/>
<padding android:right="10dp" android:bottom="10dp" android:top="10dp" android:left="15dp"/>

</shape>

Auch für die Buttons haben wir in der Datei strings.xml zwei neue Strings erstellt:

// Strings for buttons
<string name="button_login_de">Einloggen</string>
<string name="button_login_to_registration">Noch keinen Account? Hier registrieren</string>

Nun bekommt der obere Button das gerade erstellte Layout als Hintergrund zugewiesen, sowie die Textfarbe weiß. Außerdem passen wir die Breite auf 130dp an. Der zweite Button bekommt als Hintergrund die Farbe transparent. Außerdem ändern wir die Schriftfarbe auf die selbe Schriftfarbe wie im Schriftzug Tobbe erklärt im ersten Teil des Bildschirms, also in darker_gray. Damit die Buttons auf der horizontalen mittig sind und auf der vertikalen nach unten orientiert sind müssen wir noch die Eigenschaft gravity vom LinearLayout auf bottom|center_horizontal ändern.

Der passende Code dazu:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="bottom|center_horizontal"
android:orientation="vertical">

<Button
android:id="@+id/btnLogInNext"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:background="@drawable/layout_button"
android:text="@string/button_login_de"
android:textColor="@android:color/white" />

<Button
android:id="@+id/btnLogInToRegistration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:text="@string/button_login_to_registration"
android:textColor="@android:color/darker_gray" />
</LinearLayout>

Im nächsten Teil kümmern wir uns um den Bildschirm für die Registrierung und dann geht es langsam, aber sicher, an den Server!


Web hosting

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.