I'm really struggling to get my app built in AndroidStudio to display any images that are larger in width or height than 300pixels on the device (Samsung galaxy tab 4 10" and galaxy note 4) they display fine in the android studio design view and all the other images in the app work fine, except for the 2 slightly bigger ones (being 1280x800 and 816x721).
This is a really odd bug as about 5% of the time on a clean and rebuild of the app one of them might appear.
I've tried cleaning,rebuilding,restarting AndroidStudio, various layouts, all different sizes and scaling methods for the image view and no luck the only thing that seems to make the imageview's render is reducing the size of the image until they're under 300 pixels, at which point they are obviously too blurry.
Here is the source code for the layout xml of the splash screen which is displaying the 1280x800resolution image.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com........SplashScreen">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/loading_screen_image"
android:src="#drawable/loadingscreen"
android:scaleType="centerCrop"
/>< /LinearLayout>
The activity class does nothing beyond start the next activity after 2 seconds, but I can post the code if people want to see it.
Any help would be really appreciated.
imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
This code worked on my project.
Related
I'm currently developing a new app for the company I'm working at.
We test this on multiple devices, now a strange thing I noticed the other day, well someone else did.
My Colleague tested the app on his HTC one m8, and we have a background image on the login page but it didn't show for him. It did however on a Nexus 7, Samsung Galaxy Tab 4, Motorola G and Samsung S4.
This might be very specific, but I guess some people must have noticed this kind of behaviour before on certain devices and found out why this could possibly occur?
The image is saved in the regular drawable folder and has a size of 1400px933px and it's a jpeg.
I wonder if anyone has any clue.
The ImageView is the first child of a relative layout, with a size of match parent in both width and Height. So it should just fit, other views are on top of this one.
I believe this problem is also to do with how android scales the images. Try putting the image into a drawable-nodpi resource folder.
The drawable folder is the same as drawable-mdpi. On the HTC One M8 images qualified as mdpi are scaled up by a factor of 3. So your 1400x933px image becomes 4200x2799px. The maximum size allowed by OpenGL is 4096x4096.
I faced a similar issue with Samsung Galaxy Note 3. This was the only device that failed to load a large bitmap image. After a quite long search I finally found that some phone uses a small heap size for applications by default. This is because of the memory optimization and preventing memory leak issue. So basically you can do the following things to solve this,
Use android:largeHeap="true" on the element in the activity manifest. This will give your application a large heap size.
Use a Image Loading library like
Android-Universal-Image-Loader
Use an optimized image with less resolution.
This may be answered but because my search led me here, and it probably will for others. My xml looked like this before. Was surprised to see it generated app:srcCompat cause I never heard of that. I kept the code as is and copied "#drawable/your_image" as a value for a new attribute I added android:src.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/salwa_small"
android:id="#+id/img_my_profile_picture"/>
After:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/salwa_small"
android:src="#drawable/salwa_small"
android:id="#+id/img_my_profile_picture"/>
I was only able to see the picture in the android studio designer prior but after it appears in both.
I have a Samsung Galaxy Tab on which I do development for Android phones. It uses the camera for scanning, so I can't run it on the emulator. Is there any way I can run it on the Tab device, but have it display the same size as a phone? This would be extremely helpful when testing the layouts.
A solution
You could place your entire layout inside another layout and make your phone layout if you may, have specific pixel dimensions. The gray area is the container which will expand to the dimensions of the tablet, the one with the turtle is your phone screen inside which your layout will reside.
The code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCCCCC">
<RelativeLayout
android:id="#+id/your_layout_inside_this"
android:layout_width="768px"
android:layout_height="1280px"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background="#FFFFFF"></RelativeLayout>
</RelativeLayout>
The preview
Considerations
Don't use this on a production app. I don't think there is a problem with this approach as far as the testing goes and you may have to take into account the density of the tablet compared to the density of the phone you are testing.
If your testing expands to other things like I may infer from your question, such as taking a picture, you may have to skip using the native intents for taking a picture and use a surfaceview with the dimensions of the phone, but that's a totally different story and question.
I'm developing a kind of a instructions app. It uses fragments with ScrollvView, vertical LinearLayout and some TextViews / ImageViews in it to explain how a product works.
The images are just simple vector graphics which I save as png due to the lack of vector image support on Android. Here's an example:
The images are always filling the the screen using android:scaleType="fitXY" (portait and landscape) and the scrollviewer takes care of the rest (using android:adjustViewBounds="true"in the image view to prefent from scrolling over the original size of the image).
I read the guidelines of Google to use different versions for the different resolutions and densities but this seems to be overengineered for my purpose.
My idea was to just supply one high-res (2000px width) image of the images in the drawable folder and let Android auto scaling do the rest.
The only issue I can think of is memory. But I'm not quite sure how the internals work here. If an OutOfMemory only occurs when displaying an image it shouldn't be a problem as the autoscaling hits in first.
If the scaler can run into memory issues I'm thinking using 3 versions of the image with different widths (i.e. 800pixel, 1500pixel and 2200pixel) and put them in different resource directories.
This seems not possible though...
The Android Studio wizard for Resource directories has an option for "smallest screen width" but its only for dp (density-independent pixels)! I want a resource file for real device pixels. I hope Android takes the closest fitting and don't fall back to the default one if it can't find an exact match.
My images don't care about density as they are always filling the screen.
So in a nutshell:
Is supplying just one large pixel image with a small file size an issue?
If yes how can I setup device pixel resource directories?
The nature of the app already has an huge amount of images. That's why I don't want to duplicate each a couple of times which x-folds the number of images to deal with. The app is for API 11 onward.
I finally found a solution to proportionally scale one image to device width with no memory issues.
First you have to draw up your image (my_image.png) in a rather high resolution
Put this image ONLY into the drawable-xxhdpi folder.
Extend the Android ImageView class using this awesome answer.
Use it in your layout as shown below:
Here is layout that works for me:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/main_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<my.package.name.DynamicImageView
android:id="#+id/main_image"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/main_text_view"
android:src="#drawable/my_image"
android:scaleType="fitXY"/>
<my.package.name.DynamicImageView
android:id="#+id/main_image2"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/main_image"
android:src="#drawable/my_image"
android:scaleType="fitXY"/>
<TextView
android:id="#+id/main_text_view2"
android:layout_below="#id/main_image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
</ScrollView>
Some more final information:
I did a lot of testing with point 2 (which folder to put the image in) before I found the solution of point 3.
If you put the image in the standard drawable folder the scaling works without point 3 but you might run into OutOfMemory exceptions on older devices as android tries to scale up the already large image (Android thinks in drawable are only small images without checking their size).
When the image is in the drawable-xxhdpi folder Android knows its high-res and does only a down scaling if necessary. But it doesn't scale the image to width on density fitting devices! For example in a Nexus 10 the image gets drawn in its original size and scale - doesn't matter what you set for scaleType (I reckon it has something to do with inTargetDensity as explained in the inScaled description).
One important thing to keep in mind here is that I have to use a ScollView around the whole content. You may find some other solutions when no ScrollView is involved.
Finally, you could also use the drawable-xxxhdpi folder but it was introduced with API 19. I tried it and it worked on lower APIs as well. Apparently Android build tool 19.1.0 and higher takes care of lower API versions.
I hope this helps someone...
Learning some Android development through trial and error, however I'm having a slight issue with the rendering of buttons on top of an image view depending on the resolution of the phone.
I have an imageview with two imagebuttons (at the moment) on top. They are relative to the imageview. I will post the xml markup below. The issue is when I run this on the "Nexus 4" in Android studio, everything looks correct. When I debug through my Samsung Galaxy S4, the imagebuttons are off slightly, and I'm not sure why this would be a problem if everything is truly relative to the imageview. I understand that the resolutions are different, but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
I can post pictures if need be, but I feel that the xml will provide adequate information on the issue.
Any help is appreciated. Thanks in advance!
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/SRMap"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="false"
android:background="#drawable/sr_map"
android:layout_columnSpan="2"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_row="0"
android:contentDescription="Map of Summoners Rift"
android:cropToPadding="false"
android:layout_marginBottom="177dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_BlueBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="90dp"
android:layout_marginTop="128dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_RedBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="180dp"
android:layout_marginTop="215dp"/>
but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
See the Docs here about supporting different screen sizes/resolutions. You create separate layout files adjusted to what you need. Simply use different qualifiers for the layout folder name according to the docs and the correct one will be used according to the device that loads it.
You can try and adjust one file to work on different screens but you are a lot better off using different layouts if it will be ran on different screen sizes and resolutions.
For example: you can have a default res/layout folder and a res/layout-large to be used on larger screens
I handled this in a fairly ugly way, but it works across all screen sizes now. Basically say the primary image was 800x800 dp (the image view). The buttons would be smaller than this (20x20 dp), however through transparency, i created 800x800 dp imageviews (note: no longer buttons) with everything transparent but the "icon" (still 20x20 dp). Although slightly larger in terms of file size, it's negligible in my case. Now no matter what the size of the screen, the imageviews all stretch the same amount, thus removing any guesswork from using the different pixel densities.
I realize that this wasn't the most graceful solution, but I cannot see any drawback aside from making some of the layout development more difficult, and the image files are slightly larger. I used Paint.NET in order to create the .png's that I used.
I am creating an app that is relevant to me, and that I figured would be easy to implement using some of the core functionality already provided in android. My idea is a simple League of Legends Jungle Timer Application. This is important to know as I link the pictures so people can understand the context.
Note that both images are the same resolution, there is just no border on the second one.
http://i.stack.imgur.com/Ad3LZ.jpg
http://i.stack.imgur.com/NfhRM.png
Additional details:
For this app I have disabled the "landscape" orientation, I plan on doing this using some of the details that were provided on this page (layouts).
All of these icon ImageViews are relative to the map, which is the first link, so they will always resize correctly. There are 12 of them also, if it matters.
Thanks all for your help!
After two years of Android development I'm still not 100% sure about what resources I need to provide to make my GridView work on different size and resolution devices.
I'm still learning, for example I recently discovered that you don't have to supply every drawable in all screen sizes - if you put something in xhdpi then Android is clever enough to resize that on the fly most of the time - but there are a few few quirks. For example if I try using drawables which are only defined in the drawable-xhdpi bin on a mdpi device in a GridView, the drawable will visually resize correctly but the whitespace around it won't - that will still be the original size. Originally I got around this by forcably defining dimensions for all aspects of the GridView and the associated adapter view, but this had a load of code smell around it, so I resized the drawables manually, put them in their respective bins (drawable-mdpi, drawable-hdpi and drawable-xhdpi) and removed all the forcing of image sizes etc.
So I currently have:
<GridView
android:id="#id/home_image_grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="100dp"
android:gravity="center"
android:listSelector="#00000000"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
>
</GridView>
and the layout for each item is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dip"
android:gravity="center"
android:orientation="vertical"
android:padding="0dip">
<ImageView
android:id="#id/home_button_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#id/home_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/default_text_colour"
android:textSize="#dimen/home_button_text"
/>
</LinearLayout>
So far so good...
The app I'm currently working on I've almost finished and have been doing some testing on different devices - it looks good on normal screen size xhdpi, hdpi & mdpi devices. Then I extending my testing to other devices - I'm testing on an HTC Flyer which is large screen size, mdpi - and the gridview now looks rubbish - it's correctly picking up the mdpi images, which are tiny.
Doing some reading around I found the GridView tutorial GridView tutorial, which says to put all your drawables in the 'drawable' bin, so I followed this advice and again everything looked rubbish - on closer inspection (and having actually read through the example code) it seems that they are manually setting the size of each image in the GridView - which I'd been doing to start off with, and which means that I'm going to have to manually set the image sizes for every permutation of devices.
So..I'm left wondering if I've missed a trick here - should I take my first approach of sticking the images in my drawable folder and manually forcing the sizes for every purmutation? Should I draw a new set of images for all permutations of screen size and resolution?
How can I guarantee that whatever I do, it's going to look good on a device I've not tested it on?
Either way it feels like I'm doing something wrong - but I can't work out how to do this properly without loads of hassle. Can anyone help?
I'm not sure what you mean by "forcing the sizes for every permutation" but you could put the proper sized drawables in the following folders:
drawable-mdpi
drawable-large-mdpi
Each device would pick the right drawables from the corresponding folder and you could separate normal and large images for mdpi devices.
Wouldn't that fix your problem?
P.S: The drawable folder is meant for XML drawables only or photos which do not depend on the device's density, not images for the UI. Those will scale properly for each resolution and density.