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  

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