Skip to main content

Design Android Tool bar with constraint layout

 Toolbar in Android plays a very important role in quick page movement. 

Steps to implement toolbar in Android


1. Create a layout file toolbar.xml in res/layout directory

2. add below code into your toolbar.xml file.

3. Customize this as per your requirement

<?xml version="1.0" encoding="utf-8"?><layout 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">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:elevation="0dp"
        app:layout_collapseMode="pin">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/toolbar_user_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="@dimen/margin_large"
android:src="@drawable/round_person_pin_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/toolbar_app_logo"
android:layout_width="@dimen/margin_very_large"
android:layout_height="@dimen/margin_very_large"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/toolbar_app_notifications"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/margin_large"
android:src="@drawable/baseline_notifications_black_18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Pool" />

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</layout>

Then include this into your other xml files

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".views.detail.DiscoverMoreFragment">

<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />

<androidx.appcompat.widget.SearchView
android:id="@+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_medium"
android:layout_marginTop="@dimen/margin_medium"
android:layout_marginEnd="@dimen/margin_medium"
android:paddingStart="@dimen/padding_medium"
android:paddingEnd="@dimen/padding_medium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/toolbar" />

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/grid_view_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_large"
android:paddingStart="@dimen/padding_medium"
android:paddingEnd="@dimen/padding_medium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/search_view" />

</androidx.constraintlayout.widget.ConstraintLayout>

Comments

Popular posts from this blog

Building Phone Gap App for Windows Phone 8

Before you start  developing an phone gap based App you need to keep following things in your mind. General Practice: Set any controls height and width always in term of percentage. Same should be applied with Div. Don't use margin at all. Use margin only to give spacing with controls- 5 px - 20 px Design a parent page.Only this page should contain head and body tag. Other layout should only contain div. After that only Remove and Append Div based on the required layout. Use boot strap to provide a web-responsive feature to your application Above practice will help you building a nice android and IOS application. but in-case of windows application same application won't work as it is. Things to take care in Phone Gap based Application. All append function will start throwing security Exceptions Use the following tag around your append code. MSApp.execUnsafeLocalFunction( function () { var body = document.getElementsByTagName( 'body' )[0]; body...

A Complete Nodejs boiler plate - This man need no introduction

Node.js  is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. A highly used solution in current mobile and cloud environment. Node.js allows the creation of  Web servers  and networking tools using  JavaScript  and a collection of "modules" that handle various core functionality. Modules are provided for  file system  I/O, networking ( DNS ,  HTTP ,  TCP ,  TLS/SSL , or  UDP ),  binary  data (buffers),  cryptography  functions,  data streams , and other core functions. Node.js's modules use an API designed to reduce the complexity of writing server applications. Nodejs is a powerful platform. Its being used across multiple applications.  Looking at the usability of Nodejs I have created a nodejs boilter plate for beginners and professionals. You can plugin play your required features. This...