I have several custom Views in which I have created custom styleable attributes that are declared in xml layout and read in during the view's constructor. My question is, if I do not give explicit values to all of the custom attributes when defining my layout in xml, how can I use styles and themes to have a default value that will be passed to my View's constructor?
For example:
attrs.xml:
<declare-styleable name="MyCustomView">
<attr name="customAttribute" format="float" />
</declare-styleable>
layout.xml (android: tags eliminated for simplicity):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.mypackage" >
<-- Custom attribute defined, get 0.2 passed to constructor -->
<com.mypackage.MyCustomView
app:customAttribute="0.2" />
<-- Custom attribute not defined, get a default (say 0.4) passed to constructor -->
<com.mypackage.MyCustomView />
</LinearLayout>
After doing more research, I realized that default values can be set in the constructor for the View itself.
public class MyCustomView extends View {
private float mCustomAttribute;
public MyCustomView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray array = context.obtainStyledAttributes(attrs,
R.styleable.MyCustomView);
mCustomAttribute = array.getFloat(R.styleable.MyCustomView_customAttribute,
0.4f);
array.recycle();
}
}
The default value could also be loaded from an xml resource file, which could be varied based on screen size, screen orientation, SDK version, etc.
Related
I know it is possible to create custom UI element (by way of View or specific UI element extension). But is it possible to define new properties or attributes to newly created UI elements (I mean not inherited, but brand new to define some specific behavior I am not able to handle with default propertis or attributes)
e.g. element my custom element:
<com.tryout.myCustomElement
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Element..."
android:myCustomValue=<someValue>
/>
So is it possible to define MyCustomValue?
Thx
Yes. Short guide:
Create an attribute XML
Create a new XML file inside /res/values/attrs.xml, with the attribute and its type
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<declare-styleable name="MyCustomElement">
<attr name="distanceExample" format="dimension"/>
</declare-styleable>
</resources>
Basically you have to set up one <declare-styleable /> for your view that contains all your custom attributes (here just one). I never found a full list of possible types, so you need to look at the source for one I guess. Types that I know are reference (to another resource), color, boolean, dimension, float, integer and string. They are pretty self-explanatory
Use the attributes in your layout
That works the same way you did above, with one exception. Your custom attribute needs its own XML namespace.
<com.example.yourpackage.MyCustomElement
xmlns:customNS="http://schemas.android.com/apk/res/com.example.yourpackage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Element..."
customNS:distanceExample="12dp"
/>
Pretty straight forward.
Make use of the values you get passed
Modify the constructor of your custom view to parse the values.
public MyCustomElement(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyCustomElement, 0, 0);
try {
distanceExample = ta.getDimension(R.styleable.MyCustomElement_distanceExample, 100.0f);
} finally {
ta.recycle();
}
// ...
}
distanceExample is a private member variable in this example. TypedArray has lots of other things to parse other types of values.
And that's it. Use the parsed value in your View to modify it, e.g. use it in onDraw() to change the look accordingly.
In your res/values folder create attr.xml. There you can define your attribues:
<declare-styleable name="">
<attr name="myCustomValue" format="integer/boolean/whatever" />
</declare-styleable>
When you then want to use it in your layout file you have to add
xmlns:customname="http://schemas.android.com/apk/res/your.package.name"
and then you can use the value with customname:myCustomValue=""
Yes , you can.Just use <resource> tag.
like this:
<?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>
link from official website
I need to pass AttributeSet as a parameter in custom View constructor. Here is the attribute that I need to pass:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="DonutChart">
<attr name="radiusDonut" format="dimension"/>
<attr name="donutTextSize" format="dimension"/>
</declare-styleable>
</resources>
I need to do this with code, in order that I will add my custom view to RemoteView in my AppWidget. Does anyone has any idea how can I achive this?
You should be able to use XmlPullParser to get the attributes from your XML resource and then pass those as follows, replacing res_id with the ID of the file above.
XmlResourceParser resourceParser = activity.getResources().getXml(R.xml.res_id);
AttributeSet attrs = Xml.asAttributeSet(resourceParser);
CustomView view = new CustomView(activity, attrs);
I am creating a FixedAspectImageView to solve the problem in Android of making an ImageView set its view bounds to match the aspect ratio of the image contained within, and also fill an arbitrarily wide (or tall) available area and stretch the image appropriately. In the current version I'm sending a floating point "ratio" parameter from the layout, though eventually I would intend to detect the ratio of the image.
However, I am having trouble with the styleable attributes. My attrs.xml has this:
<resources>
<!-- other stuff, which bizarrely works -->
<declare-styleable name="FixedAspectImageView">
<attr name="ratio" format="float"/>
</declare-styleable>
</resources>
My constructor looks like:
public FixedAspectImageView(Context context, AttributeSet attrs) {
super(context, attrs);
if(attrs!=null) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FixedAspectImageView);
if(a.hasValue(R.styleable.FixedAspectImageView_ratio)) {
setRatio(a.getFloat(R.styleable.FixedAspectImageView_ratio, 1.f));
}
a.recycle();
}
}
(and very similarly for the one with an integer defStyle at the end) and my layout file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mypackage="http://schemas.android.com/apk/res/com.my.package"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.my.package.view.FixedAspectImageView
android:id="#+id/fixedAspectImageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/picture_of_goatse"
mypackage:ratio="1.2329" />
</FrameLayout>
</LinearLayout>
I've determined that setRatio(Float) works, because if I set a value in the source the measurement system works perfectly. The TypedArray being passed in has no indices set. What's causing this?
The layout editor does not always pick up <declare-styleable> attributes straight away. Restarting eclipse fixed the problem. The above code was all correct; the package name should obviously be the package of the project for the namespace in the layout, and the custom View will use generated values from R.styleable.
Known issue:
https://code.google.com/p/android/issues/detail?id=52298
I'm trying to replace a set of views with a custom composite view that is supposed to do exactly the same. Specifically I frequently repeat the following layout:
<LinearLayout style="#style/customLayoutStyle">
<Button style="#style/customButtonStyle" />
<TextView style="#style/customTextViewStyle" />
</LinearLayout>
My goal is to replace this block by a single <Highlighter />.
To this end I define in res/layout/highlighter.xml something like
<merge xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/customLayoutStyle">
<Button android:id="#+id/btnHighlighter" style="#style/customButtonStyle" />
<TextView android:id="#+id/lblHighlighter" style="#style/customTextViewStyle" />
</merge>
And in my custom view I have something like
public class Highlighter extends LinearLayout {
public Highlighter(Context context, AttributeSet attrs) {
super(context, attrs);
inflate(context, R.layout.highlighter, this);
}
}
This mostly works, but it seems some of the layout parameters of the <merge> tag are ignored. This screenshot illustrates what seems to be wrong. The 3 images on the bottom row are aligned correctly, using 3x the LinearLayout block I'm trying to replace. Only the top-left image uses the custom view. My guess is that the layout parameters for padding and layout_weight are lost. Am I doing something wrong, or do I need a workaround?
You're right about the parameters being lost. To workaround this you can put the style definition for Highlighter in the layout where you define the Highlighter.
E.g.
<yournamespace.Highlighter
style="#style/customLayoutStyle"
/>
Years later this is still something that's complicated on Android, but it can be done.
You can do it by using style attribute in your custom view, then setting the style in you theme.
Don't set the style in res/layout/highlighter.xml:
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<Button android:id="#+id/btnHighlighter" style="#style/customButtonStyle" />
<TextView android:id="#+id/lblHighlighter" style="#style/customTextViewStyle" />
</merge>
Then in your custom view:
public class Highlighter extends LinearLayout {
public Highlighter(Context context, AttributeSet attrs) {
// The third constructor parameter is you friend
super(context, attrs, R.attr.highlighterStyle);
inflate(context, R.layout.highlighter, this);
}
}
Define the attribute in values/attrs_highlighter_view.xml:
<resources>
<attr name="highlighterStyle" format="reference" />
</resources>
Now you can set the style in your theme
<style name="YourAppTheme" parent="Theme.AppCompat">
<item name="preferenceViewStyle">#style/customLayoutStyle</item>
</style>
This way this style will be used by default whenever you use Highlighter.
Usage of your custom view is then like you want:
<com.your.app.Highlighter
android:id="#+id/highlighter"
... />
I have not verified if this works with layout_weight, but it does work with padding, background etc.
Elaborating on muscardinus' answer, starting from API 21 (Lollipop), Views accept a defStyleRes as fourth constructor argument, so you can skip the attr part and just do:
In styles.xml
<style name="CustomView">
// Define your style here
</style>
CustomView.kt
class CustomView #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
) : LinearLayout(context, attrs, defStyleAttr, R.style.CustomView) {
...
}
Note that you need at least minSdkVersion 21 for this.
I would like to create an custom View on Android. I have tried to do it as simple as possible and created an almost empty class MyView and used it in my LinearLayout but the application fails on start with "Force Close". How can I do a simple custom View? According to Building Custom Components the View gets the size 100x100 if I don't override onMeasure().
public class MyView extends View {
public MyView(Context context) {
super(context);
}
}
And I use it in a LinearLayout with:
<view
class="com.example.MyView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.0" />
What am I doing wrong?
If I use the constructor that itemon suggest and the corresponding call to the superclass. Then the "Force Close" is gone, but my LinearLayout is broken, the components after MyView isn't shown.
Here is my main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.0"
android:background="#f00"
android:text="Hello"
/>
<view
class="com.example.MyView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.0"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.0"
android:background="#00f"
android:text="World"
/>
</LinearLayout>
may be you could define another constructor method like this:
public MyView(Context context, AttributeSet attrs)
the android framework will try to build the UI with your view from the constructor above.
The Android Developer Guide has a section called Building Custom Components. Unfortunately, the discussion of XML attributes only covers declaring the control inside the layout file and not actually handling the values inside the class initialisation. The steps are as follows:
Declare attributes in values\attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyCustomView">
<attr name="android:text"/>
<attr name="android:textColor"/>
<attr name="extraInformation" format="string" />
</declare-styleable>
</resources>
Notice the use of an unqualified name in the declare-styleable tag. Non-standard android attributes like extraInformation need to have their type declared. Tags declared in the superclass will be available in subclasses without having to be redeclared.
Create constructors
Since there are two constructors that use an AttributeSet for initialisation, it is convenient to create a separate initialisation method for the constructors to call.
private void init(AttributeSet attrs){
TypedArray a=getContext().obtainStyledAttributes(attrs,R.styleable.MyCustomView);
//Use a
Log.i("test",a.getString(R.styleable.MyCustomView_android_text));
Log.i("test",""+a.getColor(R.styleable.MyCustomView_android_textColor, Color.BLACK));
Log.i("test",a.getString(R.styleable.MyCustomView_android_extraInformation));
//Don't forget this
a.recycle();
}
R.styleable.MyCustomView is an autogenerated int[] resource where each element is the ID of an attribute. Attributes are generated for each property in the XML by appending the attribute name to the element name. Attributes can then be retrieved from the TypedArray using various get functions. If the attribute is not defined in the XML, then null is returned. Except, of course, if the return type is a primitive, in which case the second argument is returned.
If you don't want to retrieve all of the attributes, it is possible to create this array manually.The ID for standard android attributes are included in android.R.attr, while attributes for this project are in R.attr.
int attrsWanted[]=new int[]{android.R.attr.text, R.attr.textColor};
Please note that you should not use anything in android.R.styleable, as per this thread it may change in the future. It is still in the documentation as being to view all these constants in the one place is useful.
Use it in a layout files such as layout\main.xml
Include the namespace declaration
xmlns:app="http://schemas.android.com/apk/res/com.mycompany.projectname"
in the top level xml element.
<com.mycompany.projectname.MyCustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="Test text"
android:textColor="#FFFFFF"
app:extraInformation="My extra information";
/>
Reference the custom view using the fully qualified name.
Android LabelView Sample
If you want a complete example, look at the android label view sample.
LabelView.java
TypedArray a=context.obtainStyledAttributes(attrs, R.styleable.LabelView);
CharSequences=a.getString(R.styleable.LabelView_text);
attrs.xml
<declare-styleable name="LabelView">
<attr name="text"format="string"/>
<attr name="textColor"format="color"/>
<attr name="textSize"format="dimension"/>
</declare-styleable>
custom_view_1.xml
<com.example.android.apis.view.LabelView
android:background="#drawable/blue"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:text="Blue"app:textSize="20dp"/>
This is contained in a LinearLayout with a namespace attribute:
xmlns:app="http://schemas.android.com/apk/res/com.example.android.apis"