I'm trying to add a border that would look like this:
https://imgur.com/a/r8rHGQl
My toolbar.xml:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"
>
</android.support.v7.widget.Toolbar>
In my java code I do :
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
and inflating the menu.
If I try to nest the toolbar in relative/linear/constrains layout and add a View at the bottom I get the "android.widget.LinearLayout cannot be cast to android.support.v7.widget.Toolbar" error
Also tried to <include a layout with a View inside of it, but then the line appears in the middle of my toolbar and my title disappears.
Also including my menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/item1"
android:icon="#drawable/main_btn_info"
android:title="Item 1"
app:showAsAction="always"/>
</menu>
Create toolbar inside Linear Layout with a view
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"/>
<View
android:background="your border color"
android:layout_width="match_parent"
android:layout_height="2dp" />
</LinearLayout>
Include this in all your layouts.
Then find toolbar in activity using toolbar id instead of xml name
toolbar = findViewById(R.id.toolbar_main);
setSupportActionBar(toolbar);
I used this method:
<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">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Setting"
app:titleTextColor="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:background="#DDD" />
</LinearLayout>
Made another layout with the border and included it in every activity, I know it's not the best way to do it, but result is the same for now.
Try using the elevation parameter
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:title="Log In"
android:elevation="5dp"
app:titleTextColor="#000000" />
android:elevation="5dp"
This gives you out an basic elevation border bottom shadow for Toolbar
Related
How to add the different type of designs and color to a toolbar and showing the value(value depends on user points) on toolbar gets updated whenever the user goes to another activity.
You can take RelativeLayout inside Toolbar and customize it according to your requirement. Here is sample Code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorPrimary"
app:navigationIcon="#mipmap/ic_launcher_round"
app:titleTextColor="#android:color/white">
<RelativeLayout
android:id="#+id/rl_plane_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<ImageView
android:id="#+id/tv_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:src="#mipmap/ic_launcher_round"
android:text="Submit" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
The toolbar layout I set android:layout_gravity="center_vertical"
but it not work
Code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/toolbar_bg"
android:fitsSystemWindows="true"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#android:drawable/sym_def_app_icon" />
main layout:
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/head_tool_bar"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/head_tool_bar" />
</RelativeLayout>
<!-- The drawer is given a fixed width in dp and extends the full height of
the container. -->
<fragment
android:id="#+id/navigation_drawer"
android:name="com.voogolf.helper.home.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/drawer_new_home" />
</android.support.v4.widget.DrawerLayout>
How can I set drawer icon and logo align top? Why left drawer icon have padding
like this?
you should try setting layout gravity like this.
android:layout_gravity="left|center_vertical"
and make sure padding and margin is 0dp
Android support v7 toolbar is just like other views. You can customize or add whatever the view you are required inside the toolbar.
Your imageView should be inside the toolbar and make imageView aligned whatever you want by gravity or layout_gravity attribute.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/home_button"
android:background="#color/colorToolbarWelcomeBg"
android:scaleType="fitCenter"
android:src="#drawable/back_arrow"
android:layout_gravity="left|centre"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="#color/colorToolbarWelcomeBg"
android:text="Settings"
android:textColor="#color/colorWhite"
android:textStyle="bold"
android:id="#+id/welcomeToManager"
android:gravity="center"/>
</LinearLayout>
and place this layout inside <toolbar> Above layout </toolbr> This code showing just an idea not actual code :)
add this property attribute to imageView android:layout_gravity="center_vertical"
This is my toolbar with a back button and text in center.You can refer this code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/back_arrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="left|center"
android:visibility="visible"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/back_arrow" />
<com.indosat.rider.views.CustomTextView
android:id="#+id/toolbar_custom_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Register Page"
style="#style/roboto_medium"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="19sp" />
</FrameLayout>
</android.support.v7.widget.Toolbar>
Let me know if you need any help in arranging your final setup.
if you are trying to customize your toolbar then do something like this.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
...>
<RelativeLayout>
<ImageView
... />
//here you can add more view items
</RelativeLayout>
</android.support.v7.widget.Toolbar>
if you have used toolbar and setting up the action bar using ActionBarDrawerToggle then add this code to your ActionBarDrawerToggle object.
toggle.setDrawerIndicatorEnabled(false); // this will disable your default haburger icon
toggle.setHomeAsUpIndicator(R.drawable.ic_custom_drawer_icon); // this will replace the toggle home indicator
I have an Activity with 4 tabs. The TabLayout is placed at the bottom (I know this is a violation of guidelines, but that's the design). One of the Fragment also has tabs which should be placed at the top, but it's shadowed by the title bar.
.
How can I add tabs to Fragment, so that it's not shadowed by the Toolbar?
Here is activity_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<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:background="#color/bg_main"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/fragments"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bg_main_tabs"
app:elevation="#dimen/elevation"
app:tabIndicatorHeight="0dp"/>
</LinearLayout>
and fragment_with_tabs.xml:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#color/bg_main"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/clothes_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:tabIndicatorColor="#color/colorPrimaryDark"
app:tabSelectedTextColor="#color/colorPrimaryDark"
app:tabTextColor="#android:color/white" />
<android.support.v4.view.ViewPager
android:id="#+id/clothes_fragments"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Set the elevation to 0. Setting the elevation from the AppBarLayout is ideal but anyway you can do something like this
getSupportActionBar().setElevation(0);
I have some problems about android toolbar. Normally if I set a custom view into toolbar, the view should fill the whole toolbar space from left to right and has no margin.
but mine has a empty space in the left , these are my code :
xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/base_toolbar"
android:layout_width="match_parent"
android:layout_height="46dip"
android:background="?attr/colorPrimary" />
<FrameLayout
android:id="#+id/base_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
activity:
private void initToolbar() {
toolbar = (Toolbar) findViewById(R.id.base_toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if( actionBar != null)
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
contentLayout = (FrameLayout) findViewById(R.id.base_content);
}
Is here anything wrong with my code or it should be like this ?
The space on the left is caused by Toolbar's contentInsetStart which by default is 16dp. You can set it to 0 to remove it. Dont forget to add the schema.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/base_toolbar"
android:layout_width="match_parent"
android:layout_height="46dip"
android:background="?attr/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp" />
<FrameLayout
android:id="#+id/base_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
You can do like this,
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#1E90FF"
android:minHeight="?attr/actionBarSize" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:singleLine="true"
android:text="Toolbar Title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#ffffff" />
</android.support.v7.widget.Toolbar>
I want to make the ActionBar transparent and it above the image like this picture.
How set it?
Layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_white"
android:minHeight="?attr/actionBarSize" />
<FrameLayout
android:id="#+id/framelayout_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Solution 1#
//whole toolbar will be transparent
mToolbar.setAlpha(0.0f);
Solution 2#
//only background of toolbar will be transparent
mToolbar.getBackground().setAlpha(0);
#maros136:
I think you should add the toolbar layout below the framelayout_content and the root layout should be a RelativeLayout in order to have the toolbar always on top.
Like this:
<RelativeLayout 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"
android:id="#+id/main_details_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
Your layout here
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/transparent"
/>
</RelativeLayout>
Result:
https://play.google.com/store/apps/details?id=com.levionsoftware.photos