Fy Projects

DOWNLOAD APK DOWNLOAD RES FOLDER DOWNLOAD PROJECT

1. Project Structure

2. Gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "card.androidtutorials.fyprojects.overlap"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.mikhaellopez:circularimageview:3.2.0'
}

3. MainActivity

package card.androidtutorials.fyprojects.overlap.activity;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import card.androidtutorials.fyprojects.overlap.utils.Tools;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initToolbar();
    }

    private void initToolbar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_menu);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle(null);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_basic, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
        } else {
            Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
        }
        return super.onOptionsItemSelected(item);
    }
}

4. Utils

Tools

package card.androidtutorials.fyprojects.overlap.utils;

import android.app.Activity;
import android.os.Build;
import android.view.Window;
import android.view.WindowManager;

import card.androidtutorials.fyprojects.overlap.activity.R;

public class Tools {

    public static void setSystemBarColor(Activity act) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = act.getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.setStatusBarColor(act.getResources().getColor(R.color.colorPrimaryDark));
        }
    }
}

5. Layout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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_10"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            app:titleEnabled="false">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/image_8"
                app:layout_collapseMode="parallax" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/overlay_dark_40" />

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:contentInsetStartWithNavigation="0dp"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            </FrameLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:tint="@android:color/white"
                    app:srcCompat="@drawable/img_wizard_1" />

                <View
                    android:layout_width="@dimen/spacing_middle"
                    android:layout_height="0dp" />

                <TextView
                    android:id="@+id/textView9"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Nature Park"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Title"
                    android:textColor="@android:color/white" />

            </LinearLayout>

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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nested_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="-35dp"
        android:clipToPadding="false"
        android:scrollbars="none"
        android:scrollingCache="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/spacing_large"
                android:layout_marginRight="@dimen/spacing_large"
                android:background="@android:color/white"
                app:cardCornerRadius="2dp"
                app:cardElevation="2dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingBottom="@dimen/spacing_large"
                    android:paddingLeft="@dimen/spacing_large"
                    android:paddingRight="@dimen/spacing_large">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:gravity="center_vertical"
                        android:text="Facilities"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title"
                        android:textColor="@color/grey_80" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="@dimen/spacing_xmlarge"
                        android:orientation="horizontal">

                        <ImageButton
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/spacing_xmlarge"
                            android:background="@android:color/transparent"
                            android:tint="@color/grey_40"
                            app:srcCompat="@drawable/ic_local_cafe" />

                        <View
                            android:layout_width="@dimen/spacing_middle"
                            android:layout_height="0dp" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:minHeight="@dimen/spacing_xmlarge"
                            android:text="Food &amp; Cafe"
                            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                            android:textColor="@color/grey_40" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="@dimen/spacing_xmlarge"
                        android:orientation="horizontal">

                        <ImageButton
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/spacing_xmlarge"
                            android:background="@android:color/transparent"
                            android:tint="@color/grey_40"
                            app:srcCompat="@drawable/ic_local_florist" />

                        <View
                            android:layout_width="@dimen/spacing_middle"
                            android:layout_height="0dp" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:minHeight="@dimen/spacing_xmlarge"
                            android:text="Fresh Air"
                            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                            android:textColor="@color/grey_40" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="@dimen/spacing_xmlarge"
                        android:orientation="horizontal">

                        <ImageButton
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/spacing_xmlarge"
                            android:background="@android:color/transparent"
                            android:tint="@color/grey_40"
                            app:srcCompat="@drawable/ic_airport_shuttle" />

                        <View
                            android:layout_width="@dimen/spacing_middle"
                            android:layout_height="0dp" />

                        <TextView
                            android:id="@+id/textView10"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:minHeight="@dimen/spacing_xmlarge"
                            android:text="Parking Area"
                            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                            android:textColor="@color/grey_40" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="@dimen/spacing_xmlarge"
                        android:orientation="horizontal">

                        <ImageButton
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/spacing_xmlarge"
                            android:background="@android:color/transparent"
                            android:tint="@color/grey_40"
                            app:srcCompat="@drawable/ic_beach_access" />

                        <View
                            android:layout_width="@dimen/spacing_middle"
                            android:layout_height="0dp" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:minHeight="@dimen/spacing_xmlarge"
                            android:text="Cozy Canopy"
                            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                            android:textColor="@color/grey_40" />

                    </LinearLayout>


                </LinearLayout>

            </android.support.v7.widget.CardView>

            <View
                android:layout_width="match_parent"
                android:layout_height="@dimen/spacing_large" />

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/spacing_large"
                android:layout_marginRight="@dimen/spacing_large"
                android:background="@android:color/white"
                app:cardCornerRadius="2dp"
                app:cardElevation="2dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingBottom="@dimen/spacing_large"
                    android:paddingLeft="@dimen/spacing_large"
                    android:paddingRight="@dimen/spacing_large">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:gravity="center_vertical"
                        android:text="Address"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title"
                        android:textColor="@color/grey_80" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:text="14321 Saddle Wood Dr, North Little Rock \nAR, 72117"
                        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                        android:textColor="@color/grey_40" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <View
                android:layout_width="match_parent"
                android:layout_height="@dimen/spacing_large" />

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/spacing_large"
                android:layout_marginRight="@dimen/spacing_large"
                android:background="@android:color/white"
                app:cardCornerRadius="2dp"
                app:cardElevation="2dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingBottom="@dimen/spacing_large"
                    android:paddingLeft="@dimen/spacing_large"
                    android:paddingRight="@dimen/spacing_large">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:gravity="center_vertical"
                        android:text="Description"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title"
                        android:textColor="@color/grey_80" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:text="@string/long_lorem_ipsum"
                        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                        android:textColor="@color/grey_40" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <View
                android:layout_width="match_parent"
                android:layout_height="@dimen/spacing_large" />

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

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

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:contentInsetStartWithNavigation="0dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

6.Menu

menu_basic.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:orderInCategory="100"
        android:title="Search"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="Settings"
        app:showAsAction="never" />
</menu>

7.Values

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#1976D2</color>
    <color name="colorPrimaryDark">#1565C0</color>
    <color name="colorPrimaryLight">#1E88E5</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorAccentDark">#F50057</color>
    <color name="colorAccentLight">#FF80AB</color>

    <color name="grey_3">#f7f7f7</color>
    <color name="grey_5">#f2f2f2</color>
    <color name="grey_10">#e6e6e6</color>
    <color name="grey_20">#cccccc</color>
    <color name="grey_40">#999999</color>
    <color name="grey_60">#666666</color>
    <color name="grey_80">#37474F</color>
    <color name="grey_90">#263238</color>
    <color name="grey_95">#1a1a1a</color>
    <color name="grey_100_">#0d0d0d</color>

    <color name="blue_50">#E3F2FD</color>
    <color name="blue_100">#BBDEFB</color>
    <color name="blue_200">#90CAF9</color>
    <color name="blue_300">#64B5F6</color>
    <color name="blue_400">#42A5F5</color>
    <color name="blue_500">#2196F3</color>
    <color name="blue_600">#1E88E5</color>
    <color name="blue_700">#1976D2</color>
    <color name="blue_800">#1565C0</color>
    <color name="blue_900">#0D47A1</color>
    <color name="blue_A100">#82B1FF</color>
    <color name="blue_A200">#448AFF</color>
    <color name="blue_A400">#2979FF</color>
    <color name="blue_A700">#2962FF</color>

    <color name="deep_orange_50">#FBE9E7</color>
    <color name="deep_orange_100">#FFCCBC</color>
    <color name="deep_orange_200">#FFAB91</color>
    <color name="deep_orange_300">#FF8A65</color>
    <color name="deep_orange_400">#FF7043</color>
    <color name="deep_orange_500">#FF5722</color>
    <color name="deep_orange_600">#F4511E</color>
    <color name="deep_orange_700">#E64A19</color>
    <color name="deep_orange_800">#D84315</color>
    <color name="deep_orange_900">#BF360C</color>
    <color name="deep_orange_A100">#FF9E80</color>
    <color name="deep_orange_A200">#FF6E40</color>
    <color name="deep_orange_A400">#FF3D00</color>
    <color name="deep_orange_A700">#DD2C00</color>

    <color name="teal_50">#E0F2F1</color>
    <color name="teal_100">#B2DFDB</color>
    <color name="teal_200">#80CBC4</color>
    <color name="teal_300">#4DB6AC</color>
    <color name="teal_400">#26A69A</color>
    <color name="teal_500">#009688</color>
    <color name="teal_600">#00897B</color>
    <color name="teal_700">#00796B</color>
    <color name="teal_800">#00695C</color>
    <color name="teal_900">#004D40</color>
    <color name="teal_A100">#A7FFEB</color>
    <color name="teal_A200">#64FFDA</color>
    <color name="teal_A400">#1DE9B6</color>
    <color name="teal_A700">#00BFA5</color>


    <color name="overlay_dark_10">#1A000000</color>
    <color name="overlay_dark_20">#33000000</color>
    <color name="overlay_dark_30">#4D000000</color>
    <color name="overlay_dark_40">#66000000</color>
    <color name="overlay_dark_50">#80000000</color>
    <color name="overlay_dark_60">#99000000</color>
    <color name="overlay_dark_70">#B3000000</color>
    <color name="overlay_dark_80">#CC000000</color>
    <color name="overlay_dark_90">#E6000000</color>

</resources>

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="actionBarSize">56dp</dimen>

    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="nav_header_vertical_spacing">16dp</dimen>
    <dimen name="nav_header_height">200dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="viewpager_margin_overlap">-60dp</dimen>
    <dimen name="viewpager_margin_overlap_payment">-30dp</dimen>

    <!--genaral spacing-->
    <dimen name="spacing_xsmall">2dp</dimen>
    <dimen name="spacing_small">3dp</dimen>
    <dimen name="spacing_medium">5dp</dimen>
    <dimen name="spacing_xmedium">7dp</dimen>
    <dimen name="spacing_middle">10dp</dimen>
    <dimen name="spacing_large">15dp</dimen>
    <dimen name="spacing_smlarge">18dp</dimen>
    <dimen name="spacing_mlarge">20dp</dimen>
    <dimen name="spacing_mxlarge">25dp</dimen>
    <dimen name="spacing_xlarge">35dp</dimen>
    <dimen name="spacing_xmlarge">40dp</dimen>
    <dimen name="spacing_xxlarge">50dp</dimen>
    <dimen name="spacing_xxxlarge">55dp</dimen>
    <dimen name="appbar_padding_top">8dp</dimen>

</resources>

strings-data.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="long_lorem_ipsum">
        Duis tellus metus, elementum a lectus id, aliquet interdum mauris. Nam bibendum efficitur sollicitudin. Proin eleifend libero velit, nec fringilla dolor finibus quis. nMorbi eu libero pellentesque, rutrum metus quis, blandit est. Fusce bibendum accumsan nisi vulputate feugiat. In fermentum laoreet euismod. Praesent sem nisl, facilisis eget odio at, rhoncus scelerisque ipsum. Nulla orci dui, dignissim a risus ut, lobortis porttitor velit.
        \n\nNulla id lectus metus. Maecenas a lorem in odio auctor facilisis non vitae nunc. Sed malesuada volutpat massa. Praesent sit amet lacinia augue, mollis tempor dolor.
    </string>
</resources>

strings.xml

<resources>
    <string name="app_name">Card Overlap</string>
</resources>

styles.xml

<resources>
    <style name="AppTheme" parent="BaseTheme" />
    <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionModeOverlay">true</item>
    </style>

    <style name="Button.Accent.Borderless" parent="@style/Widget.AppCompat.Button.Borderless.Colored">
        <item name="android:textColor">@color/colorAccent</item>
    </style>

    <style name="Button.Accent.Borderless.WhiteText" parent="@style/Widget.AppCompat.Button.Borderless.Colored">
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

M Syahrul Alfyan

Hi there! I am Founder at fyprojects and programming enthusiast from Indonesia. Fullstack Developer at startup company

Android How To Create Card Overlap

1. Project Structure

2. Gradle

4. Utils

5. Layout

6.Menu

7.Values

M Syahrul Alfyan

Random Post

Featured Posts

Most Read

Catagories