About design and nearby

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 »

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 »

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 »

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 »

How to Align Android EditText and Button on the Same Line

Posted: June 30th, 2015 | Author: | Filed under: Mobile Design and Development | Tags: , , , , , | No Comments »

Sometimes even such easy question as aligning an EditText beside a button could be tricky. The EditText should fill as much of the width as possible and the button should be at the right hand side and does not take additional space at the top/ bottom:

How to align EditText and Button

The solution for me is to use LinearLayout to display the elements in the order they were added and set EditText layout_width to fill_parent and its layout_weight to 1 (100% of width, the button covers the rest):

Read the rest of this entry »

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

Let's discuss your project now