I am designing a simple Android game using a surfaceview similar to the Lunar Lander sample provided by Google. I want to have various things such as highscores, messages, menus etc pop up on screen with the surface view still in the background.
The problem is that I want the "pop ups" to contain many design elements such as images, textboxes etc. Is there a way that I can create a layout in XML to design the pop up I want and then display that over the surfaceview as one object rather than having to construct each individual element one by one in code and paint them all to the canvas?
I want to animate the pop ups in from the side of the screen, so it would be good if I design the layout in XML so that all the object know their relation to each other and then animate that layout as one object.
It strikes me as something quite simple but I just cant seem to find how to achieve it.
You can overlay elements on top of SurfaceView either in code or in your XML layouts.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<android.view.SurfaceView
android:id="#+id/mysurface"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</android.view.SurfaceView>
</FrameLayout>
And in your Actiivty:
TextView myText = new TextView(this);
myText.setText("Something");
addContentView(myText, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
Don't know about the performance issues though.
A simple way of doing this is creating your popup interface as a different Activity. You would then give a transparent background theme to it, like the Dialog theme, in your manifest file.
Look at the CustomDialog, Translucent and TranslucientBlur samples in API Demos. They create such activites. The fact that the underlying activity is in a surface shouldn't change anything.
Related
I am currently using an architecture where I have multiple fragments that I swap in the same activity.
I need to be able to use a different background color for one of these fragments BUT I don't want to use the lazy solution that adds one layer of overdraw.
For clarity : I have a window background setted by my theme and on top of it I draw cards & lists. In one of my fragments I need a slightly different window background color.
Is there any way to do that ? I already tried to use a ContextThemeWrapper but it does not seem to work (maybe because the background has already been drawed ?)
Thanks in advance for your help.
Just found it :
It is doable by calling
ColorDrawable cd = new ColorDrawable(getActivity().getResources().getColor(
R.color.your_color));
getActivity().getWindow().setBackgroundDrawable(cd);
during the initialization of your fragment, when it is attached to the activity.
Unfortunately changing a fragment's background at runtime isn't supported. To get this functionality you can wrap your fragment inside of a RelativeLayout or something similar and set the background programmatically on that.
<RelativeLayout
android:id="#+id/fragmentContainer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ccc">
<fragment android:name="whatever.fragment.name"
android:id="#+id/frag_1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
Then in your code get by id fragmentContainer1 and do view.setBackgroundColor(YourColorVariable) on it.
Another way may be to get your fragment, find the root view, then set the background on that. fragment.getRootView().setBackgroundColor(Color.WHITE) This depends on your fragment's layout though, so it may or may not work.
I'm trying to port an app from iOS to Android. In my iOS app I have an image view which displays a map, and on top of it I want to display multiple button views on certain specific positions.
None of the standard views in Android seem to fit my needs, but I am surely missing something. How could I achieve this?
Thanks
The easiest thing to do would be to use any layout that's best suited for your needs (LinearLayout, FrameLayout, RelativeLayout, etc.) and set its background to any image you need. I believe the image will automatically scale to fill the corresponding Layout. Put the image into the appropriate drawable folders - and format your XML similar to this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_image">
...
</RelativeLayout>
As I am actually not very confident with programatically changing Views, I have following problem:
At the first start of my app, I want to have an overlay for the main screen, that tells the user to have a look at the settings, as there are two critical options the user has to configure.
I don't want to use an AlertDialog and rather not use a wizard. So, I decided to take an approach similar to Go SMS and create an overlay at the first start. The mockup I created looks like this:
Normal menu:
First start:
So these are the problems I have:
Like I said, I don't want to use a screenshot overlaying on first start, as this would take too much space and would not be language and screen independent.
I would have the circle as an png, but I don't know how exactly put it over the image
The same problem with the text
And finally I want to put a semi-transparent white over the app. It does not necessarily need the hole for the icon, though it would be nice.
In case you need the Layout Source, you can get it at pastebin
So, I just need to get a start here, if it is better to use LayoutInflater or ViewStub and how to realize it, as I have absolutely no experience with it...
Thanks!
/edit: I uploaded a new, more well-arranged layout.
I have faced a similar problem, I client wanted a walkthrough of the application, where the entire screen had to become whiter (as they said: "transparent"), except for the button being explained by an overlay speech-bubble.
Fortunately for you, your layout is not nearly as complicated as the one I had to work with :)
Now, you can get the transparency-effect in two ways, either have a white background and call all the views setAlpha() methods, or you can create a half-transparent white overlay.
If you go with the overlay, you'll have to find a way to display the opaque buttons through the overlay. This can get a bit complicated.
If you go with the first option, you can just setAlpha(1) on the opaque view to get it to show up.
The setAlpha() method is only available from api version 11+, so if you target an earlier version, you might have to do it in a slightly more complicated way.
Example of setting alpha on views pre-honeycomb:
Layout for your buttons (make them however you want, just make them similar so you can loop through them):
<LinearLayout
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:tag="image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tile"/>
<TextView
android:tag="text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF000000"
android:text="button1"/>
</LinearLayout>
In your program, when you are want to make the buttons transparent:
LinearLayout l = (LinearLayout) findViewById(R.id.button1);
((ImageView)l.findViewWithTag("image")).setAlpha(0x7F);
((TextView)l.findViewWithTag("text")).setTextColor(0x7F000000);
When you have decided on how you want to create the transparency effect, you will have to decide on how to display the overlay-text/bubble. You'll most likely want to put this in a separate layer on top of your entire layout, to make sure that it is not affected by your new view.
One way to achieve this is by changing your root layout element to a FrameLayout, and then creating/displaying in this. e.g:
<FrameLayout background="#FFFF"> <!-- white background, just in case -->
<LinearLayout>
<!-- the rest of your layout -->
</LinearLayout>
<LinearLayout visibility="gone"> <!-- this will be your overlay view -->
<ImageView /> <!-- the arrow/ring -->
<TextView /> <!-- the description -->
</LinearLayout>
</FrameLayout>
When the introduction is displayed, you set the position of the hidden overlay-view to the position of the table item to be explained, change the text to an appropriate string/resource and display the view.
When the introduction is over, you reset the alpha values of all buttons, and set the visibility of the overlay to gone again.
Since I don't have much experience with ViewStub, I would do it with LayoutInflater.
First of all, you need to have a second layout loaded on top of your current layout. The easiest is to have a FrameLayout, which has as one child your current view, and the dynamically you load the second child on the first start. When you load a content view in an Activity, it will be attached to some already created views (some DecorView, a FrameLayout, etc). So you can either re-use the existing FrameLayout, or you can create a new one.
I would vote for the second solution, since it's more stable (I just mentioned the other possibility in case you want to minimize the number of layers).
So, as a first step, wrap your current layout inside a FrameLayout, and give it an id, let's say "#id/root".
Then, in the onCreate method, you can have something like this:
setContentView(R.layout.main);
if (isFirstRun()) {
ViewGroup parent = (ViewGroup)findViewById(R.id.root); // locate the FrameLayout
LayoutInflater li = LayoutInflater.from(this); // get an instance of LayoutInflater
li.inflate(R.layout.overlay, parent);
}
So far you will have the overlay loaded. Now it's up to you to define the overlay.
To make the whitening effect, just set the following attribute on the root view in your overlay.xml layout:
android:background="#40ffffff"
To position the circle, first you need to find it's location. You can use the View.getLocationOnScreen to get the absolute coordinate of the icon (below the circle) on the screen. Then you can have two options:
either create a custom view (for the overlay) and manually draw the circle at the given location
or add the circle using an ImageView and adjust the left and top margins based on the coordinates
This is my first Android project, so bear with me. I created a custom view ("GameBoard" extends View) for drawing my game board and pieces by overriding the OnDraw. It all works fine. However, I'd like to add a tween-animated "You win" graphic at the end of the game. However, I can't figure out how to add an ImageView to my GameBoard view.
I read that I could use an XML file and add my custom view to it, but it didn't work. Here's my XML code:
<?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"
android:background="#001133" >
<view Class = "com.myname.firstgame.GameBoard"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</view>
</RelativeLayout>
I also tried it without the "view Class =" in the view tag. I also tried it without the ".GameBoard" in the view tag and specifying it in the "android:id=" tag. (All these attempts came from Google searches.)
If I can get it to work, I figure I can add an ImageView with my bitmap as the background, place it in the right spot, and animate it. I do a similar thing for my title screen and it works fine, but it uses an XML natively, without a custom view. (In hindsight, I'm wondering if I should have used XML rather than a custom view for the game board, but that's another matter.)
Can anyone help, please?
This seems to answer your question.
http://sankarganesh-info-exchange.blogspot.com/2011/04/performing-animation-in-android.html
just call the target.startAnimation() method when your user wins / loses / whatevers your game
I'm trying to work out how to create the layout for a gridview for my game. I have a gridview which will be the level selector. At the moment I have each gridview item as a TextView, just showing the Level Number (1, 2, 3, etc).
I would like to add 3 imageviews over the top of the textview and be able to manipulate the image shown in the views. The 3 image views are stars, showing what difficulty the level was completed on.
I figure I need to write my own Adapter and inflate the XML layout when creating the views for the grid items but I'm stuck with how to create the actual layout for this, the overlapping part has me scratching my head?
Here's a mockup of what I've tried to describe, and what I want to create:
PS. I know I could use 4 images and set the textview background to one of those images but I wondered if there was a more technical way of creating the layout.
I would use a relative view!
The basics would be, define your button background Bitmap/Drawable with the #1 on it, and then, for each button, have a layout with the copper, silver and gold stars. You can use android:layout_alignParentLeft="true" and android:layout_alignParentBottom="true" on the Copper start and base the other alignments off of that one. Then you just set the stars drawable based on if the star is toggled on or of.
I'm going to use rough psuedo code here:
<RelativeLayout android:id="button1">
<ImageView android:id="copper_star" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" />
<ImageView android:id="silver_star" android:layout_alignParentBottom="true" android:layout_rightOf="#id/copper_star"/>
...etc...
</RelativeLayout>
Once you've got it looking the way you want, you can see this discussion by Mark Murphy. He explains how to set the properties of a button to do what you'd like.
I went with the un-technical 4 images in the end, it was simple and easy and there aren't any issues scrolling through the grid so it's all good.