Tuesday, 8 May 2018

How to Implement the Step View in android studio.
Open android studio and create a new project.
File => New => New Project => Configure your new project => Select the form factor yours app will run on => Add an Activity to Mobile => Customize the Activity => Finish.

Create Xml file in project.    
Open => app => res => layout - activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.bagicode.www.bagiregisterapp.MainActivity">

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="18dp"
        android:background="#FFF14E4E" />

    <RelativeLayout
        android:id="@+id/layoutStatus"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/txtOne"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:background="@drawable/rectangle_aktif"
            android:gravity="center"
            android:padding="5dp"
            android:text="1"
            android:textColor="#FFF"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/txtTwo"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/rectangle_non"
            android:gravity="center"
            android:padding="5dp"
            android:text="2"
            android:textColor="#FFF14E4E"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/txtThree"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/rectangle_non"
            android:gravity="center"
            android:padding="5dp"
            android:text="3"
            android:textColor="#FFF14E4E"
            android:textSize="16sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/layoutStatus"
        android:layout_marginTop="16dp">

        <LinearLayout
            android:id="@+id/layOne"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Username"
                android:textColor="#000" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@drawable/border"
                android:hint="Enter User Name"
                android:padding="10dp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/layTwo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:visibility="gone">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Password"
                android:textColor="#000" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@drawable/border"
                android:hint="*****"
                android:inputType="textPassword"
                android:padding="10dp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/layThree"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:visibility="gone">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Email"
                android:textColor="#000" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@drawable/border"
                android:hint="arunchoudhary780@gmail.com"
                android:padding="10dp" />
        </LinearLayout>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="22dp"
        android:layout_marginRight="22dp">

        <LinearLayout
            android:id="@+id/layClickOne"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible">

            <Button
                android:id="@+id/btnOne"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/rectangle_button"
                android:text="Continue"
                android:textAllCaps="false"
                android:textColor="#FFF" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layClickTwo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone">

            <Button
                android:id="@+id/btnBackOne"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="6dp"
                android:layout_weight="1"
                android:background="@drawable/rectangle_button"
                android:text="Back"
                android:textAllCaps="false"
                android:textColor="#FFF" />

            <Button
                android:id="@+id/btnTwo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="6dp"
                android:layout_weight="1"
                android:background="@drawable/rectangle_button"
                android:text="Continue"
                android:textAllCaps="false"
                android:textColor="#FFF" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layClickThree"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:visibility="gone">

            <Button
                android:id="@+id/btnBackTwo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="6dp"
                android:layout_weight="1"
                android:background="@drawable/rectangle_button"
                android:text="Back"
                android:textAllCaps="false"
                android:textColor="#FFF" />

            <Button
                android:id="@+id/btnThree"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="6dp"
                android:layout_weight="1"
                android:background="@drawable/rectangle_button"
                android:text="Submit"
                android:textAllCaps="false"
                android:textColor="#FFF" />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

Create Drawable file in project.  
Open => app => res => drawable - border.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:color="#FFF14E4E"
        android:width="1dp"/>
    <corners
        android:radius="62dp"/>
</shape>


Open => app => res => drawable - rectangle_select.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="#FFF14E4E"
        android:endColor="#FFF14E4E"
        android:angle="270"/>
    <corners
        android:radius="2dp"/>
</shape>


Open => app => res => drawable - rectangle_unselect.xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="#FFF"
        android:endColor="#FFF"
        android:angle="270"/>
    <corners
        android:radius="20dp"/>
    <stroke
        android:color="#FFF14E4E"
        android:width="2dp"/>
</shape>


Open => app => res => drawable - rectangle_button.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFF14E4E"
        android:endColor="#FFF14E4E"
        android:angle="270"/>
    <corners
        android:radius="20dp"/>
</shape>

Create the Java file in project.
Open app => main => src = MainActivity.java

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    TextView oneTextView, twoTextView, threeTextView;
    LinearLayout oneLinearLayout, twoLinearLayout, threeLinearLayout;
    LinearLayout oneClickLinearLayout, twoClickLinearLayout, threeClickLinearLayout;
    Button oneButton, twoButton, threeButton;
    Button oneBackButton, twoBackButton;

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

        //Getting the Widget Id Here
        init();
        //End
        //Using the click listener here
        listener();
        //End
    }

    private void listener() {
        oneButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                oneTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_non));
                twoTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_aktif));
                threeTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_non));
                oneTextView.setTextColor(Color.parseColor("#FFF14E4E"));
                twoTextView.setTextColor(Color.parseColor("#ffffff"));

                oneLinearLayout.setVisibility(View.GONE);
                twoLinearLayout.setVisibility(View.VISIBLE);
                threeLinearLayout.setVisibility(View.GONE);


                oneClickLinearLayout.setVisibility(View.GONE);
                twoClickLinearLayout.setVisibility(View.VISIBLE);
                threeClickLinearLayout.setVisibility(View.GONE);
            }
        });

        twoButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                oneTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_non));
                twoTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_non));
                threeTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_aktif));
                oneTextView.setTextColor(Color.parseColor("#FFF14E4E"));
                twoTextView.setTextColor(Color.parseColor("#FFF14E4E"));
                threeTextView.setTextColor(Color.parseColor("#ffffff"));

                oneLinearLayout.setVisibility(View.GONE);
                twoLinearLayout.setVisibility(View.GONE);
                threeLinearLayout.setVisibility(View.VISIBLE);

                oneClickLinearLayout.setVisibility(View.GONE);
                twoClickLinearLayout.setVisibility(View.GONE);
                threeClickLinearLayout.setVisibility(View.VISIBLE);
            }
        });


        twoBackButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                oneTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_non));
                twoTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_aktif));
                threeTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_non));
                oneTextView.setTextColor(Color.parseColor("#FFF14E4E"));
                twoTextView.setTextColor(Color.parseColor("#ffffff"));
                threeTextView.setTextColor(Color.parseColor("#FFF14E4E"));

                oneLinearLayout.setVisibility(View.GONE);
                twoLinearLayout.setVisibility(View.VISIBLE);
                threeLinearLayout.setVisibility(View.GONE);


                oneClickLinearLayout.setVisibility(View.GONE);
                twoClickLinearLayout.setVisibility(View.VISIBLE);
                threeClickLinearLayout.setVisibility(View.GONE);
            }
        });
        oneBackButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                oneTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_aktif));
                twoTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_non));
                threeTextView.setBackground(getResources().getDrawable(R.drawable.rectangle_non));
                oneTextView.setTextColor(Color.parseColor("#ffffff"));
                twoTextView.setTextColor(Color.parseColor("#FFF14E4E"));
                threeTextView.setTextColor(Color.parseColor("#FFF14E4E"));

                oneLinearLayout.setVisibility(View.VISIBLE);
                twoLinearLayout.setVisibility(View.GONE);
                threeLinearLayout.setVisibility(View.GONE);


                oneClickLinearLayout.setVisibility(View.VISIBLE);
                twoClickLinearLayout.setVisibility(View.GONE);
                threeClickLinearLayout.setVisibility(View.GONE);
            }
        });
    }

    private void init() {
        //Here Declare the TextView ID
        oneTextView = (TextView) findViewById(R.id.txtOne);
        twoTextView = (TextView) findViewById(R.id.txtTwo);
        threeTextView = (TextView) findViewById(R.id.txtThree);
        //End
        //Here Declare the LinearLayout ID
        oneLinearLayout = (LinearLayout) findViewById(R.id.layOne);
        twoLinearLayout = (LinearLayout) findViewById(R.id.layTwo);
        threeLinearLayout = (LinearLayout) findViewById(R.id.layThree);

        oneClickLinearLayout = (LinearLayout) findViewById(R.id.layClickOne);
        twoClickLinearLayout = (LinearLayout) findViewById(R.id.layClickTwo);
        threeClickLinearLayout = (LinearLayout) findViewById(R.id.layClickThree);
        //End
        //Here Declare the Button ID
        oneButton = (Button) findViewById(R.id.btnOne);
        twoButton = (Button) findViewById(R.id.btnTwo);
        threeButton = (Button) findViewById(R.id.btnThree);

        oneBackButton = (Button) findViewById(R.id.btnBackOne);
        twoBackButton = (Button) findViewById(R.id.btnBackTwo);
        //End
    }
}








Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)