2014年12月25日木曜日

AppCompat v7 の version 21 では、Fragment 入れ替えに
android.R.id.content を使ってはいけない

FragmentTransaction.replace() で android.R.id.content に MainFragment を入れる処理です。

public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getSupportFragmentManager() .beginTransaction() .replace(android.R.id.content, new MainFragment(), "MainFragment") .commit(); } public static class MainFragment extends ListFragment { @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); setListAdapter(new ArrayAdapter(getActivity(), android.R.layout.simple_list_item_1, android.R.id.text1, new String[]{"test1", "test2", "test2"})); } } }
AppCompat v7 の version 19 だと普通に MainFragment が表示されます。 apply plugin: 'com.android.application' android { compileSdkVersion 19 buildToolsVersion "21.1.1" defaultConfig { applicationId "net.yanzm.sample2" minSdkVersion 15 targetSdkVersion 19 versionCode 1 versionName "1.0" } ... } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:19.+' }



しかし、AppCompat v7 の version 21 にすると、でない! apply plugin: 'com.android.application' android { compileSdkVersion 21 ... defaultConfig { ... targetSdkVersion 21 ... } ... } dependencies { ... compile 'com.android.support:appcompat-v7:21.0.3' }

悲しみ。。。

レイアウトファイルを用意すれば表示されるけど。。。 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" /> public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getSupportFragmentManager() .beginTransaction() .replace(R.id.content, new MainFragment(), "MainFragment") .commit(); } ... }


バグなんだろうか。。。

↓多分同じこと言ってる http://stackoverflow.com/questions/27460502/appcompat-v7-android-5-0-actionbaractivity-textview-not-visible





追記: getSupportActionBar() を呼ぶと表示された。。。謎い。 public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // これを呼ぶと表示される!なぜだ! getSupportActionBar(); getSupportFragmentManager() .beginTransaction() .replace(android.R.id.content, new MainFragment(), "MainFragment") .commit(); } ... }


2014年12月19日金曜日

Android AlertDialog のボタンの色を変える Material Design 編

■ Lollipop

values/styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="Theme.Material.Light.DarkActionBar"> <item name="android:alertDialogTheme">@style/AlertDialogTheme</item> </style> <style name="AlertDialogTheme" parent="Theme.Material.Light.Dialog"> <item name="android:colorAccent">#61a00e</item> </style> </resources>


■ AppCompat

values/styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppThemeBase" parent="Theme.AppCompat.Light.DarkActionBar"> </style> </resources> values-v21/styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="AppThemeBase"> <item name="android:alertDialogTheme">@style/AlertDialogTheme</item> </style> <style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog"> <item name="colorAccent">#61a00e</item> </style> </resources>


2014年12月15日月曜日

MQTT ハンズオンに参加しました。

MQTT ハンズオン http://connpass.com/event/9765/ に参加してきました。

会場はクラウド会計ソフトを開発されている freee さんでした。しゃれおつなオフィスでした。卓球台とダーツがありました。(GTUG Girlsの勉強会でも使えるといいな)

講師の @r_rudi さん、@voluntas さんありがとうございました。

MQTT については時雨堂さんの解説を読むのがいいと思います。


ハンズオンでは大きく分けて2つのことをやりました。
  • mqttcli を使ってみる
  • いろんな言語で MQTT クライアントを作ってみる
当日はハンズオン用のHost(Brokerともいう)が用意されていましたが、復習したい場合は sango の無料プランで試すのがおすすめです。 githubアカウントでログインできるので簡単。


■ mqttcli を使ってみる

mqttcliはシェルスクリプト用の MQTT クライアントです。
インストール方法は mqttcli のページを見てください。

MQTTサーバーに接続するための設定を指定する方法が4つあります。
  • ~/.mqttcli.cfg に設定を書く
  • --conf で設定ファイルを指定する
  • --host, --port, --user, --password で指定する
  • $MQTT_HOST, $MQTT_POST, $MQTT_USERNAME, $MQTT_PASSWORD を設定する
~/.mqttcli.cfg に設定を書くのが簡単です。

こんな感じの JSON を書きます。 { "host": "localhost", "port": 1883, "username": "yanzm", "password": "hogehoge" }
sango だとこんな感じ { "host": "lite.mqtt.shiguredo.jp", "port": 1883, "username": "yanzm@github", "password": "hogehoge" } *追記: port は int なので " で囲わないのが正しいそうです。

コンソールを2つ開いて

片方(subscribe側)で $ mqttcli sub -t 'yanzm@github/say' *-t でトピックを指定します。sangoではアクセス先トピックがユーザー毎に分かれています。

もう片方(publish側)で $ mqttcli pub -t 'yanzm@github/say' -m 'hello' とすると、subscribe側に hello と表示されます。

当日は subscribe したメッセージを say コマンドに流すPCが用意されていて、参加者がそこに publish して楽しみました。

自分のPCでやるには、

日本語の Voice がダウンロードされていないと、say コマンドで日本語を読んでくれないので、
[System Preferences...] → [Dictation & Speech] → [Text to Speech] タブ → [System Voice:] → [Customize...] → Kyoko と Otoya をチェックしてOK
で日本語の Voice をダウンロードしておきます。
ダウンロードが終ったら、[System Voice:] を Kyoko か Otoya にしておきます。

$ mqttcli sub -t 'yanzm@github/say' | while read line ; do echo $line | say ; done とすると、publish するたびにメッセージを読み上げてくれます。楽しい!


■ いろんな言語で MQTT クライアントを作ってみる

Sango MQTT ドキュメント の中から好きな言語でクライアントを作って、pub/sub して遊びました。


■ Github の MQTT publish に挑戦

Github のリポジトリの設定に Webhooks & Services がありますが、Services に MQTT publish が用意されています。これを使うと、commit や push があったときに publish されるようなのですが、自分のリポジトリで試してもうまくいきませんでした。。。なぜだろう。。。



2014年12月12日金曜日

【プログラマー向け】よく使うフォトショ機能

Tech Women Advent Calendar 2014 の12日目として書いてます。

私は自分でアイコンやゴーファーを描いたりもしますが、 Photshop は既存の画像を加工する(Android SDK に入ってる画像の色を変えて利用するとか)のに使うことが多いです。

イラストや写真加工などガチな用途ではないですが、ちょっとした方法を知っておくといろいろと便利です。
そこで、私がアプリ開発や執筆でよく使う機能を紹介します。


1. 切り抜きツール



切り抜くサイズ(幅・高さ)を指定すると、エリア指定がそのアスペクト比になります。
切り抜いたサイズはそのサイズに自動でリサイズされます。

切り抜くサイズは幅・高さのどちらかだけ指定することもできます。
もちろん指定しない(=フォームを空にしておく)こともできます。
これらの場合はエリア指定のアクペクト比は固定されません。






2. マジック消しゴムツール



連続している同じ色のエリアを消してくれます。
背景色がついている画像で背景を透明にしたいときに便利です。



背景の円にあててみると...






3. スポイトツール



クリックしたピクセルの色がわかります。




4. ものさしツール



ドラッグした長さがわかります。
長さは上部のバーに表示されます。







5. レイヤースタイル

レイヤーに効果をつけます。
レイヤーのサムネイルをダブルクリックするとレイヤースタイルダイアログが開きます。



よく使うのが「ドロップシャドウ」と「カラーオーバーレイ」。

ピクトグラムの色を変えたいときに「カラーオーバーレイ」が便利です。
Android SDK に入ってる画像の色をかえるときとか。

「カラーオーバーレイ」


「ドロップシャドウ」



6. モザイク

原稿に載せるアプリのスクリーンショットでメールアドレスを消すのとかによく使ってます。
モザイクにしたい部分を選択ツールで選択してから
フィルター → ピクセレート → モザイク... で適用します。







まとめ

PhotoShop といえば、色調補正とかマスクとか写真加工に使うものというイメージがあるかもしれませんが、 アイコンの修正や加工にも便利なので、プログラマーで使ってみるといいと思います!


2014年12月10日水曜日

MaterialTabHost つくりました。

Android Material Design のタブの仕様まとめ」の Fixed Tabs の3つの種類を簡単に実装できる MaterialTabHost を作りました。 github : yanzm/MaterialTabHost

MaterialTabHost.Type.FullScreenWidth





MaterialTabHost.Type.Centered





MaterialTabHost.Type.LeftOffset





2014年12月9日火曜日

Android Material Design な TabHost + ViewPager に移行する

前回のエントリ「Android Material Design のタブの仕様まとめ」で紹介した Material Design の Fixed Tabs full-screen width を TabHost で実装してみます。

Activity 生成ウィザードの Tabbed Activity で Swipe Views(ViewPager)を選択して作成される Activity に付け足していきます。

*以下の例は minSdkVersion = 21 としています。


0. テーマに色をセット

メインカラーとアクセントカラーをセットしておきます

res/values-v21/styles.xml <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorPrimaryDark">#00695C</item> <item name="android:colorPrimary">#00897B</item> <item name="android:colorAccent">#FFD54F</item> </style> </resources>


1. 普通に TabHost を実装する <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <TabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?android:attr/colorPrimary"> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" /> </TabHost> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. mSectionsPagerAdapter = new SectionsPagerAdapter(getFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mSectionsPagerAdapter); TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); tabHost.setup(); for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) { tabHost.addTab(tabHost .newTabSpec(String.valueOf(i)) .setIndicator(mSectionsPagerAdapter.getPageTitle(i)) .setContent(android.R.id.tabcontent)); } tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { mViewPager.setCurrentItem(Integer.valueOf(tabId)); } }); mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){ @Override public void onPageSelected(int position) { super.onPageSelected(position); tabHost.setCurrentTab(position); } }); }

基本的なタブ機能が実装できましたが、Material Design に沿ったタブにするにはいくつか修正が必要です。
  • タブ間の区切り線を消す
  • Action Bar と タブの間の影を消す
  • タブの下に影を出す
  • タブの文字を仕様に合わせる
  • ViewPager のスクロールに応じてインディケータもスクロールさせる


2. タブ間の区切り線を消す @Override protected void onCreate(Bundle savedInstanceState) { ... TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs); // タブ間の区切り線を消す tabWidget.setStripEnabled(false); tabWidget.setShowDividers(LinearLayout.SHOW_DIVIDER_NONE); }


3. Action Bar と タブの間の影を消す @Override protected void onCreate(Bundle savedInstanceState) { ... // Action Bar と タブの間の影を消す getActionBar().setElevation(0); }


4. タブの下に影を出す @Override protected void onCreate(Bundle savedInstanceState) { ... // タブの下に影を出す // App bar の elevation は 4dp // http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation float elevation = 4 * getResources().getDisplayMetrics().density; tabHost.setElevation(elevation); }


5. タブの文字を仕様に合わせる

res/color/tab_widget_text.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#ffffffff" android:state_selected="true" /> <item android:color="#99ffffff" /> </selector> res/layout/tab_widget.xml <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="bottom|center_horizontal" android:paddingBottom="16dp" android:textColor="@color/tab_widget_text" android:textSize="14sp" tools:layout_width="match_parent" tools:text="group 1 ITEM TWO" /> @Override protected void onCreate(Bundle savedInstanceState) { ... LayoutInflater inflater = LayoutInflater.from(this); for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) { TextView tv = (TextView) inflater.inflate(R.layout.tab_widget, tabWidget, false); tv.setText(mSectionsPagerAdapter.getPageTitle(i)); tabHost.addTab(tabHost .newTabSpec(String.valueOf(i)) .setIndicator(tv) .setContent(android.R.id.tabcontent)); } ... }


6. ViewPager のスクロールに応じてインディケータもスクロールさせる <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <TabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?android:attr/colorPrimary"> ... <View android:id="@+id/indicator" android:layout_width="match_parent" android:layout_height="2dp" android:layout_gravity="bottom" android:background="?android:attr/colorControlActivated" /> </TabHost> ... </LinearLayout> View indicator; TabWidget tabWidget; @Override protected void onCreate(Bundle savedInstanceState) { ... tabWidget = (TabWidget) findViewById(android.R.id.tabs); ... indicator = findViewById(R.id.indicator); mViewPager.setOnPageChangeListener(new PageChangeListener()); } private class PageChangeListener implements ViewPager.OnPageChangeListener { private int scrollingState = ViewPager.SCROLL_STATE_IDLE; @Override public void onPageSelected(int position) { // スクロール中はonPageScrolled()で描画するのでここではしない if (scrollingState == ViewPager.SCROLL_STATE_IDLE) { updateIndicatorPosition(position, 0); } tabWidget.setCurrentTab(position); } @Override public void onPageScrollStateChanged(int state) { scrollingState = state; } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { updateIndicatorPosition(position, positionOffset); } private void updateIndicatorPosition(int position, float positionOffset) { View tabView = tabWidget.getChildTabViewAt(position); int indicatorWidth = tabView.getWidth(); int indicatorLeft = (int) ((position + positionOffset) * indicatorWidth); final FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) indicator.getLayoutParams(); layoutParams.width = indicatorWidth; layoutParams.setMargins(indicatorLeft, 0, 0, 0); indicator.setLayoutParams(layoutParams); } }


Android Material Design のタブの仕様まとめ

Tabs - Components - Google design guidelines

共通の仕様

  • タブの高さ : 48dp
  • indicatorの高さ : 2dp
  • タブ間に区切り線なし
  • 文字サイズ : 14sp Roboto Medium
  • 文字位置 : ベースライン = タブ下端から20dp
  • 文字色 :
    • 選択・非選択で同じ色 : 選択 = #ffffff、非選択 = #99ffffff
    • 選択・非選択で別の色 : 選択 = indicatorの色、非選択 = 無彩色

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7OWxWU0JiNjA4Vzg/components_tabs_usage_specs1.png

Fixed Tabs

■ full-screen width
  • タブ幅 : 画面幅 / タブ数
  • タブ数 : せいぜい4つまで。タブレットではタブが横に広がりすぎるので centered か left offset の方がよい


■ centered
  • タブ幅 : 12dp + 最も長いラベル幅 + 12dp(タブレットでは24dp)
  • タブ数 : タブ幅 x タブ数が画面幅を超えない数まで可能
  • タブは中央に寄せる


■ left offset
  • タブ幅 : 12dp + ラベル幅 + 12dp(タブレットでは24dp)
  • タブ数 : オフセット + タブ幅の和が画面幅を超えない数まで可能
  • 画面左端から選択されているタブのラベル左端までのオフセット = 72dp(タブレットでは 80dp)


Types of tabs の Fixed tabs に「Fixed tabs have equal width, based on the widest tab label.」とあるので、それに従ったのが centered、しかし隣の画像をみると Scrollable と同じようにタブによって幅が変わっているのでそれに従ったのが left offset とした。

Scrollable

  • タブ幅 : 12dp + ラベル幅 + 12dp(タブレットでは24dp)
  • 画面左端から選択されているタブのラベル左端までのオフセット = 72dp(タブレットでは 80dp)


2014年12月4日木曜日

Android Activity Transitions の対象から、Navigation Bar と Status Bar を外す(Activity Transitions を実装する その2)

Android Activity Transitions を実装する」の続きです。

Activity Transitions の対象から Navigation Bar と Status Bar を外すには、Transition.excludeTarget() を使います。

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); Transition transition = new Fade(); // Navigation Bar の背景を対象から外す transition.excludeTarget(android.R.id.navigationBarBackground, true); // Status Bar の背景を対象から外す transition.excludeTarget(android.R.id.statusBarBackground, true); getWindow().setExitTransition(transition); getWindow().setEnterTransition(transition);

↓ 開発者オプションでアニメーションの速度をx5にしています。



Android Activity Transitions を実装する

Activity Transitions のドキュメントを読んだのですが、よくわからなかったので実際に試してみました。

1. window content transitions を有効にする

Activity Transitions を使うには、window content transitions を有効にする必要があります。

コードで有効にする場合 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); テーマで有効にする場合 <style name="BaseAppTheme" parent="android:Theme.Material"> <item name="android:windowContentTransitions">true</item> </style>

2. transition を指定する

切り替え時のアニメーションを指定します。用意されているクラスは Explode, Fade, Slide です。
自分で transition を作るときは、これらの親クラスの Visibility を継承するのがよさそうです。

コードで指定する場合 getWindow().setExitTransition(new Explode()); Explode, Fade, Slide に対応するリソースは
@android:transition/explode
@android:transition/fade
@android:transition/slide
です。

テーマで指定する場合 <style name="BaseAppTheme" parent="android:Theme.Material"> <item name="android:windowEnterTransition">@android:transition/explode</item> <item name="android:windowExitTransition">@android:transition/explode</item> </style>

3. ActivityOptions を指定して実行

ActivityOptions.makeSceneTransitionAnimation() を使います。
Android Developers のドキュメントでは、引数に this しか渡していませんが、引数が1つのメソッドはありません!(2014年12月4日現在)
次のように第2引数に null を指定します。 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, null).toBundle()); 全体としてこんな感じになります。 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); getWindow().setExitTransition(new Explode()); setContentView(R.layout.activity_main); findViewById(R.id.button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { gotoSub(); } }); } private void gotoSub() { Intent intent = new Intent(this, SubActivity.class); startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, null).toBundle()); } } Explode


Fade


Slide




4. sharedElement を指定する

遷移前の画面の一部が拡大などして、遷移後の画面の一部になるような transition が可能です。
そのためには、どの View が共通として見なせるのか指定する必要があります。

遷移前後両方のActivityで、一意の名前を指定します。
レイアウトで指定する場合は android:transitionName を使います。

以下では、それぞれの Activity のレイアウトで ImageView に android:transitionName="image" を指定しています。

遷移前(activity_main.xml) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" ...> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#cccccc" android:src="@drawable/ic_launcher" android:transitionName="image" /> <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="go to SubActivity" /> </RelativeLayout> 遷移後(activity_sub.xml) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" ...> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="200dp" android:background="#cccccc" android:src="@drawable/gopher" android:transitionName="image" /> </RelativeLayout> * わかりやすさのために、遷移前後の ImageView の画像を変えています。


android:transitionName に指定した名前を makeSceneTransitionAnimation() でも指定する必要があります。 public class MainActivity extends Activity { ... private void gotoSub() { ImageView iv = (ImageView) findViewById(R.id.image); Intent intent = new Intent(this, SubActivity.class); startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, iv, "image").toBundle()); } }




android:transitionName を使わずにコードで指定することもできます。 public class MainActivity extends Activity { ... private void gotoSub() { ImageView iv = (ImageView) findViewById(R.id.image); String sharedElementName = "image"; iv.setTransitionName(sharedElementName); Intent intent = new Intent(this, SubActivity.class); startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, iv, sharedElementName) .toBundle()); } } public class SubActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sub); String sharedElementName = "image"; findViewById(R.id.image).setTransitionName(sharedElementName); } }

5. 複数の sharedElement を指定する

複数の View を共通のエレメントとして指定することができます。 public class MainActivity extends Activity { ... private void gotoSub() { ImageView iv = (ImageView) findViewById(R.id.image); String sharedElementName = "image"; iv.setTransitionName(sharedElementName); ImageView iv2 = (ImageView) findViewById(R.id.image2); String sharedElementName2 = "image2"; iv2.setTransitionName(sharedElementName2); Intent intent = new Intent(this, SubActivity.class); startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, new Pair<View, String>(iv, sharedElementName), new Pair<View, String>(iv2, sharedElementName2)) .toBundle()); } } public class SubActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sub); String sharedElementName = "image"; findViewById(R.id.image).setTransitionName(sharedElementName); String sharedElementName2 = "image2"; findViewById(R.id.image2).setTransitionName(sharedElementName2); } }




6. sharedElement の transition を指定する

sharedElement の transition は setSharedElementEnterTransition()setSharedElementExitTransition() で指定します。その他の transition には setExitTransition() や setEnterTransition() で指定したものが適用されます。

コードで指定する場合 Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.custom); getWindow().setSharedElementExitTransition(transition); getWindow().setSharedElementEnterTransition(transition); XMLで用意した transition リソースから Transition オブジェクトを作るには TransitionInflater を使います。

テーマで指定する場合 sharedElement のデフォルトの transition は Theme.Material で指定されており、@android:transition/move になっています。
このファイルの中身は次のようになっています。

@android:transition/move <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds/> <changeTransform/> <changeClipBounds/> <changeImageTransform/> </transitionSet> changeBounds は View の大きさをアニメーションさせ、changeImageTransform は ImageView にセットされている画像サイズをアニメーションさせます。

transition リソースの書き方は Transition クラスに概要があります。

例えば、@android:transition/move の <transitionSet> に android:transitionOrdering="sequential" を指定すると、各アニメーションが順番に行われます。
res/transition/custom.xml <?xml version="1.0" encoding="utf-8"?> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" android:transitionOrdering="sequential"> <changeBounds /> <changeTransform /> <changeClipBounds /> <changeImageTransform /> </transitionSet>





おまけ: デフォルト設定