About design and nearby

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

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

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>

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 »

Android Tricks: ‘drawable’ Objects, or how to Draw a Circle

Posted: June 17th, 2015 | Author: | Filed under: Mobile Design and Development | Tags: , , , , , , , | 1 Comment »

Android supports all sorts of ‘drawable’ objects, or ‘something that can be drawn.’ Drawables may take a variety of forms:

  • Bitmap: a *.png or *.jpeg image.
  • 9-Patch: an extension to the *.png format with stretchable regions.
  • Layers: manages an array of other drawables. These are drawn in array order, so the element with the largest index is be drawn on top.
  • States: an XML file that references different bitmap graphics based on its state.
  • Levels: an XML file that defines a drawable that manages a number of alternate Drawables, each assigned a maximum numerical value.
  • Scale: an XML file that defines a drawable that changes the size of another Drawable based on its current level value.
  • Shape: an XML file that defines a geometric shape, including colors and gradients.

Drawable object: shape

Standalone drawable objects are probably not very useful, but their combinations can be helpful for implementation of design ideas.

Let’s talk about an app there it’s logo should be placed inside the circle (Icon.png is my Android logo file).

It’s easy to realize with drawable object with ‘android:background’ attribute like below (‘FrameLayout’ is used to block out an area on the screen to display my single item).

Read the rest of this entry »

Freebie: Layered iPhone 6 PSD mockup

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

During the last years mobile has evolved from a simple toy to hyper operative tool. Mobile application industry has become a huge market for design industry. No matter what your business is, a mobile app can help you get customers – that’s it.

From my side I would say there are more and more mobile projects come and market is still growing. If you work as a web/ graphic/ mobile designer like me, then you want to showcase your mobile app design to public and customers in a trendy and realistic form.

iPhone6 layered PSd freebie

To do it elegantly feel free to use my free mockups (for iPhone 6).

Layered PSD files include smart object for easy editing, background /background color can be changed also. Just drop your creative works into the templates in the Photoshop:

Download iPhone 6 PSD mockups

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

Let's discuss your project now