Android Design for UI Developers

Google I/O 2013 tutorial, Android Design for UI Developers:

In this tutorial video, will explore the arsenal of tools available to Android UI engineers that let developers implement some of these important guidelines, including responsive design with multi-pane layouts, metrics and layout grids, and core navigation components.

Android Studio 0.2.11 Released

Download and Read more: Android Studio 0.2.11 Released.

Convert Bitmap to gray-scale with ColorMatrix

To convert Bitmap to gray-scale, we can apply ColorMatrix with the following matrix:

   //Array to generate Gray-Scale image
float[] GrayArray = {
0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
};

Convert Bitmap to gray-scale with ColorMatrix


package com.example.androiddrawbitmap;

import java.io.FileNotFoundException;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

Button btnLoadImage;
ImageView imageResult;

final int RQS_IMAGE1 = 1;

Uri source;
Bitmap bitmapMaster;
Canvas canvasMaster;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

btnLoadImage = (Button) findViewById(R.id.loadimage);
imageResult = (ImageView) findViewById(R.id.result);

btnLoadImage.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
Intent intent = new Intent(
Intent.ACTION_PICK,
android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(intent, RQS_IMAGE1);
}
});

}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);

if (resultCode == RESULT_OK) {
switch (requestCode) {
case RQS_IMAGE1:
source = data.getData();

try {
bitmapMaster = BitmapFactory
.decodeStream(getContentResolver().openInputStream(
source));
loadGrayBitmap(bitmapMaster);

} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

break;
}
}
}

private void loadGrayBitmap(Bitmap src) {
if (src != null) {

//Array to generate Identity image
float[] IdentityArray = {
1.0f, 0.0f, 0.0f, 0.0f, 0.0f,
0.0f, 1.0f, 0.0f, 0.0f, 0.0f,
0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
};

//Array to generate Gray-Scale image
float[] GrayArray = {
0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
};

ColorMatrix colorMatrixGray = new ColorMatrix(GrayArray);

int w = src.getWidth();
int h = src.getHeight();

Bitmap bitmapResult = Bitmap
.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvasResult = new Canvas(bitmapResult);
Paint paint = new Paint();

ColorMatrixColorFilter filter = new ColorMatrixColorFilter(colorMatrixGray);
paint.setColorFilter(filter);
canvasResult.drawBitmap(src, 0, 0, paint);

imageResult.setImageBitmap(bitmapResult);
}
}

}


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />

<Button
android:id="@+id/loadimage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Load Image 1" />

<ImageView
android:id="@+id/result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="@android:color/background_dark"
android:scaleType="centerInside" />

</LinearLayout>


download filesDownload the files.

download filesDownload and try the APK.

Remark: This exercise aim to demonstrate the matrix. Actually you can setSaturation(0) of  ColorMatrix to do the same effect.



more: Something about processing images in Android

Enable Developer Options for devices with Android 4.2 and higher

On devices running Android 4.2 and higher, the Developer options is hidden by default. To enable Developer Options, go to Settings > About phone and tap Build number seven times, the detail steps may various depends on model.

Here is the steps to enable Developer Options on HTC One X running Android 4.2.2:

- Open Settings, select About.


- Open Software information


- Open More


- Tap on Build number 7 times


- You are now a developer!
- The Developer Options will be in Settings.