Geek Answers Handbook

The designer gave me a PSD. Now, how do I create a layout for Android?

My designer gave me the following layout (slightly changed to protect my business :)

enter image description here

Now I have a lot of doubts, since I can include each element in my Android layout.

  • As you can see, the background has a slight noise. I tried to create 9patch, but when loading into Android, I completely lost the image quality. That was weird. Should I have one background for different resolutions (i.e. Mdpi, hdpi ...) or can this be achieved with 9 patches

  • What to do with the button? I tried to save the button (which is a group in photoshop) into a new image and saved it as PNG. When loading into the layout using ImageButton and trying my phone, the button is simply too big. How can I guarantee the button size on different screens? I need different sizes of this button for different resolutions (mdpi ...), and if so, how do I know what size of this button is for hdpi resolution or for mdpi resolution? Or maybe I should force the width and height of the button to use a value of 60 dp, but that doesn't seem right to me. I understand that I can create a form and apply it against the background of the button, but what about the Facebook button? I assume that in this case I will need an ImageButton with PNG as the background.

+4
source share
1 answer

I know this is already late, but hopefully this will help others.

1) Ask your designer for a repeatable image that you can use for the background. I see no reason why it could not be aligned. To make a drawing, make an xml file of type drawable for each of the generic dpi folders. Put this code in the xml file:

<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:dither="true" android:src="@drawable/piece_of_the_background_that_can_be_repeated" android:tileMode="repeat" />

Set the background image to this XML file.

2) Set the 9patch image as the button background and use this custom textView for the text. Use the innerShadow attribute to get the shadow effect created by your designer.

+5
source

More articles:


All Articles