Now that we have defined the styling and background highlighting information in a file, we shall create the actual layout for our customized listview row item. When the control is in pressed state, then it shall refer the styling information as defined in the gradient_bg_hover.xml. when the control is not pressed, it shall refer to the styling information defined in the gradient_bg.xml. The list_selector.xml file shall define the styling information based on the present pressed state of the control ( listview item) i.e. Let us create a new XML file under res/drawable folder and name it as gradient_bg.xml. Regular Gradient Background (Default State Styling) As explained earlier, we would want something like this:īefore we go ahead with creating the basic skeleton of the layout, let us also create a couple of files each defining a suitable gradient background (based on selection) to achieve that flashy highlighting effect. Now that we have created an Android project and an empty UI, we are going to fill it with our customized list (each listview item having an image and a text) inside the layout. Place the XML file under the assets folder of the WeatherDisplay android project.Ĭreating Customized List View Item Layout.Right click Project >New Android XML File.To add an XML file into the Android project: Let's assume we have created an empty Android project ' WeatherDisplay' with the default activity file as WeatherActivity.java. 1 Berlin 0☌ 32☏ Snowing 5 kmph snowing 2 Bangalore 23☌ 73.4☏ Thunderstorms 10 kmph thunder 3 London 5☌ 41☏ Rainy 2 kmph rainy 4 New York 18☌ 64.4☏ Cloudy 7 kmph cloudy 5 Sydney 32☌ 89.6☏ Sunny 10 kmph sunny For the sake of simplicity, let us take this simple XML data source which shall contain the weather information of few well known cities of the world. Now before we try to display something extraordinary flashy on the UI, we need a data source at the first place. So what we are going to do is convert the plain and boring ListView something like this: For most applications, you want to create an interface that is more graphically rich and visually pleasing to the user. The default look and feel of the Android ListView is not very appealing as it only renders a simple string in every ListView row using the internal TextView control. For real-world commercial mobile applications, the first thing that strikes the user is the User Interface of the mobile application. The ListView control supplied by the Android SDK is by default simple, plain and definitely boring. This article shall present a small tutorial to aid a curious wannabe Android developer to implement a customized Android ListView with image and some text, similar to the ones you see on a standard music player app or on a weather widget. Screenshots Default List view items On ListView item selection SampleActivity screen on item selection Introduction
0 kommentar(er)
