How to create a 2x2 sized widget with a width and height of 1:1, occupying the screen side by side

[A-ANing]

May I ask? The following two are generated by me, and I want them to be the same as the above two, with the width occupied side by side and the height equal to the width. A normal phone should have two in one row, but if it is a tablet, there may be more than two in one row.

[A-ANing]

It can be seen that the width of each of the two widgets above is the maximum value, and the height is equal to the width; I don't know how many dp minWidth should be set to achieve such a layout.

[A-ANing]

 `props.renderWidget(<Widget {...widgetInfo}  width={widgetInfo.screenInfo.screenWidthDp/2} />);`

not work…

[sAleksovski]

Can you share the code for your widget?

widgetInfo.width will tell you the actual width of the widget that is added on the home screen. You cannot specify the exact size.

You can only use minWidth and minHeight (https://saleksovski.github.io/react-native-android-widget/docs/tutorial/register-widget#add-a-widget-provider-xml-file) or if using Expo (https://saleksovski.github.io/react-native-android-widget/docs/tutorial/register-widget-expo#use-config-plugin-in-appjsonconfigjsconfigts). When the widget is added on the home screen, Android will decide the actual height.

If you want your widget to be a square, you can use

<FlexWidget style={{ width: widgetInfo.width, height: widgetInfo.width }}>
  ...
</FlexWidget>

You can also read https://developer.android.com/develop/ui/views/appwidgets/layouts for deciding on the minWidth and minHeight

[A-ANing]

Is this the reason? The actual size is always smaller than the box

I am the sample code that runs directly on the real machine

[A-ANing]

I am more convinced that the actual width and height are smaller than the box.

I make the height equal to the width

<FlexWidget style={{ width: widgetInfo.width, height: widgetInfo.width }}>
  ...
</FlexWidget>

[sAleksovski]

What launcher are you using, and what version of the library are you using?

[A-ANing]

real phone：
name: huawei mate 40 pro
model: NOH-AN01
version: 11.0.0.192
android version: 10

"react": "18.2.0",
"react-native": "0.72.3",
"react-native-android-widget": "^0.7.0",

#22 as if our problem is the same

[A-ANing]

I will include the following code in RNWidget. java

RNWidgetUtil.getWidgetWidth(appContext, widgetId),
RNWidgetUtil.getWidgetHeight(appContext, widgetId)

Change===>

public void drawWidget(int widgetId) throws Exception {
      ...

       WidgetWithViews widgetWithViews = WidgetFactory.buildWidgetFromRoot(
           appContext,
           configClone,
           180,//RNWidgetUtil.getWidgetWidth(appContext, widgetId),
           200//RNWidgetUtil.getWidgetHeight(appContext, widgetId)
       );
     ...
   }

or RNWidgetUtil.java:
can fill the width

public static int getWidgetWidth(Context context, int widgetId) {
        return getWidgetSizeInDp(context, widgetId, AppWidgetManager.OPTION_APPWIDGET_MAX_WIDTH);
    }

xml:

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="130dp"
    android:minHeight="130dp"
    android:updatePeriodMillis="300000"

    android:initialLayout="@layout/rn_widget"

    android:previewImage="@drawable/demo_preview"

    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>

widgets:

return (
    <FlexWidget
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
        height: 'match_parent',
        width: 'match_parent',
        flex: 1
      }}
    >
      <TextWidget
        style={{ fontSize: 12 }}
        text={`${day}`}
      />
    </FlexWidget>
  );

In this way, it can be full, but I don't know java, so I don't know how to get the specific size correctly

after changing the java code	not modified before

But after the width is full, it seems that the text is not centered horizontally

[sAleksovski]

It is not centered because 180 is not the correct width, it's likely it's actually smaller.

But you are right, this looks like one of the previous issues.

The problem is that we cannot render React Native views directly to the widget. What this library does is render the React Native views to an image, and showing that image in the widget.
For it to look good, we need to know the exact size of the widget, to create an image with the correct size.

When using some launchers, the reported and actual size are not the same...
See this comment (#20 (comment)) for example.

I haven't found a reliable way to get the exact size, the current behavior is to crop the widget if the reported size is smaller.

Can you try with Nova Launcher and see if the widget works?
Still, that is not a solution since you cannot control what launcher your users are using...

[A-ANing]

I checked some information, android cannot directly obtain the actual size of the widget on the screen, nor can it obtain the component size of initialLayout in appwidget-provider;

The size of the widget is limited by the screen grid, so the actual size may not be equal to the set minWidth and minHeight, which is really a headache;

[A-ANing]

Can the WidgetFactory. buildWidgetFromRoot method make the width and height parameters optional? Can I make the rn view of the widget look like an image, which will fill the width of the widget?

[sAleksovski]

No, the parameters are mandatory.

See my previous comment about why (#31 (comment)).

[sAleksovski]

I've documented this behavior in https://saleksovski.github.io/react-native-android-widget/docs/limitations, and opened a new issue #34 to track it

[arhaanb]

I don't mind the widget being a bit smaller than the actual grid but somehow while using a ListView the content seems to exceed the width of the background rectangle (image attached)

I'm not sure how I could make this background extend a little bit in height so that the content doesn't flow out, I think this would make the widget a bit more useful for someone using this particular launcher. I'm testing the widget on the default launcher on OneUI 3.1 (Android 11).

Thank you for your help!

[sAleksovski]

You can try setting background color to the list item.