Gradient background in iOS without images

One way to set a gradient background to a UI component is to create an image with the gradient colors and then assign it as the background image of the component. The alternative presented in this post is the use of the class CAGradientLayer.

A CAGradientLayer object is defined by these properties:

  • colors. An array of CGColorRef objects defining the color of each gradient stop.
  • locations. An optional array of NSNumber objects defining the location of each gradient stop.
  • startPoint. The start point of the gradient when drawn in the layer’s coordinate space. Default value is (0.5, 0.0).
  • endPoint. The end point of the gradient when drawn in the layer’s coordinate space. Default value is (0.5, 1.0).
 The first step is to import the QuartzCore package into your class. Do this by selecting your project target, then selecting “Build Phases” and “Link Binary With Libraries”. Press the add button and search for QuartzCore.

Add QuartzCore

Add this line to your import section.

#import <QuartzCore/QuartzCore.h>

In this example we are setting the gradient as the background of our view. Add the next code into the viewDidLoad method of the view.

// Create the colors
UIColor *darkOp =
 [UIColor colorWithRed:0.62f green:0.4f blue:0.42f alpha:1.0];
UIColor *lightOp =
 [UIColor colorWithRed:0.43f green:0.76f blue:0.07f alpha:1.0];

// Create the gradient
CAGradientLayer *gradient = [CAGradientLayer layer];

// Set colors
gradient.colors = [NSArray arrayWithObjects:
    (id)lightOp.CGColor,
    (id)darkOp.CGColor,
    nil];

// Set bounds
gradient.frame = self.view.bounds;

// Add the gradient to the view
[self.view.layer insertSublayer:gradient atIndex:0];

Gradient iOS A

Try to change the default locations with this code:

gradient.locations = [NSArray arrayWithObjects:
    [NSNumber numberWithFloat:0.0f],
    [NSNumber numberWithFloat:0.2],
    nil];

Gradient iOS B

Read More

Load a POST request into a WebView in Android

The standard way to load an URL into a WebView object is using the loadUrl method.

public void loadUrl (String url)

But if we need to load an URL into the WebView submitting POST data, use instead the postUrl method.

public void postUrl (String url, byte[] postData)

To create the POST data, use a string and encode it.

String postData = "submit=1&id=236";

webview.postUrl(
    "http://www.belencruzz.com/exampleURL",
    EncodingUtils.getBytes(postData, "BASE64"));

Read More

Introduction to software vulnerabilites

According to MITRE’s CVE Terminology, a vulnerability is a mistake in software that can be directly used by a hacker to gain access to a system or network, a state in a computing system which either:

  • Allows an attacker to execute commands as another user.
  • Allows an attacker to access data that is contrary to the specified access restrictions for that data.
  • Allows an attacker to pose as another entity.
  • Allows an attacker to conduct a denial of service.

Life cycle

The vulnerability life cycle consists of four events:

  • Discovery date. Somebody discovers that the vulnerability exists.
  • Disclosure date. A trusted security organization or the vulnerable software producer discloses the vulnerability existence.
  • Exploit date. Somebody creates an attack which exploits the vulnerability.
  • Patch date. Vulnerable software producer provides a solution or patch to protect the system.

It is not necessary that these four events occur in the vulnerability life cycle. A vulnerability can be exploited with no previous disclosure or can be patched with no previous exploit.

Vulnerability databases

Several databases store relevant data about vulnerabilities. Some examples are:

Read More

Droidcon Spain 2012

Yesterday I attended the I International Conference “Technological Innovation in a Mobile World” 2012. The conference was held in the Faculty of Economics and Business of the University of Murcia, Spain, and took place jointly with Droidcon, the international conference which deals with the technical and economic aspects of the mobile-devices platform Android.

Droidcon Murcia poster
Opening conference

 

More pics here.

Droidcon Spain Official Site

Some conference slides

Read More

Rounded button with shadow in Android

To create a rounded button, we need to create a new shape resource and configure it as shown below. This shape resource has to be assigned to the button as background, and can not only be applied to a button, but also to any component, like text fields, list elements, etc.

Rounded corners

Create the resource file in /res/drawable with “shape” as root element and include the element “corners”. This element has the attribute “radius” to set the value of the radius for all corners. To set different values for different corners, use the attributes “bottomRightRadius”, “bottomLeftRadius”, “topRightRadius” and “topLeftRadius”.

<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android"> 
   <gradient
     android:startColor="@color/drk_button"
     android:endColor="@color/lgt_button"
     android:angle="90">
   </gradient>

   <corners android:radius="20dip" />
  
   <stroke 
     android:width="1px" 
     android:color="@color/drk_button" />
</shape>

The gradient element is a gradient background and the stroke element configures the border of the button.

Shadow

The next step is to create the shadow. The effect of the shadow can be done by adding a second shape under the original button shape, changing its color to a darker one.

<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">

     <solid android:color="@color/black_alpha"/>
     <corners android:radius="20dip"/>

</shape>

To overlap different items we have to use a “layer-list” resource and include the previous shapes. The shadow should appear in first place and then the original button with some displacement. In this example, we are creating the shadow at the bottom of the button and an offset of 4px.

<layer-list 
xmlns:android="http://schemas.android.com/apk/res/android">

   <item android:drawable="@drawable/shadow"/>
   <item 
     android:drawable="@drawable/button"
     android:bottom="4px" />  

</layer-list>

Compare results

Compare buttons

Read More

Load ImageView from URL in Android

Sometimes we need to show images in our Android application that are available in a remote server and can not be created as drawable resources. To load one of these images into an ImageView object, the image has to be turn from the URL into a bitmap. The following method solves this.

public boolean loadImageFromURL(String fileUrl, 
ImageView iv){
  try {

    URL myFileUrl = new URL (fileUrl);
    HttpURLConnection conn =
      (HttpURLConnection) myFileUrl.openConnection();
    conn.setDoInput(true);
    conn.connect();

    InputStream is = conn.getInputStream();
    iv.setImageBitmap(BitmapFactory.decodeStream(is));

    return true;

  } catch (MalformedURLException e) {
    e.printStackTrace();
  } catch (Exception e) {
    e.printStackTrace();
  }

  return false;
}

Remember to grant the permission “android.permission.INTERNET” in the AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET"/>

Read More

Gradient Background in Android

An easy way to change the style of your mobile application is to add gradient backgrounds to the view components. In this example, we are adding a gradient background to the elementes of a list view.

No gradient

Firstly, define the colors in your Android xml file of resources. If you do not have a file of color resources, create it in the /res/values folder.

Create Resource File

In this example, we are using two different tones of grey.

<resources> 
  <color name="greyMed">#C9C9C9</color> 
  <color name="greyLgt">#ECECEC</color> 
</resources> 

Next step is to create a drawable resource in /res/drawable folder with Shape as root element.

Create gradient xml file

In a list view item, the shape is a rectangle and the gradient is created inside this shape. The gradient tag has the startColor and endColor attributes, that configure the gradient color, and the angle attribute that configure the angle of the gradient in degrees.

Gradient 2 colors

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
  <gradient 
    android:startColor="@color/greyMed" 
    android:endColor="@color/greyLgt" 
    android:angle="90"> 
  </gradient> 
</shape>

The gradient tag has also the attribute centerColor.

gradient 3 colors

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
  <gradient 
    android:startColor="@color/greyMed" 
    android:centerColor="@color/greyLgt" 
    android:endColor="@color/greyMed" 
    android:angle="90"> 
  </gradient> 
</shape>

Or we can change the angle. The angle is an integer value that must be a multiple of 45. A value of 0 is left to right or a value of 90 is bottom to top.

Gradient 180 angle

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
  <gradient 
    android:startColor="@color/greyMed" 
    android:endColor="@color/greyLgt" 
    android:angle="135"> 
  </gradient> 
</shape>

Finally, another important attribute is the type. The attribute type has three valid values:

  • “linear”. This is the default value. A linear gradient as the previous examples.
  • “radial”. It requires to specify the attribute gradientRadius which is a float value.
  • “sweep”. A sweeping line gradient.

Read More

Reduce the file size of an image using Adobe Fireworks

The file size of images is very important to the optimization of a mobile application, website and above everything, a web mobile application.  Decreasing the file size of your images will allow your application to load faster and to reduce the amount of data transmitted.

Open Adobe Fireworks, load your image and press Ctrl + Shift + X to open the export window. Depending on the image format selection, some configuration parameters will be shown. On the right you will see the final image size. Once you are satisfied with your size, export it.

El tamaño de los ficheros de imagen es muy importante para la optimización de una aplicación móvil, un sitio web y sobretodo, una aplicación móvil basada en web. Reducir el tamaño de los ficheros de las imágenes va a permitir que tu aplicación cargue más rápido y que disminuya la cantidad de datos transferidos.

Abre Adobe Fireworks, carga la imagen y pulsa Ctrl + Mayús. + X o ve al menú “Archivo” > “Presentación preliminar de la imagen”. Según el formato de imagen que seleccionemos, aparecerán varios parámetros de configuración. En la parte derecha, se irá indicando el tamaño final de la imagen. Una vez conforme con el tamaño, dale al botón de exportar.

 Fireworks Option

 

Fireworks export

Version: Adobe Fireworks CS5, 11.0.1.7

Read More

How to hide Title and set Fullscreen mode in Android

To hide the activity view title programmatically, insert the following line in the onCreate method of the main activity:

requestWindowFeature(Window.FEATURE_NO_TITLE);

To set fullscreen mode, add this one:

getWindow().setFlags(
   WindowManager.LayoutParams.FLAG_FULLSCREEN,
   WindowManager.LayoutParams.FLAG_FULLSCREEN);

The onCreate method would look like:

@Override
public void onCreate (Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  requestWindowFeature(Window.FEATURE_NO_TITLE); 

  getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_FULLSCREEN,
    WindowManager.LayoutParams.FLAG_FULLSCREEN);

  setContentView(R.layout.main);
}

Read More

Expand disk size with VMware vSphere Client

To expand the disk size of a virtual machine (VM) using VMware vSphere Client, are needed these two steps:

  1. Change the properties of the VM in vSphere Client.
  2. Resize the disk space from the guest operating system (OS) in the VM.

 Step 1

In vSphere Client, edit the properties of the VM using the option “Edit Settings”. In the properties window, select the hard disk to be extended and change its size (“Provisioned Size” option).

VM properties

To check this step, in the guest OS of the VM, verify the unallocated space on the disk. If you are using Windows Server, open the “Management Console” > “Disk Management”.

Step 2

The second step is to resize the disk space from the guest OS in the VM. In Window Server versions, use the Disk Management Tool.

In Windows Server 2003 or earlier versions, download Dell’s ExtPart utility from here. Extract it by default in c:\dell\ExtPart and run the executable. Windows Console will be prompted. Enter the volume and the size to expand it.

ExtPart in console

Job done.

Read More