Monday, September 17, 2012

Spinner and its settings

Spinner is quite a handy widget when you have a set of options to select from.

In the layout file, add the spinner widget with its width and height. Dropdown items of spinner can be taken from an array.


Use an array adapter to attach these values to the spinner.


ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
              this, R.array.lorem, android.R.layout.simple_spinner_item);
myspinner.setAdapter(adapter);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);


But I faced a  problem that text color and gravity for spinner. Text color was  black and gravity was left even after setting proper values in xml file.

Now I created a theme in /res/values/styles.xml file as follows

<style parent="@android:style/Theme" name="my_theme">
 <item name="android:textColor">@android:color/white</item> 
<item name="android:gravity">center_horizontal</item> 
</style>

And then applied this theme to the activity in AndroidManifest,xml file of the application as

<activity android:name=".myactivity"   android:theme="@style/my_theme" />

Good. Now my spinner was looking nice with a background, an arrow, white text which is centered.

But the theme made the background and text both white, for dropdown items of the spinner



I created an xml file, language_options.xml  for the textview as follows

<?xml version="1.0" encoding="UTF-8"?>
<TextView 
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="20dp" 
android:gravity="left" 
android:textColor="@android:color/black" android:layout_height="wrap_content" android:layout_width="fill_parent" 
android:id="@+id/tv" > </TextView>



Then changed this for dropdownviewresource.

adapter.setDropDownViewResource(R.layout.language_options);

This textview is used for each of dropdown items in the pop up screen for spinner.

Next to add a title to the pop up screen I added this line


spInputLanguage.setPrompt("Select One");


Now this is how spinner items look like




Saturday, September 15, 2012

Drawables in android - Part I

Have you ever gushed over beautiful , very beautiful UI of your android apps? Sorry, most of the times these are iphone apps. That does not mean you can try to create beautiful UIs in android app.

You can create a gradient background to your button of layout using xml easily. But today let us consider how it is done using code.




int colors2[] = new int[]{Color.CYAN, Color.WHITE,Color.CYAN};

GradientDrawable grDr =new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors2);

grDr.setCornerRadius(5);

grDr.setGradientType(GradientDrawable,LINEAR_GRADIENT);

grDr.setStroke(1,Color.WHITE);
btn.setBackgroundDrawable(grDr);





This is how the button would look.

The code is almost self explanatory. The constructor of GradientDrawable takes the orientation of gradient and array of colors as parameter. Orientation can be top to bottom, bottom to top, left to right etc, or TL_BR or TR_BL (top left to bottom right - diagonal and top right to bottom left). Unlike xml, the colors can be more than 3. Stroke is the line surrounding the gradient with first parameter as thickness of the line.

If you are more creative, you need to restrict yourself with java colors, you can even use html color codes.

e.g.

int

colors[] = new int[]{Color.parseColor("#451d42"),Color.parseColor("#efa5bc") ,


Color.parseColor("#b67caf"),Color.parseColor("#1e3e65"),Color.parseColor("#3224af")};


The parseColor function will convert html color code to java int color. Its string parameter is the code in the form #RRGGBB. If you provide improper code, it throws invalid argument exception at runtime.

Instead of linear gradient, you can have radial gradient or sweep gradient. The shape of gradient can be rectangle, line, oval or ring.

To use radial or radial gradient, you have to mention center of gradient and the radius. The center 1,1 is taken as lower right corner, 0,0 as upper left corner of your widget. Look at this radial gradient

 And the code for this radial gradient shown in the begining of post is

 int colors[]= new int[]{Color.parseColor("#cff2f5"), Color.parseColor("#23c5ca"),Color.parseColor("#21b1b9")};
 GradientDrawable grDr = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors);
grDr.setGradientType(GradientDrawable.RADIAL_GRADIENT);
grDr.setGradientCenter(0,0.5f);
grDr.setGradientRadius(600);

By setting gradient type to sweeping, (and you need not set radius or center), you can create even more colorful gradients as shown below

int colors2[] = new int[]{Color.BLUE,Color.YELLOW,Color.RED,Color.GREEN,Color.MAGENTA,Color.WHITE};
 GradientDrawable grDr = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors);  
grDr.setGradientType(GradientDrawable.RADIAL_GRADIENT);

In the next post, we will see how to use layer drawable.