Solved

UI design question

Posted on 2012-04-04
9
673 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Suggested Solutions

Title # Comments Views Activity
iOS Upgrade to 9.3.5 failing 7 59
saving voicemail from mobile phone to pc.. 4 96
Way to decrease size of apk file 9 86
spam sms 9 39
Introduction This article is a continuation of Part-1 as evident from the title. Please visit this page (http://www.experts-exchange.com/articles/18706/Backing-up-personal-data-on-your-Android-device-Part-1.html) to read the earlier Part -1. If y…
A short article about a problem I had getting the GPS LocationListener working.
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.
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…

809 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