Differences

This shows you the differences between two versions of the page.

--- android [2022/09/03 17:50] – skipidar
+++ android [2022/09/03 22:42] (current) – skipidar
@@ Line 1335: / Line 1335: @@
 </code>
+==== Style ====
+=== Styles, attributes ===
+{{https://s3.eu-central-1.amazonaws.com/alf-digital-wiki-pics/sharex/0A2xTQpLXn.png}}
+=== TextAppearance ===
+The text size in android is controlled by "TextAppearance"
+Material Design provides 13 type “styles” that are applied to all the text in your app. Each of these have a design term (eg. “Body 1”) along with a corresponding type attribute that can be overridden in your app theme (eg. textAppearanceBody1). There are default “baseline” values (text size, letter spacing, capitalization, etc.) for each style.
+https://material.io/blog/android-material-theme-type
+{{https://s3.eu-central-1.amazonaws.com/alf-digital-wiki-pics/sharex/9SsVsrtpPT.png}}
+== Usage in your view ==
+At the end,
+to express which size the text in your custom view should have
+instead of influencing "textSize" directly
+which will lead to difficulties with consistancy across app and consistancy with android native textSizes
+you should set "android:textAppearance=" on your view.
+and the value should be one of androids own textAppearance **attributes**:
+  * textAppearanceHeadline1
+  * textAppearanceHeadline2
+  * textAppearanceHeadline3
+  * textAppearanceHeadline4
+  * textAppearanceBody1
+  * textAppearanceBody2
+The same attributes are used by android too, so your view will be consistant with android natives
+In your someAppPartLayout.xml
+<code>
+                <!-- My title in my app view -->
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="Title"
+                    android:textAppearance="?attr/textAppearanceHeadline4" />
+</code>
+== Changing the value of attributes in AppTheme ==
+In your theme, maybe defined in your styles.xml
+you can change single android attributes.
+In my theme, which is defined in this style - overriding the single attributes "textAppearance*"
+referencing MY styles, which can interfere and override the default values for textAppearance.
+**Remark:**
+Those textAppearance* attributes are also used in android native views,
+like buttons
+see https://material.io/blog/android-material-theme-type.
+So overriding those in a theme - changes the behavior also for Android native elements
+THose attributes are not just strings, but are introduced as typed attributes in attrs.xml
+with format="reference".
+format="reference" means, that one can take a "<style></style>" element as a value.
+In the value-style element - the items a la  android:textSize are expected (convention).
+USAGE of attributes
+The attribute can be USED in views, by refering to the attribute in the view
+e.g.
+<code>android:textAppearance="?attr/textAppearanceHeadline4" /> </code>
+In your styles.xml pointing textAppearanceHeadline1 attribute of type "reference"
+to my own style.
+The style inherits from androids own style but I still can override some values in my inherited style.
+<code>
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+        <item name="textAppearanceHeadline1">
+            @style/TextAppearance.Headline1
+        </item>
+</code>
+== Introducing own styles, to refer from overridden attributes textAppearance* ==
+THe value of an overridden attribute **textAppearance*** is a style
+in your styles.xml
+parallel to the AppTheme - introduce styles, to refer from attributes.
+<code>
+    <!-- here I can change attributes of the STYLES.
+    by Inheriting from "TextAppearance.MaterialComponents.*" I inherit all the native properties
+    but get the possibility to override them here
+    -->
+    <style name="TextAppearance.Headline1" parent="TextAppearance.MaterialComponents.Headline1">
+        <item name="android:textSize">96sp</item>
+    </style>
+    <style name="TextAppearance.Headline2" parent="TextAppearance.MaterialComponents.Headline2">
+        <item name="android:textSize">60sp</item>
+    </style>
+    <style name="TextAppearance.Headline3" parent="TextAppearance.MaterialComponents.Headline3">
+        <item name="android:textSize">48sp</item>
+    </style>
+    <style name="TextAppearance.Headline4" parent="TextAppearance.MaterialComponents.Headline4">
+        <item name="android:textSize">34sp</item>
+    </style>
+    <style name="TextAppearance.Headline5" parent="TextAppearance.MaterialComponents.Headline5">
+        <item name="android:textSize">24sp</item>
+    </style>
+    <style name="TextAppearance.Headline6" parent="TextAppearance.MaterialComponents.Headline6">
+        <item name="android:textSize">20sp</item>
+    </style>
+    <style name="TextAppearance.Body1" parent="TextAppearance.MaterialComponents.Body1">
+        <item name="android:textSize">16sp</item>
+    </style>
+    <style name="TextAppearance.Body2" parent="TextAppearance.MaterialComponents.Body2">
+        <item name="android:textSize">14sp</item>
+    </style>
+</code>