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
3. Download this Image file and past it in your project drawable folder.
4. Add the below resources to drawable folder background.xml, button_background.xml, layout_background.xml
background.xml
button_background.xml
layout_background.xml
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.
7. Now open you MainActivity.java file and past all the java code from bellow for LogIn Activity to work.
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.
4. Add the below resources to drawable folder background.xml, button_background.xml, layout_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> |
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> |
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); | |
} | |
}); | |
} | |
} |
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 & 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> |
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); | |
} | |
}); | |
} | |
} |
ليست هناك تعليقات:
إرسال تعليق