어린왕자와 여우

It is well known that iPhone has nice set of native controls for UI elements. Basically, when my colleagues worked on Magentic iPhone application I wanted to make one for Android too. But on Android platform, I don’t have same type user interface controls, so I decided to explore power of Android native options in order to create my custom UI.

Of course that we can use these steps to make any custom UI element for Android application.

For purpose of this article, we are going to create a custom Detail View for Android Magentic Application where should be displayed details about selected ListView item.

In order to start, we need to have installed Eclipse with ADT tool plug-in and also Android SDK already installed and configured.

Basic steps:

Create layout xml file

Create or open existing android project with Eclipse and inside res/layout folder of your project, create layout file for new detail screen.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="35dip"
android:background="@drawable/header"
android:orientation="horizontal"
android:padding="0dip" >
<TextView
android:id="@+id/apptitle"
style="@style/TitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dip"
android:padding="0dip"
android:text="@string/app_title" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/backgroundGrey" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/backgroundGrey"
android:padding="15dip"
android:stretchColumns="1" >
<TableRow
android:layout_marginBottom="0dip"
android:background="@drawable/multitext_top" >
<TextView
style="@style/BoldText"
android:padding="7dip"
android:text="@string/detail_log_file" />
</TableRow>
<TableRow
android:layout_marginBottom="10dip"
android:background="@drawable/multitext_bottom" >
<TextView
android:id="@+id/log_file"
style="@style/DetailRightText"
android:layout_width="0dip"
android:layout_span="2"
android:gravity="right"
android:padding="7dip" />
</TableRow>
<TableRow
android:layout_marginBottom="10dip"
android:background="@drawable/rounded_edittext" >
<TextView
style="@style/BoldText"
android:padding="7dip"
android:text="@string/detail_log_id" />
<TextView
android:id="@+id/log_id"
style="@style/DetailRightText"
android:gravity="right"
android:padding="7dip"
android:singleLine="true" />
</TableRow>
<TableRow android:background="@drawable/multitext_top" >
<TextView
style="@style/BoldText"
android:layout_span="2"
android:padding="7dip"
android:text="@string/detail_message" />
</TableRow>
<TableRow
android:layout_marginBottom="10dip"
android:background="@drawable/multitext_bottom" >
<TextView
android:id="@+id/log_message"
style="@style/DetailMessageText"
android:layout_span="2"
android:layout_weight="1"
android:padding="7dip" />
</TableRow>
<TableRow
android:layout_marginBottom="10dip"
android:background="@drawable/rounded_edittext" >
<TextView
style="@style/BoldText"
android:padding="7dip"
android:text="@string/detail_priority" />
<TextView
android:id="@+id/log_priority"
style="@style/DetailRightText"
android:gravity="right"
android:padding="7dip"
android:singleLine="true" />
</TableRow>
<TableRow
android:layout_marginBottom="10dip"
android:background="@drawable/rounded_edittext" >
<TextView
style="@style/BoldText"
android:padding="7dip"
android:text="@string/detail_priority_name" />
<TextView
android:id="@+id/log_priority_name"
style="@style/DetailRightText"
android:gravity="right"
android:padding="7dip"
android:singleLine="true" />
</TableRow>
<TableRow
android:layout_marginBottom="0dip"
android:background="@drawable/multitext_top" >
<TextView
style="@style/BoldText"
android:padding="7dip"
android:text="@string/detail_timestamp" />
</TableRow>
<TableRow
android:layout_marginBottom="10dip"
android:background="@drawable/multitext_bottom" >
<TextView
android:id="@+id/log_timestamp"
style="@style/DetailMessageText"
android:layout_span="2"
android:layout_weight="1"
android:padding="7dip" />
</TableRow>
</TableLayout>
</ScrollView>
</LinearLayout>

As you can see, I created the linear layout as container and inside it, for purpose of scrolling there is ScrollView.
Inside the ScrollView, I put the TableLayout because,  for purpose of this detail view I need two columns in some rows – to display some label – value data.

Of course, in each TableRow there are some TextView controls in which the real values will be displayed.
I also defined some styles for text displaying to avoid duplicating font formatting values.

Inside MainActivity class we need to put something like this in order to use our layout:

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.detail);
    }

Our screen is not ready for display yet. The main idea for custom look and feel TextViews is to set the custom background on each TableRow that holds TextView elements.

Also, you can notice that for single – row TextViews, the parent TableRow background is set to be @drawable/rounded_edittext and for multy – line TextViews where are expected to be more then one line of text, the background of parent TableRow is set to @drawable/multitext_top and @drawable/multitext_bottom.

Let’s create our drawables in order to make whole thing work.

Inside res/drawable folder, create file rounded_edittext.xml which should look like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle" >
<solid android:color="@color/DEFAULT" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
<item android:bottom="1px">
<shape
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="@color/DEFAULT" />
<stroke
android:width="1dip"
android:color="@color/borderGrey" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
</item>
</layer-list>

Basically, we are defining some layers list for purpose having little “shadow” on the bottom. In top layer we defined the item which is rectangle and also we define corners of that rectangle to be rounded with radius 7dp.
Bottom layer is used like some kind of shadow and notice that is defined bottom value of 1px in order to be moved bottom 1px from top layer.

For multitext_top and multitext_bottom xml files source code looks like this:

<!-- multitext_top.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="-1dp">
<shape
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="@color/DEFAULT" />
<stroke
android:width="1dip"
android:color="@color/borderGrey" />
<corners
android:bottomLeftRadius="1dp"
android:bottomRightRadius="1dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
</item>
</layer-list>

<!-- multitext_bottom.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="1px">
<shape
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="@color/DEFAULT" />
<stroke
android:width="1dip"
android:color="@color/borderGrey" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="1dp"
android:topRightRadius="1dp" />
</shape>
</item>
</layer-list>

Main purpose of this separate drawables is to give rounded top corners of top side TextView and same for bottom corners of bottom located TextView.

Of course, don’t forget to define styles for text in res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="BoldText">
<item name="android:textColor">#222222</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">18sp</item>
<item name="android:typeface">normal</item>
</style>
<style name="ListRowBottomText">
<item name="android:textColor">#696969</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">14sp</item>
<item name="android:typeface">normal</item>
</style>
<style name="SettingsRightText">
<item name="android:textColor">#2F2F2F</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">16sp</item>
<item name="android:typeface">normal</item>
</style>
<style name="SettingsDescriptionText">
<item name="android:textColor">#696969</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">11sp</item>
<item name="android:typeface">normal</item>
</style>
<style name="DetailRightText">
<item name="android:textColor">#4D6693</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">18sp</item>
<item name="android:typeface">normal</item>
</style>
<style name="ButtonText">
<item name="android:textColor">#0F0F0F</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">18sp</item>
<item name="android:typeface">normal</item>
</style>
<style name="DetailMessageText">
<item name="android:textColor">#808080</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">14sp</item>
<item name="android:typeface">normal</item>
</style>
<style name="SplashScreen">
<item name="android:padding">0dp</item>
<item name="android:windowBackground">@drawable/splash</item>
<item name="android:windowFrame">@null</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>

Colors are defined in res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="EMERG">#FF0000</color>
<color name="ALERT">#E47297</color>
<color name="CRIT">#F1433F</color>
<color name="ERR">#336699</color>
<color name="WARN">#F7E967</color>
<color name="NOTICE">#A9CF54</color>
<color name="INFO">#70B7BA</color>
<color name="DEBUG">#FF6600</color>
<color name="DEFAULT">#FFFFFF</color>
<color name="backgroundGrey">#C5CCD4</color>
<color name="borderGrey">#A1A7AE</color>
<color name="boldtext">#000000</color>
<color name="white">#fff</color>
<color name="purple_start">#9b256b</color>
<color name="purple_end">#5d2761</color>
<color name="normal">#b0b0b0</color>
<color name="light">#ffffff</color>
<color name="dark">#000000</color>
<color name="highlight">#38c0f4</color>
<color name="black">#000000</color>
<color name="search_focused">#96C03D</color>
</resources>

I hope that you will find this tutorial useful for making your own android UI designs. Cheers

출처 : http://inchoo.net/mobile-development/android-development/android-custom-ui/