After reading multiple Question/Answer in SO, I'm still searching for an answer.
My problem: in my application I use a Toolbar, but depending on the Fragment/Activity you're in the Toolbar menu item could change, for exemple on the first screen you will see only a Textview, in an other Fragment there will be the home arrow and an overflow menu sometimes there is two menu icons. The problem is that the title is centered with the space avaible wich is (toolbar space - menuitem space)
Here is 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/ciwy"
android:textSize="28sp"
android:textColor="#fff"/>
</RelativeLayout>
As you can see I tried contentInserStart but it doesn't change anything. I also used a relativelayout to center the textview. I need it to work atleast on API 19 (to try it on my phone).
Is there a solution to center the Textview in the middle of the bar even if I have menu items?
EDIT
Not finding any solution I just added an Image view in the RelativeLayout to act like the home button.
Related
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
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.
By default, eg. having Toolbar and some other Views in FrameLayout container causes Toolbar to appear on top of other views, no matter what their (views) order is.
Is it possible to force some of the views (eg. floating action buttons) to appear in front of Toolbar or should look for workaround?
edit:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar"/>
<!-- some RecyclerView goes here also -->
<com.github.clans.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:src="#drawable/ic_content_add"
fab:fab_colorNormal="#color/accentColor"
fab:fab_colorPressed="#color/accentColor"
android:layout_marginRight="20dp"
/>
</FrameLayout>
Result:
Problem: The oval button appears in front of RecyclerView, but behind Toolbar.
The floating action button has to have equal or higher elevation as the toolbar. Assuming your toolbar has elevation set to 8dp, the FAB needs to have the same at least.
Basically widgets with higher elevation move physically above and stop respecting the XML order.
I'm making custom view for an Action Bar. There have to be centered title, some action buttons at the right and navigation drawer button/back with title at the left.
I use RelativeLayout to place all elements, like so (this is demonstrating variant of real layout):
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/actionBarHomeContainer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:clickable="true">
<ImageView
android:id="#+id/actionBarHomeImage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:duplicateParentState="true"/>
<TextView
android:id="#+id/actionBarHomeLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:duplicateParentState="true"/>
</LinearLayout>
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
<LinearLayout
android:id="#+id/actionBarOptionsContainer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_alignParentRight="true">
<!--Action items will be added here pragmatically-->
</LinearLayout>
</RelativeLayout>
In most screen cases it's all OK (green picture), but when I deal with tight screens, my title is overlapping by home label (yellow picture). Keep in mind the this is only demonstrating situation, real items smaller than drew ones and case like this is rare. So my aim is in case of title is overlapped just place it in center of remain space between actionBarHomeContainer and actionBarOptionsContainer (blue picture). Is it possible somehow and what other solutions you may suggest to me?
Thanks.
There's an official and very easy solution to your problem: Don't mimic UI elements from other platforms
Don't use labeled back buttons on action bars
Other platforms use an explicit back button with label to allow the user to navigate up the application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical navigation and the navigation bar's back button for temporal navigation. For more information, please review the Navigation pattern.
Follow this guideline to provide a consistent navigation experience across the platform.
Android action bar with up caret vs. iOS labeled "Back" button.
i'm trying to implement a menu which i want on the bottom outside of the screen. When i swipe up from the bottom edge of the screen i want it to appear there.
Furthermore i want a HorzizontalScrollView in there. Actually it should work like a Navigation Drawer on the side.
Here is the layout I already tried. I used the umano AndroidSlidingUpPanel:
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="200dp"
sothree:shadowHeight="4dp"
sothree:overlay="true">
<TextView
android:text="Hier wird das pdf gezeigt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/file_scroll_view"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/file_scroll_view_linear_layout"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
The slide up works, but i don
t know how to position it outside of the screen and how to let it only slide up until it aligns the bottom edge.
Furthermore I want the ScrollView working. Before I tried with the SldingUpPanel it worked like charm but now its not scrollable.
Anyone got an idea or any hint how to solve this?
for nothing to be seen you have to:
slidePanel.setPanelHeight(0); // I couldn't find anything on XML for that
and for it to stop midway through:
slidePanel.expandPane(0.1f); // for example for 10% of screen.