Friday, April 23, 2010

Creating backgrounds: it's easy (part 1)

During developing UI applications for Android, you often have to work with images: icons, backgrounds and others. If you need icon, you (or your designer) paint it using some image editor, like PhotoShop. But what should you do when it needs to create just a simple background for your widget? Install an image editor, research that, and then create background? - Too many actions for creating a simple background.

Android SDK provides a set of easy ways to define backgrounds, and one of them is the shape drawable XML element. For instance, here is a rounded green drawable:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    
<solid android:color="#FF00FF00"/>
    
<corners android:radius="8dp" />
</shape>

Let create a simple rounded App widget that has an icon and text with a transparent background:


It changes own view on selecting and pressing, like a lot of Android widgets (icons on Home, buttons etc.):

State Selected

State Pressed


Here is the background drawable of App widget:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
<item android:state_window_focused="false" android:drawable="@drawable/bg_normal" />
    
<item android:state_pressed="true" android:drawable="@drawable/bg_pressed" />
    
<item android:state_focused="true" android:drawable="@drawable/bg_selected" />
    
<item android:drawable="@drawable/bg_normal" />
</selector>

Normal background (bg_normal.xml) has transparent color and rounded corners:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    
<solid android:color="#AA111111"/>
    
<padding android:left="6dp" android:top="6dp"
         android:right
="6dp" android:bottom="6dp" />
    
<corners android:radius="8dp" />
</shape>


Selected (bg_selected.xml) and Pressed (bg_pressed.xml) backgrounds extend Normal background by adding border and changing background color. They look alike, just have different border colors (#FFEEC000 - for pressed, #FFFF8000 - for selected):

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    
<solid android:color="#A777"/>
    
<padding android:left="6dp" android:top="6dp"
         android:right
="6dp" android:bottom="6dp" />
    
<corners android:radius="8dp" />
    
<stroke android:width="4dip" android:color="#FFFF8000" />
</shape>

Wednesday, April 14, 2010

Android system images (eng)

HTC provides images of their devices that can be run by the Android emulator.
Just download necessary system image from HTC developer center page, create a new Android virtual device and put the downloaded image into the created AVD folder. Then start the emulator.

Next are a few screen shots.



After you sign in with a Google account, you have access to all of the market apps right from the emulator.

Friday, April 2, 2010

Android resources (eng)

Do you know Android SDK contains all resources used by standard widgets? Icons, animations, styles and so on.
They are placed on the <Android SDK folder>/data/res folder. And it is possible to use them directly, so it is not necessary to add them into project.


For example, here is a checked list view that uses starts instead of habitual marks:

To do that just do next:
  • Define list view item layout (let call it star_checked_item). You can use standard layout for android.R.layout.simple_list_item_checked - layouts/simple_list_item_checked.xml file.
        <CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+android:id/text1"
            android:layout_width="fill_parent"
            android:layout_height="?android:attr/listPreferredItemHeight"
            android:textAppearance="?android:attr/textAppearanceLarge"

            android:gravity="center_vertical"
            android:checkMark="@android:drawable/btn_star" <!-- Mark style -->
            android:paddingLeft="6dip"
            android:paddingRight="6dip"/>
  •  Use this layout in list view adapter
         ArrayAdapter adapter = new ArrayAdapter(this, R.layout.star_checked_item); 
         list.setAdapter(adapter);

Android resources

Знаете ли вы, что Android SDK содержит ресурсы, которые используются стандартными контролами? Это иконки, анимации, стили, лайауты и пр.
Все они находится в папке <Android SDK folder>/data/res. При этом, к ним можно обращаться напрямую, то есть нет необходимости добавлять их в свой проект.

Вот, например, приложение, которое представляет собой checked list view, только использует звездочки вместо привычных галочек для своих элементов:

Все, что надо для этого - это:
  • Определить лайаут для элеметов списка (назовем его star_checked_item) Можно использовать как шаблон лайаут для android.R.layout.simple_list_item_checked - файл layouts/simple_list_item_checked.xml
        <CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+android:id/text1"
            android:layout_width="fill_parent"
            android:layout_height="?android:attr/listPreferredItemHeight"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:gravity="center_vertical"
            android:checkMark="@android:drawable/btn_star" <!-- Стиль метки -->
            android:paddingLeft="6dip"
            android:paddingRight="6dip"/>
  •  Использовать этот лайаут в адаптере
         ArrayAdapter adapter = new ArrayAdapter(this, R.layout.star_checked_item); 
         list.setAdapter(adapter);