?
Solved

UI design question

Posted on 2012-04-04
9
Medium Priority
?
700 Views
Last Modified: 2012-06-04
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?
0
Comment
Question by:KOV_VZW
  • 5
  • 3
9 Comments
 
LVL 24

Expert Comment

by:alexey_gusev
ID: 37809848
yes of course it is possible :)

for instance, have a look at shapes, or alternatively you could set a background and so on...
0
 
LVL 8

Expert Comment

by:Santhana
ID: 37810127
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
 
LVL 8

Expert Comment

by:Santhana
ID: 37810797
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 

Author Comment

by:KOV_VZW
ID: 37823006
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
 
LVL 8

Expert Comment

by:Santhana
ID: 37823121
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
 

Author Comment

by:KOV_VZW
ID: 37824640
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
 
LVL 8

Expert Comment

by:Santhana
ID: 37826250
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
 

Author Comment

by:KOV_VZW
ID: 37844709
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
 
LVL 8

Accepted Solution

by:
Santhana earned 1000 total points
ID: 37848076
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The case of the missing phone talks about the way a small electronic gadget (the mobile phone) has penetrated into our lives and has made us addicted to it.
These days software publishers make it possible to move all the possible applications on smartphones, tablets, smartwatches, and more. Although behind every logic and decision is a gross doubt: how do they make it possible? In this blog post, we sha…
This video is in connection to the article "The case of a missing mobile phone (https://www.experts-exchange.com/articles/28474/The-Case-of-a-Missing-Mobile-Phone.html)". It will help one to understand clearly the steps to track a lost android phone.
This video tutorial shows you the steps to go through to set up what I believe to be the best email app on the android platform to read Exchange mail.  Get the app on your phone: The first step is to make sure you have the Samsung Email app on your …

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question