Рисование на Canvas в виджите Android

Дали мне на работе задание сделать виджет на котором будут отображаться данные в виде графика, перерыл весь интернет и не нашел рабочего примера. Долго мучался пытался и в конце концов с помощью одного человека я такие сделал это! 


Вот теперь решил поделиться с вами своей радостью, все оказалось очень просто и доступно. Рисовать мы будем обычную линию и текст, это будет как элементарный пример. 


И так для начала вспомним как сделать обычный виджет, это у нас есть статья для начинающих — Создаем виджет под Android. Дальше мы заставим рисовать красоту на этом виджете. Подготовьте все для начала разработки, создайте проект создайте виджет из поста по ссылке и если Вы это все сделали то начнем разработку.

Для начала нам нужно создать класс который будет рисовать всю красоту, я надеюсь Вы уже занкомы с рисованием на канвасе и з моих уроков, если нет то можете почитать об этом. 

Создаем файл в котором мы будем все рисовать:

Graph.java

public class Graph {
        public static Bitmap getBitmap() {
                Bitmap bitmap = Bitmap.createBitmap(128, 128, Bitmap.Config.ARGB_8888);
                //говорим что рисуем на объекте битмапа который создан выше
                Canvas canvas = new Canvas(bitmap);
                //фоновый цвет сцены
                canvas.drawColor(Color.WHITE);
                
                //параметры для рисования, цвет, размер текста
                Paint paint = new Paint();
                paint.setFlags(Paint.ANTI_ALIAS_FLAG);
                paint.setColor(Color.RED);
                paint.setTextSize(20);
                
                //собственно сам рисунок
                canvas.drawLine(0, 0, 128, 128, paint);
                canvas.drawText("Какой нибудь текст", 10, 10, paint);
                
                //обязательно возвращаем на чем рисовать иначе ничего не покажется
                return bitmap;
        }
}

Забыл написать что рисовать мы будем не на сюрфейсе и не на вью, а на Bitmap'e который будет выгружен на imageView. Очень глупо, но по другому сделать никак нельзя. Вот этот класс будет у нас красиво все мазюкать. Из комментариев надеюсь ясно что к чему.

Дальше нам нужно в мейн провайдере написать что и как рисовать, и конечно же на чем. Для этого берем свою пока что пустую MainProvaider.java и пишем в нем следующее:

MainProvaider.java

public class MyWidgetProvider extends AppWidgetProvider {

        @Override
        public void onUpdate(final Context context, final AppWidgetManager appWidgetManager, final int[] appWidgetIds) {
                //переопределили метод
                super.onUpdate(context, appWidgetManager, appWidgetIds);
                //метод который позволяет вырисовывать на вивджите
                RemoteViews rViews = new RemoteViews(context.getPackageName(), R.layout.main);
                //говорим методу RemoteViews  что рисуем на imageView1
                rViews.setImageViewBitmap(R.id.image_hello, Graph.getBitmap());
                //дальше автообновляем виджет для прорисовки красоты
                appWidgetManager.updateAppWidget(appWidgetIds, rViews);
        }
}

Ну и нам осталось только взять и вписать в main.xml наш imageView на котором будет все рисоваться, разлагольствовать не буду и просто вставлю код всего main.xml.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/background_dark"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/image_hello"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/background_light"
        android:src="@android:color/background_light" />
</LinearLayout>

Запускаем проект и видим что? Видим ужасно криво нарисованную линию и текст немного выше, если поколдовать над кодом и написать его не так небрежно то получиться воплне себе конфетка.

Вот что получилось в итоге:


Есть вопросы? Задавайте в комментарии, я помозгую и отвечу.