Android RecyclerView OnClick Events

Cyan Mountains CIANDESIGN DEVIANT ART

This one boggled me for the longest time. However, you can simply add your on click events right in your RecyclerView Adapter.

I was overthinking this stuff. Anyone have any issues with this? Seems to work just fine for me.

Featured Image: http://ciandesign.deviantart.com/art/Cyan-Mountains-483185522

Show Your GPX on a Map with WP GPX Maps

If you track any of your activities with a gps, then you most likely are able to export the tracks into the GPX format. You can easily show these tracks in WordPress with the WP GPX Maps Plugin. This was a great find to easily show my GPX tracks right inside blog posts. Thanks to the Authors!

Here is a simple track shown with the extra easy and fun WP GPX Maps plugin:

Editing Dreamweaver Templates and CSS Style Issues

*Note: is is for .php templates…

When a content editor is using Dreamweaver templates to edit the static website you are developing, it is always a chore (until now!) to have the design view show all of the editable content areas when css might be used to hide a block for example. The key I have found is to simply make the stylesheet only render on page load.

For example use:

…rather than just using the standard:

In design view the content editor will only be able to focus on their content since all the css will be turned “off” in effect.

Hope that helps someone.

Single List with Multiple Columns ala CSS3

Long lists need to be displayed differently on different devices generally. CSS3 can ease your pain by dividing these up for you via the column-gap property.

Apply your css like so:

Create a simple:

Render!

To extend this, you can then utilize media queries to have a different number of columns on different devices / screen sizes. This will keep your lists together, if they are long, rather than needing to divide them up in order to make them “look” even in the page.

Check out a demo or view it below…


1

Don’t go psycho nesting those SASS selectors

SASS

Nesting in SASS is wonderful, but also can become a NIGHTMARE! “Simple pictures are best” as one of my kids books always reminds the subjects. As a super simple idea.. Make sure your top level selectors are set before you zero in on specifics.

is an easy way to make sure all those links are white, however, making the “a” selector color at the parent level white would be better and simple to maintain.

Layout your project with the most generic selectors solidified at a parent level and then only overwrite what is necessary, when it is necessary.

Content Before Design

No Content Thought

Content matters. It really does. This might be hard to believe, but if you don’t have content your site won’t matter no matter how beautiful it turns out to be. I really cannot imagine “designing” a site around the thin air that is intended to be filled with who knows what. Lorem Ipsum can only go so far.

A website is only the sum of it’s content… that even goes for design sites like dribbble or behance for example, both of whose content is amazing! Take the time to organize your content and make it stand out from the crowd.

Making your content amazing = Making your website amazing.

Google Map V2 Android Maps Extensions and Passing Data to Activities

Working with Android (JAVA) is awesome. I love how you can write a little code and see a huge change in a UI. I’ve been fiddling with Google Maps V2 and a simple app. I need to pass some data based on the marker clicked to the next activity. You can do this by making a complicated HashMap for example or you can do this easily by using an awesome library called Android Maps Extensions.

Using Android Studio, the simplest way to get this setup going is to create a new project and select the Google Maps premade activity. Give it a name and click Finish.

Next, add Android Maps Extensions to your build.gradle (module: app) file:

Most likely your build file dependencies will look like so:

After adding this to your build file, click the menu item Build and select Rebuild Project. This will get Android Map Extensions working in your project.

You now need to change a few things in code. Go to your activity_maps.xml and update  your map fragment with:

android:name=”com.androidmapsextensions.SupportMapFragment”

My activity_maps.xml looks like so:

Next in your MapsActivity.class update the following:

  • Change getMap(); (around line 49) to getExtendedMap();
  • Update your imports to use Android Map Extensions.
    • Hint: Easy way to do this is to delete all google map related imports and click ALT+ENTER on any Red highlighted items.

Next, open the google_maps_api.xml file found in the values folder and follow the directions to get an API key and enter your key in that file.

Plug in your device or open an emulator and RUN your project. If all went well, you will have Android Maps Extensions running. You can now use the great features offered such as:

  • Marker Clusters
  • GetData()
  • SetData(object) <<<< Which I need to pass data to new activity!
  • etc…

Find out more on the Android Maps Extensions website.

Download the complete sample project (zip 10mb) : MyGoogleMapProject

 

SharePoint 2013 Bootstrap Carousel Photo App Library and SPServices

Sharepoint

Recently I have been working with quite a few different SharePoint 2013 sites. A few of these have had requests for image sliders. My go to framework for SharePoint 2013 has been the Bootstrap 3 responsive framework, so using the flexible Bootstrap 3 Carousel is a logical choice.

Note! This will only work if you are using the Bootstrap Framework already. If you are not, and would like a content slider check out some other options from Mark Rackley, Ben Tedder or Google.

The Carousel html is simple to setup in a static environment, but when it comes to loading data from a SharePoint 2013 library into the carousel we need to call upon the wonderful SPServices jQuery Library! There is a great youtube video by Mark Rackley showing how to use the Unslider in SharePoint with a different type of library that helped in the creation of this Bootstrap carousel.

There are four parts to this setup. Note! #2 is not a requirement.

  1. Create an App, a Photo Library app and call it HomepagePhotos and add some optimized (I used 970×400 jpg’s) images to it.
  2. Create an Image Rendition (If you can. Read Prerequisites on the MS page.) called HomepagePhotos and give it the dimensions you would like your slider image to be. I have mine set to 970×400 for example. Note the Image Rendition ID. It will probably be 5 if you add a new one.
  3. Create a single JavaScript file in your SiteAssets folder called slider.js and paste the code below into your slider.js file.
  4. Add a Content Editor WebPart to your page and load the ../SiteAssets/slider.js file.

After you have added your CEW and linked to your slider.js file, save your page, check it in and publish it.

If all went well, you will see your Carousel begin. Hopefully this worked well for you. If you ran into issues, maybe I can help! Leave a comment below.

*BONUS! There is a wonderful set of Bootstrap Carousel’s by Rico Loschke on sevenx.de.