In this tutorial series, I’m going to teach you how to connect your android app to an online database using XAMPP. In this tutorial, you will also learn how to use some basic material design, fragments and pager adapters.

I’m going to divide the whole topic into three modules: Creating the layout, Implementing PHP and MySQL, and Using Android Volley library for database connection. For our first module in this tutorial series, we’re going to design our registration app. We should be able to create a good looking design for our registration app. We’ll also add a page control in our registration process to make the design of our app more interesting. The final output should look like this.

 

Now let’s start by creating a new Android Studio project and add this dependency in our build.gradle file.  Just make sure the version you’re going to use is the same as your appcompat library version. This will include the material design library for us to use in this tutorial series.

 

Next, create a project structure as shown in the image below. You need to create two activities and three empty classes.

 

Create a new drawable file with a name of bg_gradient.xml and these codes. This will make a gradient radial background for our login screen.

 

Then add these in your colors.xml. This will include all the color codes in our app.

 

Add these appearance style in your styles.xml. This will change the appearance of edit text error.

 

Add these in your strings.xml. You can change the default hint text if you want.

 

Add these in your dimens.xml. You can adjust the height of the dots and its bottom margin.

 

 

Now open activity_login.xml and add these layout codes.

 

Now open your Login.java then copy and paste the codes provided below. I’ve put some comments so you can understand what we are doing here.

Since Android doesn’t support layout attributes for underlined text, we used Html codes as a replacement for that. Now let’s make our fragments first before we proceed with our register class.

What are fragments?

A fragment is a portion of the user interface in an activity. They are available since Android 3.0. They improve the UI reusability and allows the developer to create a multi-pane UI by combining multiple fragments into a single activity or using the same fragment in multiple activities.

We have a tutorial that also includes fragment here: link

 

We need to create a layout for each registration page so add three new layout files in your layout directory.

 

Open each and add the codes provided below in their respective xml layout file.

 

 

 

Now open RegisterSlide1.java, RegisterSlide2.java and RegisterSlide3.java. The copy and paste the codes provided below.

 

 

 

Now we’re done with our fragment codes, open activity_register.xml and add these layout codes.

This will add view pager in out layout and the page control of our app. If you’re not familiar with page control, this is an image of it.

 

Then open Register.java and add the codes provided below. I’ve put some comments so you can understand what we are doing here.

 

Now you can run and test you app if it is working. The final output of this tutorial should be like this.

In our next module, we’ll discuss how to implement PHP and MySQL using XAMPP. If you’re having trouble reaching up to this point, then you can download the full source code here: Download Link