RajawaliSurfaceView and RajawaliTextureView XML Layout Tutorial

This tutorial will tell you how to setup a RajawaliSurfaceView and a RajawaliTextureView in a XML layout file using Android Studio. It assumes you have gone through my Basic Rajawali3D Tutorial for Android. If you want to find out more about what these views are and the differences between them, check out the wiki on these views on the Rajawali3D Github.

The difference here is that we are not going to add our RajawaliSurfaceView programmatically. Instead we are going to add a RajawaliSurfaceView and a RajawaliTextureView to our activity_main.xml file and call upon them in our MainActivity.

So if you did the last tutorial, we are going to change the MainActivity class. We will go over the changes to that class shortly. If you did not do the Basic Rajawali3D Tutorial for Android, then start it now and finish every step up to Rendering the Scene in Our MainActivity.

Adding a RajawaliSurfaceView to our Layout File

 

So now we have our project setup, and we have built our Earth scene in our Renderer class. Now it is time to add the RajawaliSurfaceView in our activity_main.xml. Let’s go to that file now and add the line  xmlns:surfaceview=”http://schemas.android.com/apk/res-auto”. This enables us to access some parameters for our RajawaliSurfaceView

Next we are going to add our RajawaliSurfaceView to the layout.

We have set our frameRate as well as our renderMode. We are also able to adjust the view to fit our layout like any other widget. When we are done, our activity_main.xml file should look like this.

You might get the following error.

SurfaceError

 

I am curious on how to fix this, but it did not affect the outcome of this tutorial. Please feel free to email me or leave a comment if you know how to fix this.

Adding the RajawaliSurfaceView to MainActivity

 

Next we need to access the RajawaliSurfaceView in our MainActivity. Since we are pretty much setup with our layout, then this should be pretty easy. If you already have implemented your MainActivity in the other tutorial, then delete everything in the onCreate() method except for super.onCreate(savedInstanceState); and setContentView(R.layout.activity_main);.

Now hopefully everyone is pretty much on the same page. New users are going to have to add the Renderer to the activity. And both users will have to add an instance of RajawaliSurfaceView to the activity. Let’s do both of these by adding these lines before our onCreate() method.

People who did not complete the last tutorial might also have to import the view using import org.rajawali3d.surface.RajawaliSurfaceView;.

Now we just need to add a few simple lines to our onCreate() method.

So first we find the view that we added to our layout file. Then we instantiate a new Renderer from the scene we created in the previous tutorial. Then we set our rajawaliSurface variable to have our rendered scene.

So our MainActivity looks like this minus the project name. I also got rid of the onCreateOptionsMenu and onOptionsItemSelected menu. You won’t need them for this exercise.

 Adding RajawaliTextureView to the Project Layout

 

Making a RajawaliTextureView is just as easy. To find out more about the differences between these views, look the Rajawali wiki post on them. First we want to remove out RajawaliSurfaceView in our activity_main.xml file and replace it with a RajawaliTextureView by inputting these lines.

We also need to change  xmlns:surfaceview=”http://schemas.android.com/apk/res-auto”
to  xmlns:textureview=”http://schemas.android.com/apk/res-auto”. When we are done activity_main.xml should look like this.

Remember, once again we can adjust the height, width etc. to our needs. Let’s see what it looks like.

RajawaliSurfaceView

 

Not bad. Notice how we could add other views under the RajawaliSurfaceView.

Adding RajawaliTextureView to the MainActivity

 

Now let’s go back to MainActivity. Let’s get rid of our RajawaliSurfaceView variable and add a RajawaliTextureView variable. Here is what we want above onCreate().

Now we need to change our code in onCreate() to reflect our new variable. Get rid of the three lines of code we added to the method, and replace it with this code.

This acts like the code that we implemented for our RajawaliSurfaceView. Here is what we should have for our MainActivity now.

Now let’s run the project and take a look.

RajawaliTextureView

 

The two views look the same, so be sure to look at the wiki file to see what you need.

That’s it! Thanks for reading the tutorial and check out the GitHub links below to see the source. Both are on the same repository but I pushed them separately so each link we take you to the code you need.

RajawaliViewProject – RajawaliSurfaceView code on Github

RajawaliViewProject – RajawaliTextureView code on Github

As always, feel free to ask questions in the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *