Android/Java - Combinding custom SurfaceView and XML Layout? - java

I am making a simple game as a project that is basically a simple version of Galaga with some modifications. I am very new to android and Java (primarily a C++ person) so at first I just made the ship automatically move right and holding down on the screen makes the ship move left. I did this to keep it simple (as it was easy to implement an on-touch listener within my GameView for this task) so that I could finish the rest of the basic framework of the app before going back and improving the functionality of particular bits.
Right now my GameView is created programmatically within GameActivity and then "setContentView()" is used to set the activity's view to the new GameView:
public class GameActivity extends AppCompatActivity {
private GameView gameView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
gameView = new GameView(this, size.x, size.y);
setContentView(gameView);
}
Now what I want, is two small buttons in the corner of the screen that move the ship left and right, but I am stuck on how to easily do this because each way I keep thinking of gets really complicated (mostly due to being an android novice).
The two best ways I can think of are as follows:
1) Use the Android Studio XML design tool to place the buttons and my custom SurfaceView (GameView) into the proper locations and then just use "setContentView(R.layout.activity_game)" within my GameActivity.
This would be great; however, there's two problems I cannot figure out how to overcome. First, when I drag "view" into the layout for GameActivity and select my custom SurfaceView "GameView" in the pop-up window, I get an error:
and additionally, as you can see in the code I posted, a GameView needs to be passed two integers whenever it is created and I don't see how I could make this happen if I just put a GameView in my XML layout with the designer.
2) Continue creating the GameView programmatically like I am, setup the GameActivity layout using the designer to contain all the buttons I need, then programmatically add the GameView (custom SurfaceView) to the GameActivity layout before finally using "setContentView(R.layout.activity_game)". This seems the most simple to me, but I don't know how to grab a reference to the entire XML layout that's created with the activity by default (activity_game.xml) and then add the created GameView to it. I can only find code examples for using "findViewById()" to reference pieces of an XML made layout (like a button, or linear layout within the XML made layout). I imagine I might be able to create a Frame layout or something similar within the XML designer and then attach everything to that and use "findViewById()" to attach my GameView to the frame, but I don't know if that would work. Finally, I have a feeling that because the buttons on the XML layout would have existed first, programmatically adding the GameView would mean that the buttons would get covered up and I don't know how to avoid that.
Sorry for the long-winded question but I just couldn't find any sample code or previous questions/answers that addressed this specifically, I could only find bits and pieces that I wasn't sure how to put together.
Any help on the easiest way to have my buttons created in "activity_game.xml" appear on-top of my programmatically created GameView so I can easily position the buttons and easily grab them by ID for on-click listeners?
EDIT:
As requested this is the current setup for activity_game.xml, the frame layout is just there as part of my experimentation but is not actually being used right now since the content view for the activity is set to GameView. I have the button just floating there because right now I am just trying to get it to show up and will worry about proper implementation once I reach that point:
<?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:id="#+id/activity_game"
android:layout_width="match_parent"
android:layout_height="match_parent"
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.chrisheimlich.galaticrenegade.GameActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/testFrame"
android:layout_alignParentStart="true">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginStart="113dp"
android:layout_marginTop="14dp"
android:id="#+id/button2" />
</FrameLayout>

Related

Add Custom Control as Marker OSMDROID BONUS PACK

Can I add Custom Control as Marker to OSMBONUSPACK?
I create some Buttons and image in Android xml file Named MyMarkerItem.xml
I would like something like MyMarker.setDesign(R.layout.MyMarkerItem);
Thanks
OK, I understand that you want the marker icon itself to be not a simple bitmap, but a layout.
What you can do is to use the marker infowindow "instead" of the marker icon.
First of all, create a new class CustomInfoWindow which inherits from MarkerInfoWindow - the default InfoWindow for Markers, and uses your own layout:
public class CustomInfoWindow extends MarkerInfoWindow {
public CustomInfoWindow(MapView mapView) {
super(my_own_layout, mapView);
}
}
CustomInfoWindow myCustomInfoWindow = new CustomInfoWindow(mapView);
Then, just after creating your Marker, do that:
Set a marker icon as a 1x1 pixel size bitmap, fully transparent: setIcon(mySmall_InvisibleIcon)
Set the marker infowindow to your own: setInfoWindow(myCustomInfoWindow)
Set the infowindow "anchor" to the most appropriate and natural position, depending on the "look" of your layout: setInfoWindowAnchor(ANCHOR_CENTER, ANCHOR_CENTER) maybe?
Force the opening of the infowindow: showInfoWindow()
All these steps are fairly simple.
But then, I guess you expect some behaviour to happen when the user will click on your layout buttons.
So, inside your CustomInfoWindow code, you will certainly have to do some work => follow this tutorial.
Markers in Osmdroid arent actually android views and therefore it's not possible to add other components into them. They are basically just an image.
Simple and suggested solution
You can add your components to a MarkerInfoWindow which is displayed after a click, though.
marker.setInfoWindow(new MarkerInfoWindow(R.layout.MyMarkerItem, mapView));
Possible "real" soluiton
If you really need such behaviour - meaning you really need multiple buttons displayed on a map as a "marker" and give the user the opportunity to click on them - it should be possible to create your own implementation of a Marker-like class. In other words, you would have to implement your own subclass of OverlayWithIW or Overlay and override (mainly) the draw method (which should draw your buttons to a canvas) and the onSingleTapConfirmed method, where you would need to detect properly on which button user clicked and call the related action. Try to go through source of the Marker class, it's a good example.
But keep in mind: this is an advanced task. Everything related to drawing on canvas can lead to performance issues if it's not done properly. There will be edge cases you'll have to cover. There may be other problems you'll need to solve and debug. I would not suggest such a solution to a beginner.
It's August 2021 and I wanted to add an arbitrary layout as my marker item. Much as the OP is asking for here.
I tried the Simple and suggested solution of https://stackoverflow.com/a/53003664/866333:
marker.setInfoWindow(new MarkerInfoWindow(R.layout.MyMarkerItem, mapView));
I get a runtime exception when I click it:
java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.TextView.setText(java.lang.CharSequence)' on a null object reference.
I refine my layout down to a single TextView widget for arguments sake and the error persists.
I give up on that answer and attempt the accepted one: https://stackoverflow.com/a/53216542/866333
public class CustomInfoWindow extends MarkerInfoWindow {
public CustomInfoWindow(MapView mapView) {
super(my_own_layout, mapView);
}
}
CustomInfoWindow myCustomInfoWindow = new CustomInfoWindow(mapView);
Using the same my_own_layout as before, let's call it R.layout.my_info_window
I get the same error:
java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.TextView.setText(java.lang.CharSequence)' on a null object reference
I dug into the AS-reverse engineered (thanks AS) source code to discover the reason for this error is that the layout being passed to the MarkerInfoWindow super class constructor has particular id requirements.
We must have these ids in our layout: bubble_title, bubble_description, bubble_subdescription, bubble_image
Here is a minimal working example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/bubble_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="153dp"
tools:layout_editor_absoluteY="20dp" />
<TextView
android:id="#+id/bubble_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="153dp"
tools:layout_editor_absoluteY="39dp" />
<TextView
android:id="#+id/bubble_subdescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="153dp"
tools:layout_editor_absoluteY="58dp" />
<ImageView
android:id="#+id/bubble_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/marker_cluster"
tools:layout_editor_absoluteX="145dp"
tools:layout_editor_absoluteY="76dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
That works great!
I can even attempt to customise by appending another widget:
<TextView
android:id="#+id/anothertexttestview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="look ma!"
tools:layout_editor_absoluteX="153dp"
tools:layout_editor_absoluteY="125dp" />
The absoluteY is ignored and superimposed on the only text I set programmatically, the title. IOW, the widget isn't purely declarative xml. I'm afraid ConstraintLayout is after my time as a front end engineer so I'll leave it to the reader to experiment from here.

Java Android/Eclipse: how to get a screen with a canvas and some buttons?

I'm making an app for Android with Java in eclipse, and it will have multiple screens. One screen will contain a canvas with 2D graphics, and some buttons below the canvas. But I'm a newbie at Android so it's still a little messy to me. Seems like a new Paint() in a class which extends View always is fullscreen (?) so I tried to solve it with Fragments where I put the canvas/newPaint() in one Fragment and the buttons in another one. But my app crashes when I try to add the Fragments in the xml file, and I don't know why.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<fragment
android:id="#+id/game_fragment"
android:name="com.example.tictactoe.GameFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#FF0000"
tools:layout="#layout/game_view" />
<fragment
android:id="#+id/game_fragment2"
android:name="com.example.tictactoe.GameFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFFF00"
tools:layout="#layout/game_view" />
Is there any other way of getting a 2D graphics canvas together with some buttons on a screen,
or can someone help me out with the fragment solution?
Thanks in advance!
Your stacktrace gives what the error is - GameFragment is not a class inheriting from Fragment. You need to ensure that you are placing Fragment classes appropriately in your layout.
Also from looking at your layout, you are placing GameFragment layout twice in the same root view. This looks wrong on some level. I mean if you have your buttons in a different layout, shouldn't you be using that layout? Also, as a tip, inflate the layout for the fragment by overriding the GamrFragment's onCreateView() method (you should see this method once you have inherited from the Fragment class appropriately).
And last but not the least, when using Fragments, ensure that you use the right version uniformly (if you use the fragments from the support package, stick to using it uniformly).

Custom game or draw loop within XML View

I've developed apps and games in the past. Now I'm doing one which is a mixture (don't ask..)
Anyhow I was wondering if was possible to draw a custom loop within the view, example.
I want to do this so achieve complete control loops. Maybe a master loop on top of the view's that's always running (If that's possible).
Relative Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
/>
Within the layout would it be possible to implement a loop as such (obviously in another thread with a bit more code for checking etc etc)
Canvas draw loop
RectF CustomViewWidthAndHeight = new RectF(); //Set using view ID.
do
{
//Using circle as an example.
canvas.drawCircle(Blag, XY);
XY++; //An example.
}
while(endLoopSometime)
How would one go about implementing this if it's wise too, or advising me of another method.
It sounds like you are trying to build your own Custom View. The Android team has been improving the documentation on the Android Developer website. There is a tutorial in the training section on Creating Custom Views which should get you started.

Creating an overlay activity

I am trying to create a overlay activity which is sitting in a corner of the screen taking a very small portion of the screen, while the rest of the screen is interactive that is I tap on anything that is displaying on rest of the screen. So far I am unsuccessful in obtaining my goal. I have added these properties to my window but they don't seem to work.
hello.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="50dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/tepp" >
</RelativeLayout>
What can I do to solve this problem?
From what I can remember, only one Activity can be active at any given time. So while that small Activity in the corner is running, the other activitys will be paused and you wont be able to interact with them. You should try using a Fragment instead. You can have multiple fragments visible at the same time. Although I believe that only one Fragment can be active at any given time like an Activity, when you click on different fragments, the one you click on becomes active and you can interact with it. This might help you achieve what your looking for.
i don't think that there is such a thing "an overlay activity" .
however, instead of using an activity, you could make the view on top, like i've shown here . when the user touches it, you would need to decide what would happen, and if you need to expand its size to be larger to show something else to the user...
btw, if all the activity does is to create an on top view, you can call finish() right at the end of the onCreate() method. also you can avoid using setContentView in case you inflate the view anyway...

GridView: How can I get rid of extra space from my GirdView object?

I'm writing an application for Android phones for Human vs. Human chess play over the internet. I was looking at some tutorials, to learn how to develop Android applications and found a very nice example of making galleries (it was a GridView usage example for making a gallery about dogs) and the idea came to draw the chess table using a GridView, because the example project also handled the point & click event and I intended to use the same event in the same way, but for a different purpose. The game works well (currently it's a hotseat version), however, I'm really frustrated by the fact that whenever I rotate the screen of the phone, my GridView gets hysterical and puts some empty space in my chess table between the columns. I realized that the cause of this is that the GridView's width is the same as its parent's and the GridView tries to fill its parent in with, but there should (and probably is) be a simple solution to get rid of this problem. However, after a full day of researching, I haven't found any clue to help me to make a perfect drawing about my chess table without a negative side effect in functionality.
The chess table looks fine if the phone is in Portrait mode, but in Landscape mode it's far from nice.
This is how I can decide whether we are in Portrait or Landscape mode:
((((MainActivity)mContext).getWindow().getWindowManager().getDefaultDisplay().getWidth()) < ((MainActivity)mContext).getWindow().getWindowManager().getDefaultDisplay().getHeight())
In the main.xml file the GridView is defined in the following way:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="8"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:stretchMode="columnWidth"
android:gravity="center"
>
</GridView>
...
</LinearLayout>
I appreciate any help with the problem and thank you for reading this.
Portrait: http://www.freeimagehosting.net/image.php?f388b3ec64.png
Landscape: http://www.freeimagehosting.net/image.php?ee790603a2.png
A GridView probably isn't what you want here. GridView, like ListView, is for efficiently presenting scrolling, unbounded data sets. A chess board is neither. Populating a TableLayout programmatically is probably what you want instead.
The reason your GridLayout doesn't seem to be honoring android:layout_width="wrap_content" is that since GridView is meant for displaying unbounded data where each item can have a different size, it doesn't trust that items have a uniform width that can be reasonably measured. (If an adapter has 10,000 items, should GridView measure all of them to determine the correct column width?)
If you're going to try to keep using GridView for this anyway (which you shouldn't), try setting an explicit value for android:layout_width rather than wrap_content. This will stop the GridView from expanding to fill the available space. You can also use alternate layouts for different screen orientations using the resource system as described here. Alternatively you can disable landscape mode using android:screenOrientation="portrait" on the activity tag in your manifest. ;)
The problem is simply solvable using the setPadding method of your GridView object.

Categories

Resources