About design and nearby

Xamarin.Forms: Power of RelativeLayout

Posted: January 4th, 2017 | Author: | Filed under: Development, Mobile Design and Development | Tags: , , , , , , , , | No Comments »

RelativeLayout is used for creating adaptive layouts based on their parent’s and other views’ position and dimensions.

For me RelativeLayout is the solution to apply an image as the background for some components. Say, I have a Label on page and would like to overlay it with a background image:

RelativeLayout - Image as a background

Each element in the RelativeLayout can define a constraint (RelativeLayout.YConstraint, RelativeLayout.XConstraint, RelativeLayout.WidthConstraint, RelativeLayout.HeightConstraint) which defines how the element relates to other items.
Read the rest of this entry »

Share Button

Responsive Tables for Mobile Devices

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

You have a great website with responsive design and number of tables which fit the smaller viewports well.. say, like described in my post Responsive Tables. Every table has horizontal scroll for mobile-sized view, without breaking layout. It happens because of CSS settings for the table ‘display:block;’ and ‘overflow-x:auto;’. A user can swipe right and left to horizontal scroll the table to see the content.
A bad news is the user has no indication that they can swipe to the right (the momentum effect) – many mobile browsers don’t show scrollbars at all, while some show them only while scrolling…

The solution is to use

  1.  overflow-x: scroll; /* instead of 'auto' */
  2.  -webkit-overflow-scrolling: touch;

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

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

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 »

Share Button

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

Let's discuss your project now