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  

How to build an Android based phone gap application which supports all android Version?

As all we know, the very  first purpose of development of a phone gap based application is to support as much as platforms possible using a single code base. Though phone gap uses simple HTML, javascript and CSS, but Is it still enough to build an application which supports all android platforms. If you are using a phone KITKAT or LOLLYPOP based android phones for development, suddenly you will realize that your application  is not Jellybean and lower version. All Lists and buttons etc etc have gone Hayward. So How to correct this problem? Phone Gap has solve this problem in their very recent release using some crosswalk plugin.  Makes your Cordova application use the  Crosswalk WebView   instead of the System WebView. Requires cordova-android 4.0 or greater. Benefits WebView doesn't change depending on Android version Capabilities: such as WebRTC, WebAudio, Web Components Performance improvements (compared to older system webviews) Dr...