Skip to content

Instantly share code, notes, and snippets.

@jassmith
Last active October 20, 2020 14:56
Show Gist options
  • Star 22 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jassmith/a3b2a543f99126782936 to your computer and use it in GitHub Desktop.
Save jassmith/a3b2a543f99126782936 to your computer and use it in GitHub Desktop.
Xamarin.Forms FormsAppCompatActivity usage instructions

Introduction

Using the Xamarin.Forms AppCompat backend for Android enables a more modern look and feel for your app. In order to use the new backend several changes will be needed for your project.

Update Activity

The default Xamarin.Forms Activity has been the FormsApplicationActivity. All Xamarin.Forms apps derive from this Activity. The AppCompat backend is enabled by changing the base Activity to derive from FormsAppCompatActivity.

public class MyActivity : FormsApplicationActivity

becomes

public class MyActivity : FormsAppCompatActivity

Add required resources

You will need to add the following resources to your Android Application project. They should be added in the layout directory.

TabLayout.axml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabGravity="fill"
    app:tabMode="fixed" />

Toolbar.axml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

You may modify the theming and properties specified on these view templates to match your theming desires.

Next let your activity know where to find these resources.

protected override void OnCreate (Bundle bundle)
{
	// Must be called before base.OnCreate (bundle);
	ToolbarResource = Resource.Layout.Toolbar;
	TabLayoutResource = Resource.Layout.TabLayout;

	base.OnCreate (bundle);

	Forms.Init (this, bundle);
	FormsMaps.Init (this, bundle);

	LoadApplication (new App ());
}

Set your application theme

Your Android Application must use an AppCompat derived theme.

Define a new theme, place this theme in your values directory.

style.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
  <style name="MyTheme" parent="MyTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
     <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>

    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
  </style>

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>
</resources>

Modify your AndroidManifest.xml to use the theme you created, it will look something like:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="AndroidControlGallery.AndroidControlGallery" android:installLocation="auto">
	<uses-sdk android:minSdkVersion="15" android:targetSdkVersion="22" />
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
	<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
	<!-- The following two permissions are not required to use
		 Google Maps Android API v2, but are recommended. -->
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
	<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
	<uses-permission android:name="android.permission.BATTERY_STATS" />
	<uses-permission android:name="android.permission.READ_PHONE_STATE" />
	<uses-permission android:name="android.permission.READ_LOGS" />
	<uses-permission android:name="android.permission.BIND_NOTIFICATION_LISTENER_SERVICE" />
	<uses-feature android:glEsVersion="0x00020000" android:required="true" />
	<application android:label="YourAppName" android:theme="@style/MyTheme">
		<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR_KEY" />
		<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
	</application>
</manifest>

That should be it, all done.

@allbdeveloper
Copy link

Is there no way to get toolbar object??
Can't access it.
Many guys are facing same problem.
Could you help?

@pemqs
Copy link

pemqs commented Sep 14, 2016

@Femilshajin no, actually what I felt is the whole thing got 3 times slower. Master Detail flickers a lot. Components I display onAppearing or even when the page is being constructed, take 3 seconds to display on screen (and I am speaking of a very simple grid I use to simulate the bottom navigation bar for android, since the only plugin available required profile 259), and a lot more. yes it makes the thing a little closer to what google developed, but it is still way far from being android.

@pemqs
Copy link

pemqs commented Sep 14, 2016

@allbdeveloper about that, what exactly are you missing? the access to the layout files? - (which may happen a lot, specially if you are not importing (using) the proper Resources folder where you are calling the layout files) - or are you simply missing creating and setting the toolbar xml file to the Toolbar property of FormsAppCompatActivity? if needed, please post a snippet of the code you are using, please.

@mehmetavsar
Copy link

mehmetavsar commented May 3, 2017

solution : i figured out that I didn't include Xamarin.Android.Support.Design nuget package in android project.

It runs perfect on debug mode on device, but when I deploy APK release, app immediately crashes with this message:
java.lang.ClassNotFoundException: Didn't find class “android.support.v7.appcompat.R$styleable”

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment