Free Code

In this blog, we are going to create a LogIn & SignUp UI Design Layout in Android Studio. We will provide the latest code UI/UX layout for the user, reliable for the Android App. Before creating the project, we have provided some assets to support its development. Implement the App Color Code in the "colors.xml" file. Here, we have to insert the color code to customise your application project. #FFBB86FC #024265 #012F49 #FF03DAC5 #FF018786 #FF000000 #FFFFFFFF #435863 Replace "Action Bar" with "No Action Bar". Import "string.xml" code given below. We need to import some important text string code into a string.xml file. UI Design Login & SignUp LOG IN & SIGN UP UI DESIGN Enter Your Email ID Password Login Forgot Password Name Confirm Password Signup Insert assets into the LogIn & SignUp UI Layout. We need a LOGO and Text Image for this project. So, download Assets now. App Logo Download Now Create a design Button and some social media icons under the drawable folder. If you want to download all the assets above directly, click the download button. Drawable Assests Download We have to import and create some background and icons for ui design, which are given below: Create or implement a "button_bg.xml" file. Create or implement an "edit_text_bg.xml" file. Create or implement a "facebook.xml" file. Create or implement a "google.xml" file. Create or implement a "phone_call.xml" file. Create or implement a view_bg.xml" file. Create a "activity_main.xml" UI Design Layout. Create a "fragment_login.xml" UI Design Layout. Create a "fragment_sign_up.xml" UI Design Layout. Implement or Create "ViewPagerAdapter" Java File. public class ViewPagerAdapter extends FragmentPagerAdapter { private final List fragmentName = new ArrayList(); private final List fragmentTitle = new ArrayList(); // Constructor public ViewPagerAdapter(@NonNull FragmentManager fm) { super(fm); } @NonNull @Override public Fragment getItem(int position) { return fragmentName.get(position); } @Override public int getCount() { return fragmentTitle.size(); } @Nullable @Override public CharSequence getPageTitle(int position) { return fragmentTitle.get(position); } // Add Fragment Manager public void AddFragment(Fragment fragment, String title) { fragmentName.add(fragment); fragmentTitle.add(title); }} Implement or Create "SignUpFragment" Java File. public class SignUpFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_sign_up, container, false); }} Implement or Create "LogInFragment" Java File. public class LoginFragment extends Fragment { EditText email, password; TextView forgotPassword; Button loginButton; float v = 0; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View view = inflater.inflate(R.layout.fragment_login, container, false); email = view.findViewById(R.id.email_id); password = view.findViewById(R.id.password); forgotPassword = view.findViewById(R.id.forgotPassword); loginButton = view.findViewById(R.id.loginButton); email.setTranslationX(800); password.setTranslationX(800); forgotPassword.setTranslationX(800); loginButton.setTranslationX(800); email.setAlpha(v); password.setAlpha(v); forgotPassword.setAlpha(v); loginButton.setAlpha(v); email.animate().translationX(0).alpha(1).setDuration(800).setStartDelay(300).start(); password.animate().translationX(0).alpha(1).setDuration(800).setStartDelay(500).start(); forgotPassword.animate().translationX(0).alpha(1).setDuration(800).setStartDelay(500).start(); loginButton.animate().translationX(0).alpha(1).setDuration(800).setStartDelay(700).start(); return view; }} Implement or Create "MainActivity" Java File. public class MainActivity extends AppCompatActivity { ViewPagerAdapter viewPagerAdapter; CardView facebook, google, phone; float v = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); EdgeToEdge.enable(this); setContentView(R.layout.activity_main); ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> { Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars()); v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom); return insets; }); TabLayout tabLayout = findViewById(R.id.tabLayout); ViewPager viewPager = findViewById(R.id.viewPager); facebook = findViewById(R.id.facebook_login); google = findViewById(R.id.google_login); phone = findViewById(R.id.phone_login); viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager()); // Add Fragment viewPagerAdapter.AddFragment(new LoginFragment(), "Login"); viewPagerAdapter.AddFragment(new SignUpFragment(), "Signup"); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); viewPager.setAdapter(viewPagerAdapter); tabLayout.setupWithViewPager(viewPager); facebook.setTranslationY(300); google.setTranslationY(300); phone.setTranslationY(300); tabLayout.setTranslationY(300); facebook.setAlpha(v); google.setAlpha(v); phone.setAlpha(v); tabLayout.setAlpha(v); facebook.animate().translationY(0).alpha(1).setDuration(1000).setStartDelay(400).start(); google.animate().translationY(0).alpha(1).setDuration(1000).setStartDelay(600).start(); phone.animate().translationY(0).alpha(1).setDuration(1000).setStartDelay(800).start(); tabLayout.animate().translationY(0).alpha(1).setDuration(1000).setStartDelay(100).start(); }} Output Result in Animation View Given Below.