안녕하세요. 엑셀 소프트의 타부치입니다.

이전 Xamarin.Android에서 Material Design을 사용하는 방법 (Android 5.x 전용) - Qiita에서는 Android 5.x 기기에만 Material Design을 적용하는 간단한 방법을 설명했습니다. 이 문서에서는 Xamarin.Android 라이브러리 v7 AppCompat을 사용하여 모든 기기에서 Material Design을 사용하는 방법을 보여줍니다.

이 항목은 Android Tips: Hello Material Design v7 AppCompat | Xamarin Blog을 기반으로 작성되었습니다. 자세한 내용은 원래 Xamarin Blog를 참조하십시오.

Android 5.0 Lollipop은 Material Design에서 Android UI를 완전히 변경했습니다. Android Support v7 AppCompat 라이브러리이 나올 때까지 Material Design은 Android 5.0 이상이었지만 API 7과 같은 이전 버전에도 ActionBar를 다시 배치하는 ToolBar를 사용할 수 있습니다.

소개

AppCompat를 프로젝트에 추가하려면 다음 중 하나를 사용하십시오.

Component Store


NuGet


설치가 완료되면 Minimum Target을 API 10(Android 2.3)으로 설정할 수 있습니다.

Material Theme 사용

AppCompat 라이브러리를 사용하는 경우 일반 앱의 내장 리소스와 많은 차이가 있습니다. 우선 아래의 3가지로부터 베이스의 테마를 선택합니다.

Dark: Theme.AppCompat

Light: Theme.AppCompat.Light

Light with Dark ActionBar: Theme.AppCompat.Light.DarkActionBar

이러한 테마 중 하나를 사용하려면 Resources 폴더에 values와 values-v21의 두 폴더를 만든 다음 styles.xml를 만듭니다.
values/styles.xml에서는 응용 프로그램의 기본 테마를 만들고 사용자 지정 특성으로 설정할 수 있습니다.

values/styles.xml

<resources>
  <style name="MyTheme" parent="MyTheme.Base">
  </style>
  <!-- どの API でも適用されるベーステーマ -->
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <!-- toolba を使用するので ActionBar は表示しません -->
    <item name="windowActionBar">false</item>
    <!-- 以下を参考にテーマカラーを設定します -->
    <!-- http://www.google.com/design/spec/style/color.html#color-color-palette -->
    <!-- colorPrimaryはデフォルトのアクションバーの背景に使用されます -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark は status bar の色です -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent は widget の色合いに使われる colorControlActivated の標準色です -->
    <item name="colorAccent">#FF4081</item>
     <!-- この他に colorControlNormal、colorControlActivated、
          colorControlHighlight、colorSwitchThumbNormal などを設定できます -->
  </style>
</resources>

다음 values-v21/styles.xml에 Lollipop 장치에 대한 추가 사용자 지정 특성을 추가할 수 있습니다.

<resources>
  <!--
        API 21 以上用のベースのアプリケーションテーマです。このテーマは
        API 21 以上のデバイスで resources/values/styles.xml の設定を置き換えます。
    -->
  <style name="MyTheme" parent="MyTheme.Base">
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
  </style>
</resources>

마지막으로 Properties 폴더 아래의 AndroidManifest.xml를 열고 Application 노드에 android:theme="@style/MyTheme"를 추가합니다.

Toolbar 구현

이전Android Tips: Hello Toolbar, Goodbye Action Bar | Xamarin Blog에서 소개했던 것과 기본적으로는 변하지 않지만, Toolbar 위젯을 Support Library에서 직접 참조할 수 있습니다. layout/toolbar.axml를 만들고 다음을 입력합니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Toolbar를 추가하려면 Main.axml의 include 노드에서 toolbar를 참조하십시오.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/main_content"
        android:layout_below="@id/toolbar">
        <Button
            android:id="@+id/MyButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/Hello" />
    </LinearLayout>
</RelativeLayout>

활동 업데이트

Activity에서 AppCompat을 사용하려면 Activity 상속을 변경해야 합니다. 또한 using Android.Support.V7.App;도 추가합니다.

public class MainActivity : Activity

에서

public class MainActivity : ActionBarActivity

변경입니다.

이제 새 Toolbar에서 SupportActionBar를 설정할 수 있습니다. 올바른 Toolbar가 항상 참조되는지 확인하기 위해 별칭을 사용하는 것이 좋습니다.

using Toolbar = Android.Support.V7.Widget.Toolbar;

그런 다음 OnCreate 메서드에서 Toolbar를 찾아 설정하고 사용합니다.

protected override void OnCreate (Bundle bundle)
{
  base.OnCreate (bundle);
  // Set our view from the "main" layout resource
  SetContentView (Resource.Layout.main);
  var toolbar = FindViewById<Toolbar> (Resource.Id.toolbar);
  // Toolbar は、デフォルトの ActionBar になります
  SetSupportActionBar (toolbar);
  SupportActionBar.Title = "Hello from Appcompat Toolbar";
  //..
}

이제 이전 Android에서도 Material Design 앱을 실행할 수 있습니다.


Nexus 5


GL07S (Android 4.1.2)

지금까지의 소스 코드를 Android/MeterialAppCompatSample에 두었습니다.

또한 참고로 Visual Studio용 프로젝트 템플릿을 두었습니다.

또, 대본의 James Montemagno씨에 의한 소스 코드는 Support v7 Toolbar - Xamarin에 있으므로, 아울러 참조해 주세요.

James 씨의 녀석은 화면 아래에도 BottomToolBar 로서 2 개의 Toolbar 를 사용하고 있는 샘플로 참고가 된다고 생각합니다.

Xamarin 신경이 쓰이는 분은

꼭 다운로드 (직접)/다운로드 (당사를 통해) 하고 만져보세요.
학습 리소스 이나 JXUG 링크 페이지 에 참고 자료를 모으고 있으므로 아울러 아무쪼록.

나의 Hatena 블로그도 구독해 주시면 기쁩니다.

이상입니다.