Login Signup Welcome Screen in Android – City Guide Part 7

by | Jun 21, 2020 | Android, City Guide App | 0 comments

From now onwards, we will start another module of City Guide App we are creating which is Retailer Module. In today’s tutorial, we will create a first retailer startup screen in which we will allow the user to either login or signup by adding some animations. 

Before Getting Started

So, before going to start coding, we sould have to understand the flow and basics we need to get started with today’s android tutorial!

 

  • This Screen will be called from Dashboard Screen when user hit the + icon on the top right cornor so we need to create an OnClick function for that!
//Call the retailer Startup screen on it's OnClick
public void callRetailerScreens(View view) {
    startActivity(new Intent(getApplicationContext(), RetailerStartUpScreen.class));
}

 

  • Fonts we will use in the module will be Muli for all type of headings and paragraphs.
  • Strings are predefined and will define all the strings in the strings file in android studio.

Watch Youtube tutorial

 

Complete Code

 

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:padding="30dp"
tools:context=".Common.LoginSignup.RetailerStartUpScreen">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/retailer_circle_black" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="120dp"
android:fontFamily="@font/muli_black"
android:text="@string/retailer_heading"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="@color/black"
android:textSize="36sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="@font/muli"
android:text="@string/retailer_tag_line"
android:textAlignment="center"
android:textColor="@color/black" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp">

<Button
android:id="@+id/login_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:onClick="callLoginScreen"
android:text="@string/login"
android:textColor="@color/black"
android:transitionName="transition_login"
tools:ignore="ButtonStyle" />

<Button
android:id="@+id/signup_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:onClick="callSignUpScreen"
android:text="@string/sign_up"
android:textColor="@color/black"
tools:ignore="ButtonStyle"
android:transitionName="transition_signup"/>

</LinearLayout>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#00000000"
android:text="@string/how_we_work"
android:textColor="@color/black" />

</LinearLayout>

</ScrollView>

package com.taimoorsikander.cityguide.Common.LoginSignup;

import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.util.Pair;
import android.view.View;
import android.view.WindowManager;

import androidx.appcompat.app.AppCompatActivity;

import com.taimoorsikander.cityguide.R;

public class RetailerStartUpScreen extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_retailer_start_up_screen);
}

public void callLoginScreen(View view) {

Intent intent = new Intent(getApplicationContext(), Login.class);

Pair[] pairs = new Pair[1];
pairs[0] = new Pair<View, String>(findViewById(R.id.login_btn), "transition_login");

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(RetailerStartUpScreen.this, pairs);
startActivity(intent, options.toBundle());
} else {
startActivity(intent);
}

}

public void callSignUpScreen(View view) {

Intent intent = new Intent(getApplicationContext(), SignUp.class);

Pair[] pairs = new Pair[1];
pairs[0] = new Pair<View, String>(findViewById(R.id.signup_btn), "transition_signup");

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(RetailerStartUpScreen.this, pairs);
startActivity(intent, options.toBundle());
} else {
startActivity(intent);
}

}

}

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design