I know that the question is rather rare, but also is rare what happens with my app...
I programmed yesterday a presentation activity for my app, which only appears 1,5 seconds before starting the main activity. The presentation activity just load the presentation.xml file in which there only are a LinearLayout with an ImageView and a TextView. This ImageView has attached an image with the logo of my app (.png) and the TextView is just below.
What happens is that when I run the app with the Eclipse emulator I can see perfectly just what I programmed. I see, for 1,5 seconds, a custom background with my logo in the center of the screen and the text below it, but things goes wrong when I try the app in my mobile: the logo is absolutely invisible! It just disappears.
Must say that before setting that image, there were the same logo with less resolution. Also I tried to set the image and the parameters from java code but happens the same and it's so disappointing...
Hope you know what is happening and bring me a good solution... Thank you!
Code affected:
JAVA
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.presentacion_act);
RelativeLayout lay = (RelativeLayout)findViewById(R.id.back);
lay.setBackgroundResource(R.drawable.back_presentacion);
XML
<RelativeLayout 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"
android:background="#android:color/darker_gray"
android:id="#+id/back"
tools:context=".Presentacion" >
<ImageView
android:id="#+id/lay_class"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:paddingBottom="70dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:src="#drawable/classmarks"/>
Done! Just making the image smaller it runs perfectly on my device.
Related
I develop an Android application and I need to create a "fake lockscreen". I explain me.
The application should display a black screen like if the screen was locked (easy), then I want to display a fake lockscreen when the user tap on the lock/unlock phone button.
My problem is, when I set the application background with the current wallpaper (get with wallpaper manager) the background is not "cropped". The background image fit on the screen instead of, like in the "home screen" of the phone, fit on the number of desktop.
I try to use getBuiltInDrawable(FLAG_LOCK) but it's available only from API 24 and, when I try, the result is not what I'm expecting =/
Is there someone that have an idea on the question here ?
Thank you in advance.
Baptiste.
Ok, so you need to
1) Create your activity using a FullScreen Theme with no action bar, so it doesn't look like an app. To do that, you'll create a style in styles.xml and apply it in your manifest.xml
Full Screen Theme for AppCompat
2) For the background image, use an ImageView. ImageViews have a scaleType property out of the box that allows you to select different modes: FIT, Center Crop, etc ...
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
3) Create the rest of the logic to enter the Pin. and show your different mock images. There's a nice component that really fits your "project", its called ViewFlipper, and basically lets you to put all images inside and select which one to show. Your root layout will look more or less like this:
<ViewFlipper
android:id="#+id/flipper"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- page 0: the lock screen mock -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:src="#drawable/mock_lock_screen"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<EditText
android:id="#+id/pinCode"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="PIN CODE" />
</FrameLayout>
<!-- page 1: chrome screen mock-->
<ImageView
android:src="#drawable/mock_chrome"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- page 2: wikipedia screen mock-->
<ImageView
android:src="#drawable/mock_wiki"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
.
.
</ViewFlipper>
Then in the activity, you can show the lock screen and any mock page:
ViewFlipper mFlipper;
#Override
public void onCreate(Bundle savedInstanceState) {
.
.
mFlipper = (ViewFlipper)findViewById(R.id.flipper);
.
.
.
}
and to change the displayed screen
mFlipper.setDisplayedChild(0); // will show lock screen
mFlipper.setDisplayedChild(1); // will show chrome mock
mFlipper.setDisplayedChild(2); // will show wikipedia mock
hope you get the idea! happy coding.
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 very new to this forum and really need help in something I got stuck in during developing the app.
This is the image I am using as my background (I named it SampleBG in xml):
https://i.gyazo.com/946507c2690c8170b54a1ace752906bd.png
Basically, this is what I want my design to look like:
https://i.gyazo.com/896e29846dfd9e4bc9ab15ca39f9a796.png
And for smaller devices, it automatically resizes and looks like this:
[i.gyazo.com/f4278339cc8f246187c011474796a12c.png]
And when I switch to a tablet device, it automatically looks like this:
[i.gyazo.com/1b0e233a0b1731148664e0ac78a05f08.png]
And the above is exactly what I want it to look like. The wooden signs are in the same position for all sizes...
But the problem is:
I want the wooden signs to be clickable, because they are meant to be buttons.
So, I tried to use a button widget and made it transparent and placed it over the wooden signs... it worked but it only worked for that particular size I designed it for (designed it for Nexus 5 to be specific).... However, when I switched to the Nexus One layout, or Nexus 9 layout, etc, the buttons weren't placed correctly over the wooden signs and thus didn't work.
I want a way to make the wooden signs clickable and and the buttons to be fixed with the signs for all device sizes/etc, and at the same time.
I would prefer an xml solution but a programmatic solution is nice too.
Here's the layout code right now, it just using the background image right now....
`<?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"
android:background="#drawable/sampleBG">
</RelativeLayout>`
NOTE:
I have tried using the door image as the background only and then adding the wooden signs manually by using the ImageButton widgets, but the wooden signs were being placed differently for different screens and it looked odd, so therefore I fixed the wooden signs with the background (in Photoshop).. now I just want the signs to be clickable.
This is a sample code that you can use, in order to achieve this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#mipmap/ic_launcher"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.test.androidtestapp.MainActivity">
<ImageButton
android:id="#+id/equationsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/equationsOfTheWeekButton"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Equations Button"
android:onClick="equationsButtonClick" />
<ImageButton
android:id="#+id/equationsOfTheWeekButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Equations Of The Week Button"
android:onClick="equationsOfTheWeekButtonClick" />
<ImageButton
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/equationsOfTheWeekButton"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:background="#mipmap/ic_launcher"
android:contentDescription="Settings Button"
android:onClick="SettingsButtonClick" />
</RelativeLayout>
You need to slice your image and then just change the background attributes in the code above. When you achieve that, you can change the background to a selector where you can change the image depending on the different states -> when it's clicked, focused, normal; that would make it more user friendly.
The wooden signs should NOT be on the background image.
Instead, make a real background image (ie. with only the "door" background) and make separate images with the signs.
Then use these images to build your buttons.
Edit: I did read your note about the fact that you tried that, but you should definitively go this way. Another advantage is that you'll be able to easily make the buttons reacting to the user click, with "onPress" states, which would be impossible (or at least difficult and ugly) with a single background image.
You can separate wood pics that you want to be button and give them as a background for buttons. For example, you named the wooden pics as 'wood1.png' , 'wood2.png' and 'wood3.png' and by this sample code you can set them for background image for buttons :
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/wood1"
/>
Or you can design your app by your own solution that described but you should create your app design by different layout for different size device :
layout-large
layout-small
layout-normal
layout-xlarge
layout-xxlarge
you can search about autoLayout design in android app and find your solution better..
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!
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.