Corrado's Blog 2.0

Online thoughts of a technology funatic

Xamarin.Android Status bar color not set

Not a very descriptive title, but good for search engines Smile

The problem: You’re using Xamarin.Android.Support.v7.AppCompat in order to have Material Design’s Toolbar available also devices running o pre-Lollipop (v.21) releases.

You added a reference to the library:

image

Added the style:

<style name="ParentMaterialTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="colorControlHighlight">#1ef1ab</item> <item name="colorButtonNormal">#f955f3</item> <item name="colorControlActivated">#0cf427</item> </style>

Added the entry into AndroidManifest.xml:

<application android:label="_02_StandaloneToolbar" android:theme="@style/MaterialTheme" />

Created the toolbar:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:minHeight="?attr/actionBarSize" android:theme="@style/ToolbarTheme" app:popupTheme="@style/PopupTheme" android:id="@+id/toolbar"> </android.support.v7.widget.Toolbar>

Included into Main.axaml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/toolbar"/> </RelativeLayout>

But when you run it, the status bar doesn’t follow colorPrimaryDark but it remains black Confused smile

image

 

Solution: add this line into Activity’s OnCreate method (yes, you have to use code)

this.Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);

And you’re done!

image

Use IDEA IDE for Android UI design with Visual Studio and Xamarin

While Xamarin did a monster job integrating Android and iOS designers in both Visual Studio and Xamarin Studio as soon as your project becomes larger you’ll soon hit their limitations, that why many pro developers end up using native designers for UI design. This post is about how to use IntelliJ IDEA based IDEs for Android UI design together with Visual Studio, following the same approach we use with Blend for Windows development.

Step 1: install your favorite IDE: Android Studio or IntelliJ IDEA (they’re practically the same since Android Studio is based on IntelliJ IDEA)

Step 2: Install XamarIdea extension for Visual Studio, this extension, recently updated for Visual Studio 2015, will make integration between the two IDEs a lot faster, thanks to Egor Bogatov (@EgorBo) for sharing.
No idea if something similar exists for Xamarin Studio (sorry, I’m not an pro Xamarin Studio user)

Step 3: Create a new blank Android app using Visual Studio

image

and wait until initial project skeleton creation process ends.

Step 4: Right-click the Main.axml file inside Resources\layout folder and you should see a new option: Open in IDEA/Android Studio

image

click it and you’ll get an initial configuration dialog that should point to IDEA/Android Studio path, if not select it manually, together with other plugin options

image

click Ok, and you’ll see a warning dialog saying that your project needs some modifications:

image

These modifications are necessary since Android layout files use a different extension (.xml) and project structure is slightly different than Xamarin Android apps, just say yes; unfortunately these changes will prevent you to use the integrated Xamarin Android designer further unless you rename the layout file back to .axml. Click Yes, and you’ll get a final dialog reminding you to recompile your project inside Android IDE and that plugin options are available under Visual Studio’s Tools menu:

image

Step 5: Switch to IDEA IDE and, for sure, rebuild the project

image

On the left you’ll see the project structure, under app node expand the Resources folder and you’ll see the familiar Android folder structure together with your renamed main.xml file.

image

Double click it to open the designer.

image

I won’t go into design detail since there are lots of demo tutorials on JetBrains’s site, just want you to see some of the plus of IDEA and why it is more productive than Visual Studio’s integrated editor/designer.

Step 5: Design

-Select and delete the autogenerated button from design surface.
-Let’s change root LinearLayout to a RelativeLayout using the Component tree window in the upper right corner.

image

-Drag a Plain Text to design surface until top tooltip shows CenterVertical/CenterHorizontal

image

-Set layout_width to match_parent using Properties window (hint: if you need to search for a property just start typing to select matching properties Smile)

-Let use xml editor to add left and right margins: Switch to text, select the EditText and start typing: ma, YES! full intellisense to the rescue!

image

-Do you want to create a style that you can reuse with others EditTexts? just right click the edit text and use Refactor –> Extract Style menu

image

Select the properties you want to export (this dialog will look familiar to Reshaper users) and click OK

image

the layout xml has been changed to:

<EditText android:id="@+id/editText" style="@style/MyEditTextStyle"/>

and a styles.xml file has been created for you under values folder:

image

Of course you can edit the styles.xml file with full intellisense / editors support

image

Step 6-Back to Visual Studio

Save the project and switch back to Visual Studio, your main.xml file is automatically updated, but unfortunately the new files that have been added to the project, like styles.xml in our demo, must be added manually to the project.

Add styles.xml under values folder, compile and continue developing your app using Visual Studio.

Closing:

I’ve just scratched the surface of IDEA design productivity features, I encourage you to give it a try, I’m sure you’ll love it.

Have fun exploring!

PS: Did I tell you that IDEA renders AppCompat’s widgets instead of a boring dark gray box? Winking smile

Declarative event handlers in Xamarin Android

In Android applications the UI components are totally isolated from associated activity so to ‘glue’ them you need to follow a ‘javascript like’ approach: find the element fist  and then interact with it. Let’s say you have a .axml file containing a button with id MyButton

 <Button
        android:id="@+id/MyButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/Hello" />

in the associated activity, to subscribe its Click event you have to write this code:

public class MainActivity : Activity
 {
  int count = 1;

  protected override void OnCreate(Bundle bundle)
  {
   base.OnCreate(bundle);

   SetContentView(Resource.Layout.Main);
   Button button = FindViewById<Button>(Resource.Id.MyButton);
   button.Click += button_Click;
  }

  void button_Click(object sender, EventArgs e)
  {
   (sender as Button).Text = string.Format("{0} clicks!", count++);
  }
 }

If you, like me, come from XAML and love the declarative approach I’ve got a good new for you, there’s an alternative, just follow this steps:

1-Add a reference to Mono.Android.Export library

2-Declare you handler in .axml file this way:

<Button
        android:id="@+id/MyButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/Hello"
    android:onClick="myHandler"/>

3-Refactor the code in associated activity this way:

public class MainActivity : Activity
 {
  int count = 1;

  protected override void OnCreate(Bundle bundle)
  {
   base.OnCreate(bundle);

   SetContentView(Resource.Layout.Main);
  }

  [Java.Interop.Export("myHandler")]
  public void button_Click(View v)
  {
   (v as Button).Text = string.Format("{0} clicks!", count++);
  }
 }

And you’re done!

As you see the trick is to export the function, using the Java.Interop.Export attribute that also allows you to use a export the method with a different name, leave it empty if you don’t need to differentiate.

Lot simpler, and cleaner… IMHO Smile