المتابعون

السبت، 6 أبريل 2019

نموذج تسجيل الخول

In this post I will tell you how you can design awesome UI using simple XML code just follow this post and do the same which I told here...

Hear is a demo of How its look and feel



1. Creating New Project

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activityfrom templates. 

2. Enable AppCompact-V7 and design in app/build.gradle. And Sync the project.

android {
dataBinding {
enabled = true
}
}
dependencies {
//...
implementation 'com.android.support:appcompat-v7:27.0.2'
implementation 'com.android.support:design:27.0.2'
}
view rawgradle hosted with ❤ by GitHub
3. Download this Image file and past it in your project drawable folder.



4. Add the below resources to drawable folder background.xmlbutton_background.xmllayout_background.xml

background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient android:angle="0"
android:startColor="#285FBA"
android:endColor="#7535AD"/>
</shape>
view rawbackground.xml hosted with ❤ by GitHub

button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#0dafdc">
<item>
<shape android:shape="rectangle"
>
<corners
android:radius="100dp"/>
<gradient android:angle="0"
android:startColor="#285FBA"
android:endColor="#7535AD"/>
</shape>
</item>
</ripple>

layout_background.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="500"
android:viewportHeight="749"
android:width="625dp"
android:height="936.25dp">
<group
android:scaleX="0.1"
android:scaleY="-0.1"
android:translateY="749">
<path
android:pathData="M439 7416C282 7361 169 7248 113 7090l-23 -65 0 -1751c0 -1693 1 -1753 19 -1806 35 -101 99 -185 184 -241 57 -38 90 -50 442 -162 132 -42 701 -224 1265 -405 564 -180 1084 -346 1155 -368 72 -22 362 -114 645 -206 558 -179 630 -196 749 -177 165 27 267 129 316 316 13 53 15 321 15 2410 0 2572 4 2397 -58 2523 -56 115 -184 223 -310 262 -63 20 -97 20 -2036 20l-1971 0 -66 -24z"
android:fillColor="#ffffff" />
<path
android:pathData="M498 2820C322 2790 207 2702 128 2534L95 2465 92 1476C90 496 90 486 110 424 155 289 255 178 389 112l76 -37 1998 -3 1997 -2 63 21c160 53 293 193 338 357 17 59 19 106 19 407 0 369 -4 404 -56 507 -55 109 -179 205 -304 237 -25 7 -54 16 -65 21 -11 5 -206 68 -433 140 -227 72 -677 214 -1000 316 -323 102 -623 197 -667 211 -44 14 -343 108 -665 210 -322 102 -691 218 -820 259 -240 76 -271 81 -372 64z"
android:fillColor="#ffffff" />
</group>
</vector>




5. Go to app\src\main\res\values and open style.xml file and change Theme.AppCompat.Light.DarkActionbar to Theme.AppCompat.Light.NoActionBar

6. Now open your activity_main.xml file and past all of the code from bellow for the LogIn Activity.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background"
tools:context="com.monstertechno.loginuidesign2.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="@drawable/background"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="LOGIN"
android:textStyle="bold"
android:textColor="#ffff"
android:textSize="20sp"
android:textAlignment="center"
/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:orientation="vertical"
android:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="20dp"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:gravity="center"
android:background="@drawable/layout_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="345dp"
android:orientation="vertical"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="10dp"
android:id="@+id/email"
android:drawableLeft="@drawable/ic_mail_outline_black_24dp"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:hint="EMAIL/MOBILE"
android:padding="20dp"
android:textSize="14sp"
android:textColorHint="#606060"
android:inputType="text"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
android:layout_marginEnd="20dp"
android:id="@+id/password"
android:layout_marginStart="20dp"
android:textSize="14sp"
android:drawablePadding="10dp"
android:hint="PASSWORD"
android:padding="20dp"
android:textColorHint="#606060"
android:inputType="textPassword"/>
<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="REMEMBER ME"
android:id="@+id/checkbox"
android:layout_marginTop="20dp"
android:layout_marginLeft="30dp" />
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_marginTop="70dp"
android:layout_marginEnd="25dp"
android:id="@+id/signin"
android:src="@drawable/ic_arrow_forward_black_24dp"
android:background="@drawable/button_background"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:text="Don't have an Account"
android:textAlignment="center"
android:textColor="@android:color/black"
android:textStyle="bold" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="10dp"
android:id="@+id/signup"
android:background="@drawable/button_background"
android:text="SIGN UP"
android:textColor="@android:color/white" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
view rawactivity_main.xml hosted with ❤ by GitHub


7. Now open you MainActivity.java file and past all the java code from bellow for LogIn Activity to work.
package com.monstertechno.loginuidesign2;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity{
Toolbar toolbar;
EditText email,password;
CheckBox checkBox;
ImageButton signin;
Button signup;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_black_24dp);
email = (EditText)findViewById(R.id.email);
password = (EditText)findViewById(R.id.password);
checkBox = (CheckBox)findViewById(R.id.checkbox);
signin =(ImageButton)findViewById(R.id.signin);
signup = (Button) findViewById(R.id.signup);
signin.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this,"Sign In Button Clicked",Toast.LENGTH_LONG).show();
}
});
signup.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view) {
Intent i = new Intent(MainActivity.this,SignUpActivity.class);
startActivity(i);
}
});
}
}
view rawMainActivity.java hosted with ❤ by GitHub

8. Now create a new activity right click on your package name and click new and click activity and chose empty activity and name it as SignUpActivity.


9. Now open your activity_main.xml file and past all of the code from bellow for the SignUp Activity.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background"
tools:context="com.monstertechno.loginuidesign2.SignUpActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="@drawable/background"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign Up"
android:textStyle="bold"
android:textColor="#ffff"
android:textSize="20sp"
android:textAlignment="center"
/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:orientation="vertical"
android:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="20dp"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:gravity="center"
android:background="@drawable/layout_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="410dp"
android:orientation="vertical"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_perm_identity_black_24dp"
android:layout_marginEnd="20dp"
android:id="@+id/name"
android:layout_marginStart="20dp"
android:textSize="14sp"
android:drawablePadding="10dp"
android:hint="NAME"
android:padding="20dp"
android:textColorHint="#606060"
android:inputType="textPersonName"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="10dp"
android:id="@+id/email"
android:drawableLeft="@drawable/ic_mail_outline_black_24dp"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:hint="EMAIL/MOBILE"
android:padding="20dp"
android:textSize="14sp"
android:textColorHint="#606060"
android:inputType="text"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
android:layout_marginEnd="20dp"
android:id="@+id/password"
android:layout_marginStart="20dp"
android:textSize="14sp"
android:drawablePadding="10dp"
android:hint="PASSWORD"
android:padding="20dp"
android:textColorHint="#606060"
android:inputType="textPassword"/>
<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Agree to Out Terms &amp; Conditions"
android:id="@+id/checkbox"
android:layout_marginTop="20dp"
android:layout_marginLeft="30dp" />
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_marginTop="45dp"
android:layout_marginEnd="25dp"
android:id="@+id/signup"
android:src="@drawable/ic_arrow_forward_black_24dp"
android:background="@drawable/button_background"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Already have an Account"
android:textAlignment="center"
android:textColor="@android:color/black"
android:textStyle="bold" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="10dp"
android:id="@+id/signin"
android:background="@drawable/button_background"
android:text="SIGN IN"
android:textColor="@android:color/white" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
view rawsignup_activity.xml hosted with ❤ by GitHub


10. Now open you MainActivity.java file and past all the java code from bellow for SignUp Activity to work.

package com.monstertechno.loginuidesign2;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Toast;
public class SignUpActivity extends AppCompatActivity{
Toolbar toolbar;
EditText email,password,name;
CheckBox checkBox;
ImageButton signup;
Button signin;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sign_up);
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_black_24dp);
email = (EditText)findViewById(R.id.email);
password = (EditText)findViewById(R.id.password);
name = (EditText)findViewById(R.id.name);
checkBox = (CheckBox)findViewById(R.id.checkbox);
signup =(ImageButton)findViewById(R.id.signup);
signin = (Button) findViewById(R.id.signin);
signup.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view) {
Toast.makeText(SignUpActivity.this,"Sign Up Button Clicked",Toast.LENGTH_LONG).show();
}
});
signin.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view) {
Intent i = new Intent(SignUpActivity.this,MainActivity.class);
startActivity(i);
}
});
}
}

ليست هناك تعليقات:

إرسال تعليق

اعلان