I have an activity that contains a HorizontalScrollView. The HorizontalScrollView has three fragments in it. On a button click the scrollview will scroll from left to right or vice versa. I am accomplishing this like so...
private void scrollTo(int x) {
ObjectAnimator animator = ObjectAnimator.ofInt(mScroller, "scrollX", x);
animator.setDuration(800);
animator.start();
}
On my Nexus 7 (1st Gen) it scrolls smoothly, but on my Moto G phone, it is super choppy. Any ideas how I could correct this?
Update
I figured out that if I changed the background drawable on one of the fragments the problem will go away. The image I was using is very plain, so I never thought that would be the problem. The image I replaced it with is much larger in size, but is just a repeated pattern.
I set the background with a .png like this
android:background="#drawable/my_background"
Old Background (non working)
New Background (works)
It ended up being my background image. I used a 9 patch tool located here to generate different size images and all is well now.
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
Related
I would like to design a layout containing an imageview and a background view with two special effect. First is where the main imageview gets transformed with faded towards the vertical edges and second is a background imageview with a blurred effect like the image
The result that i am able to achieve
I saw this post for my first effect and currently using it, but it does not work when I change my phone into dark mode so I am not getting a perfect solution.
And the second special blur effect that i am able to achieve is far way different from what i want to achieve. The required blur effect has some hardness of the different shades of color and mine one is quite smooth. For my blur effect I am using the below code and I am using the library Fresco for my image.
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse(imageUrl))
.setPostprocessor(new IterativeBoxBlurPostProcessor(60)).build();
PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setOldController(backgroundImage.getController())
.build();
backgroundImage.setController(controller);
Can anyone please suggest me any good solution or any good library for it or some code sample that can help me to achieve what I want.
The point to note here is the blurred background is an extension of the image itself. So if the left side of the screen has a purple hue the blurred region at the top left will be purple as well.
YOu can use a library like Blurry where it blurs the contents of the screen and then set that as a background. You can control the amount of blur you want.
Once you get the blurred image set it as the background of the container layout and set the picture in front
eg:
val bitmap = Blurry.with(this)
.radius(10) // make it more if you want the lue to be more
.sampling(8)
.capture(findViewById(R.id.right_bottom)).get() // get the view you want to blur
imageView.setImageDrawable(BitmapDrawable(resources, bitmap)) // set the value to the background
I've seen this specific animation in certain apps where when scrolled, the first item on the window (most commonly an ImageView) gets faded out when scrolling down. Here's two screenshots that display the animated change:
This is from a fashion app named "Polyvore":
The image above displays an ImageView which gets faded out when scrolled. Animated more like.
And after scrolling a bit..
And it ultimately fades out along with the scrolling. Pardon me for I don't know what this 'View' or animation is called. I've seen this in the Google Play Music app as well. How do I implement this?
For anyone else looking for this specific effect. It's known as a Parallax effect. Check this link:
How to do the new PlayStore parallax effect
Goal: A highlighted section of an image (the image covers the whole screen). The rest of the screen needs to be faded out.
Example
So far I've got the fading working using the foreground of a FrameLayout and placing the image as the background of a RelativeLayout within the FrameLayout. The solution I'm thinking is that I need to create 2 Drawables and merge them into one that FrameLayout Foreground can consume.
I've also been reading a bit up on PorterDuff, but I think that may be overkill for what I'm trying to achieve.
The fade functionality is working fine, but the source of the fade with transparent section is not.
I suggest that you have the original image in an ImageView on top of it place 4 views which are partially dimmed and that's it!
With some basic math you can know the sizes for each view, and using RelativeLayout will allow you to easily place them on the screen.
Good Luck!
P.S. I've attached a sketch to illustrate what I'm suggesting.
I want to resize an ImageButton, but when i change the size of the ImageButton with the mouse on graphical layout on eclipse, and leave the left mouse button, the ImageButton returns to its original size. I have already tried this:
android:layout_width="50dip"
android:layout_height="50dip"
But it doesen't work for me.
The problem is that this button should be a hidden button, so i cut a part of background of my app to do this, but when i put this part on my app it is larger, so everyone can see the difference. The problem is that the app resize my background image to make it compatible with the screen.
The use of dip has been replaced by dp, which stands for Density Pixel.
Documentation on dp can be found here
Try using just 'dp' instead of 'dip'
"dp" is more consistent with "sp".
so I have this problem with ImageButton class of libgdx, the problem is that in android the image doesnt expand to the full size of the button, and in desktop it does or at least it does more, so I have to ask if theres a way to force the image to get the size of the background(button)? so i can try to make an equal visualitation on both plataforms.
heres a screen shot, the back space button is the ImageButton...
edit: heres the code....
private void createButtons() {
ImageButtonStyle ibs = new ImageButtonStyle(buttonD,buttonD_p,buttonD,bsIcon,bsIcon,bsIcon);
buttonBS = new ImageButton(ibs); // This is the backspace button
....
}
private void addButtonsToTable() {
float pad = 1;
float BUTTON_SIZE = this.BUTTON_SIZE - pad *3;
table.top();
table.center();
table.add(buttonBS).width(BUTTON_SIZE).height(BUTTON_SIZE).pad(pad);
table.row();
...
}
If you want the image to be the background instead of just an icon, you should consider using plain Button or TextButton instead of ImageButton. ImageButton should be used only for buttons that draw an icon additionally to its background. An example of ImageButton usage could be the window closing button with the "X" (cross) image, or music toggle button with a loudspeaker icon.
When you need the image to fill the whole button area, set it as ButtonStyle#up - it will become button's background. ImageButton#imageUp is just an icon that will not be scaled in any way (by default), so that might be the reason why your application behaves differently on each platform.
(Although it still shouldn't, unless you use different assets.)
If you need an icon and still want to use ImageButton, consider that internally it is just a Button with an Image instance added to one of its cells (Button is a Table). You can use ImageButton#getImageCell() to access Cell in which the Image is stored and modify it - for example, force a specific width and height. You might also want to use ImageButton#getImage() to change scaling with Image#setScaling(Scaling).
Anyway, creating styles at runtime can be error-prone - the style constructor is huge and I'm honestly unable to guess which drawable draws what without checking out image button style sources. You should consider using Skin and define your styles with JSON files (you can find some free themes here).