Android - Design

From XennisWiki
Jump to: navigation, search

Create your own style for an Android app.

Example

Own button style

Define style

Define the style of the button in the res/values/styles.xml file

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

    <!-- ... more stuff -->
    
    <style name="mlEditText" parent="@android:style/Widget.EditText">
        <item name="android:background">@drawable/ml_edit_text_shape</item>
        <item name="android:paddingTop">10dp</item>
        <item name="android:paddingRight">17dp</item>
        <item name="android:paddingBottom">10dp</item>
        <item name="android:paddingLeft">17dp</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColorHint">@color/mlTextHint</item> <!-- = color placeholder -->
        <item name="android:fontFamily">sans-serif-ligth</item>
    </style>

</resources>

Define the shape of the button. Add the file res/drawable/ml_button_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:padding="10dp">

    <solid android:color="@color/mlBackgroundBlue"/> 
    <corners android:radius="10dp"/>
</shape>

Define the colors in the res/values/color.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="mlBackgroundBlue">#becbf8</color>
	<color name="mlEditTextStroke">#d0d2d3</color>
</resources>

Use style

Use the style attribute to assign your custom button style to a button:

<Button
	style="@style/mlButton"
	android:id="@+id/exampleButton"
        android:text="@string/exampleButton" />

And the result is:

Android - Custom button style.png

See also

External links