Android. Themes and Styles. Использование тем и стилей.

Иногда приходится сталкиваться с необходимостью оформления приложения в разном цвете не изменяя расположения и размеров UI элементов.

В этой статье расскажу об использовании тем и стилей в android.
Будет показано как применять стили для Button, EditText, ListView, TextView.
Для начала создадим новый проект и добавим в него два новых activity.
Для одного мы будем применять Theme.Green для второго Theme.Blue.

Я проект назвал AndroidStyle. Дополнительные activity: BlueThemeActivity, GreenThemeActivity.
Вот так вот выглядит только-что созданный проект:

Не забываем прописать activity в AndroidManifest файле.

 <?xml version="1.0" encoding="utf-8"?>  
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
   package="com.lunevich.androidstyle"  
   android:versionCode="1"  
   android:versionName="1.0" >  
   //...

   <application  
     android:icon="@drawable/ic_launcher"  
     android:label="@string/app_name" >  
     //...

     <activity android:name=".activity.BlueThemeActivity" ></activity>  
     <activity android:name=".activity.GreenThemeActivity" ></activity>  

   </application>  
 </manifest>  

Теперь добавим layout которому мы будем менять тему. Назовем stylish.xml, добавим в него наши  UI элементы. Должно получиться что-то такое:

stylish.xml

 <?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:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:text="@string/app_name" />  
   <Button  
     android:id="@+id/btn"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="3dp"  
     android:text="@string/btn" />
   <LinearLayout  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_marginBottom="10dp"  
     android:layout_marginTop="10dp"  
     android:orientation="horizontal" >  
     <TextView  
       android:id="@+id/tv1"  
       style="?attr/textView1"  
       android:layout_width="fill_parent"  
       android:layout_height="wrap_content"  
       android:layout_weight="1"  
       android:gravity="center"  
       android:text="@string/tv1"  
       android:textAppearance="?android:attr/textAppearanceMedium" />  
     <TextView  
       android:id="@+id/tv2"  
       style="?attr/textView2"  
       android:layout_width="fill_parent"  
       android:layout_height="wrap_content"  
       android:layout_weight="1"  
       android:gravity="center"  
       android:text="@string/tv2"  
       android:textAppearance="?android:attr/textAppearanceMedium" />  
   </LinearLayout>  
   <EditText  
     android:id="@+id/editText"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_marginBottom="10dp"  
     android:ems="10"  
     android:inputType="text" >  
     <requestFocus />  
   </EditText>  
   <ListView  
     android:id="@+id/listView"  
     android:layout_width="fill_parent"  
     android:layout_height="fill_parent" >  
   </ListView>  
 </LinearLayout>  

Чтобы определить наши style="?attr/..." выделенные жирным шрифтом в stylish.xml нам необходимо добавить файл attrs.xml. Вот такой файл получается:

attrs.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <resources>  
   <attr name="textView1" format="reference" />  
   <attr name="textView2" format="reference" />  
 </resources>  

Можно приступить к написанию стилей. Я покажу пример для синего стиля.
В папке res/values/ создадим файл styles.xml и напишем в него наш синий стиль для UI элементов.
Вот такой файл должен получиться:

styles.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <resources>  

   <!-- =============== -->  
   <!--   Blue styles   -->  
   <!-- =============== --> 
 
   <!-- blue text view style -->  
   <style name="blue_text_view_1">  
       <item name="android:textColor">#60c4e4</item>  
       <item name="android:textSize">14sp</item>  
       <item name="android:gravity">center_vertical|left</item>  
       <item name="android:shadowDx">1.0</item>  
       <item name="android:shadowDy">1.0</item>  
       <item name="android:shadowRadius">1</item>  
       <item name="android:shadowColor">#DDD</item>  
   </style>  

   <!-- blue text view style -->  
   <style name="blue_text_view_2">  
       <item name="android:textColor">#60c4e4</item>  
       <item name="android:textSize">24sp</item> 
       <item name="android:textStyle">bold</item>  
       <item name="android:gravity">center_vertical|left</item>  
       <item name="android:shadowDx">1.0</item>  
       <item name="android:shadowDy">1.0</item>  
       <item name="android:shadowRadius">1</item>  
       <item name="android:shadowColor">#DDD</item>  
   </style>  

   <!-- blue button style -->  
   <style name="blue_button" parent="@android:style/Widget.Button">  
       <item name="android:background">@drawable/blue_button</item>   
   </style>  

   <!-- blue edit text style -->  
   <style name="blue_edit_text" parent="@android:style/Widget.EditText">  
       <item name="android:background">@drawable/blue_edit_text</item>  
   </style>  

   <!-- blue edit text style -->  
   <style name="blue_list_view">  
       <item name="android:listSelector">@drawable/blue_list_view_item</item>  
   </style> 
  
 </resources>  

В нашем стиле используются drawable ресурсы drawable/blue_button.xml, drawable/blue_edit_text.xml, drawable/blue_list_view_item.xml. Для blue_button, blue_edit_text и blue_list_view_item создадим в папке res  папку drawable и в ней файл blue_button.xml, blue_edit_text.xml и blue_list_view_item.xml. Добавим в наши созданные файлы вот такое контент ( он отвечает за внешний вид наших UI элементов ):

blue_button.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   <item android:state_pressed="true">  
     <shape>  
       <solid android:color="#449def" />  
       <stroke android:width="1dp" android:color="#2f6699" />  
       <corners android:radius="3dp" />  
       <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
     </shape>  
   </item>  
   <item>  
     <shape>  
       <gradient android:angle="270" android:endColor="#2f6699" android:startColor="#449def" />  
       <stroke android:width="1dp" android:color="#2f6699" />  
       <corners android:radius="4dp" />  
       <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
     </shape>  
   </item>  
 </selector>  

В blue_button.xml  прописан внешний вид кнопки в нажатом и не нажатом состоянии.
Атрибут android:state_pressed="true" указывает на то что данный стиль применим для кнопки в нажатом состоянии.

blue_edit_text.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   <item android:state_pressed="true">  
     <shape>  
       <gradient android:angle="270" android:centerColor="#603C86C9" android:centerX="0.5" android:centerY="0.5" android:endColor="#9045A0F5" android:startColor="#403270A8" />  
       <stroke android:width="3dp" android:color="#50449def" />  
       <corners android:radius="7dp" />  
       <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
     </shape>  
   </item>  
   <item>  
     <shape android:shape="rectangle">  
       <solid android:color="#20486E" />  
       <stroke android:width="3dp" android:color="#50449def" />  
       <corners android:radius="7dp" />  
       <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
     </shape>  
   </item>  
 </selector>  

В blue_edit_text.xml прописан внешний вид EditText в активном и неактивном состоянии.
Атрибут android:state_pressed="true" указывает на то, какой стиль будет использоваться когда мы нажмем на EditText для ввода текста.

blue_list_view_item.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <selector xmlns:android="http://schemas.android.com/apk/res/android">  
   <item android:state_pressed="true">  
     <shape>  
       <gradient android:angle="270" android:centerColor="#603C86C9" android:centerX="0.5" android:centerY="0.5" android:endColor="#9045A0F5" android:startColor="#403270A8" />  
       <stroke android:width="3dp" android:color="#50449def" />  
       <corners android:radius="7dp" />  
       <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
     </shape>  
   </item>  
   <item android:state_focused="true">  
     <shape android:shape="rectangle">  
       <solid android:color="#20486E" />  
       <stroke android:width="3dp" android:color="#50449def" />  
       <corners android:radius="7dp" />  
       <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
     </shape>  
   </item>  
 </selector>  

Теперь непосредственно создадим тему для наших стилей. Для этого в папке res/values/ создадим файл themes.xml. И применим в нем для наших атрибутов созданные стили.

themes.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <resources>  

   <!-- =============== -->  
   <!--   Blue theme    -->  
   <!-- =============== -->  

   <style name="Theme.Blue" parent="@android:style/Theme">  
     <item name="textView1">@style/blue_text_view_1</item> 
     <item name="textView2">@style/blue_text_view_2</item> 
     <item name="android:buttonStyle">@style/blue_button</item> 
     <item name="android:editTextStyle">@style/blue_edit_text</item>  
     <item name="android:listViewStyle">@style/blue_list_view</item>    
   </style>  
 </resources>  

textView1 и textView2 наши собственные атрибуты, которые мы создали ранее в attrs.xml.
android:buttonStyle, android:editTextStyle атрибуты по-умолчанию.

Теперь мы сделали все что необходимо для стилей и тем в нашем приложении. Применить созданный стиль мы можем в AndroidManifest файле для выбранного нами activity или же ( как сделал я ) определить стиль непосредственно в activity.

В AndroidManifest.xml это желается вот так:

 <?xml version="1.0" encoding="utf-8"?>  
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
   package="com.lunevich.androidstyle"  
   android:versionCode="1"  
   android:versionName="1.0" >  
   //...

   <application  
     android:icon="@drawable/ic_launcher"  
     android:label="@string/app_name" >  
     //...

     <activity android:name=".activity.BlueThemeActivity" android:theme="@style/Theme.Blue"></activity>  
     <activity android:name=".activity.GreenThemeActivity" android:theme="@style/Theme.Green"></activity>  

   </application>  
 </manifest>  

В activity делается вот так:

 package com.lunevich.androidstyle.activity;  

 import com.lunevich.androidstyle.R; 
 
 import android.app.Activity;  
 import android.os.Bundle;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.widget.ArrayAdapter;  
 import android.widget.Button;  
 import android.widget.ListView;  

 public class BlueThemeActivity extends Activity implements OnClickListener { 
 
      @Override  
      public void onCreate(Bundle savedInstanceState) {  
           super.onCreate(savedInstanceState);
  
           setTheme(R.style.Theme_Blue);  
           setContentView(R.layout.stylish);  

           String[] items = { "One", "Two", "Three", "Four", "Five" };  
           ListView listView = (ListView) findViewById(R.id.listView);  
           listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items));  

           Button btn = (Button) findViewById(R.id.btn);  
           btn.setOnClickListener(this);  
      }  

      @Override  
      public void onClick(View v) {  
           switch (v.getId()) {  
           case R.id.btn:  
                onBackPressed();  
                break;  
           }  
      } 
 
      @Override  
      public void onBackPressed() {  
           super.onBackPressed();  
           this.finish();  
      }  
 }  

Посмотрим на результаты:

blue-theme

green-theme

полный код приложения лежит вот тут -> AndroidStyle
прямая ссылка для скачивания архива -> Download

Вышло очень даже симпатично :). Спасибо за внимание.

P.S. Оставляем пожелания, комментарии, темы для рассмотрения. И кликаем +1, f, в, t, что располагаются чуть ниже статьи.

IBM Worklight + Jquery Mobile

В этой статье я расскажу как разрабатывать приложения с использованием ранее установленного IBM Worklight. Установка. для дизайна возьмем Jquery Mobile HTML5 UIFramework. Для того чтобы нам можно было использовать Jquery Mobile необходимо скачать его вот отсюда -> Jquery Mobile.

Создаем Worklight-приложение. После установки Worklight в Eclipse на верхней панели появился значек, на него и нажимаем. Вот как выглядит значек:

Появляется следующее окно, где мы можем выбрать тип нашего будущего проекта. Выбираем  hybrid. Называем проект ( В моем случае Worklight Started ). Должно быть вот так:

Нажимаем next. Далее появляется окно в котором мы указываем название нашего приложения.

Мое название Start. Не подключаем при создании никаких библиотек ( это все мы сделаем чуть позже ). Жмем finish - наше приложение создано. Вот картинка:

Теперь нам необходимо скопировать наш скачаный Jquery Mobile в наше приложение. Я создал в папках css и js дополнительно папки jquery.mobile ( опять же для удобства ).
Копируем файл jquery.mobile-1.1.0.min.css и папку images в папку common/css/jquery.mobile.
Файлы jquery-1.7.1.min.js и jquery.mobile-1.1.0.min.js копируем в common/js/jquery.mobile.
После всех копирований струкрута папок в приложении выглядит вот так:

Для подключения и использова jquery mobile нам необходимо открыть файл  Start.html и подключить наши файлы.
После подключения файл Start.html будет выглядеть вот так:

 <!DOCTYPE html>            
 <html>  
      <head>  
           <meta charset="utf-8" />  
           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />  
           <title>Start</title>  
           <link rel="shortcut icon" href="images/favicon.png" />  
           <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />  
           <link rel="stylesheet" href="css/reset.css" />  
           <link rel="stylesheet" href="css/jquery.mobile/jquery.mobile-1.1.0.min.css" />  
           <link rel="stylesheet" href="css/Start.css" />  
      </head>  
      <body onload="WL.Client.init({})" id="content" style="display: none">
  
           <!-- application UI goes here -->  

           <script src="js/jquery.mobile/jquery-1.7.1.min.js"></script>  
           <script src="js/jquery.mobile/jquery.mobile-1.1.0.min.js"></script>  
           <script src="js/Start.js"></script>  
           <script src="js/messages.js"></script>  
           <script src="js/auth.js"></script>  
      </body>  
 </html>  

Теперь приступим к написанию наших страниц. Так как мы используем jquery mobile нам нужно сделать следующее:

 <!DOCTYPE html>            
 <html>  
      <head>  
           <meta charset="utf-8" />  
           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />  
           <title>Start</title>  
           <link rel="shortcut icon" href="images/favicon.png" />  
           <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />  
           <link rel="stylesheet" href="css/reset.css" />  
           <link rel="stylesheet" href="css/jquery.mobile/jquery.mobile-1.1.0.min.css" />  
           <link rel="stylesheet" href="css/Start.css" />  
      </head>  
      <body onload="WL.Client.init({})" id="content" style="display: none">  
           <div data-role="page" id="first">  
                <div data-role="header">  
                     <h1>Header</h1>  
                </div>  
                <div data-role="content">  
                     Start  
                </div>  
                <div data-role="footer">  
                     <h1>Footer</h1>  
                </div>  
           </div>  
           <!-- application UI goes here -->  
           <script src="js/jquery.mobile/jquery-1.7.1.min.js"></script>  
           <script src="js/jquery.mobile/jquery.mobile-1.1.0.min.js"></script>  
           <script src="js/Start.js"></script>  
           <script src="js/messages.js"></script>  
           <script src="js/auth.js"></script>  
      </body>  
 </html>  

Для того чтобы у нас footer был footer-ом и располагался внизу страницы необходимо в файле Start.css дописать вот такие строки:

 //...

 [data-role=page] {  
      height: 100% !important;  
      position: relative !important;  
 }  
 [data-role=footer] {  
      bottom: 0;  
      position: absolute !important;  
      top: auto !important;  
      width: 100%;  
 }

//...

Выглядит все это вот так:

Теперь добавим на нашу страницу кнопку и добавим страницу на которую мы будем переходить.

Наш файл Start.html теперь будет выглядеть вот так:

 //...
<body onload="WL.Client.init({})" id="content" style="display: none">  
      <div data-role="page" id="first">  
           <div data-role="header">  
              <h1>Header</h1>  
           </div>  
           <div data-role="content">  
                Start  
                <a href="#second" data-role="button">Second Page</a>  
           </div>  
           <div data-role="footer">  
                <h1>Footer</h1>  
           </div>  
      </div>  
      <div data-role="page" id="second">  
           <div data-role="header">  
                <h1>Header</h1>  
           </div>  
           <div data-role="content"> 
                Second Page   
                <a href="#first" data-role="button" data-revers="true">First Page</a>
           </div>  
      </div>  
      // ...  
 </body>  




Теперь создадим Android и iPhone приложения в Worklight. Для этого нажимаем правой кнопкой мыши на проекте и выбираем New->Worklight Environment.

Вот как выглядит:




В появившемся окне выбираем Android, iPhone Environment. Выглядит окно вот так:







Жмем finish. Все наши приложения для Android и iPhone созданы.

Структура приложения теперь стала вот такой:

Для проверки нашего приложения на Android эмуляторе нам нужно сначала собрать наше приложение. Для этого нажимаем првой кнопкой мыши по папке Start->Run As->Build All and Deploy. После того как все соберется мы можем проверить приложение на Android эмуляторе. Вот куда нужно нажать для "билда" приложения:

Для запуске на Android нужно нажать правой кнопкой мыши по папке Worklight SartedStartAndroid->Run As-> Android Application.

Вот так приложение будет выглядеть на Android:

На iPhone выглядит вот так:




Вот пожалуй и все, что я хотел в этой статье показать и рассказать о написании приложений с использованием Worklight.