Skip to content
This repository was archived by the owner on Oct 20, 2022. It is now read-only.

Commit 24ec52d

Browse files
davidbritchdavidbritch
committed
Add doc.
1 parent a01e890 commit 24ec52d

File tree

3 files changed

+177
-0
lines changed

3 files changed

+177
-0
lines changed

‎Docs/AppCompat/appcompat-images/target-android-6-sml.png

38.3 KB
Loading

‎Docs/AppCompat/appcompat-images/target-android-6.png

37.4 KB
Loading

‎Docs/AppCompat/appcompat-material-design.md

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
---
2+
title: "Adding AppCompat and Material Design"
3+
description: "This article explains how to convert existing Xamarin.Forms Android apps to use AppCompat and Material Design."
4+
ms.prod: xamarin
5+
ms.assetid: 045FBCDF-4D45-48BB-9911-BD3938C87D58
6+
ms.technology: xamarin-forms
7+
author: davidbritch
8+
ms.author: dabritch
9+
ms.date: 06/27/2017
10+
no-loc: [Xamarin.Forms, Xamarin.Essentials]
11+
---
12+
13+
# Adding AppCompat and Material Design
14+
15+
_Follow these steps to convert existing Xamarin.Forms Android apps to use AppCompat and Material Design_
16+
17+
<!-- source https://gist.github.com/jassmith/a3b2a543f99126782936
18+
https://blog.xamarin.com/material-design-for-your-xamarin-forms-android-apps/ -->
19+
20+
## Overview
21+
22+
These instructions explain how to update your existing Xamarin.Forms Android
23+
applications to use the AppCompat library and enable Material Design in the
24+
Android version of your Xamarin.Forms apps.
25+
26+
### 1. Update Xamarin.Forms
27+
28+
Ensure the solution is using Xamarin.Forms 2.0 or newer. Update the Xamarin.Forms
29+
NuGet package to 2.0 if required.
30+
31+
### 2. Check Android version
32+
33+
Ensure the Android project's target framework is Android 6.0 (Marshmallow). Check
34+
the **Android project > Options > Build > General** settings to ensure
35+
the corrent framework is selected:
36+
37+
![Android General Build Configuration](appcompat-images/target-android-6-sml.png)
38+
39+
### 3. Add new themes to support Material Design
40+
41+
Create the following three files in your Android project and paste
42+
in the contents below. Google provides a
43+
[style guide](https://www.google.com/design/spec/style/color.html#color-color-palette)
44+
and a [color palette generator](https://www.materialpalette.com/) to help
45+
you choose an alternate color scheme to the one specified.
46+
47+
**Resources/values/colors.xml**
48+
49+
```xml
50+
<resources>
51+
<color name="primary">#2196F3</color>
52+
<color name="primaryDark">#1976D2</color>
53+
<color name="accent">#FFC107</color>
54+
<color name="window_background">#F5F5F5</color>
55+
</resources>
56+
```
57+
58+
**Resources/values/style.xml**
59+
60+
```xml
61+
<resources>
62+
<style name="MyTheme" parent="MyTheme.Base">
63+
</style>
64+
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
65+
<item name="colorPrimary">@color/primary</item>
66+
<item name="colorPrimaryDark">@color/primaryDark</item>
67+
<item name="colorAccent">@color/accent</item>
68+
<item name="android:windowBackground">@color/window_background</item>
69+
<item name="windowActionModeOverlay">true</item>
70+
</style>
71+
</resources>
72+
```
73+
74+
An additional style must be included in the **values-v21** folder to apply
75+
specific properties when running on Android Lollipop and newer.
76+
77+
**Resources/values-v21/style.xml**
78+
79+
```xml
80+
<resources>
81+
<style name="MyTheme" parent="MyTheme.Base">
82+
<!--If you are using FlyoutPage you will want to set these, else you can leave them out-->
83+
<!--<item name="android:windowDrawsSystemBarBackgrounds">true</item>
84+
<item name="android:statusBarColor">@android:color/transparent</item>-->
85+
</style>
86+
</resources>
87+
```
88+
89+
### 4. Update AndroidManifest.xml
90+
91+
To ensure this new theme information is used, set theme in the **AndroidManifest** file by adding
92+
`android:theme="@style/MyTheme"` (leave the rest of the XML as it was).
93+
94+
**Properties/AndroidManifest.xml**
95+
96+
```xml
97+
...
98+
<application android:label="AppName" android:icon="@drawable/icon"
99+
android:theme="@style/MyTheme">
100+
...
101+
```
102+
103+
### 5. Provide toolbar and tab layouts
104+
105+
Create **Tabbar.axml** and **Toolbar.axml** files in the **Resources/layout**
106+
directory and paste in their contents from below:
107+
108+
**Resources/layout/Tabbar.axml**
109+
110+
```xml
111+
<android.support.design.widget.TabLayout
112+
xmlns:android="http://schemas.android.com/apk/res/android"
113+
xmlns:app="http://schemas.android.com/apk/res-auto"
114+
android:id="@+id/sliding_tabs"
115+
android:layout_width="match_parent"
116+
android:layout_height="wrap_content"
117+
android:background="?attr/colorPrimary"
118+
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
119+
app:tabIndicatorColor="@android:color/white"
120+
app:tabGravity="fill"
121+
app:tabMode="fixed" />
122+
```
123+
124+
A few properties for the tabs have been set including the tab’s gravity to `fill` and
125+
mode to `fixed`.
126+
If you have a lot of tabs you may want to switch this to scrollable - read through the
127+
Android [TabLayout documentation](https://developer.android.com/reference/android/support/design/widget/TabLayout.html)
128+
to learn more.
129+
130+
**Resources/layout/Toolbar.axml**
131+
132+
```xml
133+
<android.support.v7.widget.Toolbar
134+
xmlns:android="http://schemas.android.com/apk/res/android"
135+
xmlns:app="http://schemas.android.com/apk/res-auto"
136+
android:id="@+id/toolbar"
137+
android:layout_width="match_parent"
138+
android:layout_height="?attr/actionBarSize"
139+
android:minHeight="?attr/actionBarSize"
140+
android:background="?attr/colorPrimary"
141+
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
142+
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
143+
app:layout_scrollFlags="scroll|enterAlways" />
144+
```
145+
146+
In these files we're creating specific theme for the toolbar that may vary for your application.
147+
Refer to the [Hello Toolbar](https://blog.xamarin.com/android-tips-hello-toolbar-goodbye-action-bar/)
148+
blog post to learn more.
149+
150+
### 6. Update the `MainActivity`
151+
152+
In existing Xamarin.Forms apps the **MainActivity.cs** class will inherit
153+
from `FormsApplicationActivity`. This must be replaced with `FormsAppCompatActivity`
154+
to enable the new functionality.
155+
156+
**MainActivity.cs**
157+
158+
```csharp
159+
public class MainActivity : FormsAppCompatActivity // was FormsApplicationActivity
160+
```
161+
162+
Finally, "wire up" the new layouts from step 5 in the `OnCreate` method,
163+
as shown here:
164+
165+
```csharp
166+
protected override void OnCreate(Bundle bundle)
167+
{
168+
// set the layout resources first
169+
FormsAppCompatActivity.ToolbarResource = Resource.Layout.Toolbar;
170+
FormsAppCompatActivity.TabLayoutResource = Resource.Layout.Tabbar;
171+
172+
// then call base.OnCreate and the Xamarin.Forms methods
173+
base.OnCreate(bundle);
174+
Forms.Init(this, bundle);
175+
LoadApplication(new App());
176+
}
177+
```

0 commit comments

Comments
 (0)