How do I convert a PSD design to Android xml? [closed]

Question

I've been toying with android apps the past couple of days and cannot seem to get my head around the entire UI and layout development.

I've been programming in Java for the past year so I'm fairly familiar with the language and I've been front end developing in CSS for a couple years now but I can seem to make the transition.

If anybody could point me towards some online resources that would be great.

Thanks a lot

Answer 1

It is really simple as the way you have done it for HTML. Everything is same except that you have to write CSS in the xml. There are things called wrap content, fill parent and so on. You should use them in a proper way. for examle if you have a button with a gradient background in your PSD, then slice it and use a ImageButton and assign the sliced image to the image button. Even the text, just get the color, size.. and look for something at XML which does that. Take a look at below code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent" 
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

The LinearLayout will arrange its children single column or a single row. Now its a single column because orientation is vertical. If you do it horizontal then its a row. Similarly, have a look at RelativeLayout which is similar to relative positioning in html. To change the background you can use android:background="color value here". There are no technical limitation here. You will get padding and margin as well. Just start with the xml layout. Do it by observing the PSD. I am sure your CSS experience will rock. All the best.