Like many other devs, I like to work hard and create new themes to separate myself from the others, especially to make back the $25 that I spent on getting the developer account. However, I myself have only started “developing” a few months ago, so I realize how tough it is to get help when no one likes to share their information. This is why I’ve decided to add on to my original guide and give you all some xml’s to go with it. Here it goes…
For the absolute beginners
1. Setting up your workplace
The easiest way to do so is to simply download the whole adt bundle. Extract it, set up your workplace, download whatever you need from sdk manager, and you are good to go! If you are having issues with java, download the newest version, and go into the eclipse folder. Fine "eclipse.ini", open it, and add "-vm (new line) C:\Program Files\Java\jre7\bin\" above "-vmargs". More detailed tutorial here.
2: Creating a Project
Download the source code from Klinker's github (pick any of the themes) and go to your eclipse. Go to file, new, project, and pick "import existing code". DO NOT PICK A SIMPLE FILE as that messes everything up. After that is done, you may want to add support libraries (right click on project folder on left side, tools, add support libraries) and rename the package name (also in tools). The package name can be anything you want, but you might want to make it unique for yourself (add your dev name or whatever)
3: Editing androidmanifest.xml
What I love about this is that the instructions are very clear. Open android manifest, and follow the comments. You may also want to edit color.xml. You should also see that the package name has changed as you have renamed it in step 2.
4. Start theming!
This is the part where you make the theme your own! I would suggest you look into all the layout and value xml's and be sure to change the app name!
Help with the drawables/colors (the theming part)
1. Colors
As with all other projects, the color.xml contains a bunch of hex colors. The instructions are quite clear as to what each one does. I believe Klinker's evolve themes contain a 6 digit hex, which only stands for the color. You may use this to help you out. Additionally, you may add two digits before that (8 digits total) to represent transparency. 00 being transparent, and ff being fully opaque. A great visualizer for this is VTS. Though it is for editing decompiled apps and not source code, you can still copy paste an xml and get a build in color picker within. I recommend it if you are confused with this part.
2.1 Drawables
Drawables are basically all the image components of the theme that you are able to edit. For those that end with .png and not 9.png, you may edit it like any normal file. Use photoshop if you have it or gimp, a great free alternative (I use that :good:)
2.2 9.png
First off what are 9.png's? They are regular images that have 1px black lines around the border that allows the app (Evolve) to resize them accordingly. As you all know, android is very diverse with their screen sizes, and it will definitely be impossible to make an icon matching each one. Furthermore, text messages vary in sizes as well. The black line is your way of telling the app where to stretch, where not to stretch, and where the text should be (though you can edit this in layout by adding padding).
How do you edit 9.png?
1. Use eclipse's built in draw9patch by copying this file to eclipse/sdk/tools and then clicking on it. You can also copy it and paste a shortcut afterwards for easier access. (Do note that closing the command window closes the draw9patch.
2. draw9patch.com .............enough said (Recommended for noobs)
3. Use a photo editing software. What I suggest with gimp is that you make your icons as you usually would, go to canvas size (I believe it is under image) and increase both the height and the width by two. Then put the image in the center and press okay. This ensures that the border is transparent. Next, get the rectangle selector tool (probably top left) and set the height/width (depending on which side you are doing) to 1. Select where you want the black line to be, make sure your primary color is solid black, and press ctrl + ",". Do that for all sides. To erase, select what is appropriate and press delete Please don't use the brush tool or the eraser... they just doesn't work as well
***Sidenote. You may notice that the text message bar (whatever you call it) has red parts on the corner. Just leave those as is. You may colorize the bar if you wish though***
Help with message.xml (the layout part)
This is the part where you get creative in putting what where. This is also the part where beginners (like me) have the most trouble in, as this is as close to "developing" as you get with EvolveSMS themes. Due to requests, I have added some "templates" that you can simply copy and paste to your message.xml. They may not be the best, but they work for me, so they should work for you.
NOTE: In general (or as of now) I always keep "show contact heads" in androidmanifest.xml as true. If I don't want them, I set the width in the layout as 0dp. I just find it easier this way. Additionally, if I have android:background="@drawable/contact" or anything similar, it means that you must have a drawable titled contact.9.png in your folder. This adds backgrounds to your contact heads. If you don't want it, delete it.
1. The original xml - standard with both contact heads visible, contact is aligned to the top and mypicture to the bottom. Date is out of the textbox and centered to the parent (screenshot/example)
2. Same as above but with the date in the message box (screenshot/example)
3. Contact pictures aligned to the bottom (screenshot/example)
I was also the first to make a theme with the heads aligned in the center but that will be my secret for now :). Download it and try it for free here
And that is all for my guide! If you are a beginner and feel overwhelmed, don't be. It took me less than two months to get to this level. And if you are dealing with errors or want to try new things, know that failing is a process of learning. I am clearly not a developer, and some of my themes take 30+ builds to perfect. In the end, learn, test, have fun, and don't be too money hungry :). I'm also sure that there are much more experienced dev's out there. If anyone has and suggestions, please let me know!. We are all here to learn, and knowledge is not bad.
Self advertising time! If you like my work, please feel free to look at the links in my signature. It links to my play store as well as links to get me more dropbox space :D. If you'd like to donate as I do put out a lot of free apps, you can do so here . Am I a hypocrite? Partially...
For the absolute beginners
1. Setting up your workplace
The easiest way to do so is to simply download the whole adt bundle. Extract it, set up your workplace, download whatever you need from sdk manager, and you are good to go! If you are having issues with java, download the newest version, and go into the eclipse folder. Fine "eclipse.ini", open it, and add "-vm (new line) C:\Program Files\Java\jre7\bin\" above "-vmargs". More detailed tutorial here.
2: Creating a Project
Download the source code from Klinker's github (pick any of the themes) and go to your eclipse. Go to file, new, project, and pick "import existing code". DO NOT PICK A SIMPLE FILE as that messes everything up. After that is done, you may want to add support libraries (right click on project folder on left side, tools, add support libraries) and rename the package name (also in tools). The package name can be anything you want, but you might want to make it unique for yourself (add your dev name or whatever)
3: Editing androidmanifest.xml
What I love about this is that the instructions are very clear. Open android manifest, and follow the comments. You may also want to edit color.xml. You should also see that the package name has changed as you have renamed it in step 2.
4. Start theming!
This is the part where you make the theme your own! I would suggest you look into all the layout and value xml's and be sure to change the app name!
Help with the drawables/colors (the theming part)
1. Colors
As with all other projects, the color.xml contains a bunch of hex colors. The instructions are quite clear as to what each one does. I believe Klinker's evolve themes contain a 6 digit hex, which only stands for the color. You may use this to help you out. Additionally, you may add two digits before that (8 digits total) to represent transparency. 00 being transparent, and ff being fully opaque. A great visualizer for this is VTS. Though it is for editing decompiled apps and not source code, you can still copy paste an xml and get a build in color picker within. I recommend it if you are confused with this part.
2.1 Drawables
Drawables are basically all the image components of the theme that you are able to edit. For those that end with .png and not 9.png, you may edit it like any normal file. Use photoshop if you have it or gimp, a great free alternative (I use that :good:)
2.2 9.png
First off what are 9.png's? They are regular images that have 1px black lines around the border that allows the app (Evolve) to resize them accordingly. As you all know, android is very diverse with their screen sizes, and it will definitely be impossible to make an icon matching each one. Furthermore, text messages vary in sizes as well. The black line is your way of telling the app where to stretch, where not to stretch, and where the text should be (though you can edit this in layout by adding padding).
How do you edit 9.png?
1. Use eclipse's built in draw9patch by copying this file to eclipse/sdk/tools and then clicking on it. You can also copy it and paste a shortcut afterwards for easier access. (Do note that closing the command window closes the draw9patch.
2. draw9patch.com .............enough said (Recommended for noobs)
3. Use a photo editing software. What I suggest with gimp is that you make your icons as you usually would, go to canvas size (I believe it is under image) and increase both the height and the width by two. Then put the image in the center and press okay. This ensures that the border is transparent. Next, get the rectangle selector tool (probably top left) and set the height/width (depending on which side you are doing) to 1. Select where you want the black line to be, make sure your primary color is solid black, and press ctrl + ",". Do that for all sides. To erase, select what is appropriate and press delete Please don't use the brush tool or the eraser... they just doesn't work as well
***Sidenote. You may notice that the text message bar (whatever you call it) has red parts on the corner. Just leave those as is. You may colorize the bar if you wish though***
Help with message.xml (the layout part)
This is the part where you get creative in putting what where. This is also the part where beginners (like me) have the most trouble in, as this is as close to "developing" as you get with EvolveSMS themes. Due to requests, I have added some "templates" that you can simply copy and paste to your message.xml. They may not be the best, but they work for me, so they should work for you.
NOTE: In general (or as of now) I always keep "show contact heads" in androidmanifest.xml as true. If I don't want them, I set the width in the layout as 0dp. I just find it easier this way. Additionally, if I have android:background="@drawable/contact" or anything similar, it means that you must have a drawable titled contact.9.png in your folder. This adds backgrounds to your contact heads. If you don't want it, delete it.
1. The original xml - standard with both contact heads visible, contact is aligned to the top and mypicture to the bottom. Date is out of the textbox and centered to the parent (screenshot/example)
HTML Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="@+id/myPicture"
android:scaleType="centerCrop"
android:maxHeight="48dp"
android:maxWidth="48dp"
android:minHeight="48dp"
android:minWidth="48dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="3dp"
android:layout_marginLeft="-10dp"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/myPicture"
android:id="@+id/holder">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="@+id/contactPicture"
android:scaleType="centerCrop"
android:maxHeight="48dp"
android:maxWidth="48dp"
android:minHeight="48dp"
android:minWidth="48dp"
android:layout_marginRight="-11dp"/>
<LinearLayout
android:id="@+id/background"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_gravity="center_vertical"
android:paddingRight="5dp"
android:textSize="12sp"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:fontFamily="sans-serif-light"
android:textColor="@color/dateColorReceived"
android:layout_marginTop="-3dp"
android:paddingBottom="3dp"/>
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:gravity="center"
android:layout_gravity="center"
android:id="@+id/media"
android:padding="10dp"
android:visibility="gone"
android:scaleType="centerInside"/>
<View android:id="@+id/gifView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:padding="10dp"
android:visibility="gone"/>
<TextView
android:id="@+id/body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:textSize="14sp"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:textColor="@color/textColorReceived"
android:layout_marginTop="-3dp"/>
<TextView
android:id="@+id/date"
android:gravity="left"
android:textSize="12sp"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:textColor="@color/dateColorReceived"
android:layout_marginBottom="-3dp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>HTML Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/contactPicture"
android:background="@drawable/contact"
android:layout_width="48.0dip"
android:layout_height="48.0dip"
android:layout_marginLeft="5.0dip"
android:scaleType="centerCrop"
android:maxWidth="48.0dip"
android:maxHeight="48.0dip"
android:minWidth="48.0dip"
android:minHeight="48.0dip"
android:layout_alignTop="@+id/background" />
<ImageView
android:id="@+id/myPicture"
android:background="@drawable/contact"
android:layout_width="48.0dip"
android:layout_height="48.0dip"
android:layout_marginLeft="-10.0dip"
android:layout_marginRight="5.0dip"
android:scaleType="centerCrop"
android:maxWidth="48.0dip"
android:maxHeight="48.0dip"
android:minWidth="48.0dip"
android:minHeight="48.0dip"
android:layout_alignTop="@+id/background"
android:layout_alignParentRight="true" />
<LinearLayout
android:orientation="horizontal"
android:id="@+id/holder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/myPicture"
android:layout_alignTop="@+id/contactPicture"
android:layout_alignParentTop="true"
android:layout_alignStart="@+id/contactPicture" />
<LinearLayout
android:id="@+id/background"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8.0dip"
android:layout_marginRight="8.0dip"
android:layout_toLeftOf="@+id/myPicture"
android:layout_toRightOf="@+id/contactPicture"
android:layout_alignParentBottom="true">
<TextView
android:textSize="12.0sp"
android:ellipsize="marquee"
android:id="@+id/name"
android:fadingEdge="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:gravity="center"
android:layout_gravity="center"
android:id="@+id/media"
android:padding="10.0dip"
android:visibility="gone"
android:layout_width="200.0dip"
android:layout_height="200.0dip"
android:scaleType="centerInside" />
<View
android:id="@+id/gifView"
android:padding="10.0dip"
android:visibility="gone"
android:layout_width="200.0dip"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:fontFamily="sans-serif-light"
android:paddingLeft="5.0dip"
android:paddingRight="5.0dip"
android:textColor="@color/textColorReceived"
android:textSize="14.0sp" />
<TextView
android:textSize="12.0sp"
android:fontFamily="sans-serif-light"
android:textColor="@color/dateColorReceived"
android:id="@+id/date"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5.0dip"
android:paddingRight="5.0dip"
android:layout_marginBottom="4dip" />
</LinearLayout>
</RelativeLayout>HTML Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:paddingBottom="4dp"
android:paddingRight="8dp"
android:paddingLeft="8dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/date"
android:gravity="center"
android:textSize="12sp"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:textColor="@color/dateColorReceived"
android:layout_centerHorizontal="true"
android:layout_marginBottom="4dp"/>
<ImageView
android:id="@+id/myPicture"
android:layout_width="0dp"
android:layout_height="48dp"
android:scaleType="centerCrop"
android:maxWidth="48dp"
android:maxHeight="48dp"
android:minWidth="48dp"
android:minHeight="48dp"
android:layout_alignParentRight="true"
android:layout_alignBottom="@+id/holder"/>
<LinearLayout
android:id="@+id/holder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/date"
android:orientation="horizontal" >
<ImageView
android:id="@+id/contactPicture"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:layout_marginRight="1dp"
android:maxHeight="48dp"
android:maxWidth="48dp"
android:minHeight="48dp"
android:minWidth="48dp"
android:scaleType="centerCrop" />
<LinearLayout
android:orientation="vertical"
android:id="@+id/background"
android:layout_marginBottom="25dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="12sp"
android:textColor="@color/dateColorReceived"
android:ellipsize="marquee"
android:gravity="left"
android:layout_gravity="left"
android:id="@+id/name"
android:paddingLeft="5dp"
android:paddingBottom="3dp"
android:fadingEdge="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-3dp"
android:fontFamily="sans-serif-light" />
<TextView
android:textSize="14sp"
android:textColor="@color/textColorReceived"
android:ellipsize="marquee"
android:id="@+id/body"
android:gravity="center_vertical"
android:layout_gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:layout_marginLeft="2dp"
android:paddingRight="5dp"
android:paddingLeft="5dp"/>
<ImageView
android:gravity="center"
android:layout_gravity="center"
android:id="@+id/media"
android:padding="10dp"
android:visibility="gone"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="centerInside" />
<View
android:id="@+id/gifView"
android:padding="10dp"
android:visibility="gone"
android:layout_width="200dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>And that is all for my guide! If you are a beginner and feel overwhelmed, don't be. It took me less than two months to get to this level. And if you are dealing with errors or want to try new things, know that failing is a process of learning. I am clearly not a developer, and some of my themes take 30+ builds to perfect. In the end, learn, test, have fun, and don't be too money hungry :). I'm also sure that there are much more experienced dev's out there. If anyone has and suggestions, please let me know!. We are all here to learn, and knowledge is not bad.
Self advertising time! If you like my work, please feel free to look at the links in my signature. It links to my play store as well as links to get me more dropbox space :D. If you'd like to donate as I do put out a lot of free apps, you can do so here . Am I a hypocrite? Partially...