Bài 7: Work with themes and styles

Nội dung:
An introduction to themes and styles
How to work with styles
How to work with themes
How to work with colors
------------------------------------
1. An introduction to themes and styles

2. How to work with styles:
2.0 Định dạng các loại widget trong tệp tin styles.xml:

- 4 custom style trong tệp tin sytles.xm:

Ví dụ: xây dựng style TitleBar như hình dưới gồm có 3 thành phần:
           - Phần đầu bên trái logo
           - Giữa ghi title bar
           - Phần cuối image chức năng      

Mã nguồn:
Download hình ảnh: https://drive.google.com/open?id=0B8tAQ0_sJKCSVzlUVUtFWDVXWkU
Giải thích ý nghĩa một số tệp tin trong thư mục: ..\res\values\..
 + dimens.xml: định nghĩa các giá trị về kích thước, được truy xuất từ class R.dimen
 + colors.xml: định nghĩa các giá trị về màu sắc, được truy xuất từ class R.color
 + strings.xml: định nghĩa các giá trị các chuỗi, được truy xuất từ class R.string
Bố cục thư mục res\..:

Mã nguồn XML:
--> Để tạo các tệp tin *.xml: click chuột phải vào thư mục ..\res\values\  chọn New --> Other --> Chọn Android XML File --> Next --> Đặt tên file *.xml --> Finished

res\values\..:
+ colors.xml:

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

<resources>

    <!-- title bar start -->

    <color name="titlebar_background">#1491D4</color>

    <color name="titlebar_text">#ffffffff</color>

    <!-- title bar end -->

       

</resources>

+ dimens.xml:

<resources>

    <!-- Default screen margins, per the Android Design guidelines. -->

    <dimen name="activity_horizontal_margin">16dp</dimen>

    <dimen name="activity_vertical_margin">16dp</dimen>

    <!-- title bar start -->

    <dimen name="titlebar_height">45dip</dimen>

    <dimen name="titlebar_back_margin">5dip</dimen>

    <dimen name="titlebar_action_margin">5dip</dimen>

    <!-- title bar end -->

   

    <dimen name="body_padding">5dp</dimen>

    <dimen name="text_size_small">14sp</dimen>

    <dimen name="text_size_medium">20sp</dimen>

    <dimen name="text_size_large">25sp</dimen>

   

</resources>

+ style.xml:

<resources>   

    <!-- Style for Title Bar  -->

       <style name="TitleBar">

           <item name="android:layout_alignParentTop">true</item>

        <item name="android:layout_width">match_parent</item>

        <item name="android:layout_height">@dimen/titlebar_height</item>

        <item name="android:orientation">horizontal</item>

        <item name="android:background">@color/titlebar_background</item> 

       </style>

             

       <style name="TitleBarLogo">

        <item name="android:layout_width">wrap_content</item>

        <item name="android:layout_height">match_parent</item>

        <item name="android:paddingLeft">5dip</item>

        <item name="android:paddingRight">5dip</item>

        <item name="android:clickable">true</item>

    </style>  

   

    <style name="TitleBarText">

        <item name="android:layout_width">0dp</item>

        <item name="android:layout_height">match_parent</item>

        <item name="android:layout_weight">1</item>

        <item name="android:textSize">@dimen/text_size_medium</item>

        <item name="android:paddingLeft">12dip</item>

        <item name="android:paddingRight">12dip</item>

        <item name="android:gravity">center_vertical</item>

        <item name="android:textStyle">bold</item>

        <item name="android:textColor">@color/titlebar_text</item>

        <item name="android:singleLine">true</item>

        <item name="android:ellipsize">end</item>

    </style>

   

    <style name="TitleBarAdd">

        <item name="android:layout_width">wrap_content</item>

        <item name="android:layout_height">fill_parent</item>

        <item name="android:clickable">true</item>

        <item name="android:paddingLeft">@dimen/titlebar_action_margin</item>

        <item name="android:paddingRight">@dimen/titlebar_action_margin</item>

        <item name="android:src">@drawable/titlebar_add</item>

    </style>   

</resources>

res\values\drawable:
+ titlebar_logo.xml:

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/logo" android:state_focused="false" android:state_pressed="false"/>

</selector>

+ titlebar_add.xml:

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/titlebar_add_pressed" android:state_focused="true" android:state_pressed="true"/>

    <item android:drawable="@drawable/titlebar_add_pressed" android:state_focused="false" android:state_pressed="true"/>

    <item android:drawable="@drawable/titlebar_add_default" android:state_focused="false" android:state_pressed="false"/>

</selector>

res\values\layout:
+ activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/LinearLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    tools:context="com.example._style.MainActivity" >

    <LinearLayout

        style="@style/TitleBar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

        <ImageView

            style="@style/TitleBarLogo"

            android:src="@drawable/titlebar_logo" />

        <TextView

            style="@style/TitleBarText"

            android:text="Title Bar" />

        <ImageView

            style="@style/TitleBarAdd"

            android:onClick="onClickAdd" />

    </LinearLayout>

</LinearLayout>

2.1 Thiết kế button:
Cách 1: Dùng xml thiết kế button
- Custom button: hướng dẫn tạo button giống như hình sau

  Tạo tệp tin ..\res\drawable\custombutton1.xml
  Click chuột phải vào thư mục drawable --> new --> Other --> hiện ra hộp thoại chọn Android XML File --> đặt tên file: custombutton1.xml và Root Element là: shape.
Lưu ý: tên tệp tin xml này không ghi các ký tự in hoa.

Code xml tệp tin custombutton1.xml:

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

       <gradient android:startColor="#7fb517" 
                 android:centerColor="#6a9801" 
                 android:endColor="#517E00" 
                 android:angle="90"/>
       <!-- corners- bán kính bo tròn 4 góc -->

       <corners android:radius="5dp"/>

       <!-- stroke: thuộc tính kích cỡ và màu sắc đường viền -->

       <stroke android:width="2dp" android:color="#598003"/>

       <!-- padding: các thuộc tính canh chỉnh trái, phải, trên, dưới -->

       <padding android:left="15dp" android:top="5dp" 
                android:right="15dp" android:bottom="5dp"/>

</shape>

Với cách lấy màu buton như sau:
Tool hỗ trợ lấy màu:
- 32bit: https://drive.google.com/file/d/0B8tAQ0_sJKCSd1N1Uk1IOWQxRmc/view?usp=sharing
- 64bit: https://drive.google.com/file/d/0B8tAQ0_sJKCSQ09EcVdjODZScDg/view?usp=sharing

Trong thuộc tính buton như sau:

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="@drawable/custombutton1"

        android:text="Button 1" />

Kết quả: Với Button 1 này khi bấm vào thì không thay đổi trạng thái, để khắc phục vấn đề này ta tạo button 2.

-Custom button có các trạng thái khi bấm vào: tạo tệp tin custombutton2.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="false">

        <shape android:shape="rectangle">

            <gradient android:startColor="#7fb517" android:centerColor="#6a9801"

                      android:endColor="#517E00" android:angle="90"/>

            <corners android:radius="5dp"/>
            <!-- stroke is use for border of the rectangle -->

            <stroke android:width="2dp" android:color="#598003"/>

            <padding android:left="15dp" android:top="5dp"

                    android:right="15dp" android:bottom="5dp"/>

        </shape>

    </item>

    <item android:state_pressed="true">

        <shape android:shape="rectangle">

            <gradient android:startColor="#7fb517" android:centerColor="#6a9801"

                      android:endColor="#517E00" android:angle="90"/>

            <corners android:radius="5dp"/>

            <stroke android:width="4dp" android:color="#598003"/>

            <padding android:left="15dp" android:top="5dp"

                     android:right="15dp" android:bottom="5dp"/>

        </shape>       

    </item>

</selector>

- Sau đó tạo một button 2 có thuộc tính: android:background="@drawable/custombutton2"

- Kết quả khi bấm vào button 2 thì sẽ thay đổi trạng thái

Cách 2: Dùng hình ảnh thiết kế button
Bước 1: Để có 3 trạng thái của button gồm: 
   - pressed (khi bấm): 
   - focused (khi dùng phím di chuyển vào button thì button đó sẽ rơi vào trạng thái focus):
   - normal (bình thường) :
--> Chúng ta chuẩn bị 3 hình ảnh mô tả 3 trạng thái này của button này:  button_pressed.png, button_focused.png, button_normal.png và bỏ vào thư mục res/drawable trong dự án(nếu không có thư mục này thì tự tạo thêm)

   - Download hình ảnh button ở đây link:
https://drive.google.com/file/d/0B8tAQ0_sJKCSYXlST0N5b19Oa0k/view?usp=sharing

   - Hoặc các bạn có thể dùng link website sau để thiết kế trực tiếp từng button sau đó download hình ảnh button link: http://dabuttonfactory.com/
Bước 2: Tạo tệp tin custom_button.xml trong mục res/drawable(nếu không có thư mục này thì tự tạo thêm), Code:

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/button_pressed"

          android:state_pressed="true" />

    <item android:drawable="@drawable/button_focused"

          android:state_focused="true" />

    <item android:drawable="@drawable/button_normal" />
</selector>

--> Đây gọi là một tệp tin trạng thái (file state) của button.
Bước 3: Vào tệp tin thiết kế layout activity_main.xml thêm vào 1 button:
Code:

       <Button

           android:id="@+id/button"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_gravity="center"

           android:background="@drawable/custom_button"

           android:text="Đăng Nhập" />

Kết quả:  -->                   
Ở trạng thái normal                                                            Ở trạng thái pressed     

                                                  

2.1 Thiết kế EditText: Trong các ví dụ sau sẽ viết code xml để tạo các EditText như hình bên dưới

Tất cả các tệp tin xml để thiết kế EditText được lưu trong thư mục ..\res\drawable\...

Ví dụ 1: customedittext1.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <gradient android:startColor="#2EFEF7"

              android:centerColor="#FAFAFA"

              android:endColor="#F5A9A9"/>

    <corners android:topRightRadius="8dp"

             android:bottomRightRadius="8dp"/>

       <padding android:left="5dp"

                android:top="5dp"

                android:right="5dp"

                android:bottom="5dp"/>

       <!-- stroke is use for border of the rectangle -->

       <stroke android:width="1.5dp" android:color="#0000FF"/>

</shape>

Ví dụ 2: customedittext2.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <gradient android:startColor="#2EFEF7"

              android:centerColor="#FAFAFA"

              android:endColor="#F5A9A9"/>

    <corners android:topRightRadius="8dp"

             android:bottomRightRadius="8dp"/>

       <padding android:left="5dp"

                android:top="5dp"

                android:right="5dp"

                android:bottom="5dp"/>

       <!-- stroke is use for border of the rectangle -->

       <stroke android:width="1.5dp" android:color="#0000FF"/>

</shape>

Ví dụ 3: customedittext3.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <gradient android:startColor="#2EFEF7"

              android:centerColor="#FAFAFA"

              android:endColor="#F5A9A9"/>

    <corners android:radius="10dp"/>

       <padding android:left="5dp"

                android:top="5dp"

                android:right="5dp"

                android:bottom="5dp"/>

       <!-- stroke is use for border of the rectangle -->

       <stroke android:width="2dp" android:color="#FF8000"/>

</shape>

Ví dụ 4: customedittext4_line.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">

    <padding android:bottom="20dp"/>

    <stroke android:width="2dp" android:color="#FA58AC"/>

</shape>

Ví dụ 5: Để thêm hình user icon vào mỗi EditText:
Copy hình user.png vào thư mục ..\res\drawable\user.png

Chèn thêm thuộc tính:

<EditText

        ...

        android:drawableLeft="@drawable/user"

        .../>

2.3 Thiết kế TextView: tương tự như trên

3. How to work with themes:

4. How to work with colors:

Bài tập:
1. Thiết kế giao diện đăng nhập và tạo mới tài khoản người dùng như yêu cầu sau: