Xamarin Forms Twitter Design

Hello friends. In this article we will talk about how to design Twitter with Xamarin Forms. Design issue is one of the most challenging issues in Xamarin Forms. People are afraid of Xamarin Forms because there are not too many resources. Previously we made the screen of Instagram’s home screen and the home screen. In this article, we will try to design Twitter. When we look at the design of Twitter; There is a Master Detail Page. The Master also has user information and pages that he wants to go to and the Detail page has 4 pages of Tabbed Page. On these pages, Home page, Notices, Search and Messages section. I’ll just try to get the main page and master part in this article. And then we go to other pages with you.

First, we open a Master Detail page. Then, we place a tabbed page in the detail part of this Master Detail page and create 4 content pages under this Tabbed Page. We only assign icons to the pages we have created. Normally, the Master Page icon is the hamburger menu. To change this, we need to assign an icon to the Master page. Twitter’s profile photo. So I’ve assigned a user profile photo.

Then let’s go to the design of the page. Using the grid to create a design for tweets is the most logical move. I’m throwing a ListView to show all the tweets in the list form. I’m putting the grid in List View. I divide this gradient into two columns. The first of the columns will contain a profile photo of the tweet. The second one will give information about the tweet. In the second column I divide it into three separate lines. The first of the lines contains information about the user who has tweeted. The second line is about tweeting. Directly press the screen to tweet. The last line contains comments, likes and retweet numbers.

After the design is over, I’m going to have to show the information inside. I have to create a model for this. At a simple level, I’m planting what I need into this model.

Then I create a list of these models. I’m importing this list into the List View.

Finally, let’s put the new tweeting button. For this, we use Absolute Layout. The main page of the application is as follows.

There may be some difficulties because the icons are not fitted properly. For this you can find and put better icons, or convert them to different sizes for platforms icons.

If you have pages you want, we can make their screen designs. If you have any questions, you can contact me by mail or comment. Good work.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.