Blood App Android Application Sign up Layout UI Design using Android Studio XML tutorial



Hey this is the tutorial of how to add Account creation UI for Blood donation android application so let get started with the code you can also watch the video bellow to get a visual idea about that---

Watch the video Tutorial here



So lets start with coding first thing always first Create a new project or use your old project 

1. Create a new project. 

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

2. Open activity_main.xml file and start coding. In this activity we are going to add six layout in only one layout and we will show them by using view attribute...




2.1 Add this code under the LinearLayout which is the root layout of this activity...

<!--This is for first page -->
    <LinearLayout
        android:visibility="gone"
        android:id="@+id/first_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:gravity="bottom"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/baloo"
            android:text="Welcome"
            android:layout_marginStart="10dp"
            android:textColor="#1b1b1b"
            android:textSize="35sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:fontFamily="@font/cantora_one"
            android:text="This is a platform for asking for help and also providing blood donation assistance"
            android:textSize="17sp"
            android:textColor="#606060"
            android:layout_marginStart="10dp"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp">
            <Button
                android:id="@+id/signin"
                android:layout_width="130dp"
                android:layout_height="wrap_content"
                android:text="Login"
                android:fontFamily="@font/cantora_one"
                android:textAllCaps="false"
                android:textSize="17sp"
                android:background="@drawable/login_button_background"
                android:textColor="#FFCE4310"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"/>
            <Button
                android:id="@+id/create_account"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="Create Account"
                android:textAllCaps="false"
                android:textSize="17sp"
                android:fontFamily="@font/cantora_one"
                android:layout_marginStart="15dp"
                android:background="@drawable/create_account_background"
                android:textColor="#fff"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"/>

        </LinearLayout>

    </LinearLayout>
This is going to be your first layout of creating account and it looks like this-



2.2 Now paste this code below the first layout--

<!--this is second layout-->
    <LinearLayout
        android:visibility="gone"
        android:id="@+id/second_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="bottom"
        android:layout_margin="20dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/baloo"
            android:text="Create account"
            android:layout_marginStart="10dp"
            android:textColor="#1b1b1b"
            android:textSize="35sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:fontFamily="@font/cantora_one"
            android:text="Please enter your mobile number"
            android:textSize="17sp"
            android:textColor="#606060"
            android:layout_marginStart="10dp"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical">
            <EditText
                android:id="@+id/edittext_phone"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_width="250dp"
                android:layout_height="wrap_content"
                android:hint="Enter Number"
                android:background="@drawable/edittext_background"
                android:padding="10dp"
                android:layout_marginStart="10dp"
                android:fontFamily="@font/cantora_one"/>
            <ImageButton
                android:id="@+id/input_phoneNumber"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_arrow_forward_black_24dp"
                android:layout_marginStart="20dp"
                android:background="@drawable/next_button_background"

                />
        </LinearLayout>
    </LinearLayout>
This is your second layout...



2.3 Now add the third layout bellow second layout.

 <!--This is third layout-->
    <LinearLayout
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fourth_layout"
        android:gravity="bottom"
        android:layout_margin="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/baloo"
            android:text="Verify"
            android:layout_marginStart="10dp"
            android:textColor="#1b1b1b"
            android:textSize="35sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:fontFamily="@font/cantora_one"
            android:text="Please enter the verification code that you recived on your number bellow"
            android:textSize="17sp"
            android:textColor="#606060"
            android:layout_marginStart="10dp"/>
        <TextView
            android:id="@+id/userPhoneNumber"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:fontFamily="@font/cantora_one"
            android:text="+91 8372890302"
            android:textSize="17sp"
            android:textColor="#606060"
            android:layout_marginStart="10dp"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:gravity="center_vertical">
            <EditText
                android:id="@+id/verifiednumber"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_width="250dp"
                android:layout_height="wrap_content"
                android:hint="Enter Code"
                android:background="@drawable/edittext_background"
                android:padding="10dp"
                android:layout_marginStart="10dp"
                android:fontFamily="@font/cantora_one"/>
            <ImageButton
                android:id="@+id/verified_next"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_arrow_forward_black_24dp"
                android:layout_marginStart="20dp"
                android:background="@drawable/next_button_background"

                />
        </LinearLayout>
    </LinearLayout>


2.4 Now add fourth layout bellow third layout...

<!--This is forth layout-->
    <LinearLayout
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/five_layout"
        android:gravity="bottom"
        android:layout_margin="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/baloo"
            android:text="Your Name"
            android:layout_marginStart="10dp"
            android:textColor="#1b1b1b"
            android:textSize="35sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:fontFamily="@font/cantora_one"
            android:text="Enter your Good name bellow"
            android:textSize="17sp"
            android:textColor="#606060"
            android:layout_marginStart="10dp"/>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:gravity="center_vertical">
            <EditText
                android:id="@+id/userName"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_width="250dp"
                android:layout_height="wrap_content"
                android:hint="Enter name"
                android:background="@drawable/edittext_background"
                android:padding="10dp"
                android:layout_marginStart="10dp"
                android:fontFamily="@font/cantora_one"/>
            <ImageButton
                android:id="@+id/usernamenext"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_arrow_forward_black_24dp"
                android:layout_marginStart="20dp"
                android:background="@drawable/next_button_background"

                />
        </LinearLayout>
    </LinearLayout>




2.5 Now add fifth layout bellow the forth layout...

<!--This is fifth layout-->
    <LinearLayout
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/sixth_layout"
        android:gravity="bottom"
        android:layout_margin="20dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/baloo"
            android:text="Choose Blood Type"
            android:layout_marginStart="10dp"
            android:textColor="#1b1b1b"
            android:textSize="35sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:fontFamily="@font/cantora_one"
            android:text="Please choose your blood type, when someone near you needs a darsh group that matches your blood type, we will send a notification"
            android:textSize="17sp"
            android:textColor="#606060"
            android:layout_marginStart="10dp"/>

        <LinearLayout
            android:layout_marginTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">

            <Button
                android:id="@+id/groupA"
                android:foreground="?android:attr/selectableItemBackground"
                android:background="@drawable/blood_group_button_background"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="A"
                android:layout_margin="10dp"
                android:textStyle="bold"
                android:fontFamily="@font/cantora_one"
                android:textSize="18sp"/>
            <Button
                android:id="@+id/groupB"
                android:foreground="?android:attr/selectableItemBackground"
                android:background="@drawable/blood_group_button_background"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="B"
                android:layout_margin="10dp"
                android:textStyle="bold"
                android:fontFamily="@font/cantora_one"
                android:textSize="18sp"/>
            <Button
                android:id="@+id/groupAB"
                android:foreground="?android:attr/selectableItemBackground"
                android:background="@drawable/blood_group_button_background"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="AB"
                android:layout_margin="10dp"
                android:textStyle="bold"
                android:fontFamily="@font/cantora_one"
                android:textSize="18sp"/>
            <Button
                android:id="@+id/groupO"
                android:foreground="?android:attr/selectableItemBackground"
                android:background="@drawable/blood_group_button_background"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:text="O"
                android:layout_margin="10dp"
                android:textStyle="bold"
                android:fontFamily="@font/cantora_one"
                android:textSize="18sp"/>

        </LinearLayout>

        <Button
            android:id="@+id/groupContinue"
            android:layout_marginTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/create_account_background"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:text="CONTINUE"
            android:fontFamily="@font/cantora_one"
            android:textSize="18sp"
            android:textColor="#fff"
            android:layout_marginBottom="20dp"/>

    </LinearLayout>
2.6 Now add the last layout bellow-

<!--This is sixth layout-->
    <LinearLayout
        android:visibility="gone"
        android:id="@+id/seventh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_margin="20dp"
        android:gravity="bottom">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/image"
            android:layout_marginStart="10dp"/>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/baloo"
                android:text="Hi, "
                android:layout_marginStart="10dp"
                android:textColor="#1b1b1b"
                android:textSize="35sp" />
            <TextView
                android:id="@+id/userNameFinal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/baloo"
                android:text="Name"
                android:layout_marginStart="10dp"
                android:textColor="#1b1b1b"
                android:textSize="35sp" />

        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:fontFamily="@font/cantora_one"
            android:text="To request blood donor assistance, press the button below"
            android:textSize="17sp"
            android:textColor="#606060"
            android:layout_marginStart="10dp"/>

        <Button
            android:id="@+id/request"
            android:layout_marginTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/create_account_background"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:text="Request"
            android:fontFamily="@font/cantora_one"
            android:textSize="18sp"
            android:textColor="#fff"
            android:layout_marginBottom="20dp"/>

    </LinearLayout>
3. Now we add the UI now we need to add some java code so it will work perfectly so now open your MainActivity.java file and paste this code--




public class MainActivity extends AppCompatActivity {

    private LinearLayout first_layout,second_layout,fourth_Layout,fifth_Layout,sixth_Layout,seventh_Layout;

    //First Layout Button
    private Button signin, Create_accoount;

    //second Layout
    private ImageButton phonenumber;
    private EditText inputPhonenumber;

    //third layout
    private ProgressBar progressBar;

    //fourth layout
    private EditText verifiedNumber;
    private ImageButton verifiedNext;
    private TextView UserPhoneNumber;

    //fifth layout
    private EditText userName;
    private ImageButton usernext;

    //sixth Layout
    private Button groupA,groupB,gruopAB,groupO,groupContinue;
    String BloodeGroup;

    //seventh Layout
    private TextView UserNameFinal;
    private Button Request;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        first_layout = (LinearLayout) findViewById(R.id.first_layout);
        second_layout = (LinearLayout) findViewById(R.id.second_layout);
        fourth_Layout = (LinearLayout) findViewById(R.id.fourth_layout);
        fifth_Layout = (LinearLayout) findViewById(R.id.five_layout);
        sixth_Layout = (LinearLayout) findViewById(R.id.sixth_layout);
        seventh_Layout = (LinearLayout) findViewById(R.id.seventh_layout);

        first_layout.setVisibility(View.VISIBLE);
        final ViewGroup transitionsContainerfirst = (ViewGroup) findViewById(R.id.first_layout);
        TransitionManager.beginDelayedTransition(transitionsContainerfirst);

        signin = (Button) transitionsContainerfirst.findViewById(R.id.signin);
        Create_accoount = (Button) transitionsContainerfirst.findViewById(R.id.create_account);

        signin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"You click on the SIgn in Button",Toast.LENGTH_SHORT).show();
            }
        });

        Create_accoount.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                first_layout.setVisibility(View.GONE);
                second_layout.setVisibility(View.VISIBLE);
            }
        });

        final ViewGroup transitionsContainersecond = (ViewGroup) findViewById(R.id.second_layout);
        TransitionManager.beginDelayedTransition(transitionsContainersecond);

        inputPhonenumber = (EditText) transitionsContainersecond.findViewById(R.id.edittext_phone);
        phonenumber = (ImageButton) transitionsContainersecond.findViewById(R.id.input_phoneNumber);

        String number = inputPhonenumber.getText().toString();
        phonenumber.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                second_layout.setVisibility(View.GONE);
                fourth_Layout.setVisibility(View.VISIBLE);
            }
        });

        final ViewGroup transitionsContainerforth = (ViewGroup) findViewById(R.id.fourth_layout);
        TransitionManager.beginDelayedTransition(transitionsContainerfirst);

        verifiedNumber = (EditText) transitionsContainerforth.findViewById(R.id.verifiednumber);
        verifiedNext = (ImageButton) transitionsContainerforth.findViewById(R.id.verified_next);
        UserPhoneNumber = (TextView) transitionsContainerforth.findViewById(R.id.userPhoneNumber);
        UserPhoneNumber.setText(number);

        String verificationnumber = verifiedNumber.getText().toString();
        verifiedNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fourth_Layout.setVisibility(View.GONE);
                fifth_Layout.setVisibility(View.VISIBLE);
            }
        });

        final ViewGroup transitionsContainerfifth = (ViewGroup) findViewById(R.id.first_layout);
        TransitionManager.beginDelayedTransition(transitionsContainerfifth);

        userName = (EditText) transitionsContainerfifth.findViewById(R.id.userName);
        usernext = (ImageButton) transitionsContainerfifth.findViewById(R.id.usernamenext);
        String UserName = userName.getText().toString();
        usernext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fifth_Layout.setVisibility(View.GONE);
                sixth_Layout.setVisibility(View.VISIBLE);
            }
        });

        groupA = (Button) findViewById(R.id.groupA);
        groupB = (Button) findViewById(R.id.groupB);
        gruopAB = (Button) findViewById(R.id.groupAB);
        groupO = (Button) findViewById(R.id.groupO);
        groupContinue = (Button) findViewById(R.id.groupContinue);

        groupA.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                groupA.setBackground(getDrawable(R.drawable.create_account_background));
                groupA.setTextColor(getResources().getColor(R.color.WHiTE));
                BloodeGroup = "A";
            }
        });
        groupB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                groupB.setBackground(getDrawable(R.drawable.create_account_background));
                groupB.setTextColor(getResources().getColor(R.color.WHiTE));
                BloodeGroup = "B";
            }
        });

        gruopAB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                gruopAB.setBackground(getDrawable(R.drawable.create_account_background));
                gruopAB.setTextColor(getResources().getColor(R.color.WHiTE));
                BloodeGroup = "AB";
            }
        });

        groupO.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                groupO.setBackground(getDrawable(R.drawable.create_account_background));
                groupO.setTextColor(getResources().getColor(R.color.WHiTE));
                BloodeGroup = "O";
            }
        });

        groupContinue.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sixth_Layout.setVisibility(View.GONE);
                seventh_Layout.setVisibility(View.VISIBLE);
            }
        });

        UserNameFinal = (TextView) findViewById(R.id.userNameFinal);
        Request = (Button) findViewById(R.id.request);

        UserNameFinal.setText(UserName);
        Request.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"You click on Request Button",Toast.LENGTH_LONG).show();
            }
        });

    }

}
Now it will work perfectly so go and run this application

Watch the video Tutorial here




You can get the source code and all resource like drwable files from the GitHub Repository so go to this link for full source code-> https://github.com/MonsterTechnoGit/Blood-Donation-App-Account-Creation-UI

Comments

Post a Comment