--ADVERTISEMENT--

Android provides different layouts, components and allows developers to create custom UI widgets with a flexible framework for user interface (UI) design. We have already posted many user inter-design tutorials like material design login, xml ui design, contact form ui design, navigation drawer tutorial and many more. This time you will learn to create/make material design profile screen XML ui design for your android application. To make profile screen UI, we have to work with many layouts and components/widgets.

Many applications show name, profile photo, bio, etc in the profile page/screen. I have also placed a circular image with border, name, cover photo; bio etc in this example project and it is very simple.

Related:
Android Material Design Sign Up/Registration Form XML UI Design
Material Design Circular ProgressBar For Android
Android Material Design with Design Support Library

Android Example: How to Make Material Design Profile Screen


We are going to make android profile page material design XML ui design, so we only work with XML either in XML layout file or in XML drawable file. Firstly, I am going to make a circular box for profile image with border color. For that, create a new xml file in res/drawable/ folder and make a circle with white border color. Following is the complete content of XML file of drawable folder.

res/drawable/profile_circular_border_imageview.xml

We are going to make profile screen for android app with a header with background image, a profile picture inside circle with border, add friend button, overflow menu icon, name, short bio of the user and you can add more things according to your wish. For that, open your XML layout file and add an ImageView for header image, an ImageView for profile picture and many more widgets/components. Following is the complete XML layout file where I have added different components and layout with different attributes.

res/layout/material_design_profile_screen_xml_ui_design.xml

Following is the default code of java activity file.

src/ProfileScreenXMLUIDesign.java

Your app styles.xml file will look like below.

res/values/styles.xml

Android Example: How to Make Material Design Profile Screen

Now, run your Android Material Design Profile Screen XML UI Design application which will look like above screenshot. You can implement/make profile page/screen by adding above code. Making profile page XML UI design is very simple android, you just need to have the little bit knowledge of android layouts, components and its’ attributes.

Post a Comment

Powered by Blogger.