UI design question

I made a small app using phonegap, html5 and jquerymobile.
Here a screenshot of the app:
Example of Jquerymobile
I want to move to make an app using mono instead of Java.
For the UI I'll have to use the standard Android Views.
Is it possible to recreate the above UI with the standard Android views?
Including the rounded corners?
KOV_VZWAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

alexey_gusevCommented:
yes of course it is possible :)

for instance, have a look at shapes, or alternatively you could set a background and so on...
0
SanthanaTechnical LeadCommented:
Hi KOV_VZW,

yes, we can do the same by using standard android  view...

Look into this link to create rounded corner EditText/TextView...In this link they just created a drawable resource that specifies the way the EditText will be drawn:

http://stackoverflow.com/questions/3646415/how-to-create-edittext-with-rounded-corners
0
SanthanaTechnical LeadCommented:
Hi KOV_VZW,

Find the sample code written in  standard android way..
bottom-edittext-states.xml
edittext-states.xml
top-edittext-states.xml
main-layout.xml
RoundCorner.java
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

KOV_VZWAuthor Commented:
Thanks for the tips.
The current situation:

Current situation
Below the code used.
Tips are welcome for: (see top of this question for a screenshot the final result)
- some empty space at the top of the page
- small line between buttons, bottom border of button?
- the arrow in the button

<Button  
    android:id="@+id/myButton1"
    android:layout_width="259px" 
    android:layout_height="wrap_content" 
	android:layout_marginLeft="20dp"
    android:text="@string/Autofolders"
	android:background="@drawable/rounded_top_corners"
	android:gravity="left"
    />

Open in new window

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
	<solid android:color="#FFFF00"/>
	<corners
		android:topLeftRadius="15dp"
		android:topRightRadius="15dp"
	/>
	<padding
		android:left="10dp"
	/>
</shape>

Open in new window

0
SanthanaTechnical LeadCommented:
Hi,

Have you tested my code ... Check with my code.....

To add  arrow  use this param  android:drawable="@android:drawable/dark_header"

Here you should add your own custom image with arrow and with out arrow.

Following xml file i have added this property( bold letter)

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/edittext_rounded_corners.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
<item android:state_pressed="true" android:state_focused="true">
    <shape>
        <solid android:color="#FF8000"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />
    </shape>
</item>
 
<item android:state_pressed="true" android:state_focused="false">
    <shape>
        <solid android:color="#FF8000"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />      
    </shape>
</item>
 
<item android:state_pressed="false" android:state_focused="true">
    <shape>
        <solid android:color="#FFFFFF"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />  
    </shape>
</item>
 
<item android:state_pressed="false" android:state_focused="false"
    android:drawable="@android:drawable/dark_header">
    <shape>
        <gradient  
            android:startColor="#F2F2F2"
            android:centerColor="#FFFFFF"
            android:endColor="#FFFFFF"
            android:angle="270"
        />
        <stroke
            android:width="0.7dp"                
            android:color="#BDBDBD" />  
    </shape>
</item>
 
<item android:state_enabled="true">
    <shape>
        <padding  
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
            />
    </shape>
</item>
 
</selector>
0
KOV_VZWAuthor Commented:
I tried your code.
The result is a black button that turns red when clicked on in the emulator.
On the other hand, I only need an arrow and not all the states of the item.
The image should be the size of the button?
The point  of the arrow is to show the user that something will happen when the the button is pushed.
0
SanthanaTechnical LeadCommented:
Check the image "dark_header" from the android framework....or from the following link
http://docs.since2006.com/android/2.1-drawables.php

1) The result is a black button that turns red when clicked on in the emulator.
I have added different button states with different color.. Modify according to your requirment.

2) On the other hand, I only need an arrow and not all the states of the item. Try some thing like this
<Button   android:text="@+id/Button01"  
                android:id="@+id/Button01"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:drawableRight="@drawable/expandericon"  
                android:background="@drawable/rounded_top_corners">
</Button>
0
KOV_VZWAuthor Commented:
The drawableRight is working just fine.
In the meantime did some testing when I need to dynamically create several buttons depending on data in a database.
So now I have

<Button  
    android:id="@+id/myButton3"
    android:layout_width="259px"
    android:layout_height="wrap_content" 
    android:layout_marginLeft="20dp"
    android:text="@string/Modelautos"
    android:drawableRight="@drawable/icon"
    android:background="@drawable/rounded_bottom_corners"
    android:gravity="left"
/>

Open in new window


Where do I find good documenation about the andoid:___ parameters?

To put this in code (in my case Mono for Android) is very complicated and it is hard to find any documentation how to do this.

Anyone an idea where to find proper documentation?
0
SanthanaTechnical LeadCommented:
Hi,
Google has given excellent documentation ............

Refer this link for View & ViewGrop params....
http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html

Here you can find the documentation for other views(Line Button, TextView..etc...)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Android

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.