Develop Reference

Layout design over navigation action bar

I am looking for a solution to design an element on the top of the navigation action bar and also a way to increase the size of the action bar. One way I can think of, is to disable the navigation action bar and then design. Is there any way if it's achievable without disabling the action bar?
Here is the design template:
just to be clear i am looking for an idea to design connect tab where one half is on the navigation action bar while other is on scroll view
xml for main
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:background="#696969">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:background="#696969">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="15dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter"
android:layout_marginLeft="20dp"
android:textSize="26sp"
android:textColor="#color/white"
>
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="scan"
android:textSize="26sp"
android:layout_marginLeft="20dp"
android:textColor="#color/white"
>
</Button>
</LinearLayout>
</ScrollView>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
here is xml for toolbar
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/backkground">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:background="#color/black">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:padding="2dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:src="#drawable/ic_baseline_cast_connected_24">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Connected"
android:textSize="44sp">
</TextView>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
I am afraid i can show all the codes as its proprietry but i just wrote some to mitigate my current solution by dividing the background colo.lol.

After hard work of 30min. I got your answer. In your image, Toolbar is already in use with backButton, refreshButton, BluetothButton, and locationButton and they created the Connect button in TabLayout that's why it shows half on TabLayout and half on Blank Spaces.
I created it as shown in the template.
This is my XML layout code.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your ToolBar Code or Other Code-->
<TableLayout
android:id="#+id/myTooBar"
android:layout_width="match_parent"
android:layout_gravity="top"
android:layout_height="?actionBarSize">
<!-- Here is sample textView with color-->
<TextView
android:background="#color/purple_500"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</TableLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
app:cardCornerRadius="15dp"
app:cardElevation="10dp"
app:layout_anchor="#+id/myTooBar"
app:layout_anchorGravity="bottom|center"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:background="#color/white"
android:padding="15dp"
android:gravity="left"
android:text="#string/connect"
android:textColor="#color/gray"
android:textSize="22sp"
android:textStyle="bold"
app:drawableLeftCompat="#drawable/ic_baseline_cell_wifi_24"
app:drawableTint="#color/gray" />
</androidx.cardview.widget.CardView>
<!-- Your more code of Activity-->
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and this is the result
I hope it'll help you.
EDIT -1: Added more radius to cardView

How to move a LinearLayout to the right side of the toolbar

I am trying to add into the toolbar a TextView and a Spinner to implement language change from there. The problem it's that I added a LinearLayout to the toolbar but I cannot manage to move it to the right side so it won't get over the title of the activity, or to stay next to it.
Right now the LinearLayout is set like that (+ where i want it to be):
.xml code:
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/limba"
android:textColor="#color/white"
android:textSize="15sp"
android:layout_gravity="center"/>
<Spinner
android:layout_marginLeft="5dp"
android:id="#+id/spinner_limba"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
And the result it is :
I am trying to achieve something like :
I achieved that by setting a android:paddingLeft but that wont work on all the devices the same way, so I am looking for another solution.
I have tried adding gravity but it wasn't moving my layout.

add android:layout_gravity="right" in Linear layout.
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right">
</LinearLayout>

Wrap the LinearLayout with a RelativeLayout and provide
android:layout_alignParentRight="true"
property to LinearLayout.
Try this,
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test"
android:textSize="15sp"
android:layout_gravity="center"/>
<Spinner
android:layout_marginLeft="5dp"
android:id="#+id/spinner_limba"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>

ConstraintLayout problem: some buttons are invisible

I'm still trying to understand ConstraintLayout.
Let's say I have this activity:
Which consists of a RecyclerView and 3 Buttons. The RecyclerView may contains lots of items. Those 3 Buttons stay on the bottom of the screen.
The code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="fill_parent"
tools:context=".ScanResultActivity">
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toBottomOf="#id/btn_buy_more" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="#id/btn_checkout" />
</android.support.constraint.ConstraintLayout>
And the result:
Why only 1 button is visible there?

First issue, your RecyclerView's height was set to match_parent, and it was not constrained to the top of the view.
Second issue, your buttons are constrained on the bottom, when it should be their top that is constrained to the bottom of the element above them.
Here is your layout file reworked :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".ScanResultActivity">
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
app:layout_constraintBottom_toTopOf="#id/btn_buy_more"/>
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toTopOf="#id/btn_checkout" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toTopOf="#id/btn_logout" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
The result :

There is only one button visible because it is over the others as it is set to align Bottom to Bottom.
If you want to set one button above the other you should use Bottom to Top constraint.
I do not know the exactly order you want to set this up, but it should be something like this:
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toTopOf="#id/btn_buy_more" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toTopOf="#id/btn_checkout" />
</android.support.constraint.ConstraintLayout>

Set Your Buttons in LinearLayout
Like the Following Code
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="#+id/recycler_view">
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view"/>
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toBottomOf="#id/btn_buy_more"/>
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="#id/btn_checkout"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I hope it's Works....

Android View with same ActionBar elevation

I am trying to get a view (LinearLayout) to feel like an extension of the ActionBar. I am using AppCompat objects btw.
This is my xml:
<android.support.design.widget.CoordinatorLayoutt 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"
android:fitsSystemWindows="true"
tools:context=".RegisterActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay.Colored">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_register" />
</android.support.design.widget.CoordinatorLayout>
And now the content_register layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="text1"
android:textColor="#color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="text2"
android:textColor="#color/white" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#40FFFFFF" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="text3"
android:textColor="#color/white" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
android:text="insert awesome stuff here" />
</LinearLayout>
What am I trying to do with represented in the following image:
And this is what I am getting.
Any ideas on how I can fix this layout? Am I using the wrong components?
Also, should I be using a CardView for the layout with text1 2 3?

Add this in the styles (for pre-Lolipop devices)
<item name="android:windowContentOverlay">#null</item>
Add this line in your AppBarLayout
app:elevation="0dp"

Add to appbar layout and to included layout app:elevation="4dp" this way they will be on same depth level and you will see just elevation of included layout

Part of Fragment items hides under Action bar

I am learning android dev and my question might be very simple. I am stuck at the below part and requesting your help
Description
I am using the android's default "Navigation Drawer" activity to implement a small project. I have created a fragment and when user selects an option from Navigation drawer, the fragment opens.
Problem faced
When the fragment opens, part of the fragment & action bar is clipped. Image below
Code
fragment layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:orientation="vertical"
android:background="#ffffff"
android:layout_weight="120"
tools:context="test.navigationdrawcheck.RateCalculator">
<EditText
android:layout_width="wrap_content"
android:layout_height="5dp"
android:inputType="number"
android:ems="12"
android:gravity="center"
android:layout_weight="10"
android:hint="text 1"
android:textColorHint="#color/colorDivider"
android:id="#+id/editText"
android:layout_gravity="center_horizontal" />
<EditText
android:layout_width="wrap_content"
android:layout_height="5dp"
android:inputType="number"
android:hint="text 2"
android:textColorHint="#color/colorDivider"
android:ems="12"
android:gravity="center"
android:layout_weight="10"
android:id="#+id/editText1"
android:layout_gravity="center_horizontal" />
<EditText
android:layout_width="wrap_content"
android:layout_height="5dp"
android:inputType="number"
android:hint="text 3"
android:textColorHint="#color/colorDivider"
android:ems="12"
android:gravity="center"
android:layout_weight="10"
android:id="#+id/editText3"
android:layout_gravity="center_horizontal" />
<EditText
android:layout_width="wrap_content"
android:layout_height="5dp"
android:inputType="number"
android:hint="text 4"
android:textColorHint="#color/colorDivider"
android:ems="12"
android:gravity="center"
android:layout_weight="10"
android:id="#+id/editText4"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="15dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Total "
android:textColor="#color/colorDivider"
android:layout_weight="10"
android:textStyle="bold"
android:gravity="center_vertical"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
/>
<Button
android:layout_width="match_parent"
android:layout_height="10dp"
android:inputType="number"
android:ems="15"
android:gravity="center"
android:layout_weight="5"
android:id="#+id/editText6"
android:text="Submit"
android:textSize="20sp"
android:textColor="#color/colorWhite"
android:background="#color/colorPrimary"
android:layout_gravity="center_horizontal" />
App Bar Code
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context="test.navigationdrawcheck.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="4dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/framecheck"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Actual output i am looking for
Below is my actual fragment layout xml. When i merge it with Navigation drawer it should not be clipped and fragment items should be displayed correctly
What I have tried so far
I tried adding this android:windowActionBarOverlay=false in my styles.xml but no luck
Requesting your suggestions

This might come from the default behaviour of the CoordinatorLayout.
I also assume that you add your fragments in the frameLayout frameCheck.
In your app bar code layout, replace
<FrameLayout
android:id="#+id/framecheck"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
with :
<FrameLayout
android:id="#+id/framecheck"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />

use FrameLayout instead of LinearLayout
and add this to your FrameLayout of the fragment
android:layout_marginTop="?attr/actionBarSize"
at leaset worked for me.