1. Introducing Channels - a new way to chat with other Android users!
    Dismiss Notice

Creating Text Boxes with Rounded edges.


Last Updated:

  1. retro8

    retro8 Member This Topic's Starter

    Joined:
    Jun 28, 2010
    Messages:
    8
    Likes Received:
    0
    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

    Joined:
    Jul 13, 2010
    Messages:
    1,934
    Likes Received:
    458
    Set the background property of the text box to an image of your liking?
     
  3. retro8

    retro8 Member This Topic's Starter

    Joined:
    Jun 28, 2010
    Messages:
    8
    Likes Received:
    0
    Then I cannot tween.
     
  4. Sway

    Sway New Member

    Joined:
    Oct 10, 2010
    Messages:
    2
    Likes Received:
    0
    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

    Joined:
    May 15, 2010
    Messages:
    105
    Likes Received:
    13
    Why are you posting CSS in an Android forum???
     
  6. andywhoa

    andywhoa Well-Known Member

    Joined:
    May 15, 2010
    Messages:
    105
    Likes Received:
    13
    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. IanGClifton

    IanGClifton Well-Known Member

    Joined:
    Feb 7, 2010
    Messages:
    111
    Likes Received:
    19
    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...