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

floating action button is also scrolling along with recyclerview

I have added a floating action button with recyclerview which is also scrolling along with the recyclerview my problem is that I have a bottom navigation in main activity so I'm trying to put my floating action button above bottom navigation which is in the main layout when my fragment is called but instead my fab is shown at the end of recyclerview and it is also scrolling along with the recyclerview how can I make it not scroll when the fragment is called in MainActivity.
Please any help would be appreciated
My XML
<android.support.v4.widget.NestedScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<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:orientation="vertical"
tools:context="com.ct.listrtrial.fragments.FeedFragment">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Feed"
android:paddingTop="10dp"
android:paddingLeft="15dp"
android:textSize="35sp"
android:textColor="#color/White"
android:layout_weight="1"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/feed_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
android:paddingTop="15dp">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#drawable/ic_search_black_24dp"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Use RelativeLayout as Root layout
And Use android:layout_alignParentBottom="true" and
android:layout_alignParentRight="true" to attach your FloatingActionButton at bottom of screen
SAMPLE CODE
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="horizontal">
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:orientation="vertical"
tools:context="com.ct.listrtrial.fragments.FeedFragment">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingLeft="15dp"
android:paddingTop="10dp"
android:text="Feed"
android:textColor="#color/White"
android:textSize="35sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/feed_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
android:paddingTop="15dp">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="5dp"
android:src="#drawable/ic_search_black_24dp" />
</RelativeLayout>

You Should put floating action button outside of nested scrollview..

Can't remove layout margin

I'm attempting to make the content of a menu (header picture) go edge to edge as per the material design guidelines
I am unable to remove a margin around the menu layout.
Things I have tried
setting relative layout background as mipmap image
removing padding set in the dimensions resource
Adding an image directly below the relative layout in an imageview
Created a bitmap resource and used the scale property
Tried different images
Encased the image in a frame layout
Non of which are working . I am providing a screen shot for a better understanding
code the the layouts
here is activity_menu
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar">
</include>
<FrameLayout
android:id="#+id/activity_frame_menu"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
header_menu
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="178dp"
android:layout_gravity="left"
android:background="#mipmap/ic_launcher"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:textColor="#ffffff"
android:text="Akash Bangad"
android:textSize="14sp"
android:textStyle="bold"
/>
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_marginLeft="16dp"
android:layout_marginTop="5dp"
android:text="akash.bangad93#gmail.com"
android:textSize="14sp"
android:textStyle="normal"
/>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#mipmap/ic_profil"
android:layout_marginLeft="16dp"
android:layout_marginTop="38dp"
android:id="#+id/circleView"
/>
</RelativeLayout>
row_item_menu
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rowIcon"
android:paddingLeft="16dp"
android:src="#drawable/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="12dp"
android:paddingTop="4dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/rowText" />
</LinearLayout>

Seems I've got this.
You added an image via Asset Studio, right? I don't know the reason, but it really adds blank space around the image.
The solution worked for me in this case was to place image into /drawable folder (in explorer).
Not it looks good.
Update. Found the reason - following documentation:
Image Asset Studio generates the following asset types:
Launcher icons. Action bar and tab icons. Notification
icons.
So it would not help you to make mipmap from your image in order to use it as background.

Have you tried to wrap the header_menu's linear layout with relative layout? Something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="178dp"
android:layout_gravity="left"
android:background="#mipmap/ic_launcher"
android:orientation="vertical"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
...
<!-- another views -->
</RelativeLayout>
</RelativeLayout>

Just update your activity_menu's DrawerLayout elevation
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar">
</include>
<FrameLayout
android:id="#+id/activity_frame_menu"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>

How do I split a Scrollview layout in half to show parent background color and two panes?

I have a simple UI screen with a white background. Then I have Scrollview with 10 dp margins all around and black background, so basically a rectangle within a rectangle. How would I split the Scrollview in half so that I can show a white horizontal line in the middle of the inside black rectangle, thus creating two black panes? The uploaded pic below shows what I have currently (please ignore the tiny outside colored border that was captured to show the main UI white background.
layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
style="#style/scrollbar_shape_style"
android:focusableInTouchMode="true"
tools:context=".MainActivity" >
<ScrollView
android:id="#+id/ScrollView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#000000"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" >
<LinearLayout
android:id="#+id/MainLayout1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#FFFFFF"
>
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/xyztext"
android:text="xyz"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"
android:textColor="#FFFFFF"
android:background="#color/colorPrimary"
android:textAppearance="?android:attr/textAppearanceMedium"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:clickable="true" />
</LinearLayout>

My approach would be to set the black background to the two rectangles instead of setting it to the ScrollView, which you can't split.
Also a ScrollView can only host one direct child and then add to it the two layouts that conforms your rectangle:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:focusableInTouchMode="true"
tools:context=".MainActivity" >
<ScrollView
android:id="#+id/ScrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/MainLayout1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical"
android:background="#android:color/black">
</LinearLayout>
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="5dp" />
<LinearLayout
android:id="#+id/MainLayout2"
android:layout_width="match_parent"
android:layout_height="700dp"
android:orientation="vertical"
android:background="#android:color/black">
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
This will give you the following UI:
Note that I've put a Space element to separate the two Linear Layouts. You can replace it with a margin if you prefer.

Android Toolbar width constrained by menu items

Please help! I'm completely stuck and can't find a solution. The useable width of my Toolbar is constrained by the menu items in it. Here's a screenshot. I need to have it not constrained by the menu items so my EditText can span the width of the toolbar. Here is my layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="250sp"
android:background="#color/primary"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_id"
android:layout_width="40sp"
android:layout_height="40sp"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/url"
android:textColor="#color/accent"
android:textSize="16sp" />
<EditText
android:id="#+id/url_text_field_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textNoSuggestions"
android:maxLines="1" />
<TextView
android:id="#+id/output_text_view_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/initial_output_text_id"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Looks like content padding. Here's an existing answered question on the subject: Android API 21 Toolbar Padding
Solution seems to be app:contentStart xml attribute on the Toolbar view. I assume contentEnd exists too.