Xamarin.Android – NotifyMe part I

Hello. This is my first post about native approach in Xamarin.
My application NotifyMe written in Xamarin.Forms is done.
Today I decided to write it again but this time in native approach in Xamarin.Android and Xamarin.iOS. It will be more difficult because in this approach percentage of shared code is much lower than in Xamarin.Forms. All views must be written in native way ( axml for Android and storyboards for iOS).

I started with login view. I had to create custom style for button.
In Xamarin.Forms I handled it by using custom renderers ( you can read about them here). In Xamarin.Android approach I had to use shape drawables.

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
      <gradient
          android:color="@color/transparent"/>
      <corners
          android:radius="10dp"/>
      <stroke
          android:width="2dp"
          android:color="@color/secondPrimary"/>
    </shape>
  </item>
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
      <gradient
          android:color="@color/transparent"/>
      <corners
          android:radius="10dp"/>
      <stroke
          android:width="2dp"
          android:color="@color/primary"/>
    </shape>
  </item>
</selector>

To achieve the same behaviour I also had to change button text color in press state:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" android:color="@color/secondPrimary" />
  <item android:state_focused="true" android:color="@color/secondPrimary" />
  <item android:color="@color/primary" />
</selector>

And finally my LoginView.axml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    android:orientation="vertical">
    <ImageView
        android:src="@drawable/logo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/imageView1"
        android:padding="40dp"
        android:adjustViewBounds="true"
        android:layout_weight="1" />
    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:textSize="15dp"
        android:text="LOG IN"
        local:MvxBind="Click LoginCommand"
        android:background="@drawable/transparent_button"
        android:layout_gravity="center"
        android:layout_margin="60dp"
        android:textColor="@drawable/button_color" />
</LinearLayout>

Everything works fine so I got the following result, exactly the same like in Xamarin.Forms app:

Part II available here.

Leave a Reply

Your email address will not be published. Required fields are marked *