Solved

UI design question

Posted on 2012-04-04
9
665 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:santhanasamy
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:santhanasamy
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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 8

Expert Comment

by:santhanasamy
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:santhanasamy
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:
santhanasamy earned 500 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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

I tend toward trying the newest hardware and software.  Thiss sometimes works out to my benefit, and sometimes not.  Because I downloaded and installed Android 5.x (http://www.experts-exchange.com/articles/18084/Upgrading-to-Android-5-0-Lollipop.htm…
I recently asked a question (http://www.experts-exchange.com/Programming/Smartphones/Android/Q_28684946.html) about Computer Inventory applications for Mobile Devices.  I was specifically interested in an app I could use on my android phone.  The be…
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.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

705 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now