The RadSideDrawer Drawer content is not fully visible for Android Low resolution devices. With the below same code for iOS there is not problem for any resolutions. And correct layout & incorrect layout snapshot also attached for the issue. Please help on this.
<Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Margin="0,0,0,0" Grid.Row="1">
<telerikPrimitives:RadSideDrawer x:Name="drawer" HeightRequest="{Binding DisplayHeight}"
DrawerLocation="Bottom"
DrawerTransitionType="SlideInOnTop"
AreGesturesEnabled="True"
BackgroundColor="Transparent"
DrawerClosing="drawerClose" >
<!--telerikPrimitives:RadSideDrawer.HeightRequest>
<OnPlatform x:TypeArguments="Thickness"
iOS="16,6"
Android="16,0,16,30">
</OnPlatform>
</-->
<telerikPrimitives:RadSideDrawer.MainContent AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Grid BackgroundColor="Transparent">
<Grid.Margin>
<OnPlatform x:TypeArguments="Thickness"
iOS="16,0,16,73"
Android="16,0,16,75">
</OnPlatform>
</Grid.Margin>
<telerikDataControls:RadListView x:Name="listView" ItemTapped="ListView_ItemTapped"
ItemsSource="{Binding UserDevices, Mode=TwoWay}" NativeControlLoaded="RadListView_NativeControlLoaded"
NativeControlUnloaded="RadListView_NativeControlUnloaded" BackgroundColor="Transparent"
ItemTemplate="{StaticResource ListViewItemTemplate}"
IsLoadOnDemandEnabled="True" LoadOnDemandMode="Automatic"
GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
GroupHeaderStyle="{StaticResource ListViewGroupHeaderStyle}">
<telerikDataControls:RadListView.GroupDescriptors>
<telerikListView:PropertyGroupDescriptor PropertyName="CategoryText" SortOrder="Ascending"/>
</telerikDataControls:RadListView.GroupDescriptors>
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewGridLayout HorizontalItemSpacing="7" SpanCount="2" VerticalItemSpacing="7" ItemLength="104"/>
</telerikDataControls:RadListView.LayoutDefinition>
<telerikDataControls:RadListView.SelectedItemStyle>
<telerikListView:ListViewItemStyle BackgroundColor="#FFE8E8E8"
BorderColor="#FFFFFFFF" />
</telerikDataControls:RadListView.SelectedItemStyle>
</telerikDataControls:RadListView>
<telerikPrimitives:RadBusyIndicator x:Name="BusyIndicator"
AnimationContentHeightRequest="100"
AnimationContentWidthRequest="100"
AnimationType="Animation9"
InputTransparent="{Binding IsNotBusy}"
AnimationContentColor="DarkSlateGray"
IsBusy="{Binding IsBusy}" >
<controls:RadBusyIndicator.Animations>
<common:RadDoubleAnimation Easing="Linear"
PropertyPath="Rotation"
RepeatForever="True"
Target="{Reference Name=image}"
From="0"
To="360" />
</controls:RadBusyIndicator.Animations>
<controls:RadBusyIndicator.BusyContent>
<Image x:Name="image"
HeightRequest="200"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="200">
</Image>
</controls:RadBusyIndicator.BusyContent>
</telerikPrimitives:RadBusyIndicator>
</Grid>
</telerikPrimitives:RadSideDrawer.MainContent>
<telerikPrimitives:RadSideDrawer.DrawerContent AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.Margin>
<OnPlatform x:TypeArguments="Thickness"
Android="0,0,0,28">
<!--iOS="0,0,0,40"-->
</OnPlatform>
</Grid.Margin>
<StackLayout Orientation="Horizontal" BackgroundColor="#EDECE8" HorizontalOptions="FillAndExpand" Grid.Row="0"
VerticalOptions="CenterAndExpand" Opacity="0.9" Focused="drawerClose" IsTabStop="False">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal" >
<ImageButton x:Name="deviceIcon" Source="Blind_1.png" VerticalOptions="Center" HorizontalOptions="Center" Margin="10,10,0,10" HeightRequest="40" WidthRequest="40" Clicked="EditDevice_Clicked" BackgroundColor="Transparent"/>
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
<Label x:Name="deviceName" Text="" FontAttributes="Bold" FontSize="17" TextColor="Black" Margin="0,2,0,0" LineBreakMode="NoWrap"/>
<Label x:Name="deviceStatus" Text="50%" FontAttributes="None" FontSize="14" TextColor="#676767" Margin="0,-7"/>
<Label x:Name="deviceRoomName" Text="" FontAttributes="None" FontSize="12" TextColor="#676767" Margin="0,0,0,0" />
</StackLayout>
</StackLayout>
<StackLayout HorizontalOptions="EndAndExpand" TranslationX="40" x:Name="editImageButton">
<Grid>
<AbsoluteLayout Grid.Column="0">
<ImageButton Source="edit.png" BackgroundColor="Transparent" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" Margin="27,18,0,0"
Grid.Column="0" Grid.Row="0" Clicked="EditDevice_Clicked" WidthRequest="24" HeightRequest="24" />
</AbsoluteLayout>
<AbsoluteLayout Grid.Column="0">
<ImageButton CommandParameter="{Binding .}" Clicked="EditDevice_Clicked" BackgroundColor="Transparent" WidthRequest="50" HeightRequest="60"
Grid.Column="0" Grid.Row="0" AbsoluteLayout.LayoutBounds="1,0,50,60" AbsoluteLayout.LayoutFlags="PositionProportional" HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand" Margin="0,0,0,0" />
</AbsoluteLayout>
</Grid>
</StackLayout>
<StackLayout HorizontalOptions="EndAndExpand">
<Grid>
<AbsoluteLayout Grid.Column="0">
<ImageButton Source="cancel.png" BackgroundColor="Transparent" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" Margin="7,18,0,0"
Grid.Column="0" Grid.Row="0" Clicked="drawerClose" WidthRequest="24" HeightRequest="24" />
</AbsoluteLayout>
<AbsoluteLayout Grid.Column="0">
<ImageButton CommandParameter="{Binding .}" Clicked="drawerClose" BackgroundColor="Transparent" WidthRequest="50" HeightRequest="60"
Grid.Column="0" Grid.Row="0" AbsoluteLayout.LayoutBounds="1,0,50,60" AbsoluteLayout.LayoutFlags="PositionProportional" HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand" Margin="0,0,0,0" />
</AbsoluteLayout>
</Grid>
</StackLayout>
</StackLayout>
<StackLayout x:Name="bottomSlidePanel" Margin="0,-6,0,-9" Opacity="1" BackgroundColor="White" Grid.Row="1"/>
<StackLayout x:Name="slideBottomSection" Orientation="Vertical" BackgroundColor="Transparent" Grid.Row="2" Margin="0,2,0,0" VerticalOptions="EndAndExpand">
<Label x:Name="lblGray" BackgroundColor="#E5E4DF" HorizontalOptions="FillAndExpand" HeightRequest="32" Opacity="0.9" />
<StackLayout x:Name="stacFavSet" Orientation="Horizontal" VerticalOptions="Center" Opacity="1" BackgroundColor="White" Margin="0,-6" HeightRequest="44">
<Label Text="{translate:Translate Favorite}" TextColor="Black" FontSize="17" FontAttributes="None" VerticalOptions="CenterAndExpand" Margin="25,-6,0,-6"/>
<Switch x:Name="favSet" Style="{StaticResource SwitchStyle}" Toggled="Fav_ButtonClicked"/>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Center" Opacity="1" BackgroundColor="White" HeightRequest="44">
<Button Text="{translate:Translate Edit}" Clicked="EditDevice_Clicked" Focused="EditDevice_Clicked" Style="{StaticResource GoldButton}"/>
</StackLayout>
</StackLayout>
</Grid>
</telerikPrimitives:RadSideDrawer.DrawerContent>
</telerikPrimitives:RadSideDrawer>
</Grid>
Hello Sujit,
Could you please share what are the devices you use for testing?
The devices used.
Seen issues-
Phone used/OS: Samsung Galaxy-FE, Android-12
Redmi 10, Android 12
Issues not seen for iPhones.
Hello Sujit,
Thank you for sharing the sample code, it has helped up create a test application trying to re-create your scenario. However, we have been unable to reproduce the issue visible from your screenshot on our side. It appears that on Toggled="Fav_ButtonClicked" you are adding a horizontal StackLayout containing a number of ImageButtons, is this correct? If so, have you specified HeightRequest for each of them? When we set HeightRequest all images/buttons are visible even on emulators with very low resolutions ( see attached screenshot ). Can you also confirm whether there is a difference in the behavior when using emulators and the real devices that you have specified in the previous post.
I'm attaching a test application, based on your code. Should the issue persist, would you be able to modify it so that we can reproduce the issue on our side. It would be very helpful if you could share the content you add on Toggled="Fav_ButtonClicked" .
Regards,NikolayProgress Telerik
Hi Team,
1. We have tested the Sample project which you have given.
We're using AppShell in our project but in the Sample project the MainPage.xaml is only there.
2. And we have updated the Telerik.UI.for.Xamarin Nuget Package version with 2023.1.117.1 in our project. But the issue is still there.
PS. We're unable to install the version "2023.2.606".
To reiterate the issue, lower portion of "<telerikPrimitives:RadSideDrawer.DrawerContent>" is hiding behind the AppShell Task bar in few of the Android devices. But the same implementation in iOS is not an issue.
Please find the attached screenshots for your reference.
Thanks,
Hi Sujit,
Could you please update the project my colleague Nikolay sent to you with the exact implementation you have and send the project to us for further research? You can also create a new project if this one does not match your setup.
Dear Team,
We tried to create a new project. Where we also see there is a Gap between the Sliding Popup form and Bottom Task bar. Kindly have a look on this.
Thanks in advance for your support.
Regards,
Annay Ghosh Mondal
Hi Annay Ghosh Mondal,
Thank you for the provided project. I have tested on my side and noticed the stack with the image buttons is not displayed as its visibility is false:
<StackLayout x:Name="slideBottomSection" Orientation="Vertical" BackgroundColor="Transparent" Grid.Row="2" Margin="0,2,0,0" VerticalOptions="EndAndExpand"> <Label x:Name="lblGray" BackgroundColor="#E5E4DF" HorizontalOptions="FillAndExpand" HeightRequest="32" Opacity="0.9" /> <StackLayout x:Name="stacFavSet" Orientation="Horizontal" VerticalOptions="Center" Opacity="1" BackgroundColor="White" Margin="0,-6" HeightRequest="44"> <Label Text="Label Text" TextColor="Black" FontSize="17" FontAttributes="None" VerticalOptions="CenterAndExpand" Margin="25,-6,0,-6"/> <Switch x:Name="favSet" Toggled="Fav_ButtonClicked"/> </StackLayout> <StackLayout Orientation="Vertical" VerticalOptions="Center" Opacity="1" BackgroundColor="White" HeightRequest="44"> <Button Text="Button Text" Clicked="EditDevice_Clicked" Focused="EditDevice_Clicked"/> </StackLayout> <StackLayout Orientation="Horizontal" x:Name="favourites" IsVisible="false"> <ImageButton HeightRequest="50" Source="fail.png"></ImageButton> <ImageButton HeightRequest="50" Source="bot.png" ></ImageButton> <ImageButton HeightRequest="100" Source="success.png" ></ImageButton> </StackLayout> </StackLayout>Could you please share how you want to display the stack when its visibility is set to false? In addition the buttons are measured with width 0. The behavior is not related to the SideDrawer control. It is a custom layout implementation.
This is the updated XAML:
<StackLayout x:Name="slideBottomSection" Orientation="Vertical" BackgroundColor="Yellow" Grid.Row="2" Margin="0,2,0,0" VerticalOptions="EndAndExpand"> <Label x:Name="lblGray" BackgroundColor="#E5E4DF" HorizontalOptions="FillAndExpand" Text="label" HeightRequest="32" Opacity="0.9" /> <StackLayout x:Name="stacFavSet" Orientation="Horizontal" VerticalOptions="Center" Opacity="1" BackgroundColor="LightCoral" Margin="0,-6" HeightRequest="44"> <Label Text="Label Text" TextColor="Black" FontSize="17" FontAttributes="None" VerticalOptions="CenterAndExpand" Margin="25,-6,0,-6"/> <Switch x:Name="favSet" Toggled="Fav_ButtonClicked"/> </StackLayout> <StackLayout Orientation="Vertical" VerticalOptions="Center" Opacity="1" BackgroundColor="LightBlue" HeightRequest="44"> <Button Text="Button Text" Clicked="EditDevice_Clicked" Focused="EditDevice_Clicked"/> </StackLayout> <StackLayout Orientation="Horizontal" x:Name="favourites" IsVisible="true" BackgroundColor="blue"> <ImageButton HeightRequest="50" WidthRequest="50" BackgroundColor="Red" Source="fail.png"></ImageButton> <ImageButton HeightRequest="50" WidthRequest="50" BackgroundColor="Green" Source="bot.png" ></ImageButton> <ImageButton HeightRequest="100" WidthRequest="50" BackgroundColor="Yellow" Source="success.png" ></ImageButton> </StackLayout> </StackLayout>And the result is attached as image.