Google Developers Japan: 11月 2014

デベロッパーリレーションズチームの人材募集のお知らせ

2014年11月26日水曜日

デベロッパーアドボケイトこちらの募集要項ページこちらの募集要項ページデベロッパーリレーションズコミュニティマネージャーこちらの募集要項ページデベロッパープログラムエンジニアソースコード概要紹介現在はお休み中StackOverflowこちらの募集要項ページ求められるスキルと募集要項参考資料https://www.google.com/about/careers/search#!t=jo&jid=48525001&https://www.google.com/about/careers/search#!t=jo&jid=66805001&https://www.google.com/about/careers/search#!t=jo&jid=78255001&https://www.google.com/about/careers/search#!t=jo&jid=29119&https://sites.google.com/site/devreljp/Developer Relations Japan Team

Design Sprint for Android Wear を開催します

2014年11月17日月曜日

Android Wear

■Design Sprint とはDesign SprintGoogle Ventures

Design Sprint は大きく 3 つのプロセスに分かれます。■当日の流れ■イベントの詳細■名称：■日程：■場所：■定員：■会費：■主催：■申し込み方法http://goo.gl/PAQAus※定員に達したため、受付を終了しました。11 月 20 日（木）鈴木拓生 Developer Relations Team

Android アプリにマテリアルデザインを導入する

2014年11月14日金曜日

「本記事は Android Developer Relations チームの Chris Banes と Nick Butcher が 10 月 24 日に Android Developers blog に投稿した「Implementing Material Design in Your Android app」という記事を元に、翻訳・作成しています。詳しくは元記事をご覧ください。 - 荒木」

http://4.bp.blogspot.com/-FdszmBuyYLY/VEqSiys-9dI/AAAAAAAAA7k/td6QUgxrPgo/s640/Screen%2BShot%2B2014-10-24%2Bat%2B6.41.54%2BPM.png

マテリアルデザインタンジブルサーフェス紙とインク影の描写elevationelevation<ImageView … android:elevation="8dp" /> ViewCompatgetElevation()/setElevation()drawablefloating action buttongetOutline()OutlineViewOutlineProvider カードカードCardView<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content">  </android.support.v7.widget.CardView> CardViewFrameLayoutelevationcardElevationcardCornerRadiusカードばかり使いすぎないように印刷物のようなデザインタイポグラフィandroid:fontFamily="sans-serif-medium"タイポグラフィスケールandroid:textAppearance="@android:style/TextAppearance.Material.Title"TitleAppCompat“@style/TextAppearance.AppCompat.Title” カラー

カラーパレット

colorPrimary: アプリのプライマリ色です。Action Bar の背景、最近のタスクのタイトル、エッジ効果などに使われます

colorAccent: プライマリ色を補足する明るい色です。EditText や Switch などのフレームワークコントロールに使われます

colorPrimaryDark: プライマリ色の暗いバリエーションです。Status Bar に使われます

colorControlNormal、colorControlActivated、colorControlHighlight、colorButtonNormal、colorSwitchThumbNormal、colorEdgeEffect、statusBarColor、navigationBarColorAppCompat ダイナミックカラー

Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { Palette.Swatch vibrant = palette.getVibrantSwatch(); if (swatch != null) { // 明るい色があるときは // タイトルの TextView を更新する titleView.setBackgroundColor( vibrant.getRgb()); titleView.setTextColor( vibrant.getTitleTextColor()); } } }); リアリティのある動き Activity と Fragment の遷移

album_grid.xml … <Imageview … android:transitionname="@string/transition_album_cover" /> album_details.xml … <Imageview … android:transitionname="@string/transition_album_cover" /> AlbumActivity.java Intent intent = new Intent(); String transitionName = getString(R.string.transition_album_cover); … ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, albumCoverImageView, // 遷移がはじまるビュー transitionName // 遷移先のビューの transitionName ); ActivityCompat.startActivity(activity, intent, options.toBundle()); transitionName開始時終了時リップル効果

surface reactionTheme.MaterialButton?android:selectableItemBackgrounddrawableRipple<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/accent_dark"> <item> <shape android:shape="oval"> <solid android:color="?android:colorAccent" /> </shape> </item> </ripple> View#drawableHotspotChangeddrawable StateListAnimator持ち上がりますtranslationZZ = elevation + translationZstateListAnimatortranslationZButtonslayout/your_layout.xml <Imagebutton ... android:statelistanimator="@anim/raise" /> anim/raise.xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyname="translationZ" android:valueto="@dimen/touch_raise" android:valuetype="floatType" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyname="translationZ" android:valueto="0dp" android:valuetype="floatType" /> </item> </selector> Reveal外に向かって放射状に広がるのでAnimatorAnimator reveal = ViewAnimationUtils.createCircularReveal( viewToReveal, // Reveal するための新しいビュー centerX, // マスク中心の x 座標 centerY, // マスク中心の y 座標 startRadius, // 開始時のマスクの半径 endRadius); // 完了時のマスクの半径 reveal.start(); Interpolatorfast-in-slow-out interpolator

ピーク速度で行うのが好ましいfast-out-linear-inlinear-out-slow-in 適応性の高いデザイン ToolbarToolbarAction BarAction BarToolbarToolbarActivity.setActionBar()ToolbarActivityAction Bar

Toolbarこちらの記事マテリアル化を進めましょう荒木佑一 Developer Relations Team

アプリを Nexus 6 と Nexus 9 に備えましょう

2014年11月12日水曜日

「本記事は Developer Advocate の Katherine Kuan が 10 月 2 3 日に Android Developers blog に投稿した「Getting Your Apps Ready for Nexus 6 and Nexus 9」という記事を元に、翻訳・作成しています。詳しくは元記事をご覧ください。 - 荒木」

Nexus 6 で動作する Tumblr アプリ（マテリアルデザイン適応済み）

Nexus 6 画面730 x 410 dp 素材を確認560 dpixxhdpixxxhdpixxxhdpixxhdpixxxhdpi アプリアイコンdrawable-mipmap-xxhdpixxxhdpires/ mipmap-mdpi/ ic_launcher.png mipmap-hdpi/ ic_launcher.png mipmap-xhdpi/ ic_launcher.png mipmap-xxhdpi/ ic_launcher.png mipmap-xxxhdpi/ ic_launcher.png # Nexus 6 の launcher で使用されるアプリアイコン xxxhdpires/ drawable-mdpi/ ic_sunny.png drawable-hdpi/ ic_sunny.png drawable-xhdpi/ ic_sunny.png drawable-xxhdpi/ # xxxhdpi 版がないときは、こちらを使用 ic_sunny.png drawable-xxxhdpi/ # Nexus 6 用の高解像度素材 ic_sunny.png Google Play でフィルターされていないことを確認AndroidManifest.xml<compatible-screens>使用を中止してください。これらのデバイスの構成（画面サイズと密度）を追加するようにしてください。 Nexus 9 画面xhdpidrawable-xhdpi

Nexus 9 で動作する Wall Street Journal アプリ（マテリアルデザイン適応済み）

64-bit 用に NDK アプリを有効化Application.mkAPP_ABIAPP_ABI := armeabi armeabi-v7a arm64-v8a x86 x86_64 mips mips64 デベロッパーサイト64 ビットエミュレーターハードウェアキーボードのサポートをアップデートアプリの画面オリエンテーションを 1 つに限定しないことアプリの主要なアクションがキーボードナビゲーションとショートカット<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_create" android:title="@string/menu_create" android:alphabeticShortcut="c” /> </menu/> Activity#onKeyShortcutView#onKeyShortcutこちらIn MainActivity.java: @Override public boolean onKeyShortcut(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_R: Toast.makeText(this, "Reply", Toast.LENGTH_SHORT).show(); return true; default: return super.onKeyShortcut(keyCode, event); } } w- と sw- qualifiers を用いた順応するデザインlayout-landlayout-portw<N>dp幅リソースフォルダ qualifier
res/layout/activity_main.xml res/layout-w600dp/activity_main.xml res/layout-w720dp/activity_main.xml values-largevalues-xlargesw<N>dp最小幅 qualifierIn res/values/styles.xml: <style name="DescriptionTextStyle"> <item name="android:textAppearance">?android:attr/textAppearanceMedium</item> </style> In res/values-sw600dp/styles.xml: <style name="DescriptionTextStyle"> <item name="android:textAppearance">?android:attr/textAppearanceLarge</item> </style> 5.0 の機能とマテリアルデザインandroid:targetSdkVersion重要な挙動の変更点通知機能新しいプラットフォーム APIマテリアルデザインサポートライブラリ動画スタートガイド荒木佑一 Developer Relations Team

AppCompat v21 — Lollipop 搭載前のデバイスにマテリアルデザインを！

2014年11月10日月曜日

Android 5.0 SDKAppCompatRecyclerViewCardViewPalette AppCompat に新たに追加された機能ToolbarToolbarオープンソースセットアップdependencies { compile "com.android.support:appcompat-v7:21.0.+" } 新規にはじめる場合

すべての Activity は ActionBarActivity から拡張されている必要があります。ActinBarActivity は v4 サポートライブラリの FragmentActivity から拡張されているので、引き続き fragment を使用することができます。

Action Bar/Toolbar を使用するテーマは必ず Theme.AppCompat を継承する必要があります。Light や NoActionBar などのバリエーションもあります。

Action Bar に表示される内容（Toolbar 内のリストナビゲーションのための SpinnerAdapter など）を inflate するときには、必ず getSupportActionBar().getThemedContext() 経由で取得した Action bar のテーマの内容を使用してください。

MenuItem に対して Action に関連したコールを行う場合は、必ず MenuItemCompat 内の static メソッドを使用してください。

Action Bar API guide 既存のセットアップからの移行values/values/themes.xml: <style name="Theme.MyTheme" parent="Theme.AppCompat.Light">  <item name="actionBarStyle">@style/MyActionBarStyle</item>  <item name=”colorPrimary”>@color/myawesomered</item> <item name=”colorPrimaryDark”>@color/myawesomedarker_red</item>  </style> values-v14 テーマColor Palette のテーマ主要色と強調色values/themes.xml: <style name="Theme.MyTheme" parent="Theme.AppCompat.Light">  <item name=”colorPrimary”>@color/my_awesome_color</item>  <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</item>  <item name=”colorAccent”>@color/accent</item>  </style> ウィジェットの色付け

AppCompat の Toolbar で提供するすべて（アクションモードなど）

EditText

Spinner

CheckBox

RadioButton

Switch（新しい android.support.v7.widget.SwitchCompat を使用してください）

CheckedTextView

Toolbar ウィジェット

android.support.v7.widget.Toolbar

Toolbar を Action Bar のように使用する。これはメニュー inflate や選択、ActionBarDrawerToggle のような、既存の Action Bar 機能を使用したいけど外見をより細かくコントロールしたい、といったときに有効です。

スタンドアローン Toolbar を使用する。これは1度に複数の toolbar を表示したり、画面の全幅に満たない toolbar を表示したりといった、 Action Bar では対応できないようなパターンを使用したいときに有効です。

Action BarTheme.AppCompat.NoActionBarToolbar<android.support.v7.widget.Toolbar android:id=”@+id/my_awesome_toolbar” android:layout_height=”wrap_content” android:layout_width=”match_parent” android:minHeight=”?attr/actionBarSize” android:background=”?attr/colorPrimary” />ToolbarViewGroupActivityFragmentToolbar@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.blah); Toolbar toolbar = (Toolbar) findViewById(R.id.myawesometoolbar); setSupportActionBar(toolbar); }Toolbar スタンドアローンToolbar@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.blah); Toolbar toolbar = (Toolbar) findViewById(R.id.myawesometoolbar); // メニューアイテムのクリックに対応するために、OnMenuItemClickListener を設定 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { // メニューアイテムに対応 return true; } }); // toolbar に表示されるようにメニューを inflate toolbar.inflateMenu(R.menu.yourtoolbarmenu); }ToolbarToolbar API reference スタイル<android.support.v7.widget.Toolbar android:layoutheight="wrapcontent" android:layoutwidth="matchparent" android:minHeight="?attr/actionBarSize" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" /> app:theme DarkActionBarToolbarToolbarpopupTheme<android.support.v7.widget.Toolbar android:layoutheight=”wrapcontent” android:layoutwidth=”matchparent” android:minHeight=”@dimen/tripleheighttoolbar” app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> SearchView ウィジェットSearchViewsearchView*SearchViewvalues/themes.xml: <style name=”Theme.MyTheme” parent=”Theme.AppCompat”> <item name=”searchViewStyle”>@style/MySearchViewStyle</item> </style> <style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>  <item name="queryBackground">...</item>  <item name="submitBackground">...</item>  <item name="closeIcon">...</item>  <item name="searchIcon">...</item>  <item name="goIcon">...</item>  <item name="voiceIcon">...</item>  <item name="commitIcon">...</item>  <item name="suggestionRowLayout">...</item> </style> Toolbar が今ここに… FAQLollipop 導入前のデバイスで EditText（もしくは前述のウィジェットの1つ）が正しく色付けされていないのはなぜですか？

当該ウィジェットがカスタマイズされている（つまり EditText を拡張している）

LayoutInflater なしで EditText を作成している（つまり新規の EditText() をコールしている）

Lollipop 導入前のデバイスでは特定のウィジェットにマテリアルスタイル化されていないのはなぜですか？ android:windowContentOverlay は null に設定しているのに、Android Lollipop で私の Action Bar にシャドウがあるのはなぜですか？ getSupportActionBar().setElevation(0) Lollipop 導入前のデバイスではリップル効果がないのはなぜですか？ Preferences で AppCompat を使用するにはどうしたらいいですか？ PreferenceFragment荒木佑一 Developer Relations Team