I'm using a toolbar which works pretty well for the most part until I started adding widgets inside it. I have a checkbox and button declared inside the toolbar but would like them to appear at the far end of the toolbar and working towards the title. I.e. the title remains on the left starting from the margin, but icons are added from the right. how do I go about this? I tried changing layout direction, but it just appeared Arabic like..
As you have not shown your code, supposing that your toolbar.xml is somewhat like this.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/accent_color"
android:minHeight="?attr/actionBarSize"
android:layout_alignParentTop="true"
tools:context=".MyActivity"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/save"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="right" //might be the missing part
android:textColor="#color/white"
android:text="SAVE"/>
</android.support.v7.widget.Toolbar>
all you have to do is add gravity
android:layout_gravity="right"
You can use RelativeLayout as a child layout in toolbar and add icons in it then you can give alignment(left,right etc) to those icons
Related
I'm adding the Toolbar inside my app but seems I have a issue. In the app I should have a button that is on the right of the screen, and the title in center. But when I go deeper in the app I should display the back arrow on the left, by doing getSupportActionBar().setDisplayHomeAsUpEnabled(). And this is working fine but when I add the back button the text moves to the right so the back button can have some space I guess. Can someone tell me how can I have my button on the right and the title always in the center, no mather if the back button is displayed or not?
Here is my toolbar xml layout code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:padding="5dp"
tools:ignore="MissingPrefix">
<RelativeLayout
android:id="#+id/toolbar_info_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:textColor="#color/actionbar_title_color" />
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/toolbar_count"
android:layout_width="13dp"
android:layout_height="13dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/red_circle"
android:gravity="center"
android:text="4"
android:textColor="#color/white"
android:textSize="9sp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
What worked for me is to set :
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
to the child view of the Toolbar, which is a LinearLayout for me (and a RelativeLayout for you). It sounded weird to me first but it's working so I won't complain.
First of all, a few general tips. This is the exact purpose behind the Android Hierarchical view. Use that to figure out what the container object of the back button is, how everything fits together, etc.
I suspect you can resolve your issue to some extend by changing some of the wrap_content to match_parent. Specifically, I suspect that changing it in your RelativeLayout for the layout_width will do the trick. But even if that doesn't, use the Hierarchical view to get a better understanding of exactly what happens when you are playing around, and it should help point you in the right direction.
You may have an activity title set, wich would prevent the logo from being centered on the action bar.
Try:
getActionBar().setDisplayShowTitleEnabled(false);
For v.7:
getSupportActionBar().setDisplayShowTitleEnabled(false);
This comes from this question and answer. Credit to #Fillipo Mazza.
Hope it helps.
Little late on this post, but will explain how it can work.
You can use custom view for your toolbar using following code.
supportActionBar?.setCustomView(R.layout.app_bar_title)
supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM
What basically happens is, app_bar_layout is added as custom view inside Toolbar.
So let's say the need is to show title in the center along with back key or action buttons on right side.
We can create layout like this.
<?xml version="1.0" encoding="utf-8"?>
<TextView 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:id="#+id/app_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
tools:text="HOME" />
This textview will attach inside Toolbar layout and align itself in center of the Toolbar layout. Even if you add back key or action menu, it shall remain in the center.
I'm working on a Android Application atm.. But I need some help, I want my fragment to have a little title in the left top corner (I know I can style text myself, but still.. I'd like to know what the property of this particular property is). Under here is a picture of what I want.
I want the property of the title where the red line is under. It's probably something with the TextAppreance.
Thanks in advance!
If you want to show title at the top left in the FrameLayout, you can use this.
<FrameLayout
android:id="#+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_margin="20dp"
android:text="your_title"
android:textColor="#2d8595"
android:textStyle="bold"/>
</FrameLayout>
I am using Toolbar instead of actionabar in my appliaction.The toolbar works fine but the problem is that i want the app logo to appear in the center of the toolbar.The image will be in center if no menu items are displayed on the toolbar, but if i add search or refresh menu item to the toolbar the image also shifts.I want the toolbar to be in center always
Code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/pink"
android:minHeight="56dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<RelativeLayout
android:id="#+id/rl_toolbar_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/tv_home_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/image"
android:drawablePadding="10dp"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Using a bitmap drawable with center gravity as Toolbar background helps you create the required effect. e.g.,
Let's assume your image to be centered is centeree.png, and that will be wrapped inside drawable/toolbar_background.xml
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#android:drawable/centeree"
android:gravity="center" />
You can assign toolbar_background.xml as a background to toolbar in your layout
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_background">
Also as an alternative, you can use a 9 patch drawable with a equal stretchable area on both sides.
You can not do it because of
One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
A easy way to do it, although its probably not the right way to do it.
I set my right side padding to the same width as my hamburger icon. Then everything else what I wanted in my dimens.xml. May need to be adjusted if you are adding action items on the right.
#dimen/app_bar_padding_right = 72dp
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="#dimen/app_bar_padding"
android:paddingBottom="#dimen/app_bar_padding"
android:paddingLeft="#dimen/app_bar_padding"
android:paddingRight="#dimen/app_bar_padding_right"
android:src="#drawable/nav_bar_logo"
android:contentDescription="#string/app_name" />
Add these attributes to the ImageView...
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
In my application there will be in-app notifications and I wish for the amount of notifications to be displayed adjacent to the hamburger icon which opens the navigation drawer which contains the button to actually view the notifications.
The image below shows what I have at the moment
Below is the code which carries this out
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="wrap_content">
<TextView
android:id="#+id/notification"
android:text="99"
android:padding="1dp"
android:background="#drawable/circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|top"
/>
<TextView
android:id="#+id/toolbarTitle"
android:text="test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</android.support.v7.widget.Toolbar>
This is what I would like to achieve for now
As you can see the TextView is closer to the hamburger icon since the right padding of the icon has been reduced
This is my dream (if it can be possible)
What I have tried
I have tried to adjust the contentInsetStart and contentInsetEnd as stated in this answer but did not work as I intended
Android API 21 Toolbar Padding
Please help. Thanks!
EDIT 1: Adding negative left padding to text view
Yes it is possible. For that you just have to design a custom AppBar in which you have to put you hamburger icon and notification textView in a RelativeLayout. Then make hamburger icon centerInParent="true" and notification textView alignParentRight="true" and alignParentTop="true". Make sure that you use an ImageView for the hamburger icon and set its padding and margin to 0. And also use the image as a background resource and not as source for the ImageView. Like use android:background="#drawable/hamburger_icon" instead android:src="#drawable/hamburger_icon" in the ImageView. Let me know if it works for you.
You could try setting a negative padding, i.e.
<TextView
android:id="#+id/notification"
android:paddingLeft="-10dp"
/>
The layout image
Hi! I'm using the ActionBar tabs, one activity and four fragments and what I'm trying to do is place the icon and the text in the center of the tab.
I tried this technique but it didn't work. I also tried setting the name="android:gravity to center. Also, I know it's not the best practice but I tried adding right padding to the tabs. I used vertical orientation in the TabView style to get the icons above the text.
You must create layout: abs_layout
<?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:orientation="horizontal" >
<TextView
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Title"
android:textColor="#ffffff"
android:id="#+id/action_bar_title"
android:textSize="18sp" /></RelativeLayout>
and in OnCreate() add this
getSupportActionBar().setCustomView(R.layout.abs_layout);