Telerik Forums
UI for Xamarin Forum
0 answers
88 views

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>

Thanks                                                         
Sujit
Top achievements
Rank 1
 asked on 29 Jun 2023
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?