ダイアログボックスへのAndroidの共有要素

Question

私は、ツールバーの画像と大きな画像を持つダイアログのようなテーマのアクティビティを持っています。これらは、レイアウトファイルです：

my_activity.xml：

... 

<com.makeramen.roundedimageview.RoundedImageView 
    android:id="@+id/my_image" 
    android:layout_width="40dp" 
    android:layout_height="40dp" 
    android:scaleType="centerCrop" 
    android:src="@drawable/my_drawable" 
    android:transitionName="@string/my_image_transition" 
    app:riv_oval="true" /> 

... 

my_dialog_activity.xml：

<style name="MyDialogActivity" parent="Theme.AppCompat.Light.Dialog.MinWidth"> 
    <item name="windowNoTitle">true</item> 
    <item name="android:windowMinWidthMajor">@dimen/abc_dialog_min_width_major</item> 
    <item name="android:windowMinWidthMinor">@dimen/abc_dialog_min_width_minor</item> 
</style> 

：ダイアログ活動はマニフェストにこのテーマを適用することによって、ダイアログになり

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@id/my_image" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scaleType="centerCrop" 
     android:src="@drawable/my_drawable" 
     android:tint="@color/accent" 
     android:transitionName="@string/my_image_transition" /> 

</LinearLayout> 

アクティビティとダイアログの両方が、私がそれらのように見えるように見えます。

これらのImageViewで共有要素アニメーションを実装したいと思います。ユーザーが最初のアクティビティの画像をクリックすると、拡大して画面の中央に移動し、より大きなダイアログの画像に収まるようにする必要があります。

だから私はこのコードを書いた：

Intent intent = new Intent(MyActivity.this, MyDialogActivity.class); 

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
     MyActivity.this, v, getString(R.string.my_image_transition) 
    ); 
    startActivityForResult(intent, 999, options.toBundle()); 
} else { 
    startActivityForResult(intent, 999); 
} 

アニメーションが実際に起こるんが、移動した画像は、ダイアログのエリアの内側にのみ表示されます。したがって、ダイアログの左上隅から来るイメージが表示されますが、ダイアログの外にある最初のアクティビティから移動するイメージは表示されません。ここで

は、それがどのように見えるべきかのHTMLバージョンだと、それが現在のように見えるもの：https://jsfiddle.net/wutqdh9d/1/

Answer 1

シェア要素アニメーションは、第二の活動に描かれました。 Theme.AppCompat.Light.Dialog.MinWidthテーマを使用すると、2番目のアクティビティのウィンドウサイズがアニメーションの描画領域よりも小さくなります。

したがって、ダイアログテーマを使用しないでください。

<style name="MyDialogActivity" parent="Theme.AppCompat.NoActionBar"> 
    <item name="android:windowNoTitle">true</item> 
    <item name="android:windowBackground">@android:color/transparent</item> 
    <item name="android:windowIsTranslucent">true</item> 
    <item name="android:windowContentOverlay">@null</item> 
    <item name="android:backgroundDimEnabled">true</item> 
</style> 

第2の活性レイアウト：以下、この変更する

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" 
      android:gravity="center"> 

<ImageView 
     android:id="@id/my_image" 
     android:layout_width="200dp" 
     android:layout_height="200dp" 
     android:scaleType="centerCrop" 
     android:src="@drawable/your_icon" 
     android:transitionName="@string/my_image_transition"/> 

をその後、この効果（http://gph.is/1UzZZzV）であろう。

希望します。

参考：スタイル上https://stackoverflow.com/a/28508306/3171537

Answer 2

<style name="dialog_style_activity"> 
     <item name="android:windowIsTranslucent">true</item> 
     <item name="android:windowBackground">@android:color/transparent</item> 
     <item name="android:windowContentOverlay">@null</item> 
     <item name="android:windowNoTitle">true</item> 
     <item name="android:backgroundDimEnabled">true</item> 
    </style> 

は私のための仕事です。このスタイルは、manifest.xmlで参照してください。