Text wrapping issue on android

AjayPalanAjayPalan USMember ✭✭

Hello,

I am working on a chat application and using frame to create a chat bubble around chats. I am facing problem as text wrapping on label is goofy. I had tried different things like layout changes but it doesn't work.

I am using xamarin forms and with the same code the issue is not with iOS. It only exist in Droid devices. I am sharing the code and screenshot of issue below.

Please note that the code I am sharing is for receiving chat.

The code is as follows:

<Grid ColumnSpacing="2" Padding="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="40" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.Resources>

                <ResourceDictionary>
                    //Resources goes here
            </Grid.Resources>

            <Frame Grid.Row="0" OutlineColor="Transparent" Margin="5,0" Padding="8" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Grid.Column="0" BackgroundColor="#F5F4F9">
                <StackLayout>
                    <Label TextColor="#4a4a4a" Text="{Binding Text,Converter={StaticResource DecodeString}}" LineBreakMode="WordWrap">
                        <Label.FontSize>
                            <OnPlatform x:TypeArguments="x:Double" Android="15" iOS="16" />
                        </Label.FontSize>
                    </Label>
                </StackLayout>
            </Frame>

            <Label FontSize="Micro" Margin="8,0" HorizontalOptions="Start" Grid.Row="1" Grid.Column="0" Text="{Binding Time, Converter={StaticResource convertTime}}" TextColor="Gray" />
        </Grid>

In the sreenshot you can see that the extra space is occupied by label. This is not happening in iOS. Is there a way to solve the issue on droid. Any help is appreciated.

Answers

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Hi @AjayPalan ,

    This behavior I guess is correct, may be there is no room for additional character(s) and the text fall on the next line. This is really logical and I do not see any problem with that.

    See this edited image for what I mean to say.

    Hope this helps.

    Regards,
    N Baua

  • AjayPalanAjayPalan USMember ✭✭

    Hello @N_Baua ,

    Yes, I understand that but, the issue is that if the word is not fitting then the frame which contains label should not expand to the end. It should end after "It" only. This does't look nice as the padding for each bubble doesn't look equal.

    It should look like this:

    and not like this:

    It is working fine on iOS. The issue is with Android devices only.

  • N_BauaN_Baua INMember ✭✭✭✭✭
    edited July 2017

    OKey got your point,
    Can you just try setting the **StackLayout property as **HorizontalOptions=FillAndExpand under your **Frame ** which is raw right now.

    Additional hint:
    While testing add some hard coded background color value which will help you determine which component take the whole room and which not.

    Hope this helps.
    Regards,
    N Baua

  • AjayPalanAjayPalan USMember ✭✭

    Hello @N_Baua ,

    I have tried that before as well but, it didn't work. I have also tried with putting solid background color to stackLayout. Actually, stackLayout itself is taking that extra space. I am not sure how. Let me do that again and share a screenshot with you.

    I have set aqua color to stackLayout background and the result was

    Do you have any idea why it is happening ?

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Hey Man, This was so straight,
    <ColumnDefinition Width="*" /> <ColumnDefinition Width="40" />

    The second ColumnDefinition is messing with you buddy, Android takes every thing seriously :smile: .

    See this is the only change I made and things works as they should.

    Hope this helps and if it does, mark as answer.
    Regards,
    N Baua

  • AjayPalanAjayPalan USMember ✭✭

    Hey @N_Baua ,

    I have tried removing columnDefinition but , still it doesn't work. I think you are misunderstanding a bit. That columnDefinition: 40 is to leave the space from right for incoming messages. But, still I tried your suggestion and it didn't word.

    One more thing, the issue occurs only when the last word of a line in a label is big enough and doesn't fit. then only the word gets wrapped to next line and space is left to the right.
    Can you please try it with your code ? just try to use a big word instead of word "with" at the end of first line in your code and see how it words.

    Let me share my code with minimal changes I made according to you advice

    <Grid ColumnSpacing="2" Padding="5">
    
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.Resources>
                <ResourceDictionary>
                // resources goes here...
                </ResourceDictionary>
            </Grid.Resources>
    
            <Frame Grid.Row="0" OutlineColor="Transparent" Margin="5,0,45,0" Padding="8" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" BackgroundColor="#F5F4F9">
            <Frame.HasShadow>
              <OnPlatform x:TypeArguments="x:Boolean" Android="True" iOS="False"/>
            </Frame.HasShadow>
          <StackLayout BackgroundColor="Aqua">
            <Label TextColor="#4a4a4a" Text="{Binding Text,Converter={StaticResource DecodeString}}">
              <Label.FontSize>
                <OnPlatform x:TypeArguments="x:Double" Android="15" iOS="16" />
              </Label.FontSize>
            </Label>
                </StackLayout>
            </Frame>
            <Label FontSize="Micro" Margin="5,0" HorizontalOptions="Start" Grid.Row="1" Text="{Binding Time, Converter={StaticResource convertTime}}" TextColor="Gray">
            </Label>
        </Grid>
    

    The output for this code is:

  • N_BauaN_Baua INMember ✭✭✭✭✭
    edited July 2017

    @AjayPalan ,

    Buddy, its working without any problem (and no change except removing 40px thing as suggested in last post) at my end, try changing simulator if you are previewing in that.
    This is the real device (Lenovo A7000) capture.

    Regards,
    N Baua

  • AjayPalanAjayPalan USMember ✭✭

    Hey @N_Baua ,

    I am using Samsung S6 to test to run the app. Again it seems like you are little misunderstanding what my question is.

    Let me give you a clear view again. My concern is if the words are wrapping themselves and shifting to next line the size of frame(in my app's case its chat bubble) should reduce itself in width to fit the text... right ??

    But that is not happening in case of droid. It is happening in iOS only.

    Even in your code, see the last screenshot you uploaded. the space after word "new" and "phrases", they are not right, the space shouldn't be there.

    The frame in background is growing to full width even though the words are not occupying full width.

    Hope you understand the problem

    Regards,
    Ajay

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @AjayPalan ,

    It was so obvious then

    use <ColumnDefinition Width="Auto" /> instead of <ColumnDefinition Width="*" />

    Now don't ask me to do right align version :naughty:

    Regards,
    N Baua

  • AjayPalanAjayPalan USMember ✭✭

    @N_Baua ,

    Dude, whatever you are suggesting, I have already tried those things before and all the things failed to solve my problem.

    I am not sure but, I think there is some confusion and you are not understanding my issue.

    The issue is regarding the extra space I am getting when word moves to next line due to insufficient space. It is not occurring with input which is having only one line of text.

    Even I am seeing the same issue in your output as well.

    this problem occurs only with a long word at the end of the line as it is in your screenshot. It is some weird behavior I am seeing in Android. I know it is difficult to understand :) :) but, hope you get it this time...

  • N_BauaN_Baua INMember ✭✭✭✭✭
    edited July 2017

    I hate when people just complain, If you have tried everything, post here your attempts.
    Why in this world me and you should be getting two different outputs.

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" /> -----> This be as 'Auto' should shrink
    <ColumnDefinition Width="40" /> ------> removing this should remove that buffer space
    </Grid.ColumnDefinitions>

    Now that should solve your miss-understanding.
    There's nothing wrong in asking, its wrong to relay too much when asking.

    Regards,
    N Baua

  • AjayPalanAjayPalan USMember ✭✭

    @N_Baua ,

    Hey, There is nothing to get angry of. I appreciate your help a lot. I am not relaying on you for answer, you seem like intelligent guy who can help me with the issue and I just thought that you are not getting my problem.

    My friend, I am sorry to say but, I guess your solution is wrong. Why don't you try to put the string I will send you as input in your code and share screenshot. Just to show that your solution is correct.

    It is just a request.

    Try entering the input as "Something was breaking this, when some new internationalization stuff with highly qualified phrases appeared." and please share your output with me.

    Thanks for all the help!! :)

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @AjayPalan

    No man I am not mad at you.
    Just want to suggest, When posting questions, you should also supply ample information.
    Sometimes, people interpret differently, there are many such things which mean something else while you want to say something other.

    Hope my last comment was not rude, I work 12 hours in office, so sometimes it becomes obvious I sound little harsh. My juniors who work with me are candidates to this, but they still love me, coz if they are in problem, I'll help them to the last bit no matter what,

    If your problem is sorted out now, mark my previous post as an answer.

    Regards,
    N Baua

  • AjayPalanAjayPalan USMember ✭✭

    No, It didn't solve my problem.

  • ericcericc Member

    Is there any solution? I am facing the same problem.

  • yuba30yuba30 USMember ✭✭

    I hit something very similar (with Editor instead of Label) so just want to post fix in case anyone else hits it. The label is wrapped in a StackLayout which for me was causing text to scroll off screen on Android. Once I switched to Grid it worked fine. Xamarin seems to have little issues like this from time to time.

Sign In or Register to comment.