I've got one activity with an image in a toolbar and an activity that is themed like a dialog with the same image in big. These are the layout files:
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:
<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>
The dialog activity becomes a dialog by applying this theme in the manifest:
<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>
Both the activity and the dialog look exactly how I want them to look like.
Now I want to implement a shared element animation with these ImageViews: When the user clicks on the first activity's image, it has to grow and move into the middle of the screen so it fits the bigger dialog's image.
So I wrote this code:
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);
}
The animation does actually happen, but the moved image is only visible inside of the dialog's area. So you see an image that comes from the dialog's upper left corner, but you don't see it moving from the first activity outside of the dialog.
Here's a HTML version of how it should look like and what it currently looks like: https://jsfiddle.net/wutqdh9d/1/
The Share Element Animation was drawn in the second activity. As you use the Theme.AppCompat.Light.Dialog.MinWidth theme, the second activity's window size is smaller than the drawing area of animation.
Hence, just get rid of using the dialog theme. To change this below:
<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>
The second activity layout:
<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"/>
Then it will be this effect(http://gph.is/1UzZZzV).
Hope it help.
Reference: https://stackoverflow.com/a/28508306/3171537
<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>
Above style is work for me. Reference this style in manifest.xml.
Related
I've been searching everywhere for a cause of this problem and applied most of the solutions that I've found online but I've had no luck.
Here's the situation, I have two activities, one with a viewpager with a recyclerview inside each tab. When I click one of the items from the recyclerview it will open a modal activity that has the target transition image inside a fragment.
So the image will expand from the recyclerview item to the activity modal image
So something like this: Activity1/ViewPager/RecyclerView/Item/Image -> Activity2/Fragment/Image
It works beautifully from Activity1 to Activity2 but when the exit animation occurs the image jumps down, like half the image and lands in Activity one half an image down so it looks really clunky.
Here there are some code snippets:
recyclerview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/product_container"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="vertical">
<RelativeLayout
android:background="#drawable/bordered_image"
android:padding="2dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/product_image"
android:layout_width="match_parent"
android:layout_height="140dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/default_item" />
</RelativeLayout>
<TextView
android:id="#+id/product_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:gravity="center"
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/product_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="16sp" />
</LinearLayout>
I open the activity like this:
val options = ActivityOptions
.makeSceneTransitionAnimation(this, sharedImage, sharedImage.transitionName)
startActivity(intent, options.toBundle())
This is how I handle the modal activity
requestWindowFeature(Window.FEATURE_NO_TITLE)
window.setBackgroundDrawableResource(R.drawable.rounded_dialog)
window.setLayout(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT
)
And inside the onCreateView of the fragment I add this
image.transitionName = "image_${mItem.id}"
image.loadUrl(mItem.image)
startPostponedEnterTransition()
And I use glide for showing the image like this
private fun ImageView.loadUrl(url: String) {
val options = RequestOptions()
Glide.with(context)
.load(url)
.apply(
options.transforms(
CenterCrop(),
RoundedCorners(150)
)
)
.into(this)
}
This is how the image returns to the activity 1:
EDIT: So I've found the problem. I use a custom style for the activity dialog. In the android manifest I add this to the activity:
<activity android:name=".activities.Activity2"
android:theme="#style/AppTheme.ActivityDialog"/>
And the style is this:
<style name="AppTheme.ActivityDialog" parent="Theme.AppCompat.DayNight.Dialog">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowContentTransitions">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">#color/white</item>
</style>
This is somehow breaking the animation
So I found what the problem was:
An activity transition works like this. When you start your second activity, it is >displayed on top of your first one with a transparent background. The shared elements are >positioned the same way they are on the first activity and then animated to the correct >position specified on the second activity.
In your case you are using android:theme="#style/Theme.AppCompat.Dialog" which mean the >size of the second activity's drawing area is smaller than the one from the first >activity. This explains the clipping and the no transition when clicking outside.
I changed the theme of the Activity2 to this:
<style name="AppTheme.ActivityDialog" parent="AppTheme">
<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>
And added a cardview to the activity 2 layout and it works now
how is posible to do it, I actually have this code:
public void openDialog() {
final Dialog dialog = new Dialog(this); // Context, this, etc.
dialog.setContentView(R.layout.fragment_wrongpass_reg);
dialog.setTitle("cualquier cosa");
dialog.show();
}
I need to put the the back screen with alpha, making it almost transparent as in this image:
here is the image
You need to create a full screen dialog set it with a custom theme.
create a full screen dialog and set its content with inside padding.
something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cb000000"
android:padding="20dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
....
....
YOUR CONTENT
....
..../>
</RelativeLayout>
The custom theme should be something like this one:
<style name="Dialog_Fullscreen">
<item name="android:windowActionBar">false</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
finally, set it to the dialog, like this:
final dialog = new Dialog(context, R.style.Dialog_Fullscreen);
I have layout with centered Image View.
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/WHITE">
<ImageView
android:id="#+id/powered_by"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/powered_by" />
<ImageView
android:id="#+id/splash_logo"
android:src="#drawable/logo"
app:layout_widthPercent="70%"
app:layout_heightPercent="70%"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:visibility="invisible" />
</android.support.percent.PercentRelativeLayout>
Here is theme setting for my activity
<style name="SplashTheme" parent="android:Theme.Holo.Light">
<item name="android:windowBackground">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
When i change parent theme to android:Theme.DeviceDefault.Light, ImageView appears a little bit higher, not in center of the screen. It seems like parent view for my device now starts not from the bottom of the screen, but from the bottom toolbar (i use Nexus 5X with on-screen buttons).
I want to use device default theme for a modern dialog appearance, but i also need to have this image view exactly in center on all devices.
How to do it?
It seems like android:Theme.DeviceDefault.Light is not setting android:windowFullScreen. So you will need to create your own theme with the parent android:Theme.DeviceDefault.Light and change the values for the items you want to change
<style name="TestTheme" parent="android:Theme.DeviceDefault.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#drawable/ic_shade"
android:layout_height="match_parent" >
<TextView android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:textSize="54sp"
android:layout_centerVertical="true"
android:textColor="#android:color/white"
android:text="مبروك \nلقد ربحت كوبون"/>
</RelativeLayout>
What happens, it doesnt take entire width/height and i dont see the background on entire page.I am using the activity to be transparent.
Below is code for activity, however if i add
< item name="android:windowFullscreen ">true</item>
to the below part it works.. but i dont want it to do it because its resizing my previous activity.
<style name="Theme.Transparent" parent="android:Theme">
<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:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
<!-- Application t
your textview is filling the whole screen, change layout_height and layout_width attributes of your text view to wrap_content. then textview will be in center and background will appear on entire screen
I'm developing for api 15. I have a layout with a background image and a button. When the button is pressed background image should change alpha to 150. But it isn't taking effect. Do I have to somehow force update on layout so that it does take effect?
Here is my xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/wall1Layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/wall1withkey"
tools:context=".FireRoomActivity" >
<Button ...
/>
</RelativeLayout>
And in main activity there is a method that supposed to respond to onClick from the button:
public void buttonClicked(View v)
{
findViewById(R.id.wall1Layout).getBackground().setAlpha(180);;
}
So the image wall1withkey should change alpha to 180
When i tried to create translucent background i used my own custom Theme.
styles.xml
<style name="Theme.Transparent" parent="android:Theme">
<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:windowFullscreen">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
Then you have to set this Theme.Transparent to your activity in AndroidManifest.xml
<activity
android:name="com.example.TransparentActivity"
android:theme="#style/Theme.Transparent" >
</activity>