Creating Text Boxes with Rounded edges.

Discussion in 'Application Development' started by retro8, Oct 7, 2010.

  1. retro8

    retro8 Member
    5

    Jun 28, 2010
    8
    0
    5
    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.

    [​IMG]

    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?

    Thanks,
    Retro8

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

    Advertisement

  2. jonbonazza

    jonbonazza Well-Known Member
    163

    Jul 13, 2010
    1,934
    458
    163
    Male
    Set the background property of the text box to an image of your liking?
     
  3. retro8

    retro8 Member
    5

    Jun 28, 2010
    8
    0
    5
    Then I cannot tween.
     
  4. Sway

    Sway New Member
    5

    Oct 10, 2010
    2
    0
    5
    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:
    [​IMG]


    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:

    -Sway
     
  5. andywhoa

    andywhoa Well-Known Member
    38

    May 15, 2010
    105
    13
    38
    Software Engineer
    West Des Moines, IA
    Why are you posting CSS in an Android forum???
     
  6. andywhoa

    andywhoa Well-Known Member
    38

    May 15, 2010
    105
    13
    38
    Software Engineer
    West Des Moines, IA
    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="http://schemas.android.com/apk/res/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. 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

Loading...