Constraint Layout with Appbar Layout

 A Constraint Layout provide flexible layout design which reduce complexity of application layout design.This allow you to create large numbers of views easily with complex ,dynamic and responsive way.It help to improve the User Interface performance over other layouts. 

with the help of constraintLayout ,we can position our User Interface components in any sort of order whether it may be horizontal or vertical.But in the case of LinearLayout,we can only arrange our User Interface components either in a horizontal or in a vertical manner.

AppBarLayout provide scrolling behaviour which implement many of material design features.If you used AppBarLayout within a different ViewGroup ,most of its functionality will not work.AppBarLayout provide toolbar which have scrolling gestures.

also Read :How to Create ImageButton With same Height and Width in Same Distance in Android

Bellow code describe the AppBarLayout  which manage scrolling of entire view design with CoordinatorLayout:

 <androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id = "@+id/cordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintVertical_weight="80"
        app:layout_constraintBottom_toTopOf="@id/relativeLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/deleteLayout" >
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:background="@color/bannerad_background"
            app:elevation="0dp">
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|enterAlways"
                android:background="@color/bannerad_background">
                <LinearLayout
                    android:id="@+id/titleLayout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="0dp"
                    android:orientation="horizontal"
                    android:background="@color/bannerad_background">

                    <ImageButton
                        android:id="@+id/btnHome"
                        android:layout_width="40dp"
                        android:layout_height="30dp"
                        android:background="@drawable/ic_home"
                        android:layout_marginLeft="0dp"
                        android:layout_marginBottom="0dp"
                        app:layout_constraintWidth_percent="0.5"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/textView"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"/>
                    <TextView
                        android:id="@+id/textView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="Photosview"
                        android:textColor="@color/splash_background_color"
                        android:textSize="20dp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toEndOf="@+id/btnHome"
                        app:layout_constraintTop_toTopOf="parent"/>
                </LinearLayout>
            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.AppBarLayout>
        <androidx.core.widget.NestedScrollView
            android:id="@+id/nestedView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <RelativeLayout
                android:id="@+id/gridLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:isScrollContainer="true"
                app:layout_constraintBottom_toTopOf="@id/relativeLayout"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">
        <GridView
            android:id ="@+id/gridview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:numColumns="2"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="0dp"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:background="@color/bannerad_background"
            android:stretchMode="columnWidth"
            android:clipChildren="false"
            android:clickable="true"
            android:focusable="false"
            android:drawSelectorOnTop="true"
            android:choiceMode="multipleChoice"
            android:gravity="center"
            android:focusableInTouchMode="false"/>
            <TextView
                android:id="@+id/emptyView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_centerInParent="true"/>
        </RelativeLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Here CoordinatorLayout coordinates the animations and transitions of child views with one another.
NestedScrollview handle design bellow scrolling toolbar (bellow AppBarLayout).

With ConstraintLayout we can used AppBarLayout like bellow:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/constraintLayout"
    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="@color/bannerad_background"
    android:orientation="horizontal"
    android:scrollbars="horizontal|vertical"
    tools:context="com.gods.photosview.MainActivity">
    <RelativeLayout
        android:id="@+id/deleteLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="0dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:background="@drawable/border_bottom"
        app:layout_constraintVertical_weight="8"
        app:layout_constraintBottom_toTopOf="@id/cordinatorLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <ImageButton
            android:id="@+id/btnClose"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/ic_close"
            android:layout_marginLeft="20dp"/>
        <TextView
            android:id="@+id/textCount"
            android:layout_width="40dp"
            android:layout_height="30dp"
            android:layout_marginLeft="30dp"
            android:text="0"
            android:textColor="@color/splash_background_color"
            android:gravity="center_horizontal"
            android:textSize="22dp"
            android:textStyle="bold"
            android:layout_toRightOf="@id/btnClose" />
        <ImageButton
            android:id="@+id/btnSelectAll"
            android:layout_width="40dp"
            android:layout_height="30dp"
            android:background="@drawable/ic_selectall"
            android:layout_marginRight="30dp"
            android:layout_toLeftOf="@id/btnDelete"
            />
        <ImageButton
            android:id="@+id/btnDelete"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@drawable/ic_delete"
            android:layout_marginRight="20dp"
            android:layout_alignParentRight="true"
            />
    </RelativeLayout>
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id = "@+id/cordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintVertical_weight="80"
        app:layout_constraintBottom_toTopOf="@id/relativeLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/deleteLayout" >
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:background="@color/bannerad_background"
            app:elevation="0dp">
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|enterAlways"
                android:background="@color/bannerad_background">
                <LinearLayout
                    android:id="@+id/titleLayout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="0dp"
                    android:orientation="horizontal"
                    android:background="@color/bannerad_background">

                    <ImageButton
                        android:id="@+id/btnHome"
                        android:layout_width="40dp"
                        android:layout_height="30dp"
                        android:background="@drawable/ic_home"
                        android:layout_marginLeft="0dp"
                        android:layout_marginBottom="0dp"
                        app:layout_constraintWidth_percent="0.5"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/textView"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"/>
                    <TextView
                        android:id="@+id/textView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="Photosview"
                        android:textColor="@color/splash_background_color"
                        android:textSize="20dp"
                        android:textStyle="bold"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toEndOf="@+id/btnHome"
                        app:layout_constraintTop_toTopOf="parent"/>
                </LinearLayout>
            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.AppBarLayout>
        <androidx.core.widget.NestedScrollView
            android:id="@+id/nestedView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <RelativeLayout
                android:id="@+id/gridLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:isScrollContainer="true"
                app:layout_constraintBottom_toTopOf="@id/relativeLayout"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">
        <GridView
            android:id ="@+id/gridview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:numColumns="2"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="0dp"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:background="@color/bannerad_background"
            android:stretchMode="columnWidth"
            android:clipChildren="false"
            android:clickable="true"
            android:focusable="false"
            android:drawSelectorOnTop="true"
            android:choiceMode="multipleChoice"
            android:gravity="center"
            android:focusableInTouchMode="false"/>
            <TextView
                android:id="@+id/emptyView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_centerInParent="true"/>
        </RelativeLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<RelativeLayout 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:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="@color/bannerad_background"
    android:visibility="gone"
    android:layout_weight="90"
    android:gravity="center"
    app:layout_constrainedHeight="true"
    app:layout_constraintVertical_weight="10"
    tools:context="com.gods.photosview.MainActivity"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/cordinatorLayout">
    <com.google.android.gms.ads.AdView
        android:id="@+id/ad_view"
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:adSize="BANNER"
        app:adUnitId="@string/admob_banner_id"
        />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Output is:




Comments

Post a Comment

Popular posts from this blog

How to Create ImageButton With same Height and Width in Same Distance in Android

Image
In android or in any mobile application ,It is required that layout design of application is  fit in all size of mobile screen.So for that some time we need  calculation.  Here i provide code which not need any calculation. ImageButton  with fix Height and Width. If you don't want the buttons to scale, but adjust the spacing between the buttons (equal spacing between all buttons), you can use views with weight="1" which will fill the space between the buttons:     <LinearLayout android :id ="@+id/linearLayout" android :layout_width ="match_parent" android :layout_height ="50dp" android :orientation ="horizontal" android :background ="@color/splash_background_color" > < Space android :layout_width ="0dp" android :layout_height ="1dp" android :layout_weight ="1" ></ Space > < ImageButton android :id ="...
Read more

Types of layout in Android

Image
There are numer of layouts provide by android,android application developer used different layout to give different look to application. Layout basically refers to the arrangement of elements on a page these elements are likely to be images, texts or styles. These layouts can have various widgets like buttons, labels, textboxes, and many others. Sr.No Description 1 Linear Layout LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. 2 Relative Layout RelativeLayout is a view group that displays child views in relative positions. 3 Absolute Layout AbsoluteLayout enables you to specify the exact location of its children. 4 Table Layout TableLayout is a view that groups views into rows and columns. 5 Frame Layout The FrameLayout is a placeholder on screen that you can use to display a single view. 6 Grid View GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. 7 List View ListView is a view group that display...
Read more