15 BEST EXAMPLES OF ANDROID UI DESIGNS FOR YOUR INSPIRATION

Looking for examples of Android UI designs to give yourself some ideas to start your own projects? .

GRIDVIEW LAYOUT TUTORIAL

Looking for Basic GridView Layout tutorial?

maandag 16 december 2013

Android Styles and Themes

If you already know about Cascading Style Sheet (CSS) in web design then to understand Android Style also works very similar way. There are number of attributes associated with each Android widget which you can set to change your application look and feel. A style can specify properties such as height, padding, font color, font size, background color, and much more.
You can specify these attributes in Layout file as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

   <TextView
   android:id="@+id/text_id"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:capitalize="characters"
   android:textColor="#00FF00"
   android:typeface="monospace"
   android:text="@string/hello_world" />

</LinearLayout>
But this way we need to define style attributes for every attribute separately which is not good for source code maintenance point of view. So we work with styles by defining them in separate file as explained below.

Defining Styles

A style is defined in an XML resource that is separate from the XML that specifies the layout. This XML file resides under res/values/ directory of your project and will have <resources> as the root node which is mandatory for the style file. The name of the XML file is arbitrary, but it must use the .xml extension.
You can define multiple styles per file using <style> tag but each style will have its name that uniquely identifies the style. Android style attributes are set using <item> tag as shown below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle">
      <item name="android:layout_width">fill_parent</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:capitalize">characters</item>
      <item name="android:typeface">monospace</item>
      <item name="android:textSize">12pt</item>
      <item name="android:textColor">#00FF00</item>/> 
   </style>
</resources>
The value for the <item> can be a keyword string, a hex color, a reference to another resource type, or other value depending on the style property.

Using Styles

Once your style is defined, you can use it in your XML Layout file using style attribute as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

   <TextView
   android:id="@+id/text_id"
   style="@style/CustomFontStyle"
   android:text="@string/hello_world" />

</LinearLayout>
To understand the concept related to Android Style, you can check Style Demo Example.

Style Inheritance

Android supports style Inheritance in very much similar way as cascading style sheet in web design. You can use this to inherit properties from an existing style and then define only the properties that you want to change or add.
Its simple, to create a new style LargeFont that inherits the CustomFontStyle style defined above, but make the font size big, you can author the new style like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle.LargeFont">
      <item name="android:textSize">20ps</item>
   </style>
</resources>
You can reference this new style as @style/CustomFontStyle.LargeFont in your XML Layout file. You can continue inheriting like this as many times as you'd like, by chaining names with periods. For example, you can extend FontStyle.LargeFont to be Red, with:
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle.LargeFont.Red">
      <item name="android:textColor">#FF0000</item>/> 
   </style>
</resources>
This technique for inheritance by chaining together names only works for styles defined by your own resources. You can't inherit Android built-in styles this way. To reference an Android built-in style, such as TextAppearance, you must use the parent attribute as shown below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle" parent="@android:style/TextAppearance">
      <item name="android:layout_width">fill_parent</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:capitalize">characters</item>
      <item name="android:typeface">monospace</item>
      <item name="android:textSize">12pt</item>
      <item name="android:textColor">#00FF00</item>/> 
   </style>
</resources>

Android Themes

Hope you understood the concept of Style, so now let's try to understand what is a Theme. A theme is nothing but an Android style applied to an entire Activity or application, rather than an individual View.
Thus, when a style is applied as a theme, every View in the Activity or application will apply each style property that it supports. For example, you can apply the same CustomFontStyle style as a theme for an Activity and then all text inside that Activity will have green monospace font.
To set a theme for all the activities of your application, open the AndroidManifest.xml file and edit the<application> tag to include the android:theme attribute with the style name. For example:
<application android:theme="@style/CustomFontStyle">
But if you want a theme applied to just one Activity in your application, then add the android:theme attribute to the <activity> tag only. For example:
<activity android:theme="@style/CustomFontStyle">
There are number of default themes defined by Android which you can use directly or inherit them using parent attribute as follows:
<style name="CustomTheme" parent="android:Theme.Light">
    ...
</style>
To understand the concept related to Android Theme, you can check Theme Demo Example.

Default Styles & Themes

The Android platform provides a large collection of styles and themes that you can use in your applications. You can find a reference of all available styles in the R.style class. To use the styles listed here, replace all underscores in the style name with a period. For example, you can apply the Theme_NoTitleBar theme with "@android:style/Theme.NoTitleBar". You can see the following source code for Android styles and themes:

Android Styles (styles.xml)
Android Themes (themes.xml)

Customizing Component Styles


At this point you might be done. Your app has a little bit custom theme and looks a bit different from apps that only use the default theme. But what if you are not happy with the button style want to change your component styles as well? Not to worry. There's a webapp for that too. The Android Holo Colors Generator will help you. It is a very simple tool that lets you define colors for your components. You pick the color you want and which components you want to replace and you're set. Of course, this is just a very small change to the default theme but if you want to change the component styles even more you can use the generated assets as the starting point and edit them in a tool of your choice.

Tip: to keep things separated give this style a different name than you gave to the action bar style.

In this example I've replaced the button as well as the edit text.













The same way as the other generators this webapp generates a ZIP file you need to download and extract into your app. It contains drawables as well as XML files.

Now you just need to enable the style in your app. This time we cannot do the same thing we did earlier with the action bar styles as that would override the action bar style. Instead, we can use make the new style the parent of the style we generated for the action bar. Look for the theme name defined in the new component style you created and change that to be the parent of the action bar style. As the component style has the Android Holo theme as its parent our app theme is still a Holo theme.



Styling the Action Bar


The Android action bar is the most prominent UI element of most Android apps. Using the default style doesn't make sense an you will definitely want to style it to make your app look unique. Fortunately there's an easy to use online tool that makes it easy for you: the Android Action Bar Style Generator. This free webapp lets you type in the colors you've chosen to use in your app and it will generate all the necessary files you need for your app.




Note: don't use caps or spaces in the syle name. It is used to name all the assets that are being generated. Use only characters that are allowed in Android resources!

Once you're done download the generated ZIP file and copy it's content to into your app. You'll find different drawables and XML files in the zip. They all go to the res folder of your app.


Once you have copied them to your app project you simply need to enable the created theme. The name of the theme is what you gave it in the webapp. You'll find it in the values folder from the generated styles file:



To enable the generated style you must add it into your app's manifest. Simply set the app style to point to the generated style:

XML Parsing

In this example we will learn how to parse xml in android.
For better understanding taking a simple and static xml to parse.

Project Structure :


zondag 15 december 2013

GridView Layout Tutorial

Basic GridView Layout


















  1. Create a new project by going to File ⇒ New Android Project and fill required details. (I named my main activity as MainActivity.java)
  2. Prepare your images which you want to show in grid layout and place them in res ⇒ drawable-hdpi folder.
  3. Create a new XML layout under layout and name it as grid_layout.xml (Right Click) layout ⇒ New ⇒ Android XML File
  4. Create a new Class by right clicking on (Right Click) src ⇒ package folder ⇒ New ⇒ Class and name your class as ImageAdapter.java
  5. Extend your ImageAdapter.java class from BaseAdapter and fill it with following code.
  6. Open your main activity class as shown in AndroidGridLayoutActivity.java
  7. Run your project
grid_layout.xml
<?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/grid_view" android:layout_width="fill_parent" android:layout_height="fill_parent" android:numColumns="auto_fit" android:columnWidth="90dp" android:horizontalSpacing="10dp" android:verticalSpacing="10dp" android:gravity="center" android:stretchMode="columnWidth" > </GridView>
ImageAdapter.java
package com.androiduidesign.gridviewexample;


import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.image_1, R.drawable.image_2,
            R.drawable.image_3, R.drawable.image_4,
            R.drawable.image_5, R.drawable.image_6,
            R.drawable.image_7, R.drawable.image_8,
            R.drawable.image_9, R.drawable.image_10,
            R.drawable.image_11, R.drawable.image_12,
            R.drawable.image_13, R.drawable.image_14,
            R.drawable.image_15
    };

  // Constructor
    public ImageAdapter(Context c){
        mContext = c;
    }

    @Override
    public int getCount() {
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int position) {
        return mThumbIds[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
        return imageView;
    }

}
MainActivity.java
package com.androiduidesign.gridviewexample;


import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.AdapterView.OnItemClickListener;


public class MainActivity extends Activity {

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

       GridView gridView = (GridView) findViewById(R.id.grid_view);

       // Instance of ImageAdapter Class
       gridView.setAdapter(new ImageAdapter(this));
   }
}
Until now we displayed all images in simple grid layout. To this we can add functionality like showing selected image in fullscreen. For this we need to pass image resource id from grid view to new activity. 

  1. Create new XML file under layout folder and name it as image.xml and fill it following code.
  2. Create a new Activity by right clicking on (Right Click) src ⇒ package folder ⇒ New ⇒ Class and name your class as ImageActivity.java and type following code.
  3.  Modify your main activity class MainActivity.java. Added click event for grid element.
  4. Finally run your project

image.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView android:id="@+id/image_view"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>

</LinearLayout>
ImageActivity.java
package com.androiduidesign.gridviewexample;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class ImageActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.image);

        // get intent data
        Intent i = getIntent();

        // Selected image id
        int position = i.getExtras().getInt("id");
        ImageAdapter imageAdapter = new ImageAdapter(this);

        ImageView imageView = (ImageView) findViewById(R.id.image_view);
        imageView.setImageResource(imageAdapter.mThumbIds[position]);
    }

}