Tuesday, October 29, 2019

CardView in android

Cardview is another material added for designing a layout.It resprents your designin a card manner with the corner radius and  drop elevation (shadow).

Steps to Add CardView in your android studio:

1. Adding Design Dependency

       Build Gradle (Module:App)


dependencies {

implementation 'com.android.support:design:28.0.0'

}


2. Add the <android.support.v7.widget.CardView> widget to your layout and place UI widgets like TextViews, ImageViews inside it.


activity_main.xml

<android.support.constraint.ConstraintLayout
 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/login_back"  
  tools:context=".LoginActivity">

    <android.support.v7.widget.CardView   
     android:layout_width="match_parent"   
     android:layout_height="wrap_content"    
    android:layout_margin="20dp"      
  android:background="@drawable/ic_cardview_corner"  
      app:cardCornerRadius="15dp"      
  app:cardElevation="20dp"     
   app:layout_constraintBottom_toBottomOf="parent"   
     app:layout_constraintLeft_toLeftOf="parent"     
   app:layout_constraintRight_toRightOf="parent"    
    app:layout_constraintTop_toTopOf="parent">


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


 <android.support.design.widget.TextInputLayout     
           android:id="@+id/text_Username"       
         android:layout_width="match_parent"          
      android:layout_height="wrap_content">


                <EditText     
               android:id="@+id/username_l"  
                  android:layout_width="match_parent"    
                android:layout_height="wrap_content"     
               android:hint="Username"                
    android:textColorHint="#fff" />

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout      
          android:id="@+id/text_password"             
   android:layout_width="match_parent"              
  android:layout_height="wrap_content">


                <EditText                  
      android:id="@+id/password_l"              
      android:layout_width="match_parent"             
      android:layout_height="wrap_content"              
      android:hint="Password"                  
      android:textColorHint="#fff" />
            </android.support.design.widget.TextInputLayout>

            <Button                
   android:id="@+id/login"             
   android:layout_width="match_parent"         
   android:layout_height="wrap_content"
    android:text="Login" />

            <Button        
        android:id="@+id/newuser"    
        android:layout_width="match_parent"   
       android:layout_height="wrap_content"         
       android:text="Create New User" />

        </LinearLayout>
    </android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>








3.Adding Boundary line to the CardView                                                                                             


Drawable                                                                                                                                

ic_caredview_boundary.xml                                                                                                                     

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke    
    android:width="2dp"
    android:color="#fff">
</stroke>

</shape>                                                                                                                           






No comments:

Alert Dialog Box

Alert Dialog Box Android AlertDialog   can be used to display the dialog message with OK and Cancel buttons. It can be used to inter...