Hello friends. i'm developing android apps but i really don't like That Black rows in menu and also that ugly arrow in Main menu list. i want my app excellently look like this app. Click here: http://a710.phobos.apple.com/us/r1000/095/Purple/v4/50/f4/1c/50f41c3f-1944-365e-1784-58651b0bce3d/mzl.xckmxsbm.320x480-75.jpg I want to do same graphics work in my app. please friends Help me to do this. Waiting for help. thanks

Hi Kumar, The screenshot you posted is of an iOS app, so you're kinda comparing apples (no pun intended) and oranges. The interface, and how you can make it look, is simply different between the two platforms. It's very unlikely that you could make an Android app look like an iOS app, nor would you probably want to (might made the Android fan boys mad). You can do things like add menu item icons, but I don't think you can do rounded menu item corners (though there might be a hack I'm not aware of). You can easily change the colors, text colors, background colors, and things like that. Those are all configurable in the control panel. There is also a Menu List with Header Image plugin that can give you the image you're looking to have. There are quite a few things you can configure using the control panel...just look around and try different things out. Then do some research on Android app interface design, and see what others have done. You can probably take some of their code and add it to the BT code to get the desired affect. But it will take some study and some extra work! Mark

Alright this is IOS app screenshot but i can't get graphics like this app have? or it would be nice if i can change that black menulist look and that ugly look of Rows and arrow of my Android app? and can give it some better look? is there any suggestion for it? as you said i did change background colors, background images etc but there is no luck at all. it looks more ugly after doing this all :(

Does this help? http://stackoverflow.com/questions/2387033/android-table-with-round-border

@AussieRyan that's awesome but problem is i don't know where should i put this code in my Android app source code?

I want to set this type of round table on link you suggested in my main manu of my app as list. how can i do this? help will be really apriciated

Nice link, @Aussie! I love stackoverflow. The code would go somewhere in your layout folder. There are tons of other <layout>.xml files there you can look to for inspiration. This is the research and testing portion I was telling you about! You're probably gonna have to dig deep and get dirty to figure this out. Mark

Right @mark :( hope here is someone who knows to do it easily?

There probably is! Hopefully they'll find this thread. It would be interesting information to have.

I hope so..!

@aussie- that's something awesome you have posted there , will try to crack it ! Hope it works.Though I tried to add a gradient it didn't work.. Edit:Sad its something different but i found something for round corner

@SuVinay hope you can do something. if you can than please share with us. thanks in advance

I'm going to have a little play with this tonight...

The easiest way I've found is to use an image mask. It doesn't look as good as iOS, but hey, it's android.. screenshots: https://dl.dropbox.com/u/56760890/1.png https://dl.dropbox.com/u/56760890/2.png The first one uses this image mask: https://dl.dropbox.com/u/56760890/frame.png and the second one uses: https://dl.dropbox.com/u/56760890/frame1.png These are in the menu with image plugin, in the screen_wb_menuimage.xml file, the modified code for the first one is: <ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listView" android:background="@android:color/transparent" android:layout_width="fill_parent" android:layout_height="wrap_content" android:cacheColorHint="#000000" android:choiceMode="singleChoice" android:layout_marginBottom="20dp" android:padding="3dp" android:layout_weight="1" android:scrollbars="none" android:layout_below="@+id/headerImageView"> </ListView> <ImageView android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="@drawable/frame1" android:layout_alignTop="@+id/listView" android:layout_alignBottom="@+id/listView" /> and the modified code for the second one is: <ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listView" android:background="@android:color/transparent" android:layout_width="fill_parent" android:layout_height="wrap_content" android:cacheColorHint="#000000" android:choiceMode="singleChoice" android:layout_marginBottom="20dp" android:layout_marginLeft="3dp" android:layout_marginRight="3dp" android:padding="5dp" android:layout_weight="1" android:scrollbars="none" android:layout_below="@+id/headerImageView"> </ListView> <ImageView android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="@drawable/frame" android:layout_alignTop="@+id/listView" android:layout_alignBottom="@+id/listView" /> Hope that helps.

Very nice, @raveyd! That seems much easier than I thought it would be. So, basically, it's just an image that overlays everything else, masking the parts that you don't want to see?

That's right Mark. The image gets locked to the top and bottom of the list view so it'll look fine on multiple screen sizes. And feel free to use the image masks I've posted. They were done in fireworks, 3 minute job so they could be better, but useful as a guide.

Sweet. I bet the layout files actually make for some pretty extensive modifications from the standard UI. I do get concerned about different screen sizes, though. How does this example scale across multiple devices? We've found that tablets are often quite different from smaller devices.

It works fine on tablets, but I do use larger masks to avoid pixilation. The ones I've posted are 250x250 but I usually do them at least 500x500. Yeah, there's so much great stuff you can do in the layout files, drop shadows on text, animated buttons, gradients colours, all sorts of cool stuff, and none of it's particularly difficult.

@Raveyd awesome man just what we all want :) it's perfect but m confuse about where to put this frame and frame one in project and where to put this code? that's it.

Hi @Kumar apps, I used the menu with image as my example. The code for the list view I posted above is already in the screen_wb_menuimage.xml file located in the Res > Layout folder, but I've slightly modified it, and the code for image view is all I've added underneath the list view. If you save those two image masks I posted above, put which one you want in the Res > Drawable folder.

About image it's all clear but where is these screen you talking about? i mean there is no screen_wb_menuimage.xml file in our android BT project.

Ah, right. In that case you should really get the plugin. It's excellent! https://www.buzztouch.com/plugins/plugin.php?pid=F018606BDA6027B90A3ED49 If you don't want the awesome menu with image plugin, then add the code to screen_menulistsimple.xml

@raveyd - just loved it ! Awesome thanks mate.. And do you have anyother customization ideas for list view?

Hi @SuVinay, thanks! Yeah, gradients are good, although I can only ever wrap the text.. and drop shadow on text gives a nice effect too: https://dl.dropbox.com/u/56760890/22.png https://dl.dropbox.com/u/56760890/23.png https://dl.dropbox.com/u/56760890/24.png https://dl.dropbox.com/u/56760890/25.png https://dl.dropbox.com/u/56760890/26.png https://dl.dropbox.com/u/56760890/27.png https://dl.dropbox.com/u/56760890/28.png https://dl.dropbox.com/u/56760890/29.png https://dl.dropbox.com/u/56760890/30.png You can put: android:background="@+drawable/gradient" into the text view of the wb_menu_row.xml Then add a gradient.xml in the res > drawable folder Loads of gradient effects can be found on the net, for example: <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <stroke android:width="2dp" android:color="#FFFFFFFF" /> <gradient android:startColor="#DD000000" android:endColor="#DD2ECCFA" android:angle="225"/> <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp"/> </shape> That'll give the effect in the first screenshot above. Dropshadow also goes in the text view, for example: android:shadowColor="#000000" android:shadowRadius="5" android:shadowDx="10" android:shadowDy="10" Change the settings to suit. Hope that helps.

@raveyd excellent buddy i have tried by putting that frame and listview code and result is here in below screenshot. http://sphotos-f.ak.fbcdn.net/hphotos-ak-snc7/429586_472301949503484_487886656_n.jpg it's working fine but still i want to right something in the center of that frame or just want something like 1st screenshot by me on Staring post above. if you can have idea to make it like that than it would be nice :)

Can you suggest perfect background image resolution for main menu list?

One more doubt here in above comment as you said That add a gradient.xml in the res > drawable folder so where can i find gradient.xml and how can we put xml files in drawable folder? another thing is in android we do not have wb_menu_row.xml file in layout. But we have menu_list_rowsimple.xml file. so now question is where should we has to put that code in that xml file?

@kumarapps: Hi bhai ! You have to create a new xml file and name it gradient.xml. After creating xml file copy it to drawablw folder. You don't have WB_menu_row beacuse you haven't bought the plugin and to use it in your menu-row. After creating xml with gradient.

@Suvinal that's fine buddy now i just want customize raveyd's fram and listview code like this one http://a710.phobos.apple.com/us/r1000/095/Purple/v4/50/f4/1c/50f41c3f-1944-365e-1784-58651b0bce3d/mzl.xckmxsbm.320x480-75.jpg i hope he can do this.

@Kumar apps, as @SuVinay and I say, you need the menu with image plugin. With that plugin you can have the icons on the left, the arrows on the right and the image in the header, you should be able to use it to get a very close version of your screenshot.

sorry buddy but i want FREE and not wanna waste money behind this because i'm not perfect developer yet i'm just aspiring developer. so For header image in your BT android project just need to change bt_bg_title.png from drawable folder. that's your header image. so header image problem is solved now question about that left icons with that menu list. we can have it that our problem get solved. :) bdw mr.Raveyd what about text and decoration in that frame? how can we do that? one more question is What should be exact resolution of background image of main menu?

If you're not getting the plugin, you'll need to do some research on google to be able to modify the relevant .java files, or speak very nicely to @SusanMetoxen, the menu/image plugin creator. Outside of my knowledge, sorry. As @GoNorthWest says above: "You're probably gonna have to dig deep and get dirty to figure this out. "

@raveyd : skype..?

@SuVinay: emailed :)

@raveyd no problem thanks a lot for your help buddy. :) if you can give me exact resolution of background image of main menu it would be nice. thanks

Hi @Kumar apps, I use 640px x 960px for my backgrounds.

That's Alright thanks buddy

Anybody have more idea about Customization than please share with us. thanks