How to Create Android Image Gallery with Ionic Framework and Web Services – create image gallery app on android using ionic php framework and web services. After introduction and installation of ionic framework, I want to continue the ionic framework tutorial, which create the image gallery application . Previously I’ve discussed how to create image galleries using android studio. Using ionic framework is much easier and faster. Let’s start the following tutorial.

How to Create Android Image Gallery with Ionic Framework and Web Services

Creating Web Services using mysql and php

  1. Create a database as wallpaper.
  2. Create a table myImage with the following scheme :
    Column NameData TypeLengthPK?Not Null?Auto Incr?
  3. Fill in the table using the following query :

  4. Create new wallpaper’s folder and add a php file as list.php and then fill with the following code :

  5. Test the web service in a browser


Creating ionic framework Project

1. Create new ionic framework project with name “wallpaper
ionic start wallpaper blank
2. Open folder “www” on wallpaper’s folder with your best script editor.
3. Please Edit index.html and add the code below

2. Add route on app.js

3. Create new controller with name “MyController”

Below the full script of app.js

4. Create 2 html file into templates folder to show the result :



Finish!!. With a simple coding above, we have to create an image gallery like the screen shot below

How To Create Android Image Gallery With Ionic Framework And Web Services

To try on the server, please run ionic server with the following code

ionic serve

Build apk

ionic platform add android

ionid build android

If you want to try on your android smartphone, be sure to change the file app.js, find string “localhost” and change with your server ip address that has connected on network or your domain name.

Thus article about How to Create Android Image Gallery with Ionic Framework and Web Services, hope useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. the image not showing, can u help me?

  2. I am getting the error at many places. can you please share the whole code as a zip file? I really need for it

  3. How to integrate cordova social sharing with this image gallery?

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.