Android View, creating custom component

Question

First of all, I know there is a lot of similar questions, but i could find a complete answer to do what I want. It's about the creation of a custom component.

Thing is, I would like to create a custom animated component for my UI. Moreover, the client would like to easily change the image of the component so I decided to go for an xml layout which is animated in the code. But It's seems that I can't get it right...

The exemple for my first try is a needle gauge which indicate the C02 level.

There is 2 images : the gauge and the needle, so I created a gauge layout with my two ImageView.

<?xml version="1.0" encoding="utf-8"?>
<com.erdf.components 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<ImageView
    android:id="@+id/gauge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:src="@drawable/jauge" />

<ImageView
    android:id="@+id/needle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/jauge_needle" />

Then I created the associated class :

public class components extends RelativeLayout {

    private ImageView mNeedle;

    private int mValue = 0;

    public components(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        mNeedle = (ImageView)findViewById(R.id.needle);
    }


    public void SetGaugeValue(int value) {
        if(value > 180) {
            value = 180;
        }
        else if(value < -180)
        {
            value = -180;
        }

        RotateAnimation needleDeflection = new RotateAnimation(mValue, value, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        needleDeflection.setDuration(100*(Math.abs(mValue-value))); 
        needleDeflection.setFillAfter(true);

        mNeedle.startAnimation(needleDeflection);

    }
}

Finally I tried to include this compnent into my ActivityView

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

    <include
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        layout="@layout/gauge_layout" />

</RelativeLayout>

Here's the code of the activity Class :

public class GaugeActivity extends Activity {

    private components test;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.view_layout);
    }
}

So my first question is : why do i do wrong to get this exception at the execution of the application :

    01-29 16:04:28.886: E/AndroidRuntime(1570): FATAL EXCEPTION: main
01-29 16:04:28.886: E/AndroidRuntime(1570): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.gauge/com.example.gauge.GaugeActivity}: android.view.InflateException: Binary XML file line #2: Error inflating class com.erdf.components
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2180)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2230)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.ActivityThread.access$600(ActivityThread.java:141)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1234)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.os.Handler.dispatchMessage(Handler.java:99)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.os.Looper.loop(Looper.java:137)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.ActivityThread.main(ActivityThread.java:5039)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at java.lang.reflect.Method.invokeNative(Native Method)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at java.lang.reflect.Method.invoke(Method.java:511)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at dalvik.system.NativeStart.main(Native Method)
01-29 16:04:28.886: E/AndroidRuntime(1570): Caused by: android.view.InflateException: Binary XML file line #2: Error inflating class com.erdf.components
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.view.LayoutInflater.createView(LayoutInflater.java:596)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.view.LayoutInflater.parseInclude(LayoutInflater.java:807)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.view.LayoutInflater.rInflate(LayoutInflater.java:736)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:270)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.Activity.setContentView(Activity.java:1881)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at com.example.gauge.GaugeActivity.onCreate(GaugeActivity.java:24)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.Activity.performCreate(Activity.java:5104)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1080)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2144)
01-29 16:04:28.886: E/AndroidRuntime(1570):     ... 11 more
01-29 16:04:28.886: E/AndroidRuntime(1570): Caused by: java.lang.NoSuchMethodException: <init> [class android.content.Context, interface android.util.AttributeSet]
01-29 16:04:28.886: E/AndroidRuntime(1570):     at java.lang.Class.getConstructorOrMethod(Class.java:460)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at java.lang.Class.getConstructor(Class.java:431)
01-29 16:04:28.886: E/AndroidRuntime(1570):     at android.view.LayoutInflater.createView(LayoutInflater.java:561)
01-29 16:04:28.886: E/AndroidRuntime(1570):     ... 23 more

The seconde one is about how to use my component. How do I cast the included layout in my member variable test which is an instance of the class associated to the same included layout ? Then I could simply use the setGaugeValue ( ) function to animating the needle.

I hope i was clear enough.

Your stacktrace is incomplete. Please post the whole one. Anyway, IMHO standard Android Views are not suitable for what you want. I suggest you check [this](http://developer.android.com/guide/topics/graphics/2d-graphics.html). — m0skit0, Jan 29 '13 at 16:22
I'm not really sure, but I doubt you can use any extra attributes when using ``. Remove any extra attributes from that node and try. — m0skit0, Jan 29 '13 at 16:28

score 0 · Answer 1 · answered Jan 29 '13 at 17:32

0

There is no need to use a custom RelativeLayout for "components", it could be just a normal RelativeLayout.

In any case you create a reference to that particular RelativeLayout

(components) comp = (components) findViewById(R.id.myComponent)
  //note that you don't have id set up yet in your custom view xml tag

then you can use

comp.SetGaugeValue(5);

Note that Class name "components" should start with Captial letter - java practice.

answered Jan 29 '13 at 17:32

Lumis

21,517
8
63
67

I'm not sure I understand what you mean by normal RelativeLayout. – Aleks Jan 29 '13 at 17:56
Also did you close your custom view with ? Your components xml do not need xmlns:android... that is already in its parent. Normal realtiveLayout would the one which is not a custom class which extends it. – Lumis Jan 29 '13 at 18:11
But the component class can't extends from View says eclipse, because it can't be cast as ViewGroup. So the component class should extends from what ? Maybe you have an exemple that I could look at ? I read the article from @M-WaJeEh but it's not really what I want... – Aleks Jan 31 '13 at 15:13
Do not create the componet class at all, just use mNeedle = (ImageView)findViewById(R.id.needle) and apply the animation to it. That is why I said you can just use RelativeLayout. But if you really want to have a custom view then try the code in my answer. – Lumis Jan 31 '13 at 23:41

Android View, creating custom component

1 Answers1