Making user-defined UI

Question

How can I make my own UI defining my properties?

Answer 1

There are three ways to do so:

1. Using styles

You can define your own styles by creating XML files on the res/values directory. So, let's suppose you want to have red and bold text, then you create a file with this content:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MyRedTheme" parent="android:Theme.Light">
    <item name="android:textAppearance">@style/MyRedTextAppearance</item>
  </style>
  <style name="MyRedTextAppearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">#F00</item>
    <item name="android:textStyle">bold</item>
  </style>
</resources>

You can name it like you want, for instance res/values/red.xml. Then, the only thing you have to do is using that view in the widgets that you want, for instance:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
 style="@style/MyRedTheme"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="This is red, isn't it?"
    />
</LinearLayout>

For further reference, you can read this article: Understanding Android Themes and Styles

2. Using custom classes

This is another possible way to achieve this, and it would be to provide your own TextView that set the text color always to whatever you want; for instance:

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.TextView;
public class RedTextView extends TextView{
 public RedTextView(Context context, AttributeSet attrs) {
  super(context, attrs);
  setTextColor(Color.RED);
 }
}

Then, you just have to treat it as a normal TextView in your XML file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<org.example.RedTextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="This is red, isn't it?"
    />
</LinearLayout>

3. Creating a theme

I'm copying an example given by Steve Pomeroy:

Create a styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="android:Theme">
    <item name="android:textViewStyle">@style/MyTextViewStyle</item>
</style>

<style name="MyTextViewStyle" parent="@android:style/Widget.TextView">
    <item name="android:textColor">#F00</item>
    <item name="android:textStyle">bold</item>
</style>
</resources>

Then just apply that theme to your application in AndroidManifest.xml:

<application […] android:theme="@style/MyTheme">

And all your text views will default to the style defined in MyTextViewStyle (in this instance, bold and red)!

---

Whether you use one or another choice depends on your needs. If the only thing you want to do is modifying the appearance, then the best approach is the first. On the other hand, if you want to change the appearance and add some new functionality to your widgets, the second one is the way to go.

Answer 2

Try droiddraw