LIKE THIS SCREENSHOT - the SearchBar outside/below-toolbar in snapdeal, flipkart app...
How to add searchbar below or outside the toolbar.. Please suggest with a layout...
This is most likely a custom component, you can use a button and switch it to an EditText with the icons you prefer or use a button directly to launch the search view:
For example to achieve this you can:
1) Have a drawable with radius of 2dp and use it as the background of your component
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:radius="2dp" />
</shape>
2)Use it within your Button/EditText along with your two icons/mipmaps
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.jsosa.myapplication.MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/corners"
android:drawableBottom="12dp"
android:drawableEnd="#mipmap/ic_camera_alt_black_24dp"
android:drawablePadding="22dp"
android:drawableStart="#mipmap/ic_search_black_24dp"
android:gravity="left|center"
android:hint="Find your dil ki deal!"
android:padding="16dp" />
</RelativeLayout>
And you will get:
Then implement your business flow/logic on onClickListener etc
Hope it helps.
See if this works,
<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">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
If it is over the toolbar then add margin top to your edittext to keep it below the toolbar title.
Related
I want to set different background for every item in navigation drawer.
I want to achieve
Can Any one of you will explain how to that ?
My Activity_main.xml
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/nav_menu"
android:fitsSystemWindows="true"
android:background="#android:color/black"
app:itemTextColor="#android:color/white"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:itemIconTint="#android:color/white"
app:itemBackground="#drawable/header_background"
/>
Create a custom navigationView layout and include the layout like below,
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="end"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main">
<include layout="#layout/custom_layout"></include>
</android.support.design.widget.NavigationView>
custom_layout.xml file
<?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.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Now just shape a drawable like this,(change the colors as per your need)
btn_green_border.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/colorSkyBlue"
tools:targetApi="lollipop">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorAccent" />
<stroke
android:width="#dimen/_1dp"
android:color="#color/colorLightBlue"></stroke>
<corners android:radius="#dimen/_30dp"></corners>
<size
android:width="#dimen/_50dp"
android:height="#dimen/_100dp"></size>
</shape>
</item>
</ripple>
and use this drawable in the layout for your RecyclerView items like the following
item_row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_card"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn_refer"
android:layout_width="200dp"
android:layout_height="#dimen/_40dp"
android:background="#drawable/btn_green_border"
android:text="Navigation Item Name"
android:textAllCaps="false"
android:textColor="#color/colorPrimary" />
</LinearLayout>
And you will achieve what you want.
Thank you
I have Toolbar inside AppBarLayout and CoordinatorLayout. The designer wants to change elevation shadow to 1dp, but I can not change it for some reason.
If I add this on AppBarLayout then it removes shadow:
app:elevation="2dp"
If I remove it, then I have default 4dp elevation shadow.
I want to change it to 1dp.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/activityCategoryAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"
app:elevation="#dimen/elevationSize"
>
<android.support.v7.widget.Toolbar
android:id="#+id/activityCategoryToolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/Widget.MyApp.ActionBar"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/activityCategorySrl"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/activityCategoryRvPosts"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</android.support.v4.widget.SwipeRefreshLayout>
Change your AppBarLayout code to:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#animator/appbar_always_elevated"
android:theme="#style/AppTheme.AppBarOverlay">
And add appbar_always_elevated.xml in animator directory with this content:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<objectAnimator android:propertyName="elevation"
android:valueTo="1dp"
android:valueType="floatType"
android:duration="1"/>
</item>
</selector>
It should work now.
You can change android:valueTo value to set shadow. Also, app:elevation is not working on new APIs.
#deprecated target elevation is now deprecated.
Source: https://chromium.googlesource.com/android_tools/+/refs/heads/master/sdk/sources/android-25/android/support/design/widget/AppBarLayout.java?autodive=0%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F
I am attempting to set a logo as background in an Android toolbar. I've tried to put the image as a layer directly in the toolbar but this results in the logo not being centered. Here is the code I've got right now:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/Toolbar_background"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
And for the drawable Toolbar_background:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<item>
<shape android:shape="rectangle">
<solid android:color="?attr/colorPrimary" />
</shape>
</item>
<item>
<bitmap
android:contentDescription="Unleashed logo"
android:src="#drawable/unleashed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp" />
</item>
</layer-list>
This works but the logo is stretched in width and no padding is aplied, the bitmap takes up all spaces it can get.
https://www.imgdumper.nl/uploads9/5a796ede6c77c/5a796ede6bd4d-Capture.PNG
You can create custom toolbar.
Check below code.
toolbar_bg_image.xml
<?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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/colorAccent"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/toolbarTheme">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/_4sdp"
android:paddingRight="#dimen/_4sdp"
android:paddingStart="#dimen/_4sdp"
android:paddingEnd="#dimen/_4sdp"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginRight="#dimen/_20sdp"
android:scaleType="fitXY"
app:srcCompat="#drawable/unlashed"/>
</android.support.v7.widget.Toolbar>
</layout>
I suggest you to take your image without background and set background color as per your requirement in android:background="#color/colorAccent" property of toolbar.
You can also set margin and padding in ImageView as per your requirement.
Now you can include this toolbar in your layout file as below.
fragment_or_activity.xml
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_bg_image" />
</LinearLayout>
</layout>
You can try setting logo as below:
<Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/atc_toolbar"
android:background="?android:attr/colorPrimaryDark"
android:elevation="4dp"
android:navigationIcon="#android:drawable/ic_menu_compass"
android:logo="#android:drawable/ic_menu_view"
android:title="My application">
</Toolbar>
How can I add a divider so that it appears underneath the action bar and above the master/detail panes? I've already defined the vertical divider but don't know how to define the horizontal divider also.
<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="horizontal"
android:divider="#drawable/divider_vertical"
android:showDividers="middle"
android:baselineAligned="false"
tools:context=".MainActivity" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/master_container"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:id="#+id/detail_container"/>
</LinearLayout>
divider_vertical.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="1dp"/>
<solid android:color="#FFFFFF"/>
</shape>
divider_horizontal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:height="1dp"/>
<solid android:color="#FFFFFF"/>
</shape>
I do not see the code for the toolbar, so in my sense there should be a view below the toolbar as follows. I have used material design toolbar, you may use any toolbar.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
<View android:layout_height="0dp"
android:layout_width="fill_parent"
android:id="#+id/stripBelowToolbar"/>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/Theme.Insider.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#color/black"
android:elevation="0dp"
android:theme="#style/ToolbarColoredBackArrow"
android:background="#color/background_tint"
app:popupTheme="#style/Theme.Insider.PopupOverlay" />
<View
android:background="#color/lighter_color"
android:layout_width="match_parent"
android:layout_height="2dp"
/>
</com.google.android.material.appbar.AppBarLayout>
This worked for me
I'm trying to update my apps ActionBar into toolbar but I encountered some problem on customizing my Toolbar to display a custom drawable.
What I tried so far is to set my xml drawable into the Toolbar but it destroys the whole toolbar and moved the menu button down where I cannot properly see it:
Here's the drawable first:
bg_actionbar.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg_gradient" />
<item android:drawable="#drawable/icon_logo" />
</layer-list>
bg_gradient is just a 9patch image gradient and same with the icon_logo.
And for my toolbar:
<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/actionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/bg_actionbar"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
</android.support.v7.widget.Toolbar>
this one pushes my menu button below and has a spacing of about 300dp on left with the icon shrinked in height.
Now I just tried to directly changed the background straight into just the png image (bg_gradient) and same thing happens. I've also tried adding an ImageView inside the Toolbar but same thing it just destroys the whole ToolBar and once again I'm lost on how I can customize this Toolbar further. Anyone has the idea? TIA.
UPDATE:
I tried adding a linear layout on the toolbar to contain the background but still it doesn't display properly on my end:
<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/actionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/cherry_red"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_actionbar"/>
</android.support.v7.widget.Toolbar>
Here's what happened:
Additionally here's what I expected it to be:
Icon should be on center, and 9patch image as gradient since I'm having trouble on XML to have a percentage on the start mid and end colors and the navigationIcon should be on top of the gradient.
Hey i think this will helps because i have an app with something similar
My xml is so:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_toolbar" android:layout_width="match_parent" android:layout_height="56dp"
android:background="#drawable/actionbar_bg" >
<RelativeLayout android:id="#+id/toolbar_logo"
android:layout_width="140dp" android:layout_height="40dp"
android:background="#drawable/ic_logo"
android:layout_gravity="left|center_vertical"
android:clickable="true">
</RelativeLayout>
</android.support.v7.widget.Toolbar>
While the drawable/actionbar_bg is so:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#4093A3"
android:angle="90" />
</shape>
</item>
</layer-list>
Hope this helps you.
Use the below sample xml for your layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar_home"
android:id="#+id/tool_bar" />
</LinearLayout>
toolbar_home.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/actionbar_icon_bg"/>
<ImageView android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
In your Activity,
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar); //or setActionBar(toolbar)
To get navigation icon and stuff
toolbar.setNavigationIcon(R.drawable.btn_main_nav_selector);
getSupportActionBar().setDisplayHomeAsUpEnabled(true); // or getActionBar().setDisplayHomeAsUpEnabled(true);
.Use
Gravity on your inner View
hope it helps