I want to display an image preview over my app: when user presses an item in the listview (each item is a path to an image stored in sd card) image preview appears,stretched in the available space, like in this picture (image space is black, underlying app, still partially visible, is gray):
when user presses back image disappear.
I thought to make an activity just for image displaying but I don't know how to obtain the result in the picture...
Edit:
Ok here's what I've done so far:
1)Manifest:
<activity
android:name=".ImageDialogActivity" android:theme="#android:style/Theme.Dialog">
</activity>
2)Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
3)Activity onCreate method:
super.onCreate(savedInstanceState);
setContentView(R.layout.image_preview);
String filepath = getIntent().getStringExtra("image_filepath");
((ImageView)findViewById(R.id.imageView)).setImageBitmap(getBitmap(filepath));
where getBitmap is a private method which gives me a bitmap from a filepath.
Problem is that I don't have control over dialog dimensions: dialog's width and height seem to depend on contained image ones...not to mention top/right/left/bottom margins...
Solved (maybe):
I modified layout file this way:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
>
<ImageView android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerInside"/>
Setting width/height to a square allowed to obtain the effect...my question is: will it work for every phone?Or it is right just for mine?
Your best shot is to display your image in a Dialog
If you then want more control over the display, theme it
If you want to do this by creating a new Activity, you should set its layout parameters to wrap_content so it will appears above the other activity but not fitting the screen totally. Also by setting its theme as Theme.Dialog or an inherited theme, you 2nd activity will be a little bit darker and your activity will appear like a dialog.
You should also try to put layout parameter to fill_parent and add margins if you want the exact result as you shown (don't know if this solution could work).
this is from api demos creating an activit like a dilog try this
public class DialogActivity extends Activity {
/**
* Initialization of the Activity after it is first created. Must at least
* call {#link android.app.Activity#setContentView setContentView()} to
* describe what is to be displayed in the screen.
*/
#Override
protected void onCreate(Bundle savedInstanceState) {
// Be sure to call the super class.
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_LEFT_ICON);
// See assets/res/any/layout/dialog_activity.xml for this
// view layout definition, which is being set here as
// the content of our screen.
setContentView(R.layout.dialog_activity);
getWindow().setFeatureDrawableResource(Window.FEATURE_LEFT_ICON,
android.R.drawable.ic_dialog_alert);
}
}
Solved, solution entered in main post seems working fine!
Related
Is it possible to set the visibility of the MainActivity page in android to invisible or make it transparent may be? I have tried setting the visibility to invisible and also made height width as 0dp but this still shows the mainactivity with a white background and blue header.
What I am trying to achieve is, I am opening a floating window which is draggable on click of a button in the mainactivity, but I want to directly open the floating window by triggering the button click from the code itself. This works but the mainactivity still shows up for a second before the floating window is opened. I want to make the mainactivity page invisible or transparent so the mainactivity page is not noticeable.
Here is the XML of mainactivity.xml ,
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="Invisible"
android:background="#color/material_on_primary_disabled"
tools:context="com.example.widget_android.MainActivity">
<Button
android:id="#+id/open_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Open Widget" />
on click of open_widget(which is triggered from code rather than the user having to click on it) the floating window is opened up.
I want to take the user directly to the floating window rather than the landing page which is the mainactivity page.
Here is what is happening on the backend java code
findViewById(R.id.open_widget).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
startService(new Intent(MainActivity.this,WidgetService.class));
finish();
}
});
findViewById(R.id.open_widget).performClick();
The reason you get a white screen is because that is the default behaviour. You've tried to put an invisible, transparent, or non-existing (size of 0 pixels) View on top of the default View, so you are still seeing the default View. What you need to do is to replace the default View with a transparent View.
See How do I create a transparent Activity on Android? for information on how to get a transparent Activity.
I have a collapsing toolbar with ImageView inside, when the image is clicked I want to enlarge it with an animation and go to another "activity" like whatsapp, telegram and a lot of other apps which allow user to click the profile photo of friends.
This will allow the user to see the image in the center of the screen and save or share the picture.
I had a look of Zooming a View http://developer.android.com/training/animation/zoom.html but it isn't enough and I have lag during the animation. (I used the same code provided)
I think your key is shared element transition. You can follow this tutorial
Give the same transition name to both of the views which are in different activities.
android:transitionName="#string/transition_string"
Add this bundle where you start the zoomed activity
Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(context, view, view.getTransitionName()).toBundle();
startActivity(intent,bundle);
And don't forget to add this line to your activity's style
<!-- Add this line -->
<item name="android:windowContentTransitions">true</item>
You may want to look at Google's documentation on zooming a view here
Basically the way they tell you to go about this is by creating an imagebutton that will display the smaller image, that when clicked will play an animation, and at the end reveal an imageview with the full sized image in it.
The layout they give as an example is this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<ImageButton
android:id="#+id/thumb_button_1"
android:layout_width="100dp"
android:layout_height="75dp"
android:layout_marginRight="1dp"
android:src="#drawable/thumb1"
android:scaleType="centerCrop"
android:contentDescription="#string/description_image_1" />
</LinearLayout>
<!-- This initially-hidden ImageView will hold the expanded/zoomed version of
the images above. Without transformations applied, it takes up the entire
screen. To achieve the "zoom" animation, this view's bounds are animated
from the bounds of the thumbnail button above, to its final laid-out
bounds.
-->
<ImageView
android:id="#+id/expanded_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible"
android:contentDescription="#string/description_zoom_touch_close" /></FrameLayout>
Then you can set up the animation like this:
public class ZoomActivity extends FragmentActivity {
// Hold a reference to the current animator,
// so that it can be canceled mid-way.
private Animator mCurrentAnimator;
// The system "short" animation time duration, in milliseconds. This
// duration is ideal for subtle animations or animations that occur
// very frequently.
private int mShortAnimationDuration;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_zoom);
// Hook up clicks on the thumbnail views.
final View thumb1View = findViewById(R.id.thumb_button_1);
thumb1View.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
zoomImageFromThumb(thumb1View, R.drawable.image1);
}
});
// Retrieve and cache the system's default "short" animation time.
mShortAnimationDuration = getResources().getInteger(
android.R.integer.config_shortAnimTime);
}}
There are several more steps, but at this point I'm literally copy and pasting from their documentation. You really should go read up on it. If you have any questions let me know!
I've done my searches extensively for sure, but I haven't come across exactly what I'm looking for. As such, I haven't any code to show for what I want to do. I want to know if it's possible, first of all, and then get a lead on how to implement such an action.
To keep my app simple, I'd really like to avoid starting a new activity, which seems to be involved in many of the "solutions" that I've seen.
My setup isn't anything special, just a layout with some textviews, buttons, and an image that's about as large as the screen.
I want the user to be able to click the image, and the image will "zoom" or "enlarge" to about 4-5x the size, obviously much of the image will then be off screen. Then, the user should be able to drag the image around to view the entire image as they wish. When they're done looking at the image, they should be able to click to go back to the original size.
I'm sure this will warrant a separate image for each size (one for the original, and a larger more detailed image for the enlarged version). Though, the simpler the better. If I can maintain one larger detailed image and scale it down for the standard view before it's clicked, that'd be great.
I'm assuming they'll be a click listener on the image, but I'm not sure how to do what I want without starting a new activity entirely, then upon clicking again, going back to the original activity. Can it be done in the same activity?
Thanks in advance.
EDIT:
I just had an idea. I could have the larger image in a relative view and make it invisible/gone, then make it visible upon click of the original/main image. Clicking the large image will make itself invisible/gone again. But, assuming this works, I do'nt konw how to set the action of dragging it around and boundaries to make sure you can't drag it outside of the screen entirely.
i have use this library in my project for Zooming images and its very simple to use its helps you ...
https://github.com/chrisbanes/PhotoView
JAVA:
PhotoView mImageView;
PhotoViewAttacher mAttacher;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Any implementation of ImageView can be used!
mImageView = (PhotoView) findViewById(R.id.iv_photo);
// Set the Drawable displayed
Drawable bitmap = getResources().getDrawable(R.drawable.wallpaper);
mImageView.setImageDrawable(bitmap);
// Attach a PhotoViewAttacher, which takes care of all of the zooming functionality.
mAttacher = new PhotoViewAttacher(mImageView);
}
// If you later call mImageView.setImageDrawable/setImageBitmap/setImageResource/etc then you just need to call
attacher.update();
XML:
<uk.co.senab.photoview.PhotoView
android:id="#+id/iv_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp" />
In hopes that this helps someone else and that my solution will suffice in fixing someone else's issue, I'm going to answer my own question with what I found to be a good fix.
To keep it as simple as possible (as it seems that implementing such a feature requires more extensive work that I feel should be necessary), I used the method of toggling hidden/invisible views.
<FrameLayout>
<!--Main Activity-->
<LinearLayout>
<!--Primary Image-->
<ImageView
android:onClick="makeZoomVisible"/>
</LinearLayout>
<!--ScrollView Holder for Enlarged Image-->
<HorizontalScrollView
android:visibility="gone">
<!--Enlarged Image-->
<ImageView
android:onClick="makeZoomInvisible"/>
</HorizontalScrollView>
</FrameLayout>
The base layout is a Frame layout, which allows me to place the Enlarged Image holder (horizontal scroll view) on top of everything else since it comes after the main activity view (linear layout).
Once the primary image is clicked, it calls the method "makeZoomVisible", which as you may guess, toggles the visibility for the horizontal scroll view which holds the enlarged image. The image is scaled up to as large as the height of the screen allows. This works for me because my app is portrait only, and allows the image to scale up approximately 4x the size (a 2x2 of the original image size, just for comparison). Since the image maxes out at the height of the screen, there's no need to scroll/drag up and down. But the horizontal scroll allows the image to be moved side to side to view the whole image.
Clicking the enlarged image calls the method "makeZoomInvisible" which toggles its own visibility, clearing it away and allowing the user to see the main layout of the activity again.
This is the best option for me as a new Android app developer because of its simplicity. To refrain from switching activities, saving/pausing the current activity, implementing 3rd party libraries to include a horizonal+vertical scroll, or pinch zoom and drag features I'm able to achieve what I need for my app.
Hopefully this helps someone else out that may be looking for a simple solution.
I know you decided to implement simple transition yourself without using 3rd party libs. But if someone else is looking for more complex solution, I can suggest to try this library, it allows zooming from i.e. RecyclerView items to ViewPager with animation and includes zoom/pan/rotation features as well.
(Note, I'm the developer of this library)
Simple usage example:
Add regular ImageView and GestureImageView into layout:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_small"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<com.alexvasilkov.gestures.views.GestureImageView
android:id="#+id/image_full"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Set same image into both views:
smallImage.setImageDrawable(...);
fullImage.setImageDrawable(...);
Start animation:
fullImage.getPositionAnimator().enter(smallImage, true);
For more info see documentation and sample project.
A great way to do this would be to use a custom ImageView to handle the zooming and dragging of the image that way you can keep it in the same layout without having to start a new activity.
You should check out the TouchImageView library. It contains a custom ImageView that allows pinch zoom, double tap to zoom, dragging, and the ability to manually set the zoom of the image.
If don't want to include the full library a simple way to add this functionality would be to copy the TouchImageView java class into a package in your app (eg com.myapp.views).
Then in your xml layout instead of using:
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_image" />
Change your image to use the path of the custom view class:
<com.myapp.views.TouchImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_image" />
I'm developing an app with SupportMapFragment and custom view switching mechanism. Right now i styles app, to make its window to be transparent using styles.xml, but with that change i see a strange problem when using maps. When user switches it current view from one that uses map fragment to another, part of screen that was used by map on previous view becames transparent, for about 1 second.
In image below i present some description, on right i marked using yellow color situation than im talking about:
on left side is view that i present map using SupportMapFragment, on the right is one i have switched next, with 2 diffrent views(ImageView and TextView),but yellow part of TextView is transparent like my application window, su user can notice eg. apps menu. This is not what im trying to achive so Im looking way to get rid of this effect.
My code for switching views is like follows:
public void switchAppView(View view){
mMainView.removeViewAt(0);
mMainView.addView(view,0);
}
the mMainView is initialized in onCreate Method, by code:
#Override
public void onCreate(Bundle icicle){
super.onCreate(icicle);
setContentView(R.layout.activity_main);
mMainView = (RelativeLayout) findViewById(R.id.mymain_layout);
}
my activity_main.xml layout presents similar to:
<RelativeLayout
android:id="#+id/mymain_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:id="#+id/replacable"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="visible"
></FrameLayout>
<FrameLayout
android:id="#+id/extra"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="invisible"
></FrameLayout>
</RelativeLayout>
I tried to search clues and situations like that but I didnt find any, so if anyone can help i would be grateful, Thanks for help.
becames transparent, for about 1 second.
I'm guessing you are using black background and you really mean it becomes black.
In that case what you see is a known issue.
You may read more about it here:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=4659
and here:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=4639
I'm building an Android application that will be like an eBook. Standard flip through pages, view images, etc. One of the requirements is that in multiple places you will see a preview of what a page will look like. It'll be the exact contents of that page, just in a smaller size.
I can't for the life of me get this preview working the way I need it to. I coded an activity which will display either controls to play audio or video depending on some values passed in the extras. That works fine. The preview should be this activity, but only in a smaller size, and shown in a separate activity. Here's what I've tried to get a smaller version of the activity to show:
First, I stumbled across the poorly documented ActivityGroup object. I figured I could use this to call the activity, and then get the view and throw it into a parent view somehow. Here's what that code looked like:
public class GroupTest extends ActivityGroup {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.grouptest);
LocalActivityManager manager = getLocalActivityManager();
Intent intent = new Intent();
intent.setClass(getBaseContext(), ViewElement.class);
intent.putExtra("ElementID", 22);
intent.putExtra("PackID", 10);
Window w = manager.startActivity("videoelement", intent);
View v = w.getDecorView();
// Grab the table and add a view to it.
TableLayout tl = (TableLayout)findViewById(R.id.tlTest);
TableRow tr = new TableRow(this);
tr.addView(v);
tl.addView(tr);
}
}
And here's what the layout looked liked:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"
android:id="#+id/tlTest">
</TableLayout>
This sort of worked. The activity ViewElement was indeed displaying in the GroupTest activity. The problem was that whenever I tried to add something else to the table (like a label), the ViewElement activity would disappear. I tinkered with this for a while figuring I was failing to grasp some UI constraint, then realized that the ViewElement activity being displayed had clickable buttons, which isn't what I really want. I just want to see what that page looks like, not be able to interact with it.
So I tried a different approach. Found this page on saving a view to an image: http://jtribe.blogspot.com/2008/12/saving-view-as-image-with-android.html. Sounded more like what I want.
My modified code now looks like:
public class GroupTest extends ActivityGroup {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tocrow);
LocalActivityManager manager = getLocalActivityManager();
Intent intent = new Intent();
intent.setClass(getBaseContext(), ViewElement.class);
intent.putExtra("ElementID", 22);
intent.putExtra("PackID", 10);
Window w = manager.startActivity("videoelement", intent);
View v = w.getDecorView();
Bitmap image = Bitmap.createBitmap(v.getWidth(), v.getHeight(), Bitmap.Config.RGB_565);
v.draw(new Canvas(image));
ImageView img = (ImageView)findViewById(R.id.ivwElementPreview);
img.setImageBitmap(image);
}
}
And the layout (this is the actual layout I would be putting the previews in if I could get it working):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/ivwElementPreview"
android:layout_width="75px"
android:layout_height="75px"
android:layout_marginRight="6dip"
android:src="#drawable/icon" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txtElementTitle"
android:layout_width="300px"
android:layout_height="0dip"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/ivwPackIcon"
android:layout_width="15px"
android:layout_height="15px"
android:layout_marginRight="6dip"
android:src="#drawable/icon" />
<ImageView
android:id="#+id/ivwPackIcon"
android:layout_width="15px"
android:layout_height="15px"
android:layout_marginRight="6dip"
android:src="#drawable/icon" />
<TextView
android:id="#+id/txtElementComments"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>
This just flat out doesn't work at all. As far as I can tell calling w.getDecorView() doesn't return a view that actually has any height, width, or drawn properties on it. If I run that code I get the error "width and height must be > 0" And if I put in values for width and height, nothing shows but a black image. So I then proceeded to create simple things such as a TextView and draw it to the bitmap to display in my LinearLayout, but could never get it working right either. I'm to the point of just being completely fed up with manipulating UI in Android.
So, has anyone else does something similar with previewing what another activity would look like, and how did you accomplish it? Am I just going down the completely wrong path here? I've googled all over the place and part of me feels like someone has to have solved this problem before, but I've lost over a day of work on it and I just can't pour much more time into it right now.
Thanks for any help.
You have to wait until the view is rendered on screen, then you can ask it to paint itself on any canvas. If the view is not showing on screen it will create an empty, 0x0 image.
If I am getting correctly, you want to place a thumbnail on your activity that is actually the preview of the activity that will be opened when this thumbnail ImageView will be clicked.
The very first time you can have a default image representing the Activity.
Next time, that is after you open this activity, you can obtain the screen shot of your activity:
Take a screenshot of a whole View
Make a thumbnail, and replace the previous thumbnail with this.