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

Android Studio ADB is not responding manually kill adb Server

I was using Ubuntu 14.04. After installing Android Studio, I started getting this error. After all possible updates it still din't work. I had become crazy in solving this issue.                             After executing this command this error got resolved. First Command : adb apt-get install lib32stdc++6  Second Command : sudo apt-get install lib32z1 For other Adb related issue  

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