Android Styles And Themes: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
Line 38: Line 38:
...
...
</syntaxhighlight>
</syntaxhighlight>
As a bonus here is how to add shadow to a control
<syntaxhighlight lang="xml" highlight="8-11">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50sp"
    android:textStyle="bold"
    android:text="Shadow"
    android:textColor="#616161"
    android:shadowColor="#5000"
    android:shadowDx="10"
    android:shadowDy="10"
    android:shadowRadius="10"/>
</syntaxhighlight>
=Selectors=
=Selectors=
These allow you to set styles based on states. We can do this with colors, drawables etc.
These allow you to set styles based on states. We can do this with colors, drawables etc.

Revision as of 10:45, 4 February 2021

Styling Views

Basics

The following are defined by Android.

  • Colors colors.xml
  • Dimensions dimens.xml
  • Strings strings.xml
  • Styles of views styles.xml

Apply a Style (css class)

So we can create a style in the styles.xml e.g.

<resources>
...
<style name="MyRadioButton">
<item name="android:fontFamily">cursive</item>
<item name="android:textColor">#F00</item>
<item name="android:textSize">30sp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:text">My Radio Button</item>
</style>
</resources>

And use it attach it to the controls using the

...
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:orientation="vertical" 
    android:padding="20dp" 
   
 tools:context="com.sriyanksiddhartha.stylesandthemesdemo.MainActivity">
...
    <RadioButton style="@style/MyRadioButton"/>
...

As a bonus here is how to add shadow to a control

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="50sp" 
    android:textStyle="bold" 
    android:text="Shadow" 
    android:textColor="#616161" 
    android:shadowColor="#5000" 
    android:shadowDx="10" 
    android:shadowDy="10" 
    android:shadowRadius="10"/>

Selectors

These allow you to set styles based on states. We can do this with colors, drawables etc.

We do this by

  • Creating a selector
  • Assigning selector to control

Here is a selelctor in drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item 
      android:state_pressed="true" 
      android:drawable="@drawable/btn_pressed"/>

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

Here is a layout

<Button 
    android:id="@+id/button" 
    android:layout_width="250dp" android:layout_height="40dp" 
    android:layout_gravity="center_horizontal" 
    android:background="@drawable/button_background_selector" 
    android:text="Button One" 
    android:textColor="@android:color/white"/>