ImageView/ImageButton overlay on camera preview not displayed - android

A very standard overlay tutorial in this link was followed for developing the camera preview with overlay. However, when I change the <Button/> to <ImageView/> or <ImageButton/> the image doesn't get displayed. All I am getting is camera preview while using <ImageView/> and on using <ImageButton/> the images are not shown however little white lines at places where there should be images are displayed. The images are present in mipmap-xxhdpi. These buttons will be used to start another activity or take picture on click by user.
I've looked into questions on StackOverFlow but answer here doesn't work for me.
Other Relevant Details
The minSdkVersion is 16 and compileSdkVersion is 25. When I run the app in emulator on API-21 or above all I am getting is a black screen.
Q1: How to overlay <ImageView/> or <ImageButton/> on camera preview?
Q2: Would getting black screen have something to do with Camera API (old) being deprecated and I have to build separate classes to take into account different API?
Like the code below
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
//do something
} else {
//do something else
}

As per your first question I think the issue is that the elevation of the surface view used by you is more than that of an imageView and equal to the imageButton thus nothing shows in case of ImageView and lines show in case of ImageButton(hint: think 3d) here is a guide for android material design elevation and shadows.Try to increase the elevation of you ImageView or ImageButton.
Now for your second question, it should not be because of old API try this answer.

So my issue hasn't been solved in emulator. However, I was able to get hands on a range of devices (5) running API15,19,21,21,24. Here is the code that worked for me. API15 was used only after I changed minSdkVersion to 15.
Build your custom camera using the steps given here. When you will be editing your XML. Use this code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<ImageView
android:id="#+id/button_capture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/your_file_name"/>
</FrameLayout>
As for getting black screen, the app had to be given permission within settings of the device(Settings->App->Select your app->Permisions->Camera) in API21 and above.
Edit: Got the same code working in emulator as well by invalidating cache and restarting followed by using clean project.

Related

Background Image fade on some android devices

I am stuck in very strange problem.
I am using a background image for my application. Up till now everything is smooth and normal but all of sudden My image appears fade in new devices for example moto G4+ and Moto G5+. But working normal on my coolpad and samsung 4x devices.
Below is normal image.
And below is image when it use it as background image.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sdl.apps.yaarri.views.fakeActivity">
<RelativeLayout
android:id="#+id/fakeid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
></RelativeLayout>
</android.support.constraint.ConstraintLayout>
This is simplest of xml I am creating.
One thing I want to mention that after implementing Account kit(Facebook)for login this thing appears to happen.
If I am using some simple image then it appears normal but with this image problem occurs. Please suggest me I am am doing some thing wrong or it is some memory issue.
On more thing I want to mention here is that when I close application and open it again,nothing changes fade issue remains. But when I clear app from recently opened applications list and then open my app then original image appears as background.
I have found out the issue.
The problem was with Facebook theme.
My code to set account kit
uiManager = new SkinManager(
SkinManager.Skin.TRANSLUCENT,
getResources().getColor(R.color.apptheme_color),
R.drawable.background,
SkinManager.Tint.WHITE,
0.01)
and in manifest it was like:-
<activity
android:name="com.facebook.FacebookActivity"
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="#string/app_name"
android:theme="#android:style/Theme.Translucent.NoTitleBar"
tools:replace="android:theme" />
So this was replacing app theme and setting its own image as background and with fade(transulent) effect.
What I did? Just remove the backkground image part in UImanager.
uiManager = new SkinManager(
SkinManager.Skin.CONTEMPORARY,
getResources().getColor(R.color.apptheme_color));
This will show white facebook login page but wont effect app theme.
Hope ,no body will face this...Namaste
I had a problem before with appearance of background images in some devices.
Then, I find that it depends to the screen mode of the device. See here how change screen mode: https://www.youtube.com/watch?v=2UoxvkwsiJ8
and check if this is the cause of your issue or not.

Getting black ImageView using Picasso and Glide

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.

Android Studio Google Map V2 fragment rendering

I tried to write a test demo for Google Map V2 in Android Studio. I followed every step from Androidhive Google Map V2 or better I think I need.
I'm using the same layout_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
but I'm getting always the same rendering problem:
Rendering Problems
A <fragment> tag allows a layout file to dynamically include different layouts at runtime. At layout editing time the specific layout to be used is not known. You can choose which layout you would like previewed while editing the layout...
I have absolutely no idea what's the problem. Did I forget something?
I just need to add Google services in the build.gradle like
compile 'com.google.android.gms:play-services:4.4.52'
I copied the manifest from the demo and changed the API Key.
The accepted answer is not wrong but it does not help.
As Dan wrote, Android Studio (also Version 1.0) will not display the map.
Maps needs an API key and dynamic processed code, maybe some day we will have that but so far not.
I've a 5 minute solution for those who want to see their app properly in layout preview:
To properly develop I still needed something else than a blank background.
I added overlays and buttons on top of the map, I really needed to see the map while placing elements over it.
The solution is simple:
1. Make a screenshot of your app with the map running (Power + Volume Down)
2. Download the screenshot and use an image editor to remove the top and bottom UI elements, so you will end up with only the map itself as an image.
3. Import that image into android studio drawables
4. create a new layout, name it dummy_mapviewfragment, put only a linearlayout and an imageview in
5. make the imageview "fill" the parent, and set "src" to the cropped image you just imported
6. back to your layout, add this into your Mapview Fragment xml :
tools:layout="#layout/dummy_mapviewfragment"/>
That's it, now you will have a non-interactive mapview fragment which displays a real map.
Your app will look like it looks on your mobile phone.
If you made errors in your image cropping you can "fix" it by setting the image scale to "centerCrop" so it will properly stretch out.
Update: You can get a screenshot without need to crop directly from within Androidstudio! Makes it a bit more convenient ;)
Rendering Problems
A tag <fragment> allows a layout file to dynamically include different layouts at runtime. At layout editing time the specific layout to be used is not known. You can choose which layout you would like previewed while editing the layout...
This is just the preview window telling you that it can't display a preview for the <Fragment.../> tag, because it doesn't know what kind of fragment you're going to put in it. You can safely ignore that message - your actual app will render the fragment fine when you run it (as long as you code it up correctly!).
Android Studio automatically offers a solution within the error description, which is adding the name of the fragment layout.
tools:layout="#layout/fragment_my"
Add a dummy layout "#android:layout/simple_gallery_item" as:
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:layout_width="317dp"
android:layout_height="385dp"
android:id="#+id/map"
tools:context="com.example.XYZ.googlemaps.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment"
tools:layout="#android:layout/simple_gallery_item"/>

Missing or Incorrect images and backgrounds randomly throughout app lifecycle

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!

Setting background for basic android app

I am currently working on a basic app using eclipse as my IDE. I am currently having trouble setting an image as my background. I was following a tutoral which told me to place my image in the drawable-mdpi folder and name it as icon. I have tried this but it keeps on placing in the andriod icon instead even when i delete the andriod icon image. Is there a better way of doing this?
Thanks
try this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal" android:background="#drawable/background"></LinearLayout>
background is a .png file. with borders draw around it with Nine9Patch.
Hope this helps

Categories

Resources