Create Custom Row View Layout for ListView to Show Books in Android App using Xamarin, Visual Studio and C# | GetCodeSnippet.com - Microsoft .NET Code Samples!
In the previous post, we discussed how to add a built in row style in a ListView for our sample MyBookStore Android App. That list didn’t look very good and was very simple. But that was required to understand the concept. In this post, we’ll explore how to create a customer Row View Layout and then use it in a ListView to give a better look to the rows. You’ll further build upon this concept to create even better row styles.
First, you have to add a layout to create a custom row view. The layout is same as any other layout. The only difference will be how you create it. We’ll give it a look and and style of a row. Each row will contain information of one book. We’ll then use this row style layout in our ListView. So first create the Row View Layout.
In this row layout, you can build your row style as you like. We have shown book title, book description, price and availability fields along with a row background. Here is the code for the row layout.
In this layout, I have used LinearLayout as the parent layout, while use RelativeLayout as inner layout. The relative layout gives you flexibility of position different views with respect to other views and thus you can easily give the layout a style of a row.
This is how it looks like in designer view window.
This row is empty and does not show much except a gray background. When we’ll link it with data through the Adapter and run the app then we’ll see the row in style and action.
You need to make some changes in the GetView method of the BookListAdapter. The two main changes are to inflate the book row view and then set the values of the views inside the row view layout after finding these views. Here is the updated code of the Adapter.
Now if you run the app, it will look something like this with some dummy data. Of course, in some future post, we’ll explain how to get real data from database and attach that to Adapter and ListView. For now, check the output produced with these changes and the ListView looks much better.
I’m sure you had fun while updating your app with these changes and seeing the app shaping up. In future posts, we’ll add more features in our app.