0

I want to recreate this image:

enter image description here

I have a RelativeLayout with a centered TextView for the percent text and an centered ImageView with the white background.

    <RelativeLayout
        android:id="@+id/fuel_lvl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="29dp"
        android:layout_marginRight="29dp"
        android:layout_toRightOf="@id/max_speed" >

        <ImageView
            android:id="@+id/image_fuel_lvl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/icon_fuel_lvl" />

        <TextView
            android:id="@+id/text_fuel_lvl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/sensorvalue3"
            android:textAppearance="@style/TextAppearance.DigitalBoldItalic"
            android:textColor="#fff"
            android:textSize="60dp" />
    </RelativeLayout>

So, i need to change the circular gradient backgroud (not implemented yet) but i want to do with xml shape.

Can you help me?

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
cristhoper
  • 141
  • 5
  • [Here you go](https://github.com/Todd-Davies/ProgressWheel) – Skynet Feb 09 '15 at 15:03
  • @Skynet i want like the image, where the progress is linear around a circle – cristhoper Feb 09 '15 at 15:29
  • 1
    I guess you have to custom draw your filled circumference arc – Phantômaxx Feb 09 '15 at 15:35
  • @DerGolem i need to fill the circle around the circumference. The circumference is a transparent image, so i need to add a linear gradient with dinamyc size inside that drawable. – cristhoper Feb 09 '15 at 15:41
  • `i need to fill the circle around the circumference.` Are you sure you don't want to fill the area **inside** the circumference (the **blue** one)? This is what I suggested. – Phantômaxx Feb 09 '15 at 15:46
  • @DerGolem yes, a need fill that area... sorry, i misunderstood (the grammar is not my strong) – cristhoper Feb 09 '15 at 15:52
  • OK, no matter. A similar answer has been already given here: http://stackoverflow.com/questions/24858531/filling-a-circle-gradually-from-bottom-to-top-android/24866667?noredirect=1#comment38644747_24866667 – Phantômaxx Feb 09 '15 at 15:55
  • @DerGolem thanks!! only have to modified to add gradient. – cristhoper Feb 09 '15 at 15:58
  • You can beautify it even more, by adding the semitransparent lines at 12.5, 25, 50, 75 and 87.5% AND (maybe) a top trapezoid to simulate depth. Anyway, you're on the right path, now. – Phantômaxx Feb 09 '15 at 16:00

0 Answers0