Login in Xamarin.Android

In diesem Blogg werden wir SharedPreferences für Xamarin.Android anschauen, um ein einfaches Login zu programmieren.

Inhalt:

  • Was ist SharedPreferences
  • SharedPreferences füllen
  • SharedPreferences abfragen
  • Splash Activity hinzufügen

Was ist SharedPreferences

Um es einfach und ungenau zu halten, ist SharedPreferences Session für Android Applikationen.
Es ist eine ganz einfache Key-Value Speicher, der man von überall im App zugreifen kann. Diese Key-Value Wert bleiben auch gespeichert nach dem man den App schliesst, das verhindert, dass den Benutzer jedes Mal sich neu einloggen muss.

SharedPreferences füllen

Um die SharedPreferences abzuspeichern, brauchen wir zwei Member Variable:

  • ISharedPreferences
  • ISharedPreferencesEditor

Nach der “base.OnCreate(bundle);” Aufruf, können wir die Member Variablen wie folgendes mit eine Instance speichern:

_sharedPreferences = ApplicationContext.GetSharedPreferences("UserInfo", FileCreationMode.Private);
_spEdit = _sharedPreferences.Edit();

Jetzt können wir ganz einfach mit der “PutString” Methode der Benutzerdaten speichern:

_spEdit.PutString("Username", Username.Text.Trim());
_spEdit.PutString("Password", Password.Text.Trim());
_spEdit.Apply();

Wichtig ist hier der “.Apply();” Methode nicht zu vergessen!

SharedPreferences abfragen

Um herauszufinden, ob der Benutzer sich schon Mal eingeloggt hat, müssen wir die SharedPreferences abfragen und schauen, ob sie eine gültige Login beinhalten.

Die Abfrage ist sehr einfach und ähnlich zum Füllen.

string userName = _sharedPreferences.GetString(“Username”, String.Empty);
string password = _sharedPreferences.GetString(“Password”, String.Empty);

if (userName == String.Empty || password == String.Empty)
{
// Get user by username from DB
User userFromUsername = GetUserFromUsername(userName);
if(userFromUsername == null) return;
if(userFromUsername.Password == password)
{
Console.WriteLine("User logged in");
}
else
{
Console.WriteLine("User not logged in");
}

Splash Activity hinzufügen

Die nächste Frage ist jetzt nur, wenn sollen wir die Kontrolle machen?

Am besten macht man dies in einen Splash Activity, der Splash Activity ist der Screen mit dem Logo, der beim Starten vom App angezeigt wird, während der App sich im Hintergrund am vorbereiten ist.
Der Grund dafür ist, dass wir dann von diesem Screen aus, entscheiden können, ob wir den “Homescreen” oder der “Loginscreen” als nächstes anzeigen möchten.

Als erstes müssen wir das Bild, welcher wir als Hintergrund benutzten möchten, zu unserem Resources->drawable Ordner hinzufügen.
Danach müssen wir im Resources->values->styles.xml ein neues Theme erstellen:

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
</style>

Jetzt müssen wir wieder zurück zum Resources->drawable Ordner gehen um der “background_splash.xml” view zu erstellen, der unser vorher hinzugefügtem Bild als Hintergrund hat.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorWhite"/>
<item>
<bitmap
android:gravity="center"
android:src="@drawable/logo_splash"/>
</item>
</layer-list>

Jetzt müssen wir nur noch das neu erstellte Theme, unser SplashActivity zuweisen.
(Das kommt unterhalb von Namespace und oberhalb vom Klassen Deklaration, in unserem Fall vor: “public class SplashActivity : Activity”.

[activity (label = "SplashActivity", theme = "@style/SplashTheme", MainLauncher = true) ]

Jetzt können wir unsere Konsolen Ausgaben mit Intents austauschen:

Intent intent = new Intent(this, typeof(LoginActivity));
this.StartActivity(intent);

und

Intent intent = new Intent(this, typeof(LoggedinActivity));
this.StartActivity(intent);

Kontrolliere, dass keine weitere Activities als “MainLauncher” definiert sind und dass es keine Einträge im AndroidManifest gibt, welche eine andere Activity als MainLauncher setzt.

Xamarin Forms Tutorial – Einstieg zu Dependency Services mit eine eigene Picture Picker

Xamarin Forms Tutorial – Einstieg zu Dependency Services mit eine eigene Picture Picker

In Xamarin Forms gibt es etwas was “Dependency Services” heisst. Mit Dependency Services hat man die Möglichkeit OS spezifische Funktionen von der geteilter Code aufzurufen. In Diesem Blog Post werde ich Tutorial über wie man ein Picture Picker mit Dependency Services programmieren kann. Ich benutzte für diesen Tutorial UWP und Android.

Für diejenige, welche noch nichts von Dependecy Services gehört hat, empfehle ich die “Introduction to DependecyService” von Xamarin selber vor meinem Blog Post zu lesen.

Ich habe alles in diesem Blog Post von Xamarins eigene Tutorial gelernt -> https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/dependency-service/photo-picker/

Inhalt

  • Dependency Services, kurz erklärt
  • Button und View erstellen
  • Interface definieren
  • Interface in UWP und Android implementieren
  • Click Event erstellen

Dependency Services, kurz erklärt

Wie schon erwähnt, benutzt man Dependency Services, wenn man auf ein Native API zugreifen muss, die durch die Xamarin Forms API noch nicht vorhanden ist.

Bei Dependency Services, definiert man im geteiltem Code ein Interface, die dann, im jedem OS Teil implementiert werden muss.
Danach kann man im geteiltem Code mit “DependencyService.Get<{InterfaceName}>().{MethodenName()};” die OS spezifische Methoden generisch aufrufen.

overview_diagram
Dependency Services Grafik, von developer.xamarin.com

Button und View erstellen

Ich habe ein Xamarin Projekt aufgesetzt (“Blank App” -> “Xamarin Forms” -> “Portable Class Library (PCL)”) mit einem einfachen ContentPage als View.

KookyFrameCreator Layout
View

Ich habe dazu ein Detail View erstellt, welcher ein Button als “Image Picker” hat.

KookyFrameCreator Detail
Detail View mit Button

Interface definieren

Als erstes müssen wir unseres Interface definieren.
Das Interface wird im geteilter Code definiert, ist aber ein ganz normales Interface.

In unserem Fall:

1:  namespace MyFirstFormsApp.DependencyServices  
2:  {  
3:    public interface IPicturePicker  
4:    {  
5:      Task<Stream> GetImageStreamAsync();  
6:    }  
7:  }  
8:    

Interface in UWP und Android implementieren

Jetzt müssen wir das Interface mit den OS spezifischen Code in unsere zwei unterstützte Plattformen implementieren, dass machen wir natürlich in den Plattform spezifischen Code.

Android

1:  [assembly: Dependency(typeof(PicturePickerImplementation))]  
2:    
3:  namespace MyFirstFormsApp.Droid.DependencyServices  
4:  {  
5:    public class PicturePickerImplementation : IPicturePicker  
6:    {  
7:      public Task GetImageStreamAsync()  
8:      {  
9:        // Define the Intent for getting images  
10:        Intent intent = new Intent();  
11:        intent.SetType("image/*");  
12:        intent.SetAction(Intent.ActionGetContent);  
13:    
14:        // Get the MainActivity instance  
15:        MainActivity activity = Forms.Context as MainActivity;  
16:    
17:        // Start the picture-picker activity (resumes in MainActivity.cs)  
18:        activity.StartActivityForResult(  
19:          Intent.CreateChooser(intent, "Select Picture"),  
20:          MainActivity.PickImageId);  
21:    
22:        // Save the TaskCompletionSource object as a MainActivity property  
23:        activity.PickImageTaskCompletionSource = new TaskCompletionSource();  
24:    
25:        // Return Task object  
26:        return activity.PickImageTaskCompletionSource.Task;  
27:      }  
28:    }  
29:  }  

UWP (Universal Windows)

1:  [assembly: Dependency(typeof(PicturePickerImplementation))]  
2:    
3:  namespace MyFirstFormsApp.UWP.DepedencyServices  
4:  {  
5:    public class PicturePickerImplementation : IPicturePicker  
6:    {  
7:      public async Task GetImageStreamAsync()  
8:      {  
9:        // Create and initialize the FileOpenPicker  
10:        FileOpenPicker openPicker = new FileOpenPicker  
11:        {  
12:          ViewMode = PickerViewMode.Thumbnail,  
13:          SuggestedStartLocation = PickerLocationId.PicturesLibrary,  
14:        };  
15:    
16:        openPicker.FileTypeFilter.Add(".jpg");  
17:        openPicker.FileTypeFilter.Add(".jpeg");  
18:        openPicker.FileTypeFilter.Add(".png");  
19:    
20:        // Get a file and return a Stream  
21:        StorageFile storageFile = await openPicker.PickSingleFileAsync();  
22:    
23:        if (storageFile == null)  
24:        {  
25:          return null;  
26:        }  
27:    
28:        IRandomAccessStreamWithContentType raStream = await storageFile.OpenReadAsync();  
29:        return raStream.AsStreamForRead();  
30:      }  
31:    }  
32:  }  

Wichtig ist hier, dass man die Usings nicht vergisst und dass man viel mit “Rebuild”/”Deploy” arbeitet um Syntax Fehler zu beheben.

Click Event erstellen

Als letztes müssen wir nur unseres Interface in einem Click Event aufrufen und etwas mit dem Resultat machen.

In unserem Fall werden wir den Picker aufrufen und dann das ausgewählte Bild anzeigen. Wenn der Benutzer auf das Bild klickt, kommt er wieder zurück zum Detail View.

1:  private async Task CreateEvent_Button_ImagePickerOnClicked(object sender, EventArgs e)  
2:      {  
3:        CreateEvent_Button_ImagePicker.IsEnabled = false;  
4:        Stream stream = await DependencyService.Get().GetImageStreamAsync();  
5:    
6:        if (stream != null)  
7:        {  
8:          Image image = new Image  
9:          {  
10:            Source = ImageSource.FromStream(() => stream),  
11:            BackgroundColor = Color.Gray  
12:          };  
13:    
14:          TapGestureRecognizer recognizer = new TapGestureRecognizer();  
15:          recognizer.Tapped += (sender2, args) =>  
16:          {  
17:            (this as ContentPage).Content = stack;  
18:            CreateEvent_Button_ImagePicker.IsEnabled = true;  
19:          };  
20:          image.GestureRecognizers.Add(recognizer);  
21:    
22:          (this as ContentPage).Content = image;  
23:        }  
24:        else  
25:        {  
26:          CreateEvent_Button_ImagePicker.IsEnabled = true;  
27:        }  
28:      }  

Tabbed Swipe Navigation in Xamarin Android (Native)

Tabbed Swipe Navigation in Xamarin Android (Native)

Es gibt verschiedene Navigationen in der Mobile Entwicklung, mehrere Pro Sprache/Plattform. Den heutigen Blog Post ist ein Tutorial was ein Tabbed Swipe Navigation ist und wie man sie implementiert.

Übersicht:

  • Was ist ein Tabbed Swipe Navigation
  • Was braucht ein Tabbed Swipe Navigation
  • Tutorial:
    • Projekt aufsetzten
    • Fragments
    • TabLayout
    • ViewPager
    • PageAdapter
    • Fragments
    • Profit

Was ist ein Tabbed Swipe Navigation

Der Tabbed Swipe Navigation, auch bekannt als Tabbed Swipe View, ist genau das, was es sich anhört zu sein.
Es ist eine Navigation/View, die Tabs und Swiping benutzt um zwischen verschiedene Views zu wechseln.

Tabs sind einfach Buttons die meistens ganz oben oder ganz unten im App angezeigt werden. Wenn man auf einer diesen Tabs klickt, kommt man auf der entsprechende View.

Swiping ist der Aktion wenn man mit den Finger von eine Seite zum anderen zieht. Siehe Bild Unten:

480px-gestures_flick
Swipe

Was braucht ein Tabbed Swipe Navigation

In Android braucht ein Tabbed Swipe Navigation folgendes:

Tutorial

Ich benutzte für den folgende Tutorial Visual Studio Professional 2015 für die Codierung und mein privates Mobile Phone (Samsung S7) zum Debuggen.

Projekt aufsetzen

Starte Visual Studio und erstelle ein neues Blank App (Android) Projekt.
(Unter Visual C# -> Android)

new-android-project
Projekt erstellen

Versuche jetzt als aller erstes den App ohne irgendwelcher Änderungen laufen zu lassen. Somit könnten wir uns schon jetzt mit mögliche Probleme beim Setup vom Emulator/Mobile Phone auseinandersetzten.

firststartup
App auf Samsung S7

TabLayout

Ein TabLayout ist ein Layout die man mit Tabs befüllen kann.

Als aller erstes müssen wir unsere Nuget Packages herunterladen. Wir brauchen folgende zwei Pakete:

  • Xamarin.Android.Support.V4
  • Xamarin.Android.Support.Design

Als zweites müssen wir noch ein Theme erstellen und es unsere Applikation zuweisen:
Theme in Resources -> Values -> Styles.axml:



<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<item name="windowActionBar">true
<item name="windowNoTitle">false
<item name="colorPrimary">#2B5C56
<item name="colorPrimaryDark">#000000
<item name="colorAccent">#FFEE58

 

set-application-theme
Applikations Theme setzten

Jetzt können wir mit dem Code anfangen.
Öffne das Main.axml unter Resources -> Layout -> Main.axml

Füge zum bestehende LinearLayout den folgende TabLayout:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>

Wir werden den Tabs gleich im Code hinzufügen, aber dafür brauchen wir ein ViewPager.

ViewPager

Ein ViewPager ist ein Container für ein austauschbares Fragment. Wir können also ein ViewPager zu unsere Main.axml hinzufügen und später im Code das passende Fragment darin anzeigen. Den ViewPager ist auch derjenige die der Swipe Funktion ermöglicht. Er ist schon out of the box bereit und kann eingesetzt werden.

Im Vergleich zu meine Zeichnung unten, sieht man im tatsächlichen Ansicht den ViewPager auf den Handy nicht, ich habe es nur hinzugefügt um das Vorstellungsvermögen zu helfen.

viewpagerimage
View Aufbau

View

Folgende Code kommt unterhalb der TabLayout im Main.axml.

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_margin="2dp" />

Backend

Im MainActivity.cs ist der Backend für der View.
Im Moment ist aber hier nicht viel zu finden:

mainactivityempty
Backend

 

Fügen wir folgender Code hinzu:

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);

TabLayout tabLayout = (TabLayout)FindViewById(Resource.Id.tablayout_navigation);

ViewPager viewPager = (ViewPager)FindViewById(Resource.Id.pager);
SetupviewPager(viewPager);

tabLayout.SetupWithViewPager(viewPager);
}

private void SetupviewPager(ViewPager viewPager)
{
throw new NotImplementedException();
}

Wenn wir den Code aber jetzt laufen würden wurde den Code ein Exception werfen. Wir mussen zuerst noch die Fragmente und der PageAdapter erstellen.

Fragments

Unsere Fragmente werden ganz einfach aufgebaute Fragment sein, die je ein TextFeld beinhalten.
AXML Code von den entsprechende Fragmente:

<!-- Fragment1.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center|center"
android:gravity="center"
android:text="Fragment1"
android:textSize="75sp"
android:background="#A5BFB6"/>



<!-- Fragment2.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Fragment2"
android:textSize="75sp"
android:background="#A5BFB6"/>



<!-- Fragment3.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Fragment3"
android:textSize="75sp"
android:background="#A5BFB6"/>

PageAdapter

Der PageAdapter beinhaltet die verschiedene Tab Namen und ihre zugehörige Fragment. Wichtig ist hier die Usings nicht zu vergessen.

using System.Collections.Generic;
using Android.Support.V4.App;
using Java.Lang;
using Fragment = Android.Support.V4.App.Fragment;
using FragmentManager = Android.Support.V4.App.FragmentManager;

namespace TabAndSwipe
{
class PageAdapter : FragmentPagerAdapter
{
private readonly List _fragments;
private readonly List<string> _fragmentnames;

public PageAdapter(FragmentManager fm) : base(fm)
{
_fragments = new List();
_fragmentnames = new List<string>();
}

public override int Count
{
get { return _fragments.Count; }
}
public override Fragment GetItem(int position)
{
return _fragments[position];
}

public void AddFragment(Fragment fragment, string name)
{
if (fragment == null) return;
_fragments.Add(fragment);
_fragmentnames.Add(name);
}

public override ICharSequence GetPageTitleFormatted(int position)
{
return new Java.Lang.String(_fragmentnames[position]);
}
}
}

Profit

Jetzt müssen wir noch noch die Methode SetupviewPager in der Mainactivity implementieren und dann sollte es laufen!

private void SetupviewPager(ViewPager viewPager)
{
viewPager.OffscreenPageLimit = 3;

PageAdapter adapter = new PageAdapter(SupportFragmentManager);
adapter.AddFragment(new Fragment1(), "Eins");
adapter.AddFragment(new Fragment2(), "Zwei");
adapter.AddFragment(new Fragment3(), "Drei");

viewPager.Adapter = adapter;
}
blog-title-image
Succes!

 

Einstieg in der Welt von Xamarin

Einstieg in der Welt von Xamarin

Alle reden darüber, niemand kennt es und die die es kennen, wissen nicht genau wie es funktioniert. Ich möchte in diesem Blog post als erstes mal klar machen, was Xamarin genau ist. Als zweites werde ich ein paar Tipps geben, wie man einen einfachen Einstieg in der Xamarin Entwicklung machen kann.

Was ist Xamarin?

Xamarin ist ein Entwickler Tool, welche Native App Entwicklung in C# ermöglicht. Aber vor allem ermöglicht es ein grossen Teil (bis zu 90%) des Codes über den Plattformen zu teilen. Das heisst man muss nicht drei Apps entwickeln sondern einen, und denn einfach den Plattform spezifischen ~10-30% des Codes für die weitere Plattformen.

Einige der Vorteilen von Xamarin sind:

  • Man braucht nicht ein Team pro Plattform.
  • Weniger Aufwand dank teilbaren Code.
  • Wenn man etwas ändern will, muss man hauptsächlich nur einmal ändern
  • .NET Framework verwendbar

Wenn macht es sinn Xamarin einzusetzen?

  • Management Apps
  • “Data heavy” Apps
  • Einfache UI’s
Hauptsächlich bei “Enterprise Applikationen”, wobei der Kern des Applications beim Backend liegt. Weil bei solche Applikationen kann man ein grossen Teil des Codes Teilen, was der grösste stärke vom Xamarin ist.
Image result for typical xamarin application

Bild von www.xamarin.com/forms

Wenn macht es kein sinn Xamarin einzusetzen?

  • Sehr benutzerdefinierte Apps
  • “UI heavy” Apps
  • Komplizierte UI’s mit viele Animationen

Wenn der Code welcher man teilen kann kleiner ist. Das ist bei Applikationen wo der Fokus beim Frontend liegt. Das sind zum Beispiel Apps wie Amazons Shopping-App.


Bild von https://www.loungelizard.com/5-great-examples-of-ui-heavy-mobile-app-designs/

Einstieg in der Xamarin Entwicklung

Ich wollte eigentlich eine Tutorial Blog schreiben, aber habe gemerkt das es schon mehrere gute Tutorials von Xamarin und Microsoft gibt. Also habe ich stattdessen zwei Tutorials ausgewählt die ich euch empfehlen kann.

Aber vor man mit den Tutorials anfangen kann muss man ein paar Schritte erledigen.

  • Man braucht eine IDE
  • Man braucht den benötigten SDK
  • Man braucht ein Debugging Endgerät

Meine Empfehlungen sind:

Jetzt zu den Tutorials, das erste ist ein Xamarin Native Tutorial, in diesem App lernt man nicht nur Xamarin kennen, sondern auch das Weather API “OpenWeatherMap“:

Tutorial Weather App (Native)

Das zweite Tutorial ist ein allgemeiner Tutorial zum Thema Xamarin Forms. Bei Xamarin Forms sind die UIs ebenfalls geteilt, und muss somit nur einmal gemacht werden:

Xamarin Forms Tutorial

 


Bild von: https://developer.xamarin.com/guides/xamarin-forms/getting-started/introduction-to-xamarin-forms/