Go Back   Android Forums > Android Development > Application Development
Application Development Dev lounge for our application developers.

New Forums: Nexus Player | Nexus 9
test: Reply
 
LinkBack Thread Tools
Old October 7th, 2010, 02:02 PM   #1 (permalink)
New Member
Thread Author (OP)
 
Join Date: Jun 2010
Posts: 8
 
Device(s):
Carrier: Not Provided

Thanks: 2
Thanked 0 Times in 0 Posts
Default Creating Text Boxes with Rounded edges.

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.

Advertisements
retro8 is offline  
Reply With Quote
sponsored links
Old October 9th, 2010, 04:06 PM   #2 (permalink)
Senior Member
 
jonbonazza's Avatar
 
Join Date: Jul 2010
Gender: Male
Posts: 1,935
 
Device(s): Nexus 4, Samsung Galaxy S II, HTC Evo 4G, Amazon Kindle Fire
Carrier: ATT

Thanks: 235
Thanked 482 Times in 294 Posts
Default

Set the background property of the text box to an image of your liking?
jonbonazza is offline  
Reply With Quote
Old October 10th, 2010, 09:59 AM   #3 (permalink)
New Member
Thread Author (OP)
 
Join Date: Jun 2010
Posts: 8
 
Device(s):
Carrier: Not Provided

Thanks: 2
Thanked 0 Times in 0 Posts
Default

Then I cannot tween.
retro8 is offline  
Reply With Quote
Old October 10th, 2010, 10:46 AM   #4 (permalink)
New Member
 
Sway's Avatar
 
Join Date: Oct 2010
Posts: 2
 
Device(s):
Carrier: Not Provided

Thanks: 0
Thanked 0 Times in 0 Posts
Default

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:
Quote:
<div class="loginboxdiv">
<input class="loginbox" name="username" type="text" />
</div>


This is the CSS code for the rounded textbox:
Quote:
.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:

Quote:
.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
Sway is offline  
Reply With Quote
Old October 12th, 2010, 10:58 AM   #5 (permalink)
Member
 
Join Date: May 2010
Location: West Des Moines, IA
Posts: 105
 
Device(s):
Carrier: Not Provided

Thanks: 9
Thanked 13 Times in 12 Posts
Default

Why are you posting CSS in an Android forum???
andywhoa is offline  
Reply With Quote
Old October 12th, 2010, 11:02 AM   #6 (permalink)
Member
 
Join Date: May 2010
Location: West Des Moines, IA
Posts: 105
 
Device(s):
Carrier: Not Provided

Thanks: 9
Thanked 13 Times in 12 Posts
Default

Try this...

Create an XML file in your drawables directory called "rounded_edges.xml" and paste this into it:
Code:
<?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:
Code:
		<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
andywhoa is offline  
Reply With Quote
The Following User Says Thank You to andywhoa For This Useful Post:
balane (February 25th, 2011)
Old October 12th, 2010, 07:09 PM   #7 (permalink)
Member
 
Join Date: Feb 2010
Location: Seattle, WA, USA
Posts: 111
 
Device(s): Nexus One, Motorola Cliq, G1
Carrier: Not Provided

Thanks: 1
Thanked 19 Times in 17 Posts
Default

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.
IanGClifton is offline  
Reply With Quote
Reply


Go Back   Android Forums > Android Development > Application Development
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



All times are GMT -5. The time now is 09:06 AM.
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.