• Create Custom Row View Layout for ListView to Show Books in Android App using Xamarin, Visual Studio and C#

    by  • January 10, 2017 • Android with C# and .NET, Xamarin Mobile App Development • 0 Comments

    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.

    1-add-new-row-view-for-custom-row-style

    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.

    2-custom-row-view-in-design-modeThis 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.

    3-the-cutom-row-view-style-in-action-running-android-app

    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.




    Namecheap.com
    Avatar of admin

    About

    GetCodeSnippet.com provides you high quality Microsoft .NET development related articles, tutorials and sample code for ASP.NET, C#, VB.NET, AJAX, WCF, WPF, Web Services, Windows Services, SQL Server and other technologies.

    Leave a Reply