Online Tutorials & Training Materials | STechies.com
Register Login
Advertisement

CardView Example in Android Studio

|| 0

CardView Example in Android Studio
Stechies

How to Create CardView Layout in Android Studio?

This tutorial explains step by step how to create CardView layout example via Android Studio.

Please follow the steps below in order create CardView layout in Android Studio without Programming:

1.Go to the design tab. Remove the “Hello world” text from the screen.

2.Go to the text tab and change the relative layout to scroll view.

3.Go to the design tab. Select Linear layout (vertical) and drag it to the window.

4.Go to the text tab. Go to Gradle scripts > Build.Gradle (Module app).

5.Add a compile line.

"compile 'com.android.support:cardview-v7:24.2.2'."

And then click on Sync now.

6.Go to activity.xml and  Add a CardView.

7.Add relative layout and match parent.

8.Add a textView.

android: text="something"

9.Go to design tab. You can now view the CardView.

10.Next add an ImageView from the text tab.

11.You can now notice the image in the widget.

Adding multiple CardViews

12.Copy and paste the cardview as many times as you want it. Check the image on the left hand side.

Adding OnClickListener

13.Go to text tab. Select the first cardView.

14.Add an id for it. Do the same for the other cardviews.

15.Click on MainActivity.java. Type CardView cd1, cd2, cd3.

16.Mention the CardViews.

17.Next add the OnClickListener for the cardviews.

18.Check the live view window. The listener will shows which card view you selected.


Complete Code of CardView Example in Android Studio

app>GradleScript>build.gradle(Module:app)

apply plugin : 'com.android.application'
android 
{ 
    compileSdkVersion 26 defaultConfig 
    { 
        applicationId "example.mehakmeet.geeksforgeeks"
        minSdkVersion 19
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
    } 
    buildTypes 
    { 
        release 
        { 
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        } 
    } 
} 
dependencies 
{ 
    compile fileTree(dir: 'lib',include: [*.jar])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2',{
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:cardview-v7:24.2.1'
    testCompile 'junit:junit:4.12'
} 

app>java>com.sabithpcmnr.cardviewsample>MainActivity.java

package com.sabithpcmnr.cardviewsample;
import ...
public class MainActivity extends AppCompatActivity {   
    CardView cd1, cd2, cd3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        cd1 = (CardView) findViewById(R.id.cd_1);
        cd2 = (CardView) findViewById(R.id.cd_2);
        cd3 = (CardView) findViewById(R.id.cd_3);
        cd1.setOnClickListener(new View.OnCLickListener () {
            @Override
            public void onClick(View v){
                Toast.makeText(getApplicationContext(),"You Clicked Card 1", Toast.LENGTH_LONG).show()''
            }
        });
        cd2.setOnClickListener(new View.OnCLickListener () {
            @Override
            public void onClick(View v){
                Toast.makeText(getApplicationContext(),"You Clicked Card 2", Toast.LENGTH_LONG).show()''
            }
        });
        cd3.setOnClickListener(new View.OnCLickListener () {
            @Override
            public void onClick(View v){
                Toast.makeText(getApplicationContext(),"You Clicked Card 3", Toast.LENGTH_LONG).show()''
            }
        });
    }
}

app>res>layout>activity_main.xml

<?xml version="1.0" encoding="utf-8" ?>
<ScrollViewLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    android:paddingBottom="16dp"
    android:background = "@color/colorPrimary"
    tools:context="com.sabitpkcmnr.cardviewsample.MainActivity">
   
 <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:id="@+id/cd_1"
        android:layout_height="match_parent">
        
        <android.support.v7.widget.CardView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView 
                    android:layout_width="match_parent"
                    android:text="something"
                    android:layout_height="match_parent"/>

                <ImageView 
                    android:layout_width="wrap_content"
                    android:src="@mipmap/ic_launcher"
                    android:layout_height="wrap_content" 
                    android:id="@+id/ImageView"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />
            </RelativeLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:id="@+id/cd_2"
            android:layout_height="match_parent">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView 
                    android:layout_width="match_parent"
                    android:text="something"
                    android:layout_height="match_parent"/>

                <ImageView 
                    android:layout_width="wrap_content"
                    android:src="@mipmap/ic_launcher"
                    android:layout_height="wrap_content" 
                    android:id="@+id/ImagdeView"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />
            </RelativeLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:id="@+id/cd_3"
            android:layout_height="match_parent">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView 
                    android:layout_width="match_parent"
                    android:text="something"
                    android:layout_height="match_parent"/>

                <ImageView 
                    android:layout_width="wrap_content"
                    android:src="@mipmap/ic_launcher"
                    android:layout_height="wrap_content" 
                    android:id="@+id/IfmageView"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />
            </RelativeLayout>
            </android.support.v7.widget.CardView>
    </LinearLayout>   
</ScrollViewLayout>

 


Advertisement
Advertisement
Advertisement