Android Create Login Card Light
1. Project Structure
2. Gradle
plugins { id 'com.android.application' } android { compileSdkVersion 30 buildToolsVersion "30.0.3" defaultConfig { applicationId "com.login.light" minSdkVersion 19 targetSdkVersion 30 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { implementation 'com.balysv:material-ripple:1.0.2' implementation 'androidx.appcompat:appcompat:1.3.0' implementation 'com.google.android.material:material:1.4.0' implementation 'androidx.constraintlayout:constraintlayout:2.0.4' implementation 'com.crystal:crystalrangeseekbar:1.1.3' testImplementation 'junit:junit:4.+' androidTestImplementation 'androidx.test.ext:junit:1.1.3' androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0' }
3. Main Activity
package com.login.light; import android.os.Bundle; import com.google.android.material.snackbar.Snackbar; import androidx.appcompat.app.AppCompatActivity; import android.view.View; import com.login.light.utils.Tools; public class MainActivity extends AppCompatActivity { private View parent_view; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login_card_light); parent_view = findViewById(android.R.id.content); Tools.setSystemBarColor(this, R.color.grey_5); Tools.setSystemBarLight(this); ((View) findViewById(R.id.forgot_password)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(parent_view, "Forgot Password", Snackbar.LENGTH_SHORT).show(); } }); } }
4. Layout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/grey_5" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" android:padding="@dimen/spacing_smlarge"> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_xlarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_middle" android:layout_marginLeft="@dimen/spacing_medium" android:layout_marginStart="@dimen/spacing_medium" android:text="Sign In" android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" android:textColor="@color/blue_600" android:textStyle="bold" /> <View android:layout_width="40dp" android:layout_height="4dp" android:layout_marginLeft="@dimen/spacing_medium" android:layout_marginStart="@dimen/spacing_medium" android:background="@color/blue_600" /> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_mxlarge" /> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_small" android:visibility="visible" app:cardCornerRadius="2dp" app:cardElevation="1dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/spacing_mlarge"> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_xlarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="USERNAME" android:textAlignment="center" android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption" android:textColor="@color/grey_40" /> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="-4dp" android:layout_marginRight="-4dp" android:inputType="text" android:maxLength="50" android:maxLines="1" android:singleLine="true" android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" android:textColor="@color/blue_600" android:textStyle="bold" android:theme="@style/EditText.Grey" /> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_mlarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="PASSWORD" android:textAlignment="center" android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption" android:textColor="@color/grey_40" /> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="-4dp" android:layout_marginRight="-4dp" android:inputType="textPassword" android:maxLength="50" android:maxLines="1" android:singleLine="true" android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" android:textColor="@color/blue_600" android:textStyle="bold" android:theme="@style/EditText.Grey" /> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_middle" /> <androidx.appcompat.widget.AppCompatCheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="-4dp" android:layout_marginRight="-4dp" android:layout_marginTop="@dimen/spacing_middle" android:text="Keep me Signed in" android:textColor="@color/blue_600" android:textStyle="bold" android:theme="@style/Checkbox.Blue" /> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_middle" /> <TextView android:id="@+id/forgot_password" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|end" android:layout_marginTop="@dimen/spacing_medium" android:clickable="true" android:text="Forgot Password ?" android:textAlignment="center" android:textAppearance="@style/Base.TextAppearance.AppCompat.Small" android:textColor="@color/grey_20" android:textStyle="bold" /> </LinearLayout> </androidx.cardview.widget.CardView> <View android:layout_width="0dp" android:layout_height="@dimen/spacing_large" /> </LinearLayout> </RelativeLayout> <com.balysv.materialripple.MaterialRippleLayout style="@style/RippleStyleWhite" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" android:layout_alignParentBottom="true" android:background="@color/blue_600"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="SIGN IN" android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead" android:textColor="@android:color/white" /> </com.balysv.materialripple.MaterialRippleLayout> </LinearLayout>
5. Value
<?xml version="1.0" encoding="utf-8"?> <resources xmlns:ns1="urn:oasis:names:tc:xliff:document:1.2"> <style name="Base.TextAppearance.AppCompat.Large"> <item name="android:textSize">@dimen/abc_text_size_large_material</item> <item name="android:textColor">?android:attr/textColorPrimary</item> </style> <style name="Base.TextAppearance.AppCompat.Caption"> <item name="android:textSize">@dimen/abc_text_size_caption_material</item> <item name="android:textColor">?android:textColorSecondary</item> </style> <style name="Base.TextAppearance.AppCompat.Large"> <item name="android:textSize">@dimen/abc_text_size_large_material</item> <item name="android:textColor">?android:attr/textColorPrimary</item> </style> <style name="Base.TextAppearance.AppCompat.Small"> <item name="android:textSize">@dimen/abc_text_size_small_material</item> <item name="android:textColor">?android:attr/textColorTertiary</item> </style> <style name="EditText.Grey" parent="@style/AppTheme"> <item name="colorControlActivated">@color/grey_60</item> <item name="colorControlHighlight">@color/grey_60</item> <item name="colorControlNormal">@color/grey_40</item> </style> <style name="Checkbox.Blue" parent="@style/AppTheme"> <item name="colorPrimary">@color/blue_600</item> <item name="colorAccent">@color/blue_600</item> <item name="colorControlActivated">@color/blue_600</item> <item name="colorControlHighlight">@color/blue_600</item> <item name="colorControlNormal">@color/grey_40</item> </style> <style name="Base.TextAppearance.AppCompat.Subhead"> <item name="android:textSize">@dimen/abc_text_size_subhead_material</item> <item name="android:textColor">?android:textColorPrimary</item> </style> <color name="blue_600">#1E88E5</color> <color name="grey_20">#cccccc</color> <color name="grey_40">#999999</color> </resources>