I'm starting a development in Eclipse, however the style is very ugly, borders, letters etc.
Is it possible to use CSS on Android?
I'm starting a development in Eclipse, however the style is very ugly, borders, letters etc.
Is it possible to use CSS on Android?
Android% "do not use" / "do not support" StyleSheet you can change is Views
textColor
, etc by typeface
XML.
For example:
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:typeface="monospace"
android:text="@string/hello" />
Another way to change that will look similar to CSS is to use the View
attribute, like this:
<TextView
style="@style/CodeFont"
android:text="@string/hello" />
This style=""
can be applied to multiple Views.
You can also use inheritance just like in CSS with the @style/CodeFont
attribute:
<style name="GreenText" parent="@android:style/TextAppearance">
<item name="android:textColor">#00FF00</item>
</style>
In the parent
tag you can use the style
attribute to inherit other styles from other name
tags. It would look something like:
<style name="CodeFont">
...
</style>
This will inherit style
and apply something else
<style name="CodeFont.Red">
...
</style>
This will inherit CodeFont
and CodeFont
and apply something else
<style name="CodeFont.Red">
...
</style>
But you still will not get very advanced effects
There is a way to use CodeFont.Red
to create applications and thus use CSS. But 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 resource file use the url path as WebView
, 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 in CSS, do something like:
body {
background: url(file:///android_asset/images/bg.jpg);
}
To understand how to use the resources read: link
Note: Requires Android 5.0 (API level 21)
Android now has "Material Design" that can help you, read Creating Apps with Material Design
You can use it by calling:
file:///android_asset/...
(dark version) @android:style/Theme.Material
(light version) @android:style/Theme.Material.Light
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: link
Can not use CSS in View's pure Android. If you use WebView
you can of course.
But you can create Styles
which can be associated with them by the android:style
attribute, which would be similar to a css class / selector. But this styling follows the android pattern, 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: