Skip to content

Instantly share code, notes, and snippets.

@haerulmuttaqin

haerulmuttaqin/activity_detail.xml

Created September 11, 2018 12:01
Show Gist options
  • Save haerulmuttaqin/787c4119bdd86219d58da8fbcb2f5702 to your computer and use it in GitHub Desktop.
Save haerulmuttaqin/787c4119bdd86219d58da8fbcb2f5702 to your computer and use it in GitHub Desktop.
Download ZIP
News App - activity detail news (layout file)
Raw
activity_detail.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="@color/colorBackground"
tools:context=".NewsDetailActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:theme="@style/MyAppBarLayoutTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
app:titleEnabled="false"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:transitionName="img"
tools:ignore="UnusedAttribute" />
<RelativeLayout
android:id="@+id/headerContent"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:src="@drawable/top_shadow"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="70dp" />
<ImageView
android:layout_alignParentBottom="true"
android:src="@drawable/bottom_shadow"
android:id="@+id/img2"
android:layout_alignBottom="@id/img"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="80dp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:id="@+id/title_appbar"
android:clickable="false"
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title_on_appbar"
style="@style/Base.TextAppearance.AppCompat.Widget.ActionBar.Title"
android:text="News for you"
android:textSize="18dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:drawablePadding="10dp"
android:singleLine="true"
android:ellipsize="end"/>
<TextView
android:id="@+id/subtitle_on_appbar"
style="@style/Base.TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
android:text="Subtitle"
android:textSize="12dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:drawablePadding="10dp"
android:singleLine="true"
android:ellipsize="end"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:background="@color/colorBackground"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
app:cardCornerRadius="0dp"
app:cardElevation="@dimen/cardview_default_elevation"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title"
android:textColor="@color/colorTextTitle"
android:textStyle="bold"
android:fontFamily="sans-serif-light"
android:textSize="19sp"
android:text="Title of News"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_below="@id/title"
android:layout_marginTop="10dp"
android:maxLines="1"
android:drawablePadding="10dp"
android:singleLine="true"
android:ellipsize="end"
android:text="a time ago" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_marginTop="12dp"
android:layout_marginBottom="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="@dimen/cardview_default_elevation"
app:cardCornerRadius="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/progress_bar"
android:layout_marginTop="50dp"
android:layout_marginBottom="70dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<WebView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<FrameLayout
android:id="@+id/date_behavior"
app:layout_anchor="@+id/appbar"
app:behavior_autoHide="true"
android:adjustViewBounds="true"
app:layout_anchorGravity="right|end|bottom"
android:clickable="false"
android:layout_below="@id/img"
android:background="@drawable/round_white"
android:layout_width="wrap_content"
android:padding="5dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:layout_marginBottom="410dp"
android:layout_height="wrap_content"
tools:ignore="UnusedAttribute">
<ImageView
android:src="@drawable/ic_date"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"/>
<TextView
android:textColor="#606060"
android:id="@+id/date"
android:layout_marginLeft="27dp"
android:layout_marginRight="10dp"
android:text="01 January 1990"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
@andre-mz
Copy link

thanks :)

@master6681
Copy link

master6681 commented May 31, 2020 •
edited
Loading

For androidx

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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:fitsSystemWindows="true">


    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true"
        android:theme="@style/MyAppBarLayoutTheme">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            app:titleEnabled="false"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:transitionName="img"
                tools:ignore="UnusedAttribute" />

            <RelativeLayout
                android:id="@+id/headerContent"
                app:layout_collapseMode="pin"
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/img"
                    android:src="@drawable/top_shadow"
                    android:scaleType="centerCrop"
                    android:layout_width="match_parent"
                    android:layout_height="70dp" />

                <ImageView
                    android:layout_alignParentBottom="true"
                    android:src="@drawable/bottom_shadow"
                    android:id="@+id/img2"
                    android:layout_alignBottom="@id/img"
                    android:scaleType="centerCrop"
                    android:layout_width="match_parent"
                    android:layout_height="80dp" />

            </RelativeLayout>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:contentInsetStart="0dp"
                android:contentInsetLeft="0dp"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <LinearLayout
                    android:id="@+id/title_appbar"
                    android:clickable="false"
                    android:layout_width="wrap_content"
                    android:orientation="vertical"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/title_on_appbar"
                        style="@style/Base.TextAppearance.AppCompat.Widget.ActionBar.Title"
                        android:text="News for you"
                        android:textSize="18dp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxLines="1"
                        android:drawablePadding="10dp"
                        android:singleLine="true"
                        android:ellipsize="end"/>

                    <TextView
                        android:id="@+id/subtitle_on_appbar"
                        style="@style/Base.TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                        android:text="Subtitle"
                        android:textSize="12dp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxLines="1"
                        android:drawablePadding="10dp"
                        android:singleLine="true"
                        android:ellipsize="end"/>

                </LinearLayout>

            </androidx.appcompat.widget.Toolbar>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:background="@color/colorBackground"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.cardview.widget.CardView
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:layout_width="match_parent"
                app:cardCornerRadius="0dp"
                app:cardElevation="@dimen/cardview_default_elevation"
                android:layout_height="wrap_content">
                <RelativeLayout
                    android:layout_marginBottom="20dp"
                    android:layout_marginTop="20dp"
                    android:paddingLeft="16dp"
                    android:paddingRight="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:id="@+id/title"
                        android:textColor="@color/colorTextTitle"
                        android:textStyle="bold"
                        android:fontFamily="sans-serif-light"
                        android:textSize="19sp"
                        android:text="Title of News"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        />

                    <TextView
                        android:id="@+id/time"
                        android:layout_width="wrap_content"
                        android:layout_height="20dp"
                        android:layout_below="@id/title"
                        android:layout_marginTop="10dp"
                        android:maxLines="1"
                        android:drawablePadding="10dp"
                        android:singleLine="true"
                        android:ellipsize="end"
                        android:text="a time ago" />

                </RelativeLayout>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:layout_marginTop="12dp"
                android:layout_marginBottom="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardElevation="@dimen/cardview_default_elevation"
                app:cardCornerRadius="0dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ProgressBar
                        app:layout_behavior="@string/appbar_scrolling_view_behavior"
                        android:id="@+id/progress_bar"
                        android:layout_marginTop="50dp"
                        android:layout_marginBottom="70dp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />

                    <WebView
                        app:layout_behavior="@string/appbar_scrolling_view_behavior"
                        android:id="@+id/webView"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"/>


                </RelativeLayout>

            </androidx.cardview.widget.CardView>

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

    <FrameLayout
        android:id="@+id/date_behavior"
        app:layout_anchor="@+id/appbar"
        app:behavior_autoHide="true"
        android:adjustViewBounds="true"
        app:layout_anchorGravity="right|end|bottom"
        android:clickable="false"
        android:layout_below="@id/img"
        android:background="@drawable/round_white"
        android:layout_width="wrap_content"
        android:padding="5dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="410dp"
        android:layout_height="wrap_content"
        tools:ignore="UnusedAttribute">
        <ImageView
            android:src="@drawable/ic_date"
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>
        <TextView
            android:textColor="#606060"
            android:id="@+id/date"
            android:layout_marginLeft="27dp"
            android:layout_marginRight="10dp"
            android:text="01 January 1990"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

@vvvvvvvvvvvvvvvvvvvvvvvvv
Copy link

Very nested code!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment