How to make A Good Looking Profile Page Concept UI Design With Dark and Lite mode


Hello Friends in this post I will tell you how you can Create a Profile UI and add Lite mode and Dark mode in one activity All the Source codes are in this post...

Here A look at How  its Look Like



1. Create a new project. 

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from templates.or you can choose your existing project. 

2. For this project, You don't need to add any extra dependency...

3. First, we have done all the design for XML...

3.1. First, you need to create an attrs.xml file under the values folder
       For that right click on value folder which is under the res folder now click new and click new             value resource file and name it as attrs.xml.



3.2. Now we need to paste the code in this newly created XML file.



3.3. Add this color Resource in the colors.xml file.

3.4. Now the main thing we have to create two different styles for our app one is dark/night & lite/day so open style.xml file and paste this code.


Ok, now we did all the coding at value folder. Now we will design the activity profile activity UI.

4.  So now open the activity_main.xml file and paste the code below don't forget to download the drawable files from the link otherwise you got some red line you can add your own images to the activity also...



5. Now we will create a menu file and under the menu, file creates a menu.xml file (we have to change the theme so we will add a menu item and with that, we change the theme ) So if you have a menu folder and a menu item then leave this step. Otherwise, right-click on res folder and click new and create a directory and name it as menu and then right click on menu folder and click on new and create a menu resource file and name it as menu.xml.


5.1. Now open the menu.xml file and paste this code.


6. Ok now we all done just need to write some java code so open your MainActivity.java file and write this codes.


That's it now you can run your app and see how its look like thanks for your time. Hope you like this post. If you got any problem you can ask me in the comment section I will help you...
Download the full source code from GitHub-> Source code download

Comments