Is it possible to use stylesheet in an app?

Question

I’m starting a development in Eclipse, however the style is very ugly, borders, letters etc.

You can use CSS on Android?

Answer 1

The Views Android "do not use"/"does not support" Stylesheet (stylesheet) what you can change is the textColor the typeface, etc by the XML of View.

For example:

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />

Style

Another way to change what will look like CSS is to use the attribute style="", thus:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

This @style/CodeFont can be applied to multiple "Views".

Inheritance

You can also use inheritance as it is in CSS through the attribute parent:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Tag style you can use the attribute name to inherit other styles from other tags style. It would be something like:

<style name="CodeFont">
...
</style>

This one will inherit the CodeFont and apply something else

<style name="CodeFont.Red">
...
</style>

This one will inherit the CodeFont and CodeFont.Red and apply something else

<style name="CodeFont.Red">
...
</style>

But it still won’t have very advanced effects

Using the Webview

Is there a way to use the WebView to create applications and thus use CSS. However, your applications will be almost entirely in HTML.

You need to create a WebView:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

And you need to enable Javascript:

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

To load a Resources file use the url path as file:///android_asset/..., example:

myWebView.loadUrl("file:///android_asset/html/index.html");

To load the stylesheet, use something like in your html:

<link rel="stylesheet" type="text/css" href="file:///android_asset/css/main.css">

To load backgrounds into CSS, do something like:

body {
   background: url(file:///android_asset/images/bg.jpg);
}

To understand how to use Resources read: http://developer.android.com/guide/topics/resources/overview.html

Material Design

Note: Requires Android 5.0 (API level 21)

Android now has the "Material Design" that can help you, read Creating Apps with Material Design

You can use calling:

• @android:style/Theme.Material (dark version)
• @android:style/Theme.Material.Light (light version)
• @android:style/Theme.Material.Light.DarkActionBar

Using inheritance to call the theme:

  <style name="AppTheme" parent="android:Theme.Material">
    <!-- Cores do tema -->

    <!--   Cores do appbar -->
    <item name="android:colorPrimary">@color/primary</item>

    <!--   variação "dark" para a barra de estado e o contexto das "barras de ferramentas" -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>

    <!--   Tema UI dos controles (tipo checkboxes e campos de texto) -->
    <item name="android:colorAccent">@color/accent</item>
  </style>

Where to start: https://developer.android.com/training/material/get-started.html

Answer 2

Cannot use CSS in pure Android View’s. If you use WebView you can of course.

But you can create Styles which may be associated with them by the attribute android:style, which would be similar to a css selector/class. But this styling follows the android standard, with the attributes you already use.

An example would be:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <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">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

To use:

<EditText
    android:id="@+id/edittext"
    android:style="@style/CodeFont" <!-- "import" do estilo criado -->
    android:layout_alignLeft="@+id/button"
    android:layout_below="@+id/textView1"
    android:layout_marginTop="61dp"
    android:ems="10"
    android:text="@string/enter_text"
    android:inputType="text" />

Some references:

• http://developer.android.com/guide/topics/ui/themes.html
• http://android-pro.blogspot.com.br/2010/08/using-themes-and-styles-in-android.html