Android UI design tips !!!

Hello everyone, I want to share with you some tips on UI design in Android. The main content of this section is: 1. UI design of Android buttons; 2. UI design of Android buttons: the uidesign of listview and gridview.

Button status:

We generally adopt the uidesign. Buttons usually have three states: normal (normal), focus (Focus), and pressed (pressed ). As shown in:

 

 

 

We will define a resource file under the Res/drawable directory, for example, handle. xml used in this example, which defines three States. Each State corresponds to one image:

The Code is as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <item Android: state_window_focused = "false" Android: drawable = "@ drawable/handle_normal"/> <br/> <item Android: state_focused = "true" Android: drawable = "@ drawable/handle_focused"/> <br/> <item Android: state_pressed = "true" Android: drawable = "@ drawable/handle_pressed"/> <br/> </selector> <br/>

To use this resource file, you only need to reference the resource file (Android: Background = "@ drawable/handle") in drawable as follows:

<Button <br/> Android: Id = "@ + ID/handle" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "fill_parent" <br/> Android: Background = "@ drawable/handle" <br/>

Layers in Android:

People who have read "leeching space" know the number of layers of dreams, and Android also has layers. In Android, the first layer of "dream" can be considered as wallpaper. The second layer is the application activity. The third layer is the container placed on the activity (layout objects such as viewgroup and its subclass framelayout and linearlayout). Of course, containers can also be placed in the container, you can also put it on N layers (I have not verified the maximum number of views). In short, the last layer is the controls inherited from views (such as buttons and textviews .)

 

How to Design the UI in listview and gridview? Let's take a look:

It is a listview with a normal white background and a black font. When we click a column, a yellow background will appear. How can this effect be achieved?

The content displayed in the listview cell is actually a layout file defined in the layout directory in advance. From this effect, we can see that there are three "layers" in total"

The background color of the first container (linearlayout) is WHITE:

The second layer is also the container (linearlayout). When you press the button, the background color is yellow and the first layer is blocked (For details, refer to the button ):

The third layer is the control (textview ).

Instance
:

As mentioned above, some people will surely be in the fog, so let's take an instance directly. After the instance is finished, let's look at it again. The effect will be better. Let's follow the steps to come with me:

Step 1: First prepare the materials, prepare the three buttons, and the background image of the listview (the three buttons above already exist, and I will paste only one listview background image below ):

Step 2: Create an android project named uidemo. The directory structure is shown in:

 

Step 3: Create a drawable folder under the res directory and define two resource files: handle. xml and listview_selected.xml. The handle. XML code has been pasted on it. The listview_selected.xml code is as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <selector xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <item Android: state_pressed = "true" Android: drawable = "@ drawable/list_selector_background_pressed"/> <br/> </selector>

Step 4: Modify the main. xml layout file. Here I use the sliddingdrawer control. The Code is as follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> <slidingdrawer <br/> Android: id = "@ + ID/slidingdrawer" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: orientation = "horizontal" <br/> Android: handle = "@ + ID/handle" <br/> Android: content = "@ + ID/content"> <br/> <button <br/> Android: Id = "@ + ID/handle" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "fill_parent" <br/> Android: background = "@ drawable/handle" <br/> <listview <br/> Android: id = "@ + ID/content" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> </slidingdrawer> <br/> </linearlayout> <br/>

The listview control is used here, And the content displayed in the listview control is defined in the layout directory in advance, named listview_layout.xml. The Code is as follows (three layers are available here !) :

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: background = "# ffffff" <br/> <linearlayout <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: Background = "@ drawable/listview_selected" <br/> Android: padding = "6px" <br/> <textview <br/> Android: Id = "@ + ID/bookname" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: textsize = "20px" <br/> Android: textcolor = "#000000" <br/> <textview <br/> Android: Id = "@ + ID/author" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: textsize = "16px" <br/> Android: textcolor = "#000000" <br/> </linearlayout> <br/>

Step 5: Modify the main core program uidemo. java. The Code is as follows:

Package COM. tutor. uidemo; <br/> Import android. app. activity; <br/> Import android. OS. bundle; <br/> Import android. view. layoutinflater; <br/> Import android. view. view; <br/> Import android. view. viewgroup; <br/> Import android. widget. baseadapter; <br/> Import android. widget. listview; <br/> Import android. widget. textview; <br/> public class uidemo extends activity {</P> <p> private listview mlistview; <br/> @ override <br/> Public void oncreate (bundle savedinstancestate) {<br/> super. oncreate (savedinstancestate); <br/> setcontentview (R. layout. main); </P> <p> setupviews (); <br/>}</P> <p> private void setupviews () {<br/> mlistview = (listview) findviewbyid (R. id. content); <br/> mlistview. setadapter (New listviewadapter (); <br/>}</P> <p> private class listviewadapter extends baseadapter {<br/> // 10 rows are returned, the number of rows in the listview depends on the getcount () method <br/> Public int getcount () {<br/> return 10; <br/>}< br/> Public object getitem (INT arg0) {<br/> return NULL; <br/>}< br/> Public long getitemid (INT arg0) {<br/> return 0; <br/>}< br/> Public View getview (INT position, view V, viewgroup parent) {</P> <p> final layoutinflater Inflater = layoutinflater. from (getapplicationcontext (); </P> <p> If (V = NULL) {<br/> V = Inflater. inflate (R. layout. listview_layout, null); <br/>}< br/> textview mbookname = (textview) v. findviewbyid (R. id. bookname); <br/> textview mbookauthor = (textview) v. findviewbyid (R. id. author); </P> <p> mbookname. settext ("android dummies tutorial" + position); <br/> mbookauthor. settext ("frankiewei" + position); <br/> return V; <br/>}</P> <p >}< br/>}

Step 6: run the above project and check the effect:

Running effect 1:

 

Click the button for effect 2:

 

Normal listview effect 3:

 

Listview click effect 4:

 

PS: The sliddingdrawer control and the adapter are used above. If you are not familiar with the above two items, you can refer to other articles:

Android advanced tutorial (ii) ---- android
Launcher drawer class slidingdrawer!
Android advanced tutorial (16) --- omnipotent in Android
Use of baseadapter (spinner, listview, and gridview!

OK! Thank you all...