Apps Creating Text Boxes with Rounded edges.

[retro8]

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?

Thanks,
Retro8

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

 

[jonbonazza]

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

 

[retro8]

Then I cannot tween.

 

[Sway]

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:

<div class="loginboxdiv">
<input class="loginbox" name="username" type="text" />
</div>

This is the CSS code for the rounded textbox:

.loginboxdiv
{
margin:0;
height:21px;
width:146px;
background:url(login_bg.gif) no-repeat bottom;
}
.loginbox
{
background:none;
border:none;
width:134px;
height:15px;
margin:0;
padding: 2px 7px 0px 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

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

.loginboxdiv
{
margin:0;
height:CHANGE THIS;
width:CHANGE THIS;
background:url(login_bg.gif) no-repeat bottom;
}
.loginbox
{
background:none;
border:none;
width:CHANGE THIS;
height:CHANGE THIS;
margin:0;
padding: 2px 7px 0px 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

-Sway

 

[Deleted User]

Why are you posting CSS in an Android forum???

 

[Deleted User]

Try this...

Create an XML file in your drawables directory called "rounded_edges.xml" and paste this into it:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<solid android:color="#FFFFFF"/>
	<corners android:radius="5px"/>
	<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> 
</shape>

Inside the layout you're using for your Activity, use this:

		<LinearLayout
			android:orientation="vertical"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:background="@drawable/rounded_edges"
			>
			<TextView 
				android:id="@+id/mytext"
				android:layout_width="200dip"
				android:layout_height="wrap_content"
				android:text="blah blah blah blah"
				android:padding="6dip"
				android:textColor="#000000" />
		</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

 

[Deleted User]

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.