About design and nearby

SVG for Web: Hover Over Effect

Posted: April 28th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

SVG (Scalable Vector Graphics) is an image format for vector graphics.

Sweet Web Design vector icon

I love to use SVG in web and mobile projects and applications because:

  • *.svg files have small file sizes and compress well.
  • *.svg files scale to any size without losing clarity.
  • *.svg files look great on retina displays.
  • You can manipulate the SVG file with CSS

You can create such vectors with Adobe Illustrator.

After you save your image as *.svg, open the inline svg with any editor:
Read the rest of this entry »

Share Button

How to create Android VectorDrawables from Illustrator and use in your app

Posted: April 15th, 2016 | Author: | Filed under: Mobile Design and Development, Tips and Tricks | Tags: , , , , | No Comments »

Vector graphics native support is a dream :) for developers who have to export resources as a rasterized *.png file for each different device resolution which scale without losing definition. The Android SDK now has native support for basic vector graphics – since the release of API 21 (Android 5.0) we have VectorDrawable:

  1. android.graphics.drawable.VectorDrawable

A VectorDrawable is specified through XML with the format of the path data. And we can to reformat the vector images in some SVG files to convert them into a VectorDrawable XML file (the details of the shape are defined inside a XML element).

After you create your vector picture (I use Adobe Illustrator), save it as *.svg file:

How to create Vector Drawables

To convert the file into *.xml, I use online converter tool (there is a similar option in my favorite Android Studio.)

Place the final XML file into the ‘res/drawable’ directory of your app and reference to it in XML or Java code as to ordinary drawables:

How to addVectorDrawables in AndroidStudio
Read the rest of this entry »

Share Button

Using location.search to locate a parameter’s value

Posted: February 9th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

Once I worked on jQuery isotope and the task was to link to a specific category, so that users can come from other pages to the filtered category. So if I had a page with services list (services.html) and wanted to filter the services by design it would look like (services.html/?mode=design) and show the design proposition only.

I decided to use the value parameter:
1. ‘location.search’ property returns the querystring part of a URL; for http://www.swd.com/services.htm/?mode=design

  1. var x = location.search;

the result of ‘x’ is

  1. ?mode=design

Read the rest of this entry »

Share Button

How to Add ‘active’ class to menu tab in ASP.NET MVC

Posted: November 10th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | 1 Comment »

Every time you are working on application it’s a must to have the basic functionality to highlight selected menu item. In HTML it’s not a problem to add certain class to the navigation tab to highlight current page menu tab:

  1. <li class="selected"><a href="#">Home</a></li>

In MVC project you can dynamically set the active list item, based on the view that is being called. In other words, when the user is looking at the home page, the following HTML should be created:

  1. <ul>
  2. <li class="selected"><a href="#">Home</a></li>
  3. <li><a href="#">Services</a></li>                                
  4. </ul>

There are two ways to solve the issue even:

1. To do the above, I created MVC HTML helper class, containing method to apply my CSS class according to some conditions (MenuHelper.cs):

  1. using System;
  2. using System.Web.Mvc;
  3. using System.Web.Mvc.Html;
  4.  
  5. namespace YourWebApplication.Helpers
  6. {
  7.     /// <summary>
  8.     ///  Menu current active item helper class.
  9.     /// </summary>
  10.     public static class MenuHelper
  11.     {
  12.         /// <summary>
  13.         /// Determines whether the specified controller is selected.
  14.         /// </summary>
  15.         /// <param name="html"/>The HTML.
  16.         /// <param name="controller"/>The controller.
  17.         /// <param name="action"/>The action.
  18.         /// <returns></returns>
  19.         public static string IsSelected(this HtmlHelper html, string controller = null, string action = null)
  20.         {
  21.             const string cssClass = "selected";
  22.             var currentAction = (string)html.ViewContext.RouteData.Values["action"];
  23.             var currentController = (string)html.ViewContext.RouteData.Values["controller"];
  24.  
  25.             if (String.IsNullOrEmpty(controller))
  26.                 controller = currentController;
  27.  
  28.             if (String.IsNullOrEmpty(action))
  29.                 action = currentAction;
  30.  
  31.             return controller == currentController && action == currentAction ?
  32.                 cssClass : String.Empty;
  33.         }
  34.     }
  35. }

Read the rest of this entry »

Share Button

Android development: How to Center an ImageView

Posted: July 31st, 2015 | Author: | Filed under: Mobile Design and Development, Tips and Tricks | Tags: , , , , , , , | No Comments »

Android splash screen is used to show a user some kind of progress before the app loads completely. Or you can show case the app or company logo for a couple of second.

Android development: how to center an item

A typical splash screen consists of background (color or image) and a centered item.

I created a layout file for splash screen under Resources -> layout folder: activity_splash.axml.

There is no sense to use a LinearLayout for such simple layout (it’s for displaying a number of items in a row). So I started with a RelativeLayout. The key option for the relevant RelativeLayout is android:layout_centerInParent=”true”:

Read the rest of this entry »

Share Button

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now