Creating a gauge

Question

I'm trying to create a gauge. I have a PNG of a blank gauge and a second one, exactly the same size showing the needle. My idea is to overlay the needle on top of the gauge and then rotate it depending on the value I wish to display. I'm having trouble placing one image on top of the other. Does anyone know how to do this? The image is within a LinearLayout.

Option 2: Use gauge image as background of ImageView and put needle as src... Option 3.... Take frame layout or relative layout ... put both images view 1. gauge and 2. needle — Ketan Parmar, Mar 01 '16 at 12:22
This will help : http://stackoverflow.com/questions/12551295/simple-gauge-view-like-speedmeter-in-android — Ketan Parmar, Mar 01 '16 at 12:23

score 0 · Answer 1 · answered Jan 28 '18 at 16:14

You can use a RelativeLayout for this.

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/needle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/needle" />

            <ImageView
                android:id="@+id/cluster"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/cluster" />

            <TextView
                android:id="@+id/rpmVal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="27dp"
                android:text="00000"
                android:textColor="#ffffff"
                android:textSize="60sp"
                android:textStyle="italic" />

            <TextView
                android:id="@+id/textView23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBaseline="@+id/rpmVal"
                android:layout_alignBottom="@+id/rpmVal"
                android:layout_toEndOf="@+id/rpmVal"
                android:text="RPM"
                android:textColor="#ffffff" />

            <TextView
                android:id="@+id/textView24"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@+id/rpmVal"
                android:layout_marginBottom="40dp"
                android:layout_toStartOf="@+id/textView23"
                android:text="x100 rpm"
                android:textColor="#ffffff"
                android:textSize="10sp" />

        </RelativeLayout>

This setup shoul look like this:

I hope I could help ^^

Thank you. This is a project I finished about 18 months ago by using a custom gauge that I found somewhere else. I'm actually planning to rewrite it soon so I will experiment with your solution then. — Alan Haden, Jan 29 '18 at 16:44

Creating a gauge

1 Answers1