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 & 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>