Events, Details and Map

App Template for Android Studio


Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email us. Thanks so much!

"Events, Details and Map" template can become the mobile app for your event (trade show, convention, meeting, festival, etc) can be useful with event list, event details and their positions on the map.
Reach the event through "take me there" feature.

Features

- Splash screen with your event logo
- Tutorial screen overlay
- Event list
- Distance slider
- Search textbox
- Event details
- Map: show your point of interest, places on the map
- Admob: banners and interstitial ad
- Local SQLite or remote API: events can be stored inside the app (SQLite) or managed through the simple Admin Panel (need a reachable server with PHP support)

  1. Start Android Studio
  2. On welcome screen, select "Open an existing Android Studio project"
  3. Choose project directory where you extracted this archive

 

The first screen of the app is a simple splashscreen that appears for limited time.
In the SplashActivity you can set this time. There is a instance variable named _splashTime (default value is 2000, in ms)

package com.bandst.eventsdetailsmap;

public class SplashActivity extends AppCompatActivity {

	public static int _splashTime = 2000;

 

The main activity ha two fragment switchable by a tabs area in the bottom side of the screen:
- events list (ListFragment)
- events map (MapFragment)

There is a radius area above the tabs. A progressbar slider is the core of the radius area.
The progress bar max value is determined by the events list. The farest event distance values is the maximum radius settable in this screen. Sliding down the progress bar you can filter and show only nearest events.

In the header of the view, you can view a textfield and a search button. With these, the user can perform a search: in the template we set a events search engine that filters results by title and address. You can change this behavior in com.bandst.eventsdetailsmap.util.database.DatabaseHelper class...

Lastly, we display a simple overlay tutorial view. In this view, we display a short guide to the apps. It's a relative layout and you can customize this as you desire.
By default, the app shows this view every time, at startup: you can change this setting. If you want to display this help view only the first time, you can use this code:

View help = findViewById(R.id.helpView);
SharedPreferences settings = getSharedPreferences(Global.SHARED_PREFERENCES, 0);
boolean introSeen = settings.getBoolean("introSeen", false);
help.setVisibility(introSeen ? View.GONE : View.VISIBLE);
...
Button startButton = (Button) findViewById(R.id.startButton);
startButton.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View arg0) {
		hideHelp();
		SharedPreferences settings = getSharedPreferences(Global.SHARED_PREFERENCES, 0);
		SharedPreferences.Editor editor = settings.edit();
		editor.butBoolean("introSeen", true);
		editor.commit();
	}
});

 

This app template manage the events data in two ways. You can choose if you want to use a local SQLite file stored in the assets folder or if you want to manage the events through a simple PHP admin panel.
You can set the desired way through this method, before loading data, in MainActivity:

setDataMode(MODE_SQLITE);

or

setDataMode(MODE_JSON_API);

 

SQLite

In the package com.bandst.eventsdetailsmap.utildatabase there is the core class for manage the communication with this data source. You can customize the DatabaseHelper class to fit your purpouses.

Attribute Type
id int
title string
address string
brief_description string
description string
lat double
lng double
phone string
email string
url string
start_date_time datetime
end_date_time datetime
The events table

As you can see, in assets folder there is the events.sqlite file. You can edit this file with a SQLite editor (we suggest the Mozilla Firefox addon SQLite manager).
Please note: if you add, remove columns in the events table you have to implement the necessary changes in the Event class. Please make attention to cursorToEvent method of the DatabaseHelper class (the int values in getString, getInt are the attribute column number in your events table).

private Event cursorToEvent (Cursor cursor) {
	Event e = new Event();
	e.setId("" + cursor.getInt(0));
	e.setTitle(cursor.getString(1));
	...
	e.setCustomAttribute(cursor.getString(/*your custom attribute column number*/));
}

 

Admin Panel

We include a simple PHP Admin Panel developed with Codeigniter framework. You can upload via FTP the admin folder (and rename this as you like) in your server.
Set the correct value for the variable base_url in application/config/config.php (line 26).

$config['base_url'] = 'http://www.yoursite.com/your_admin_folder/';

So you have to initialize the data simply importing (through PHPmyAdmin or other software) the sql file provided, database.sql, in your MySQL server database.
When you have uploaded the admin panel and imported the sql data, you have to set the correct db configuration in the admin panel: please edit the file database.php in the application/config folder and set the correct values for these lines (78 to 81):

'hostname' => 'localhost',
'username' => '...',
'password' => '...',
'database' => '...'

The admin panel is very very easy: you can add more users if you want to have collaborators that can manage the events.
You can add, edit, publish, unpublish or delete events.
Latitude and longitude can be set via Openstreetmap embedded views.

The administrator user can log in with:
- Username: administrator
- Password: password

NOTE: if you want to retrieve JSON events data managed via admin panel, you have to set the admin panel url in strings.xml

<string name="json_url">http://www.yoursite.com/your_admin_folder/index.php/api/events</string>

 

When you click the first tab shown by main activity, the list fragment appears. This fragment contains a ListView with the events list. This list is ordered by distance if the user has the location service enabled.
This fragment (and the map fragment also) implements the EventsDataFragment interface. The only method of this interface is refreshData(ArrayList<Event> events); calling this method, the main activity can refresh the content of this fragment. Note that MainActivity is the only class that can interfaces with database.

ListFragment uses this code to refresh the events list. This code is used in onResume and in refreshData.

adapter = new EventsListAdapter(context, events, R.layout.event_list_item);
lv.setAdapter(adapter);

This is the code used to show the event details when the user click on list item. In this sample we use SharedPreferences, but you can use intent.putExtra if you prefer.

JSONSharedPreferences.saveEvent(events.get(position), context);
Intent intent = new Intent(context, EventDetailsActivity.class);
startActivity(intent);

 

Firstly, you have to create the maps API key. This is mandatory to embed Google Maps inside your app. To create the API key, please follow this guide.
After this, when you have an API key like AIzaSyBdVl-cTICSwYKrZ95SuvNw7dbMuDt1KG0, you have to set the api key in the AndroidManifest.xml, inside the manifest tag.

<meta-data android:name="com.google.android.geo.API_KEY" android:value="<!-- place your google maps api key here -->"/>

When the map is ready, the setupMapIfNeed is called. Inside this method we define the map UI settings (compass, user location, zoom gestures, etc.) and we load the points of interest.
The method refreshMap instantiates a LatLngBounds.Builder that is necessary to fit the POIs area with the map. You can customize the markers editing this code:

Marker m = mMap.addMarker(new MarkerOptions()
	.position(new LatLng(events.get(i).getLat(), events.get(i).getLng()))
	.icon(BitmapDescriptorFactory.fromResource(R.drawable.marker1)) // you can change the marker drawable
	.title(events.get(i).getTitle().trim())
	.snippet(events.get(i).getAddress().trim()));

We use the shared preferences to save the event that the user want to display when he click on the info window:

mMap.setOnInfoWindowClickListener(new OnInfoWindowClickListener() {
			
	@Override
	public void onInfoWindowClick(Marker marker) {
		Event eventInfo = eventMarkerMap.get(marker);
		JSONSharedPreferences.saveEvent(eventInfo, context);
		Intent intent = new Intent(context, EventDetailsActivity.class);
		startActivity(intent);
	}
	
});

Also MapFragment uses the EventsDataFragment interface to refresh his data with refreshData method.

 

The EventDetailsActivity class display all the informations available about the event selected in the map fragment or in the list fragment. As said before, we use SharedPreferences to pass data between main activity fragments and the event details activity. Otherwise you can use a simple Intent.putExtra method.

event = new Event();
try {
	o = JSONSharedPreferences.loadJSONObject(this, Global.SHARED_PREFERENCES, Global.SHARED_EVENT);
	Gson gson = new Gson();
	String json = o.toString();
	event = gson.fromJson(json, Event.class);
} catch (JSONException eJson) {
	eJson.printStackTrace();
}

In the EventDetailsActivity we define the takeMeThere method. This method use the Google Maps url intent to open the Mpas Application and display directions to reach the event.

public void takeMeThere () {
	SharedPreferences settings = getSharedPreferences(Global.SHARED_PREFERENCES, 0);
	Intent newIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://maps.google.com/maps?saddr="+settings.getFloat(Global.SHARED_USERLOCATION_LAT, 44.834f)+","+
			settings.getFloat(Global.SHARED_USERLOCATION_LON, 11.619f)+"&daddr="+
			event.getLat()+","+event.getLng()+"&dirflg=w"));
	startActivity(newIntent);
}

In the header of event details activity, we set a textview clickable. In this textview we display the url attribute od the events table. You can customize the following code to display others attributes.

TextView infoTextView = (TextView) findViewById(R.id.infoTextView);
infoTextView.setText(event.getUrl().trim()); // change the attribute here
infoTextView.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		Intent intent = new Intent(EventDetailsActivity.this, WebViewActivity.class);
		intent.putExtra(Global.EXTRA_URL_WEBVIEW, event.getUrl().trim()); // change the attribute here
		startActivity(intent);
	}
});

 

By default, all activities shows an admob banner. The home activity, also shows an interstitial ad view.
First of all, you have to create four (one interstitial an three banners) ad units in admob website with your account. You can follow this guide.
So, you have to set the ad unit ids in res/values/admob.xml in the app package:

<string name="admob_interstitial"><!-- INTERSTITAL HOME AD VIEW UNIT ID --></string>
<string name="admob_banner_home"><!-- BANNER HOME ACTIVITY AD VIEW UNIT ID --></string>
<string name="admob_banner_detailview"><!-- BANNER DETAIL ACTIVITY AD VIEW UNIT ID --></string>
<string name="admob_banner_webview"><!-- BANNER WEBVIEW ACTIVITY AD VIEW UNIT ID --></string>

NOTE: You can disable banners in every activity simple setting the showAd boolean to false. This variable can be set in HomeActivity (line 61), WebViewActivity (line 26) and EventDetailsActivity (line 38).

 

- Logo: you can set your logo simply replacing res/drawable/your_logo_here.png. If you change the name, please replace the name also in layout xml files.
- Top bar and logo height: change the top_bar_height value in res/values/dimens.xml
- Splash screen logo size: change the splah_logo_size value in res/values/dimens.xml
You can change more others values in dimens.xml file to edit the template aspect.