Android imitation Windows Metro Interface UI

The layout is implemented using LinearLayout (like this layout, we need to consider it globally before the UI, and the operation is relatively simple). Each menu is a Linear block, inside, there is an ImageView and a TextView. Two interfaces are clicked to switch between them. The following figure shows the effect:

 

Since the attribute configurations of each Linear block are almost similar, a unified style is extracted and referenced in an XML file. The following figure shows the layout file code snippet of uidesign:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "horizontal"> <LinearLayout android: layout_width = "wrap_content" android: layout_height = "fill_parent" android: layout_weight = "1" android: orientation = "vertical" android: padding = "20dp"> <LinearLayout android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <LinearLayout style = "@ style/menu_item_block_orange"> <ImageView style = "@ style/menu_item_img" android: src = "@ drawable/menu_icon_mail"/> <TextView style = "@ style/menu_item_txt" android: text = "Short Message"/> </LinearLayout> <LinearLayout style = "@ style/menu_item_block_orange" android: layout_marginLeft = "5dp"> <ImageView style = "@ style/menu_item_img" android: src = "@ drawable/menu_icon_calendar"/> <TextView style = "@ style/menu_item_txt" android: text = "calendar"/> </LinearLayout> <LinearLayout android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_marginTop = "5dp" android: orientation = "horizontal"> <LinearLayout style = "@ style/menu_item_block_orange"> <ImageView style = "@ style/menu_item_img" android: src = "@ drawable/menu_icon_phone"/> <TextView style = "@ style/menu_item_txt" android: text = "phone"/> </LinearLayout> <LinearLayout style = "@ style/menu_item_block_orange" android: layout_marginLeft = "5dp"> <ImageView style = "@ style/menu_item_img" android: src = "@ drawable/menu_icon_gmail"/> <TextView style = "@ style/menu_item_txt" android: text = "Gmail"/> </LinearLayout>