Modern Login Screen design android with Shared Animations in Android Studio 2021
ฝัง
- เผยแพร่เมื่อ 4 ธ.ค. 2024
- 😃 Download Complete App : cwtstore.gumro...
In this tutorial, we will create an Android Login Screen Material Design in Android Studio with Shared Animations. Splash Screen will appear in first using normal animations and after 5 seconds our login screen will come to the front using shared animations. We are going to use Material Design EditText Fields in our project and create an outlined style of our text fields OR EditText in android. We will also set our Password field an eye to show or hide the password.
❌ If Material Design Error OR Go Button Error? www.codingwith...
❌ Error? Updated Video! • 08 - Login UI Design A...
👍 Like what you see? Support the content: www.codingwith...
💨 CODES ------------------------------------
Current Code: www.codingwith...
Complete Bull's Rent Code: www.codingwith...
⭕ Related Videos ------------------------------------
Splash Screen Tutorial: • Splash Screen Android ...
Signup Design: • Material Design Regist...
Gif Images in Android: • How to use a animated ...
Navigation Drawer: • Android Navigation Dra...
Dashboard Design: • Create a Modern Dashbo...
Master Constraint Layout: • Create a responsive de...
Modern Profile Design: • Modern Profile UI Desi...
⛔ Video's Playlists ------------------------------------
Bull's Rent Playlist: • Bull's Rent Complete A...
Bull's Rent Firebase Playlist: • Firebase series for be...
📝 Recommended ------------------------------------
City Guide Series 2020: • City Guide App - Begi...
Latest Login Tutorial: • 08 - Login UI Design A...
On Boarding Tutorial: • 03 (A) - Walkthrough/O...
👀 Subscribe The Channel: www.youtube.co...
💻 Visit Website: www.codingwith...
#codingwithtea #splashScreen #android_Login_app_for_beginners
If you have any queries please tell me down below in the comments. If you learn something new Like the video and if you are new to the channel hit the Subscribe button.
This is really awesome site to learn android with java, As I am a self-taught, I have been searching TH-cam contents for the last few months and this site is one the few channels that provide highly advanced and quality contents specially user interface. And the way he present the continent also amazing, with font big enough for eye. Thank you so much.
What if you dont have a pair? What is the proper syntax?
image part and text part are connected in horizontal way,but for you it is getting in a vertical way
is it because of Linear layout at around 9 min where you started to show screen of phone to the left
Yes Linear layout is in vertical so that's why
hi bro ... after I followed all the steps in the video you showed me to 8:03 I ran the app and the app only showed the splash screen and then it exited the app and the error was Unfortunately, has stopped ... please guide me to fix this error
Can you please go for the error mentioned in the description
@@CodingwithT Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).
@@fptminhquan-faidhcm1233 use style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" in not .TextInputLayout It will not crash the app
my app was crashing firstly but afterwards your hint in description worked !! THANK YOU SOOO MUCHH SIR :-)
Happy to help :)
@@CodingwithT mine is still crashing. I added that parent in the styles folder.
Hi sir
At 6:12 what did u pressed after adding ">" this and to remove further text????
Plz help me out
Brother I haven't watched the entire video yet. But thank you so much for explaining while typing code. I was searching for good videos for android and all other youTubers have just typed the entire code and played music in the background with no explanation at all. Ok, now I am going to watch the video. Thank you again. I am subscribing you right away.
On this page when the user presses the back button to exit the app, it exits but still shows the image view for some seconds. What should I do?
Dear Erfan, have you got any solutions?
Hello sir first vala Jo text hena logo_text id vala usme top or bottom
m space aa rha h coding same hi firbhi kya kru ab???
It is simply awesome... Thanks for the video. I have one query when i click on back the splash screen appears how can i change that part. Hope to get some answers...
Please check the intent as we distroy the activity of splash screen when we move to new activity
@@CodingwithT Thanks for the suggestion!!! Tried it and was successful
Bro after doing the same as you've shown on 1st and this video. Whenever i run the app on my device it is showing the splash screen smoothly then it closes the app. It is not showing me the login screen.
There must be something missing in Code! Have you added the dependency? Material Design dependency and also please check the Names of Classes in Splash screen where you are calling the next activity.
@@CodingwithT Hi.. its a nice tutorial...but the same thing happening to me also as I found the last code pairs showing red lines how to solve this? please help...the code are all in places.
@@lifetracxdipankardey please send me the code at support@taimoorsikander.com
@@CodingwithT I was facing same issue. I fixed it by editing parent="Theme.MaterialComponents.Light.NoActionBar" in ./res/values/styles.xml
@@shantanuphatke O man thanks, you made my day.
As my run my application it doesn’t go from the splash screen to the login activity what to do ?
Goto Manifest file and set the SPlash screen as start-up screen
Taimoor Sikander - Coding with T. Thanks bro !
@@sasidharan4460 you Welcome
Is this activity connected to main activity? I mean, after main activity, it went to dashboard class, so this is the same as dashboard class? Im trying to connect the dots since im trying to discover the connection for my app as well
Sir, How to change Outline Border of EditText....?, My default color is Blue
When I add the material edit text I’m not getting a complete box instead I’m just getting a line.Why do you think this error is happening
Do contact with me on WhatsApp
Ty for the tutorial.. but really don't understand when you configured the font types.. my android studio cant found anything
nvm, did some research and done with that! but the postDelayded part not working, cant found SPLASH_SCREEN param to the lambda function :(
Do me WhatsApp on wa.me/+923060000606
Hello friend I right now buy the course complete Login App Design, Sessions and firebase but do not know where the link is to download the codes. Help me please.
How can i help you?
Nice tutorial. I am curious about why you didn't finish the first screen after you start main activity? I try that in order to close app when back button pressed but that finish statement breaking animation between activities. Do you have any suggestions?
Do me WhatsApp on wa.me/+923060000606
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
sir for me the code above is not working
the splash screen appears and then the app closes
what to do?
after using
Theme.MaterialComponents.Light.NoActionBar.Bridge
the app is just not opening
need to check your code
@@CodingwithT Hello sir!! even i faced the same error!! please do help me with this!!
same
Same
thank you sir, but in night mode not show input box what should I do???????
There you have to define a dark mode theme!
Sir, when Im in login activity and return to the splash, the animation goes ok. But I can't return to the login activity.
The code is to not return to the login activity o should return after a moment or touch?
Just add a finish(); at the end of intent call in splashScreen and then you will only redirected to login
Hi
same problem. i put finish() after the Intent which is dashboard. and it doesn't redirect to login
I have a question,how to change container border colour?
Aoa bro the login screen is not responsive on my mobile screen not fitting please help also the splash screen is loading bigger
Should I use scroll view for it or it can be solved
You should use scroll View for vertical responsiveness
@@CodingwithT Where should I add
@@aimfit8385 Use Scroll View as a parent layout and put that all the code under it
Hello sir after typing SPLASH_SCREEN they are showing error in the ned by u should replace squarebraces with curly braces what should i do?
I have written the same code as of yours..But in nexus 6 and nexus S api 25 , forgot password and go is not visible...what to do so that they get visible?on the rest of the emulator it works well..
Do me WhatsApp on wa.me/+923060000606
When he adds.
style="@style/widget.Material.Component.TextImputLayout.OutlineBox
after reading the landing page. crashes me from the application
Have you added the Material Design library?
use material dependency version 1.0.0
@@mszaman752 use on styles
@@RanjithKumar-qj9mn where to use this LOC?
@@satyamtiwari2755 move to folder res/values/styles.xml
inside the styles.xml modiy the style to inherit from parent Theme.MaterialComponents.xxxxxxx
Thank you for the Tutorial, source code and a great Explanation
You Welcome 😊
Sir your tutorial is one of the best one, explaining way is excellent Thank you for this kind of gesture but I can't go from login to signup screen kindly help?
Thank you 😊. Can you share the error? Or check the description and follow the instructions.
@@CodingwithT I'm following your tutorial from staring nd following all your instructions but error occurred help sir please?
Dude, the home screen shows up for a brief moment before transitioning into the Main Activity from the splash screen. Can you help? And if finish() is not added to the code after startActivity(), the splash activity remains in the back stack and appears again on closing the app.
did you get solution
Hi i want to start building app but problem is admin pannel i have no idea how admin pannel create and connect same page on please make video on admin pannel reply me
Let me know about the requirements i can develop the app & admin panel for you
@@CodingwithT i want to develop app for educational site with best ui and animation can i design app and connect site please make video
Please make admin pannel tutorial for website plus app tutorial
Kindly send me the complete requirements on developer@taimoorsikander.com
Brother I love you channel you are saying exactly correct valid points in all tutorial...very nice bro.. I learned a lot... waiting for your future videos ❣️
So nice of you
Thank you for uploading such helpful video. If possible please upload video on profile designing as well and uploading profile picture.
I've already uploaded a basic profile screen tutorial in this series
Hello.
I facing this type of error can you please help me?
E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.example.stockregisterapp, PID: 6873
from moving splash to log in it's crashed
Well the actually error must be above. Have to checked the theme and dependency. It should be material design theme and meterial dependency with 1.1.0
android drawable importor is not working : Not compatible with the version of your running IDE (Android Studio Giraffe | 2022.3.1 Patch 1)
Compatible with IntelliJ IDEA (Ultimate, Community, Educational), Android Studio
so what I should to do ?
Can you give some ideas for making a game??? I’ve already made a TIC TAC TOE game and I want to make more, but can’t think what should I make??
Bro which API your using?
Where?
Thanks Sir, your are an amazing tutor, but i am facing a problem while using TextInputLayout & TextInputEditText (when added @style attribute) in Material design the code under this is not showing on my layout rest image view and text view are showing properly can you help me to understand the problem.
Do me WhatsApp on wa.me/+923060000606
Hello 👋👋why when I type
Thank you so much from the bottom of my heart. Your example along with the explanation is too good.
So nice of you
sir only one problem facing android developer my application working correctly but in logcat he display some error error is "too much work on main thread" how to resolve it any idea
It happens sometime and there are many reasons of this error. It can solved by changing the images folder! Means you have some heavy background files in your app.
You can try to create a separate folder or use Async task in your project
Android drawable importer is not available in my android studio!!
what should i do??
part of my code snippet. When running in the emulator, the text color is not showing " black" and the font " ubuntu " is not working too. The default font is there. The emulator is not showing any changes in color, button's color, etc at all. how do I solve it? I have searched the internet tried some of the solutions but didn't work.
dudeeee plzzzz help
ActivityOptions options = ActivityOptions.MakeSceneTransationAnimation (MainActicity.this , pairs )
When I write pairs after MainActivity ....it give me an error plz help dude plzzzzzzzzz
Can you tell me how much days you required to become an android studio professional as I am beginner I want to know I am also trying my best for me its little difficult as I am beginner but I will do my best
Well I'm glad at least you are trying. Just work on it in a proper fashion regularly. Also I'll suggest you to follow my new series of City guide to learn proper android
Okay Sir thank you for your suggestion
hello sir i need your help plz ! i've followed all your steps but this is not working with me each time i add nothing happens idk where is the problem :(
Sir please make tutorials Google Maps. Ordered product delivery tracking
how do we import font ?? do we have to add custom font?
Amazing video, thank you for helping us through clear explanation but I'm facing this error Cannot resolve symbol 'makeSceneTransitionAnimation' and can't get 'surround with if' option kindly may you help
Thanks 👍
Thanks for the tutorial, I won't use Sppiner with google Material design. is it possible ?
Yes! Instead there is a drop-down option
How can you do the Pair in Kotlin!
doesn't seems to work to add two pairs as a list as you did in Java!
Pair[] pairs = new Pair[2] ????????
Pls reply.
developer.android.com/training/transitions/start-activity#java
Hola, según la documentación, importas
import android.util.Pair as UtilPair
........
val options = ActivityOptions.makeSceneTransitionAnimation(this,
UtilPair.create(view1, "agreedName1"),
UtilPair.create(view2, "agreedName2"))
I really like the video... could make a video for splash screen for single activity apps which uses androidx components... like fragment , BottomNavigation, NavigationDrawer etc....
Sir mera source linking failed ho Raha hia...app mobile par show Nahi ho rahi...app Kuch help Kar dien plz
Latest Android studio mien style.xml Nahi a raha tha...Tu mien ne themes.xml mien Kam kya hia aur themes.xml v21 BHI banaya hia us mien BHI error a raha tha
Hello sir, actually can you please tell me that how can I call login activity along with it's xml file in main cuz this isn't working... So Plz
Using Intent? Or is your question is different?
Nice brotherly but did the see where the splash screen layout is done.. Cheers
You need a splash screen video link?
Thank you
Splash Screen Link th-cam.com/video/JLIFqqnSNmg/w-d-xo.html
I get an error when I use TextInputEditLayout. It says caused by android.view.InflateException. What do I do?
Please check the description for details
if i not wrong, you call the id in the different layout
thank you for your wonderful tutorial brother! I faced some wired problem. logo and text in Login activity does not close properly when close the app. those are vanish after some milisec. how to fixed it.
Can you please elaborate the problem clearly! So sorry but i did not get it
@@CodingwithT thank you for your response brother. Fixed the problem myself.
@@sumon_tube how did u fixed it bro, please guide me
E/ActivityManager: Failure starting process com.android.camera
java.lang.SecurityException: Package com.android.camera is not encryption aware!
I am Getting this error please help!
This error look like emulator one check your device please or try to change it
Cant find the com.google.android.material dependency
Instead use this... This works!!
implementation group: 'com.google.android.material', name: 'material', version: '1.0.0''
hey,
sir I have one doubt when I press back from the login page to exit the app, it will not exit but still shows the main animation page which u made on 1st video of this playlist plzz sir help
did you get solution
U need to make sure that Intent kills the previous activity while moving to Main activity
Love from India
Thank you 😊
which linear layout is used is it horizontal or vertical , i am not able to arrange it properly.
Vertical Linear Layout
@@CodingwithT
Sir but all doesn't goes in order , like the position in vertical allignment not getting changed
@@yash2399 There might be a problem in the top layouts! Show me your code please :)
Sir by which way i should show the code
I am done , thank you 👍
Bro, in textInputLayout when I put style then in my case when I run then that box gets outlined by blue colour. How to make it black like you are having in video? Please say
I am going to upload a new video on signup and login in few hours!
In this playlist. Check that out th-cam.com/play/PL5jb9EteFAOCUaZa7MDKuMQgaYuERwWCY.html
You can also set strokeColor
modify this attribute #4ABA45
Hi Sir, Here we are using linear layout from the starting. So, my question is that it won't be responsive in every Mobile phones? If no, then should I put this linearLayout within Constraint Layout? How to achieve the responsiveness in this?? Please help sir
Please reply bro
I am not able to find the batch drawable plugin in android studio
error: method makeSceneTransitionAnimation in class ActivityOptions cannot be applied to given types;
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,pairs);
^
required: Activity,android.util.Pair[]
found: MainActivity,androidx.core.util.Pair[]
reason: varargs mismatch; androidx.core.util.Pair[] cannot be converted to android.util.Pair
Do me WhatsApp on wa.me/+923060000606
hello did u got the solution
@@CodingwithT
hello did u got the solution
Hi did you manage to solve it?
@@otaviofagundes9347 Try this import android.util.Pair as UtilPair
sir the material theme is not working in my application , its not showing the borders for the box and also not showing the name over the box as in your case is showing .. pls help what to do
I guess you have a dependency issue. Kindly try to check if dependency is properly added. Also please clean and rebuild the project
@@CodingwithT sir but I'm able to access all the material dependency content and I've added using the same method you told with the version 1.0.0
Just try to clean and rebuild. Also delete the app from your device. I hope that works
I can't use the TextInputLayout. anybody knows why? I already use the LinearLayout, but when i type TextInputLayout it didnt found.
Do me WhatsApp on wa.me/+923060000606
style="@style/widget.Material.Component.TextImputLayout.OutlineBox
this line crashes application.please advise
Have you added the Material dependency? If so then instead of just copying please try to rewrite that line
the same thing happened to me in the same line
Add dependency version 1.0.0 which mentioned in the video
Don't use latest 1.1.0, it crashes the app
This works for me
@@farhantemp7656 Thank you bro, you saved me
@@farhantemp7656 Still not working
sir i need ur help. i have a one android un completed project. pl ful fill the project and help to me. that project verymuch need the at the movement...
Which one?
I tried making this at first time i was successful but when i tried second time the outline of the editText was not there when i clicked on the editText it was appearing. Please solve this
Do me WhatsApp on wa.me/+923060000606
Can you make video on notifications? How to send notification to specific users
Sir, I have the problem when splash screen go to login. It shows phone menu for a while. I have problem too when I press back in login. It shows my picture logo and text for a while even though it's background is my phone menu. it stucks for a while. What can I do to resolve this? I hope you would share the solution for me.
I've shared the code with someone in comments and now I'm away will share it with you also.
To close the app on backpressed please use finish(); at the end of intent in splash screen
@@CodingwithT I have done it sir but it's still the same. I tried your recommendation to use intent flags but it's worse than finish(). I confuse
Hi sir, i need your help, whenever i add this line-
it show error, and after exporting app, the app is crashed and say Application stop and also the text box is not shown in my project. Please help me asap.
Do the gardle check
any solution found?
@@Philipp252 u found any solution 🥺
Can anyone solve my problem? When i create a login page(using any layout) and run on my phone the "login" and "register" buttons just disappear from the screen and the above button drop down...pleasee help me
Hello bro I can't upload product picture of my dashboard... When I upload product picture it's showing missing temporary folder.... Can you please help me.
Hi, are you uploading it from inside the Studio or from Database?
When I put code style Under the box
Can you please give this a try? th-cam.com/video/jh5woifGidw/w-d-xo.html
can you please provide the source code since the link in the description is redirecting me to the website but there is no source code in there
Do contact with me on Instagram
In the previous video you linked main activity with dashboard screen, after that you added another activity i.e, the login activity but when I tried to remove the dashboard activity from java folder and main activity.java code and replace login.class instead of dashboard.class after the initial screen it's now showing anything. Also I'm using implementation 1.0.0. Kindly help me resolve this
Hi Brother,
i tried to recreate what u have shown in this video but facing a issue.
After 5sec delay my app is jumping to Dashboard and not to login page :(
help me out brother
Do me WhatsApp on wa.me/+923060000606
Progress Bar On click button like u did in login...
I couldn't able to add material dependency it is showing that "please enter a valid coordinate,discover it or select one from the list".So can you please tell me how can i add material dependency...Sir!!!!
Just copy the dependency from the link provided in description and add that in buid.gradle with Implementation keyword
i'm facing problem at the statement "setContentView(R.layout.activity_login);" in "Login.java" file that "activity_login" is red and when i pull over my cursor on "activity_login" then the pop-up says "Cannot resolve symbol 'activity_login'. hope you'll help me to find out the solution
Try to close the project and run it again. But first try to clean and rebuild your project.
@@CodingwithT Cleaning, rebuilding and then close the project couldn't help. The problem is due to com.google.android.material.textfield.TextInputLayout
I just found out that, the style attribute in the com.google.android.material.textfield.TextInputLayout is the one causing the crash
when my login page opens up the cursor in username is already blinking and highlighted how to disable it?
remove the word focusable
@@CodingwithT what is the property in xml same name focusable?
@@CodingwithT bro if i remove it or set focusable to false the text field become passive and i cant clik inside it and the animation is also gone
just add this android:focusableInTouchMode="true"
i have facing the problem in the main in pair y showing in error android x .core.util.pair,required android.util.pair
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,Pairs);
in this the Pairs is showing error. Pairs is in red.
Have you created the pairs right?
Is necessary add [ com.google.android.material]? because my project sync IDE work properly !
If that is working then let it be :)
@@CodingwithT
I followed all steps implementation but problem is com.google material not working in build.gradle , change Sync Files IDE , and won't run application
the style for TextInputLayout doesnt work, what to do?
Need to check the code
@@CodingwithT thank you, I installed some packages and finally it worked
@@renzozafe plz help .... Mine give same error plzzzzzzzzz
You are such a great person! Much love and appreciation :)
Thank you 😊
could you tell me how to add the phone in that video? and how to animate it (zoom in, zoom out)? (windows user)
Didn't get your point
@@CodingwithT (1) how to animate the smartphone like zooming in and out like in 0:24 - 0:26 and (2) what application did you use to record the prototype demo so that there is a background behind it? thanks for your response^^
Hello which place you download this video car icon ?
Do me WhatsApp on wa.me/+923060000606
After the splash screen I am able to run but my app is " unfortunately stopping " iam getting like this plz help me
Do me WhatsApp
@@CodingwithT from 1947 Iam msging u reply bro
You've not text me there
I work like you but when I click login, the app will stop 😟 any help ?
bro, the application has stopped after the splash screen so the animation didn't work for the login part. Pls solve this problem
Do me WhatsApp on wa.me/+923060000606
@@CodingwithT I already whatsapp you sir
my page still goes to the dashboard not to the Login what to do???
Do contact with me on Instagram
I m getting edit text box in pink Color , how can i change that to black color..
you can change it in XML by stroke color etc!!! :)
Can you make an dynamic app that can be updated regular like news app, quiz or many more data can be updated daily
Is there anyway to remove white screen delay in starting?
Do me WhatsApp on wa.me/+923060000606
Bro, im doing my FYP and you are making my life easy
Happy to hear that!
My App Crashes And Doesn't Enter Into The Login Page... Plz Help Me!.. I Made All The changes As in The Video... But It Is Crashing 🙏
salam aleykum Taimoor S.
Wonderful tutorial.Can u send materials to read about android or names of books on android.
thank you.
Noted! Will update you
my theme is not working...even when I added the theme you suggested
What's the problem?
@@CodingwithT I've been able to fix it🙏🙏thank you