The problem
I'm writing an Android app that's supposed to have a "Slideshow" feature on it. I've found this nice library, based on Picasso, that does exactly what I wanted, and it worked just fine most of the times.
Problem is, sometimes my images are not loaded into the slide ImageView... It only shows a "black canvas" as you can see on the screenshot below.
I am loading the image from a local resource from my drawables. Sometimes it happens on Portrait mode, sometimes on Landscape mode. It doesn't matter which image I use, sometimes that "blackness" happens.
EDIT:
I'm using Android 5.0.2 and 4.4.2 - It doesn't seem to happen on 4.4.2. Only on 5.0.2.
It happened on a Moto X 2014 with android 5.1.
The images I'm trying to load have 45KB on disk with a resolution of 900x445.
I've turned on the layout rects as suggested, and these were the results:
And it keep like that on scroll.
And sometimes, it gets white instead of black (Or white, then black).
Something else I tried: My drawables were located on the res/drawable folder, when I've changed the files from that folder to the res/drawable-xxxhdpi the slider worked on the 5.0.2 device. wtf???
What have I tried so far
I've tried different images, to load multiple images on the slide, and even this pull request that changes Picasso to Glide on the lib. Nothing seems to work and the error seems random.
Once I've tried to use URLs from the web instead of the actual drawables on the local storage, it worked. With the exact same images.
Here's how I'm loading the images:
Fragment.java
private SliderLayout slider;
private PagerIndicator indicator;
// ...
private void setupSlider() {
HashMap<String,Integer> file_maps = new HashMap<>();
file_maps.put("Blah",R.drawable.banner_1);
file_maps.put("Bleh",R.drawable.banner_2);
file_maps.put("Blih",R.drawable.banner_3);
file_maps.put("Bloh",R.drawable.banner_4);
for (String name : file_maps.keySet()) {
DefaultSliderView dsv = new DefaultSliderView(getActivity());
dsv.description(name)
.image(file_maps.get(name))
.error(R.drawable.banner_error)
.empty(R.drawable.empty)
.setScaleType(BaseSliderView.ScaleType.Fit)
.setOnSliderClickListener(this);
//add your extra information
dsv.bundle(new Bundle());
dsv.getBundle()
.putString("extra",name);
slider.addSlider(dsv);
}
slider.setPresetTransformer(SliderLayout.Transformer.Default);
slider.setCustomIndicator(indicator);
slider.setCustomAnimation(new DescriptionAnimation());
slider.setDuration(4000);
slider.addOnPageChangeListener(this);
}
fragment.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
tools:context="com.example.fragments.Fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/sv_main">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/rl_main">
<com.daimajia.slider.library.SliderLayout
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="#+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/slider"
custom:shape="oval"
custom:selected_color="#00BFA5"
custom:unselected_color="#55333333"
custom:selected_padding_left="#dimen/spacing_medium"
custom:selected_padding_right="#dimen/spacing_medium"
custom:selected_padding_top="3dp"
custom:selected_padding_bottom="#dimen/spacing_small"
custom:unselected_padding_left="#dimen/spacing_medium"
custom:unselected_padding_right="#dimen/spacing_medium"
custom:unselected_padding_top="#dimen/spacing_small"
custom:unselected_padding_bottom="4dp"
custom:selected_width="#dimen/spacing_medium"
custom:selected_height="#dimen/spacing_medium"
custom:unselected_width="6dp"
custom:unselected_height="6dp"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/custom_indicator"
android:id="#+id/ll_main_body">
</LinearLayout>
</RelativeLayout>
</ScrollView>
<!-- Other stuff -->
</RelativeLayout>
I'm following the tutorial from the libs wiki page. And no errors are being thrown on the LogCat, which is making this a lot harder to solve.
Any ideas?
Create A Resource Folder Named drawable-nodpi in that folder put your images instead of different folders or drawable folder.
Have you tried using a ViewPager with an ImageView and passing an array of image URIs to the adapter? I think you would be able to avoid/debug much better if you implement it yourself.
This library works fine for me, the very first time I used it. It's a really nice library.
First
SliderLayout is not being referenced by anything. That's where the magic happens. Make a xml layout and refer to it by SliderLayout. After that don't forget to call startAutoScroll() and in onPause() stopAutoScroll().
https://github.com/daimajia/AndroidImageSlider/wiki/Start-Using
The link above is basically all you need.
Second
The problem could also be that it's inside a scrollView. The scroll callbacks may be misbehaving.
Make a simple layout, start with a simple slider and work your way up with customizations.
Good luck.
Related
I'm using a library named AHBottomNavigation and what I want to achieve in my layout is add an ImageView on top of the bottom bar.
So I wrapped the bottomBar inside a FrameLayout and added an ImageView :
<FrameLayout
android:layout_width="match_parent" android:layout_height="wrap_content">
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/bb_bottom_bar_navigation"
android:layout_width="match_parent" android:layout_height="wrap_content"/>
<ImageView
android:src="#drawable/icon"
android:layout_gravity="center" android:contentDescription="Take Photo"
android:layout_width="32dp" android:layout_height="32dp" />
</FrameLayout>
and while it seems to work (and I can confirm that on three devices I have already tested I can see the image) when I test it on devices that run android 5.0 or later the image is not there!
I have tried different pngs, adding background color to the ImageView but still no result.
If I use uiautomatorView I can see the View is in the position I want it and takes the space I have already defined in the xml.
Obviously there's something that intercepts the view from drawing, but I don;t know such a mechanism on android. I tried digging through the code of the library but don't knowing what I'm searching for didn't help.
Any ideas ? (cause I'm out of ideas)
I am trying to replace mutiples images (from local storage) using the same
After a while the black flickering disappear and works well.
See the video: http://sendvid.com/q92ry52l
I am only doing: mSimpleDraweeView.setImageURI("file://" + imagesList.get(index));
The xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/fresco_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I am using 'com.facebook.fresco:fresco:0.13.0'
SimpleDraweeView. How avoid the black flickering?
Thanks
(full discussion here)
Unfortunately this is a known issue. If you set a new URI, you'll see the placeholder image until the new image is ready. This is especially noticeable when you have large images and you switch them a lot (like in your example).
We are going to fix this at some point in the future (see this pull request).
For now, you can manually copy the RetainingDataSourceSupplier implementation from said pull request to your project and use it similar to the MainActivity.java example:
PipelineDraweeControllerBuilder builder = Fresco.newDraweeControllerBuilder()...
builder.setDataSourceSupplier(retainingDataSourceSupplier);
draweeView.setController(builder.build());
I was hoping someone here might have an idea what causes this sort of behaviour:
Throughout my application, in seemingly random places and in random conditions I'm observing this strange UI issue. Images are on occasion being loaded black (with the correct bounds) or with the incorrect image source (again, with the correct bounds). This effects ImageViews and has effected android:background tags with references to colour resources.
My application relies on 6 library projects, it runs Native Code via a Service and Activities in the App use GlSurfaceViews (although, not all Activities which display the problem contain OpenGL components). The problem could I suppose be from any of these places or a combination of them through using large amounts of memory.
You can see this behaviour in the following screen shots:
This is actually a 6 or so pixel wide column separator image which has been incorrectly drawn into my ImageView (the ImageView seems to have correctly sized itself).
When going out of the Application and then back in again (repeatedly) it instead appeared (and remained) like so:
After a Force Clear and a Clear App Data it returned to the correct format:
As you can also see the Magnifying Glass image next to it is displaying fine in each of these. The problems with these missing/incorrect images and backgrounds seems to happen randomly, throughout the application lifecycle, and I've been unable to find a way of reproducing it.
The layouts for these images are nothing special, I'm not doing anything funny during the rendering lifecycle (i'm not overriding onDraw() or onMeasure() or the like). The source of these images aren't being set dynamically but via the XML.
As you can see from the above example, it's not a build issue as it occurs between app lifecycles not between installs. It's also happening on different devices, Samsung 8.9, Acer Iconia Tab, Motarola XOOM,
It seems to me to be some sort of error with the reference table, could it perhaps have been nudged by my native code? Or is it an effect of me in some stages of the application using too much memory?
Here's the XML source for the above example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/browseProgressWrapper"
android:layout_width="match_parent"
android:layout_height="#dimen/actionbar_compat_height"
android:orientation="horizontal">
<RelativeLayout android:layout_width="#dimen/search_bar_width"
android:layout_height="match_parent">
<EditText android:id="#+id/browseFilter"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:layout_marginLeft="5dp"
android:imeOptions="actionSearch"
android:background="#drawable/edit_text_blue"
android:maxLength="30"/>
<ImageView android:id="#+id/clearSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_input_delete"
android:layout_marginRight="5dp"/>
</RelativeLayout>
<ImageView android:id="#+id/browseFilterButton"
android:src="#drawable/ic_menu_search"
android:scaleType="center"
android:layout_width="#dimen/actionbar_compat_height"
android:layout_height="#dimen/actionbar_compat_height"
android:layout_gravity="center_vertical"
android:minWidth="#dimen/actionbar_compat_height"/>
</LinearLayout>
A more full description of the code / layout surrounding another such occurrence I happened to get the screenshot for:
I have a "Settings" Activity which restarts my app after saving new settings details. It does this by stopping a Service, calling a new Activity (the Splash Activity) and finishing itself:
mConfiguration.save();
mConfiguration = new Configuration(Configuration.getInstance());
getActivity().stopService(new Intent(getActivity(), NativeService.class));
getActivity().finish();
startActivity(new Intent(getActivity(), SplashActivity.class));
Most of the time (and on most devices) this works fine, the Splash Activity contains an image which loads correctly. Sometimes though on some devices the Splash Activity loads either an incorrect resource (what my testers refer as "an upside down Nike tick") or just a blank box (as seen below). Does anyone know why?
Here is the Layout for the Splash page, as you can see it's pretty simple, no surprises:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/ContentBackgroundColor"
android:orientation="vertical" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="2" />
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/manager_android_400" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ProgressBar
style="#android:style/Widget.ProgressBar.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="2" />
</LinearLayout>
Theory tested and debunct:
I've theorised that this could be a processor/memory issue where the Layout isn't being drawn fully before the Splash screen exits and moves onto the next Activity so I put in this piece of code:
image = (ImageView) findViewById(R.id.image);
image.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
image.getViewTreeObserver().removeGlobalOnLayoutListener(this);
moveToStartScreen.start();
}
});
The hope was the code above would make sure the Image is definitely loaded before moving onto the Start page but seems to have had no observable effect.
Another Theory
I was also wondering if this could be being caused by the R.id / R.colour / R.drawable resources some how being currupted in program execution? Does anyone know why that might happen.
Could my native code be running rampant on some memory addresses that Android isn't correctly allocating?
Has anybody noticed this before - or perhaps know why this behaviour occurs?
Graeme, I had almost the same problem and found out that it was a reported bug of the android plattform. It was corrected in the 3.0 version I think. Which API are you compiling with? Try to build with the last available api and be sure to compile with JDK 1.6
If your problem is related to this bug, this should fix the problem.
This is a simple problem of refresh, clean, and rebuild.
Images in your various drawable folders or resource id indices are out of sequence because they were either changed outside of the eclipse IDE (via external source control such as GIT, SVN or other edits) and not refreshed in the eclipse navigator. Or, the files may have been updated in a library project upon which your UI Activity depends.
I have found that although .java file dependencies are propagated throughout the system, this is not always the case for resources such as images and .xml files.
The solution is fairly simple, clean everything, refresh all of your projects, and rebuild. The stretched or black edges should be gone.
Note: The predominant manifestation of this problem occurs when 9-patch images become treated like standard .png images. This means that they get stretched in a linear manner across the image instead of just at the edges. To me, this explains your 'Torn/Stretched' example. I have seen similar often. Another common manifestation is that text strings occasionally get displayed with the wrong resources!
I have an image in portrait mode, which is displayed correctly. When I change the configuration to landscape, the image is not displayed.
Note that the LinearLayout, enclosing the ImageView is displayed right(I checked it by changing the background). But when I changed the background for the ImageView, the background was also not shown.
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:layout_weight="3">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:minHeight="48dp" android:minWidth="48dp" android:src="#drawable/xyz" android:id="#+id/img"/>
Do you have different files specified for portrait and landscape more? I.e., do you have a layout file with the same name in the layout folder as well as the layout-land folder? If so, make sure both files include the ImageView.
You are most likely specifying the file you want to display like
myImageView.setImage("myfile.jpg");
in your onCreate method.
Move this code to onResume (create onResume with the #Override if you do not already have it) This will fix your problem
OK, your layout file is unnecessarily large and complex. So let's try a couple of things-
First, try creating a simple version of your XML file that contains the barebones for displaying the image. If that works in both portrait and landscape, you know that the problem is not your activity or your image.
If the first step works, the next step would be to work on simplifying your layout file, there is a lot that could be pruned. It goes seven layers deep at points, that should almost never happen. Here is a good blog post by an Android engineer on better layout design. You can find similar resources elsewhere.
Im using this Layout to put two ImageViews one next to the other, but the two images seems to be separated by 1 transparent pixel space.
The blue background is there to make easier to observe the problem...
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0000FF">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="5dip">
<ImageView
android:src="#drawable/i_position_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:src="#drawable/i_position_seekbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
The .java is:
public class MainActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
}
}
Im using a device with android 2.2.
I wasnt able to reproduce the glitch on a 2.1-update1 emulator neither on a 1.6 emulator...
Ive checked the images and they have no extra pixels arround them.
Also i tried adding a red 1px width border on the images separately and the glitch is still there, so the images dont seem to be the problem.
These are the problematic images (correctly shown here):
http://dl.dropbox.com/u/7024937/i_position_icon.png
http://dl.dropbox.com/u/7024937/i_position_seekbar.png
And this is what i see in my device:
Thanks.
Sounds strange because I use the same technique in my project and everything seems to be OK. Do you put your drawables into the correct drawable folder. I mean that you should put your images in drawable-hdpi folder if your device has hdpi screen. Sorry, but it's the only thought that came into my mind.
strange, what version SDK are you targeting? i copied your layout and code and made a new project with api level 3 (1.5) and tested it on a 1.5 and 2.2 emulator. On both it worked fine without any spacing.