Sources

Android Shortcuts: Styling and Colors

noras noras |

Tags: #Android #shortcuts #sources

A copy paste reference and source for all Android developers. Its not perfect bur will definitely save someone time. PS:This list will be extended over time.

Style

No action bar

In your styles.xml add

<style name = "AppTheme.NoActionBar" >
        <item name = "windowActionBar">false</item>
        <item name = "windowNoTitle">true</item>
</style>

Set the style in the manifest.xml

<application
        ....
        android:theme="@style/AppTheme.NoActionBar">

</application>

Colors

Color palettes source

 <color name="BlackTransparent">#8d000000</color>

    <!--FLAT-->
    <color name="Turquoise">#1abc9c</color>
    <color name="Emerald">#2ecc71</color>
    <color name="PeterRiver">#3498db</color>
    <color name="Amethyst">#9b59b6</color>
    <color name="WetAsphalt">#34495e</color>

    <color name="GreenSea">#16a085</color>
    <color name="Nephritis">#27ae60</color>
    <color name="BelizeHole">#2980b9</color>
    <color name="Wisteria">#8e44ad</color>
    <color name="MidnightBlue">#2c3e50</color>

    <color name="SunFlower">#f1c40f</color>
    <color name="Carrot">#e67e22</color>
    <color name="Alizarin">#e74c3c</color>
    <color name="Clouds">#ecf0f1</color>
    <color name="Concrete">#95a5a6</color>

    <color name="Orange">#f39c12</color>
    <color name="Pumpkin">#d35400</color>
    <color name="Pomegranate">#c0392b</color>
    <color name="Silver">#bdc3c7</color>
    <color name="Asbestos">#7f8c8d</color>

    <!--Material-->
    <color name="Red500">#F44336</color>
    <color name="Pink500">#E91E63</color>
    <color name="Purple500">#9C27B0</color>
    <color name="DeepPurple500">#673AB7</color>
    <color name="Indigo500">#3F51B5</color>

    <color name="Blue500">#2196F3</color>
    <color name="LightBlue500">#03A9F4</color>
    <color name="Cyan500">#00BCD4</color>
    <color name="Teal500">#009688</color>
    <color name="Green500">#4CAF50</color>

    <color name="LightGreen500">#8BC34A</color>
    <color name="Lime500">#CDDC39</color>
    <color name="Yellow500">#FFEB3B</color>
    <color name="Amber500">#FFC107</color>
    <color name="Orange500">#FF9800</color>

    <color name="DeepOrange500">#FF5722</color>
    <color name="Brown500">#795548</color>
    <color name="Grey500">#9E9E9E</color>
    <color name="BlueGrey500">#607D8B</color>
    <color name="Black500">#000000</color>

Custom layouts

EditText

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

    <item android:state_enabled="true" android:state_focused="false">
        <shape>
            <solid android:color="@android:color/white"/>
            <padding
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
                />
            <stroke android:color="#80bdbdbd" android:width="1dp"/>
            <corners  android:radius="4dp" />
        </shape>
    </item>

    <item android:state_enabled="true" android:state_focused="true">
        <shape>
            <solid android:color="@android:color/white"/>
            <stroke android:color="#2196F3" android:width="1dp"/>
            <corners
                android:radius="4dp" />
        </shape>
    </item>

    <item android:state_enabled="false" android:state_focused="false">
        <shape>
            <solid android:color="#e6e6e6"/>
            <padding
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
                />
            <stroke android:color="#80bdbdbd" android:width="1dp"/>
            <corners  android:radius="4dp" />
        </shape>
    </item>

</selector>

Edit text dark flat

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

    <item android:state_enabled="true" android:state_focused="false">
        <shape>
            <solid android:color="@color/BlueGrey500"/>
            <padding
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
                />
      
            <corners  android:radius="4dp" />
        </shape>
    </item>

    <item android:state_enabled="true" android:state_focused="true">
        <shape>
            <solid android:color="@color/BlueGrey500"/>

            <corners
                android:radius="4dp" />
        </shape>
    </item>

    <item android:state_enabled="false" android:state_focused="false">
        <shape>
            <solid android:color="#e6e6e6"/>
            <padding
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
                />
            <corners  android:radius="4dp" />
        </shape>
    </item>

</selector>

Edit text style

 <style name="ThemedEditText" parent="Widget.AppCompat.EditText">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textColorHint">@android:color/black</item>
        <item name="android:textCursorDrawable">@null</item>
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.031</item>
        <item name="android:textSize">16sp</item>
        <item name="android:padding">16dp</item>
    </style>

    <style name="ThemedEditText.Dark" parent="ThemedEditText">
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textColorHint">@android:color/white</item>
    </style>

Borderless button

style="?android:attr/borderlessButtonStyle"

Rounded flat

<?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="@color/LightBlue500" />

            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_enabled="false" >
        <shape>
            <solid
                android:color="@color/Grey500" />

            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/Blue500"/>

            <corners
                android:radius="10dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Rounded button with stroke

<?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="@color/Grey500" />
            <stroke
                android:width="3dp"
                android:color="#fff" />
            <corners
                android:radius="1dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/BlueGrey500"/>
            <stroke
                android:width="1dp"
                android:color="#fff" />
            <corners
                android:radius="20dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

White card with shadow

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <gradient
                android:angle="90"
                android:centerX="0.5"
                android:centerY="0.7"
                android:endColor="@android:color/transparent"
                android:gradientRadius="75%"
                android:startColor="@android:color/black"
                android:type="radial" />

        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">

        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <stroke
                android:width="1dp"
                android:color="#80bdbdbd" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>

</layer-list>

Animation

Fade in and zoom out

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    
    <alpha
    android:duration="500"
    android:fromAlpha="0.0"
    android:startOffset="1"
    android:toAlpha="1.0"
    />
    <scale
        android:duration="1000"
        android:fromXScale="2"
        android:fromYScale="2"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1"
        />
</set>

Shrink to middle

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:interpolator="@android:anim/linear_interpolator"
        android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0"
        android:toYScale="1.0" android:fillAfter="false" android:duration="500" />
    <translate android:fromXDelta="0" android:toXDelta="50%"
        android:duration="500" />

    <rotate android:fromDegrees="0" android:toDegrees="-45" android:pivotX="50%" android:pivotY="50%"  android:duration="500" />
</set>

Grow from middle

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:interpolator="@android:anim/linear_interpolator"
        android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="1.0"
        android:toYScale="1.0" android:fillAfter="false" android:startOffset="200"
        android:duration="500" />
    <translate android:fromXDelta="50%" android:toXDelta="0"
        android:startOffset="200" android:duration="500" />
    <rotate android:fromDegrees="-45" android:toDegrees="0" android:pivotX="50%" android:pivotY="50%"   android:duration="500" />
</set>

Pulse

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="1000"
        android:fillAfter="true"

        android:fromXScale="1"
        android:fromYScale="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"

        android:toXScale="1.2"
        android:toYScale="1.2" />

    <alpha
        android:duration="1000"
        android:fromAlpha="0.5"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:repeatCount="infinite"
        android:toAlpha="0.0" />
</set>

Rotate in place

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromDegrees="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:toDegrees="358" />

Enter from left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >

    <translate
        android:duration="2000"
        android:fromXDelta="-400%"
        android:toXDelta="100%"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        />

</set>

Fonts

android:fontFamily="sans-serif"           // roboto regular
android:fontFamily="sans-serif-light"     // roboto light
android:fontFamily="sans-serif-condensed" // roboto condensed
android:fontFamily="sans-serif-black"     // roboto black
android:fontFamily="sans-serif-thin"      // roboto thin (android 4.2)
android:fontFamily="sans-serif-medium"    // roboto medium (android 5.0)

Font size

source

  <style name="TypeScale.H1" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif-light</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">-0.094</item>
        <item name="android:textSize">96sp</item>
    </style>

    <style name="TypeScale.H2" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif-light</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">-0.031</item>
        <item name="android:textSize">60sp</item>
    </style>

    <style name="TypeScale.H3" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0</item>
        <item name="android:textSize">48sp</item>
    </style>

    <style name="TypeScale.H4" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.016</item>
        <item name="android:textSize">34sp</item>
    </style>

    <style name="TypeScale.H5" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0</item>
        <item name="android:textSize">24sp</item>
    </style>

    <style name="TypeScale.H6" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif-medium</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.009</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="TypeScale.SubTitle1" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.009</item>
        <item name="android:textSize">16sp</item>
    </style>

    <style name="TypeScale.SubTitle2" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif-medium</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.006</item>
        <item name="android:textSize">16sp</item>
    </style>

    <style name="TypeScale.Body1" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.031</item>
        <item name="android:textSize">16sp</item>
    </style>

    <style name="TypeScale.Body2" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.016</item>
        <item name="android:textSize">14sp</item>
    </style>

    <style name="TypeScale.Button" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif-medium</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.078</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">true</item>
    </style>

    <style name="TypeScale.Caption" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.025</item>
        <item name="android:textSize">12sp</item>
    </style>

    <style name="TypeScale.Overline" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item>
        <item name="android:letterSpacing" tools:targetApi="lollipop">0.025</item>
        <item name="android:textSize">10sp</item>
        <item name="android:textAllCaps">true</item>
    </style>

Example dark theme

Assuming you added all the components above..

Colors

<color name="colorPrimaryDark">@color/MidnightBlue</color>
    <color name="colorPrimary">@color/WetAsphalt</color>
    <color name="windowBackground">@color/MidnightBlue</color>
    <color name="navigationBarColor">@color/WetAsphalt</color>
    <color name="colorAccent">@color/LightBlue500</color>

Styles

   <style name="AppTheme" parent="Theme.AppCompat.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="android:windowBackground">@color/windowBackground</item>
        <item name="android:navigationBarColor" tools:targetApi="lollipop">@color/navigationBarColor</item>
    </style>

Login Activity layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerInParent="true">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="LOGO HERE"
            android:textColor="@android:color/white"
           android:layout_gravity="center"
            style="@style/TypeScale.H3"/>

        <EditText
            android:layout_marginTop="32dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            style="@style/ThemedEditText.Dark"
            android:inputType="textEmailAddress"
            android:background="@drawable/edit_dark_flat"/>
        <EditText
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword"
            style="@style/ThemedEditText.Dark"
            android:background="@drawable/edit_dark_flat"/>

        <Button
            android:layout_marginTop="16dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Login"
            android:textColor="@android:color/white"
            android:background="@drawable/button_flat"
            style="@style/TypeScale.Button"
            />
        <TextView
            android:layout_marginTop="16dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/TypeScale.SubTitle1"
            android:text="Create an account"
            android:textColor="@android:color/white"
            android:layout_gravity="center"

            />
    </LinearLayout>




</RelativeLayout>

About the author

noras

"Senior Software Engineer. MSc in Computer systems and Networks with big interest in security. Loves to play with Android code and does security research for fun and profit. Speaks 4 languages and codes in much more."

Related articles

Tags: #Android #shortcuts #sources




Copyright © 2019 - nindoda.com