4

I am currently designing a login page and I've run into a problem with using rounded rectangles. My current layout looks somewhat like this:

enter image description here

It's a rounded rectangle containing a smaller rounded rectangle.

As you can see, the right edges of both rectangles seem to merge. However, I want to maintain a constant distance between the borders of the two rectangles for a crisper look. Is there any way I can do this?

SpeedBirdNine
  • 4,610
  • 11
  • 49
  • 67
Jason L
  • 1,812
  • 2
  • 22
  • 43

3 Answers3

2

On the EditText you may want to try layout_marginRight in the XML.

techi.services
  • 8,473
  • 4
  • 39
  • 42
1

If your outer rect is outerRect and already contains the coordinates, then you can set the bounds of the inner rect relative to the outerRect's bound. 

Rect innnerRect = new Rect(outerRect.left+5, outerRect.top+5, 
                           outerRect.right-5, outerRect.bottom-5);

Update:

You can also make the image a 9-patch drawable. Define the middle of inner rect area as stretchable.

Ron
  • 24,175
  • 8
  • 56
  • 97
1

In order to do that, the rectangles need to have the same radius on each corner.

If the corners of the outer rectangle have a 10dp radius, the inner rectangle should also have a 10dp radius.

Edit:

You also need to have the same padding/margins on the top, bottom and right side of the inner rectangle. Check your margins and paddings so they add up to the same value.

Pedro Loureiro
  • 11,436
  • 2
  • 31
  • 37