MAUI: The UI is shrinking after setting the SoftInputMode to AdjustResize

Question

MAUI: The UI is shrinking after setting the SoftInputMode to AdjustResize

Sreejith Sreenivasan 1,001

I have a UI and when keyboard appears the header part is not visible like below screenshot.

So I set the SoftInputModeto AdjustResize for that page and when leave that page I set it back to AdjustPan.

protected override void OnAppearing()
{
	base.OnAppearing();
#if ANDROID
			        Platform.CurrentActivity?.Window?.SetSoftInputMode(Android.Views.SoftInput.AdjustResize);
#endif
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
#if ANDROID
        Platform.CurrentActivity?.Window?.SetSoftInputMode(Android.Views.SoftInput.AdjustPan);
#endif
}

The SoftInputMode was set successfully, but when I came back to the home page, the UI is compressed(Shrink) like below screenshot. (right side actual UI, left side after setting SoftInputMode to resize image)

If I go to keypad or any other page and come back, the home page UI is showing as normal without shrinking.

In addition I added pan as the SoftInputMode in MainActivity.

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    App.Current.On<Microsoft.Maui.Controls.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Pan);
}

Anonymous

2024-01-05T02:44:51.4133333+00:00

This issue was asked in Stack overflow: How to set WindowSoftInputModeAdjust to Resize for a specific page?. And I create a new project with your code. It is working as normal in Android 12 android 14 devices. I cannot reproduce this issue.

Could you create an empty project to reproduce this issue? Then please add reproduced steps here.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-08T09:05:25.4633333+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) I tried to recreate the issue on a demo project, but unfortunately not reproducible. Could you please check this screen recorded video, it has the same issue.

Anonymous

Please keep the AdjustResize and remove following code, if this UI is working.

protected override void OnDisappearing()
{
    base.OnDisappearing();
#if ANDROID
        Platform.CurrentActivity?.Window?.SetSoftInputMode(Android.Views.SoftInput.AdjustPan);
#endif
}

Sreejith Sreenivasan 1,001 Reputation points

2024-01-08T11:28:19.6+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) I commented the OnDisappearing code and keeps the OnAppearing with SoftInput.AdjustResize. But when I came back to the home page from comments page, I am getting the same UI issue.

The UI issue is happening on the home page only after the comment page keyboard open after the editor tap. If I view the comment page and without opening keyboard, no UI issue in home page. When keyboard is opening that page is resizing and as a result home page is also resizing. Please suggest a solution for this?
Sreejith Sreenivasan 1,001 Reputation points

2024-01-08T13:17:10.51+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Here is the full explanation video.

If I am not using resize option on the inner page, the header part is not visible on the UI like below screenshot:

That issue video.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-09T13:58:25.71+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) Any update on this?
Anonymous

2024-01-10T03:24:58.8133333+00:00

I watched your video, but I still cannot reproduce this issue. Can you create a demo, then copy the code about HomePage and SimplePage to this demo? could that reproduce this issue?

Did you change the value of [Activity] in MainActivity.cs?
Sreejith Sreenivasan 1,001 Reputation points

2024-01-10T06:31:40.9866667+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Did you change the value of [Activity] in MainActivity.cs?

I didn't get this.
Anonymous

2024-01-10T07:03:36.2066667+00:00

How did you implement the home page? Is that a Tabbedpage or Shell?
Sreejith Sreenivasan 1,001 Reputation points

2024-01-10T07:09:37.4566667+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

It is a CarouselView with 5 child ContentViews.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-10T10:00:56.9966667+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Finally I created a demo with this issue and uploaded here. Could you please check with this.

Click on option 1 and click the editor and open the keyboard, then go back to home, then you can see this issue. If we press option 2 this shirking issue is getting resolved.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-11T07:48:31.5833333+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) Did you get a chance to check the demo project?

Anonymous

Please open your CarouselHomePage, use a <VerticalStackLayout> to wrap the <CarouselView> like following code.

 <VerticalStackLayout VerticalOptions="FillAndExpand"  >     
            <CarouselView    
               
               VerticalOptions="EndAndExpand"
                x:Name="carouselView"
                Loop="False">   
                <CarouselView.ItemsSource>
                    <x:Array Type="{x:Type ContentView}">
                        <control:HomeTabPage/>
                    </x:Array>
                </CarouselView.ItemsSource>
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <ContentView Content="{Binding}"/>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
      
      
    </VerticalStackLayout>

Then, please open your style.xml to find the HomeTabFrameStyle and set a bigger value for Margin. I set 35 for testing like following code.

 <!--Home Tabs-->
    <Style x:Key="HomeTabFrameStyle" TargetType="Frame">
        <Setter Property="HasShadow" Value="False" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="35" />
        <Setter Property="HorizontalOptions" Value="FillAndExpand" />
        <Setter Property="VerticalOptions" Value="FillAndExpand" />
        <Setter Property="BackgroundColor" Value="#e6e6e6" />
        <Setter Property="BorderColor" Value="Transparent" />
    </Style>

Sreejith Sreenivasan 1,001 Reputation points

2024-01-11T10:40:49.92+00:00

I tried like your suggestion, but in that approach I am facing some issues. One is there is a lot of blank space at the bottom of the home page. Other issue is, the UI of other home page tabs are breaking. I already told you my homepage is a CarouselView with 5 child ContentViews.All the other child page UI are breaking after adding VerticalStackLayout for CarouselView.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-11T11:15:44.53+00:00

I am facing this issue only after setting the softinputmode to resize for a particular page. For viewing the header part of that page I am adding that.

What about if we find any other way to fix the above issue other than resizing? If we found we don't have the shrinking issue in home page. Can you help me to suggest that?
Anonymous

2024-01-15T06:04:41.23+00:00

One is there is a lot of blank space at the bottom of the home page.

I set `` <Setter Property="Margin" Value="35" />inHomeTabFrameStyle `, black space could be adjusted.

Other issue is, the UI of other home page tabs are breaking.

Can't other home page tabs be clicked? If not, can you share details?
Anonymous

2024-01-15T06:29:52.3433333+00:00

What about if we find any other way to fix the above issue other than resizing? If we found we don't have the shrinking issue in home page. Can you help me to suggest that?

I cannot other ways to adjust this keyboard behavior, because MAUI or Xamarin.Forms just have only one Activity for Android, If you want to adjust the keyboard behavior, we have to use SoftInputMode, if we changed the SoftInputMode, it will change all of pages in the MAUI.

Your answer

Anonymous

2024-01-05T02:44:51.4133333+00:00

This issue was asked in Stack overflow: How to set WindowSoftInputModeAdjust to Resize for a specific page?. And I create a new project with your code. It is working as normal in Android 12 android 14 devices. I cannot reproduce this issue.

Could you create an empty project to reproduce this issue? Then please add reproduced steps here.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-08T09:05:25.4633333+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) I tried to recreate the issue on a demo project, but unfortunately not reproducible. Could you please check this screen recorded video, it has the same issue.
Anonymous

2024-01-08T09:26:12.51+00:00

Please keep the AdjustResize and remove following code, if this UI is working.

protected override void OnDisappearing() { base.OnDisappearing(); #if ANDROID Platform.CurrentActivity?.Window?.SetSoftInputMode(Android.Views.SoftInput.AdjustPan); #endif }
Sreejith Sreenivasan 1,001 Reputation points

2024-01-08T11:28:19.6+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) I commented the OnDisappearing code and keeps the OnAppearing with SoftInput.AdjustResize. But when I came back to the home page from comments page, I am getting the same UI issue.

The UI issue is happening on the home page only after the comment page keyboard open after the editor tap. If I view the comment page and without opening keyboard, no UI issue in home page. When keyboard is opening that page is resizing and as a result home page is also resizing. Please suggest a solution for this?
Sreejith Sreenivasan 1,001 Reputation points

2024-01-08T13:17:10.51+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Here is the full explanation video.

If I am not using resize option on the inner page, the header part is not visible on the UI like below screenshot:

That issue video.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-09T13:58:25.71+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) Any update on this?
Anonymous

2024-01-10T03:24:58.8133333+00:00

I watched your video, but I still cannot reproduce this issue. Can you create a demo, then copy the code about HomePage and SimplePage to this demo? could that reproduce this issue?

Did you change the value of [Activity] in MainActivity.cs?
Sreejith Sreenivasan 1,001 Reputation points

2024-01-10T06:31:40.9866667+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Did you change the value of [Activity] in MainActivity.cs?

I didn't get this.
Anonymous

2024-01-10T07:03:36.2066667+00:00

How did you implement the home page? Is that a Tabbedpage or Shell?
Sreejith Sreenivasan 1,001 Reputation points

2024-01-10T07:09:37.4566667+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

It is a CarouselView with 5 child ContentViews.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-10T10:00:56.9966667+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Finally I created a demo with this issue and uploaded here. Could you please check with this.

Click on option 1 and click the editor and open the keyboard, then go back to home, then you can see this issue. If we press option 2 this shirking issue is getting resolved.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-11T07:48:31.5833333+00:00

@Leon Lu (Shanghai Wicresoft Co,.Ltd.) Did you get a chance to check the demo project?
Anonymous

2024-01-11T08:57:58.7366667+00:00

Please open your CarouselHomePage, use a <VerticalStackLayout> to wrap the <CarouselView> like following code.

<VerticalStackLayout VerticalOptions="FillAndExpand" > <CarouselView VerticalOptions="EndAndExpand" x:Name="carouselView" Loop="False"> <CarouselView.ItemsSource> <x:Array Type="{x:Type ContentView}"> <control:HomeTabPage/> </x:Array> </CarouselView.ItemsSource> <CarouselView.ItemTemplate> <DataTemplate> <ContentView Content="{Binding}"/> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> </VerticalStackLayout>

Then, please open your style.xml to find the HomeTabFrameStyle and set a bigger value for Margin. I set 35 for testing like following code.

 <Style x:Key="HomeTabFrameStyle" TargetType="Frame"> <Setter Property="HasShadow" Value="False" /> <Setter Property="Padding" Value="0" /> <Setter Property="Margin" Value="35" /> <Setter Property="HorizontalOptions" Value="FillAndExpand" /> <Setter Property="VerticalOptions" Value="FillAndExpand" /> <Setter Property="BackgroundColor" Value="#e6e6e6" /> <Setter Property="BorderColor" Value="Transparent" /> </Style>
Sreejith Sreenivasan 1,001 Reputation points

2024-01-11T10:40:49.92+00:00

I tried like your suggestion, but in that approach I am facing some issues. One is there is a lot of blank space at the bottom of the home page. Other issue is, the UI of other home page tabs are breaking. I already told you my homepage is a CarouselView with 5 child ContentViews.All the other child page UI are breaking after adding VerticalStackLayout for CarouselView.
Sreejith Sreenivasan 1,001 Reputation points

2024-01-11T11:15:44.53+00:00

I am facing this issue only after setting the softinputmode to resize for a particular page. For viewing the header part of that page I am adding that.

What about if we find any other way to fix the above issue other than resizing? If we found we don't have the shrinking issue in home page. Can you help me to suggest that?
Anonymous

2024-01-15T06:04:41.23+00:00

One is there is a lot of blank space at the bottom of the home page.

I set `` <Setter Property="Margin" Value="35" />inHomeTabFrameStyle `, black space could be adjusted.

Other issue is, the UI of other home page tabs are breaking.

Can't other home page tabs be clicked? If not, can you share details?
Anonymous

2024-01-15T06:29:52.3433333+00:00

What about if we find any other way to fix the above issue other than resizing? If we found we don't have the shrinking issue in home page. Can you help me to suggest that?

I cannot other ways to adjust this keyboard behavior, because MAUI or Xamarin.Forms just have only one Activity for Android, If you want to adjust the keyboard behavior, we have to use SoftInputMode, if we changed the SoftInputMode, it will change all of pages in the MAUI.

Share via

MAUI: The UI is shrinking after setting the SoftInputMode to AdjustResize

Your answer