Creating Duolingo like Widget , Android layout and accomodating screen sizes

Question

Planning to create a widget just like Duolingo Streak Widget.

But I am not able to properly create layout for the widget.

I have some questions specifically.

1. The duolingo widget has a fixed grid size ie in my device 2x1 . This width and hegith persist on all devices. but When I assign grid cell count to my widget its width and height changes on different device.

2. How to create the layout for a widget. Since its size can change , how to relatively align all the elements in that layout.

if we look at the duolingo widget , it has 5 parts.

1. background
2. the Fire drawable.
3. The mascot.
4. the text.
5. The streak count.

How do I create a layout and align them properly so that it persist on all devices.

Note : I tried creating layout but no matter how I relatively align the views, it gets distorted when the device changes.

Basically I need a complete guide on Widget layout creation.

My current widget provider class , is there anything that needs to be changed here ?

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:description="@string/app_widget_description"
    android:initialLayout="@layout/streak_widget"
    android:previewLayout="@layout/streak_widget"
    android:resizeMode="none"
    android:targetCellWidth="2"
    android:targetCellHeight="1"
    android:updatePeriodMillis="86400000"
    android:widgetCategory="home_screen"
    android:minWidth="@dimen/dimen_130dp"
    android:minHeight="@dimen/dimen_102dp"
    android:widgetFeatures="reconfigurable|configuration_optional" />

Thank you.