Style and Theme

 Lab 1
Project:
- File > New > New project > Empty Views Activity > Click Next
- Choose Project name, location, language (java), min SDK, Groovy DSL > Click
Finish
1. Values resource for color
- Open res/Color.xml
- Add some color:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>

<color name="colorPrimary1">#FF8A80</color>
<color name="colorPrimaryDark1">#FF80AB</color>
<color name="myWindowBackground">#82B1FF</color>
<color name="colorAccent1">#00C853</color>
<color name="textColorPrimary1">#C51162</color>
<color name="navigationBarColor1">#0091EA</color>
<color name="textColorSecondary1">#B3E5FC</color>

<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
</resources>

2. Styles
- Right click on res/values > New > Values Resource File > File name: style > OK
 - Open style.xml
- Declare 2 styles InformationTextView and CodeFont:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="InformationTextView">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">8dp</item>
<item name="android:gravity">center</item>
<item name="android:textSize">15sp</item>
<item name="android:textColor">@color/colorAccent</item>
</style>

<style name="CodeFont"
parent="@android:style/TextAppearance.Medium">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@color/black</item>
<item name="android:typeface">monospace</item>
</style>
</resources>
- Use styles:
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
style="@style/InformationTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView"/>

<TextView
android:id="@+id/textView"
style="@style/CodeFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android Programming"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
3. Theme
- Right click on res/values > New > Values Resource File > File name: theme > OK
- Open theme.xml
- Declare 2 themes AppTheme1 and AppTheme2:
<?xml version="1.0" encoding="utf-8"?>
<resources>

<style name="AppTheme1"
parent="Theme.AppCompat.Light.DarkActionBar">
<!--Màu chính (ví dụ nền AppBar)-->
<item name="colorPrimary">@color/colorPrimary</item>
<!--Màu nền thanh trạng thái điện thoại-->
<item
name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!--Màu nhấn mạnh (kiểm trong checkbox, gạch chân
TextBox ...)-->
<item name="colorAccent">@color/colorAccent</item>
 </style>

<style name="AppTheme2"
parent="Theme.AppCompat.Light.DarkActionBar">
<!--Màu chính (ví dụ nền AppBar)-->
<item name="colorPrimary">@color/colorPrimary1</item>
<!--Màu nền thanh trạng thái điện thoại-->
<item
name="colorPrimaryDark">@color/colorPrimaryDark1</item>
<!--Màu nền điều hướng điện thoại-->
<item
name="android:navigationBarColor">@color/navigationBarColor1</
item>
<!--Màu nhấn mạnh (kiểm trong checkbox, gạch chân
TextBox ...)-->
<item name="colorAccent">@color/colorAccent1</item>
<!--Màu nền Activity-->
<item
name="android:windowBackground">@color/myWindowBackground</ite
m>
<!--Màu chữ trong các control như Button ... -->
<item
name="android:textColorPrimary">@color/textColorPrimary1</item
>
<!--Màu chữ ở trạng thái ... -->
<item
name="android:textColorSecondary">@color/textColorSecondary1</
item>
</style>

</resources>
- Use theme:

AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
 android:theme="@style/AppTheme1"
tools:targetApi="31">
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action
android:name="android.intent.action.MAIN" />

<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

 Lab 2
Use Style and Theme to Login Screen (Exercise 2).