Creating Text Boxes with Rounded edges.

Last Updated:

  1. retro8

    retro8 Member

    Hello all,

    What I am attempting to do is create several rounded rectangles which are clickable and they will then expand to full screen and have non-editable text in them. The Image below may be of some assistance.


    As you can see, I have a mobile phone screen indicated within the black box.
    If I am to click on one of the red rectangles on the left it will then expand to a larger red rectangle on the right.

    I need the following two answers if possible.

    1) What is the best way to create rounded rectangle boxes as shown?
    2) Does anyone have any guidance as to how I should go about tweening this. I.E any tutorials they know of?


    PS. I am not looking for code examples, just advice.

  2. jonbonazza

    jonbonazza Well-Known Member

    Set the background property of the text box to an image of your liking?
  3. retro8

    retro8 Member

    Then I cannot tween.
  4. Sway

    Sway New Member

    I'm not really sure what you want but I can give you a code on a rounded text box.

    This is the image I will be using:

    This is the HTML code for the rounded textbox:

    This is the CSS code for the rounded textbox:

    Then you can type in the image.
    If you want to make the box larger here is the code:

  5. andywhoa

    andywhoa Well-Known Member

    Why are you posting CSS in an Android forum???
  6. andywhoa

    andywhoa Well-Known Member

    Try this...

    Create an XML file in your drawables directory called "rounded_edges.xml" and paste this into it:
    Code (Text):
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <shape xmlns:android="">
    3.     <solid android:color="#FFFFFF"/>
    4.     <corners android:radius="5px"/>
    5.     <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
    6. </shape>
    Inside the layout you're using for your Activity, use this:
    Code (Text):
    1.         <LinearLayout
    2.             android:orientation="vertical"
    3.             android:layout_width="wrap_content"
    4.             android:layout_height="wrap_content"
    5.             android:background="@drawable/rounded_edges"
    6.             >
    7.             <TextView
    8.                 android:id="@+id/mytext"
    9.                 android:layout_width="200dip"
    10.                 android:layout_height="wrap_content"
    11.                 android:text="blah blah blah blah"
    12.                 android:padding="6dip"
    13.                 android:textColor="#000000" />
    14.         </LinearLayout>
    You may need to do some tweaking. Hell, you may even be able to discard the LinearLayout and set the android:background of the TextView to @drawable/rounded_edges
    balane likes this.
  7. IanGClifton

    IanGClifton Well-Known Member

    I'd create an XML drawable (shape) as a rectangle with rounded corners and set that as your View's background. You can apply an animation to the View by setting an onClickListener that triggers the animation.

Share This Page