question

nnovalbos-6961 avatar image
0 Votes"
nnovalbos-6961 asked RobCaplan edited

Rounded corner for Entry

Hi,

I'm doing a custom render in order to have an entry with rounded edges.

It works perfectly for me until I disable them, at this moment a rectangle appears with the default gray background color.

How could I make only the inside of the field visible?

Code of android renderer:

 protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
         {
             base.OnElementChanged(e);
             if (Control != null)
             {
                 Control.SetBackgroundColor(Android.Graphics.Color.White);
                 Control.Background = Control.Enabled ? ContextCompat.GetDrawable(Context, Resource.Drawable.roundcornerbutton) :
                     ContextCompat.GetDrawable(Context, Resource.Drawable.disableroundcornerbutton);
    
                 Control.SetHintTextColor(Color.Gray.ToAndroid());
                 Control.Gravity = GravityFlags.CenterVertical;
             }
         }

The roundcornerbutton's drawable:

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" >
   <stroke android:width="1dp" android:color="#e7e7e7" />
   <solid android:color="#ffffff" />
   <padding android:left="10dp" android:right="60dp" android:top="1dp" />
   <corners android:radius="5dp" />
 </shape>


Thanks

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

nnovalbos-6961 avatar image
0 Votes"
nnovalbos-6961 answered LeonLu-MSFT commented

I think I have already found the problem.

What was causing me this behavior this line (from the implementation of the renderer in android):

 Control.SetBackgroundColor (Android.Graphics.Color.White);

I get the feeling that when setting that background color the rectangle is redrawn.

If we remove that and set the BackGroundColor, of the entry element in Xaml, to transparent, I get the expected result.

Thank you very much for the help!

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Great. You are welcome.

0 Votes 0 ·
LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered nnovalbos-6961 commented

Hello,​

Welcome to our Microsoft Q&A platform!

It works perfectly for me until I disable them, at this moment a rectangle appears with the default gray background color.

How could I make only the inside of the field visible?

Do you mean when Entry's IsEnabled set to false then you want to make only the inside of the field visible?

If so, I notice you have disableroundcornerbutton.xml, please copy following xml code. I set the background color and cornor color to transparent.

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="1dp" android:color="#00000000" />
  <solid android:color="#00000000" />
  <padding android:left="10dp" android:right="60dp" android:top="1dp" />
  <corners android:radius="0dp" />
</shape>



Here is running screenshot when I disable the entry.

110425-image.png

=========================Update========================

Do you want to achieve it like this screenshot?

110365-image.png

If so, please copy the following code to your disableroundcornerbutton.xml.

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="2dp" android:color="#e5e5e5" />
  <solid android:color="#f0f0f0" />
  <padding android:left="10dp" android:right="60dp" android:top="1dp" />
  <corners android:radius="5dp" />
</shape>


Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (12.9 KiB)
image.png (8.9 KiB)
· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, @LeonLu-MSFT

thanks for answering.

I think I did not explain myself well.

I want to obtain a custom entry in android that when disabled remains as in iOS (photo):

110493-img-2574.jpg


But I actually get this (I have set the background to red so that the back rectangle shows)

110502-img-2575.jpg

How can I keep only the red part and the rectangle behind it disappears, keeping the functionality provided by being disabled?

Thanks


0 Votes 0 ·
img-2574.jpg (8.6 KiB)
img-2575.jpg (11.8 KiB)

Please see my update answer.

0 Votes 0 ·

Hi,

I'm still having the same problem :(

0 Votes 0 ·
Show more comments