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.
Related
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.
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 need to create multiple activities that will have a bar at the bottom of the screen. This bar contains three functions that are common to the activities. Can i keep the bar constantly on screen and switch through activities?
One way could be to load different fragments on the same activity, and let the bar be below the fragments.
But is it possible to switch between activities, without recreating the bar every time a new activity opens?
Possible option:
You have to create bottom layout bottomlayout.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/toolBarText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#android:color/transparent"
android:layout_centerInParent="true"
android:text="TOOLBAR TEXT"
android:textColor="#FFFFFF"
android:textSize="15dp" />
</RelativeLayout>
Include bottomlayout in every xml layout of activity.
<include layout="#layout/bottomlayout"/>
Fragments, is one way of doing it. Isn't there any other.
I am trying to make something like a slide down menu, but i also want it to act as a title bar.
I originally wanted to make the title bar be able to slide down and reveal a listView with clickable items. Unfortunately putting a layout in a title bar didn't work out to well.
Instead I decided to make a custom title bar and give it a size of 0,(I didn't want to use the flag FEATURE_NO_TITLE, since it removes the status bar as well)
So far i have something that slides down, but does not match the parent width. The layout of the textView that makes it slidable does not align to the left. I would like to figure out how to make the background a different colour, of the entire "sliding drawer"
i need help with:
match text view to parent width
Align text view to Left
Change colour of the panel that slides down
Thanks for any help
In my Main activity i am just setting the title to a custom title, and the content view to the following XML.
<SlidingDrawer xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slidingDrawer"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:content="#+id/content"
android:gravity="center_horizontal"
android:handle="#+id/handle"
android:orientation="vertical"
android:rotation="180" >
<LinearLayout
android:id="#+id/handle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="180"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Pull Here"/>
</LinearLayout>
<ImageView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:rotation="180"
android:src="#drawable/ic_launcher" />
I suggest you to try the SlidingMenu library. You can find it here
Looks like you are reinventing the wheel. There are many perfectly functional sliding-drawer libraries available. You can practically have a drawer slide from top, left, right or bottom and even have them in crazy awesome locations like in a listview row.
Have a look at the app - Libraries for Developers, which lists out every library along with demos & github links. Its better if you choose one and customize it to your needs.
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.