9

Hello developers & designers :) Today , i have a question about , how Android devs use an UI Kit, designed with Photoshop , in their Android application ? For example , i have this UI kit \n http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2014/02/0016_ui_kit_2014.jpg

but i can't find the way to put it in my application , and exactly the Textview , how can i make it in interactive with the user ??

Thank you in advance .

Thank you stackoverflow :)

elarib
  • 674
  • 1
  • 8
  • 17
  • Save the parts you need as PNGs and use them. You can't use a PSD file as is. It's assumed that you are able to work with P/S layers and such things. That you have clear in mind the alpha channel and that you are aware of dpi and resolutions. – Phantômaxx Jun 23 '14 at 15:55
  • 1
    First thank you Der Golem for your answer . But i know this , i can use PNG & JPG ... but how to make it a view not an image. I mean an interactive view for example when the user click on it , the keyboard appears , and when he write sth , he can see it on the view , did you get me ? – elarib Jun 23 '14 at 15:58
  • 1
    Perfectly. Assign your views the desired backgrounds. In some cases you'll need to use a **state-list** with different colors (i.e.: checked/unchecked, just to name a couple) for different states. So, you'll have to prepare different copies of the same images, sometimes. You'll also find helpful a deep read of the **9 patch** system, if you already don't know about that. – Phantômaxx Jun 23 '14 at 16:02
  • Yep , i think i understand now :) ... FOr the 9 patch system , i never hear about it , i google it , but i can't find anything , can you help me ? – elarib Jun 23 '14 at 16:10
  • Here's a nice tutorial: http://radleymarx.com/blog/simple-guide-to-9-patch/ – Phantômaxx Jun 23 '14 at 16:28

2 Answers2

2

To use a PSD (PhotoShop Document) form in android, do follow this guide:

tl;dr Use gimp to extract the different layers into seperate png files, then in android studio, import the images as drawables.

To extract the layers from the psd file as images, and thus creating an image folder, you need to have gimp installed. From gimp, you need to install a gimp plugin called Export Layers. The wiki for the github page explains how to do the actual extraction of the layers.

To import into android studio, you need to install a plugin called Android Drawable Importer. Once the plugin is installed and you have restarted Android Studio, right-click your drawable folder -> New -> Batch Drawable Import. From here, select the folder you have obtained from gimp and select the options you want.

Note: the image file names can only contain word characters i.e. has to match this regex, otherwise android studio won't accept it

smac89
  • 39,374
  • 15
  • 132
  • 179
1

You have to cut the desired parts from this UI KIT and then use them as PNG format using XML. You have to use Photoshop to cut those parts from the UI KIT. Only PNG format is supported in android app development procedure.

Shubham Abrol
  • 613
  • 6
  • 10