Develop Reference

Toolbar align title in center with back 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.

Android RelativeLayout Background Color

For a long time I am reading posts from stackoverflow because they are very helpful and google seems to think that also.
Since yesterday I have a problem with a row in a ListView in Android. I want to show an image and the area between the image and the bottom of the element should be filled with a grey color.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/ConversationsBadgeLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#c0c0c0"
android:orientation="vertical" >
<QuickContactBadge
android:id="#+id/ConversationsBadge"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
<!--
...
A LinearLayout with TextViews, shouldn't be interesting for this
...
-->
</RelativeLayout>
My Problem ist that the it seems that the inner layout only wraps the content but doesn't fill_parent. When I set for example 100dp it works but that is not what i want.
It would be nice if you could help me with that. I tried much workarround like using LinearLayouts and TextViews but nothing worked.

You can set the background color to the ListView itself, then everything in it will have the background you want.
BTW, I recommend using LinearLayout instead of RelativeLayout in your case.

The layout file should contain exactly one outermost element and it should have both android:layout_width="match_parent" and android:layout_height="match_parent" Your RelativeLayout has android:layout_height="wrap_content"

i think you can use you can take background color in another xml file and put in drawable folder and also using Linear Layout is very useful to your problem

Left-align a TextView to the text inside an EditText?

I'd like to align the text in a TextView with text inside an EditText that is directly below it. Is this possible without using padding tricks?
If not, is this because it's discouraged? I could see it being discouraged because it could confuse the user into missing the distinction between the two controls.
Here's the layout that created the above screenshot:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Please align my first character" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/text_view"
android:hint="To my first character" />
</RelativeLayout>

No, you can't do this without using padding or layout_margin. EditText has a background with borders and padding, so its content area is a little bit smaller than the area of TextView. I think it's normal to use padding in such situations.

Actually this can be confusing, but you can add a little offset to the TextView to make it look better. Use android:layout_marginLeft and choose a value that will match your requirements. Hope this helps.

I feel you will have to use padding to the TextView. It actually looks better to me that the first character in TextView and that in EditView are NOT aligned perfectly. They also have different font size, so it actually looks pretty natural the way it is right now - or maybe with just a little bit of padding, but not too much. When padding, don't forget to consider users with different screen sizes and resolutions, so please use dp with you are doing padding with android:layout_marginLeft. For example:
<TextView
android:id="#+id/text_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:text="Please align my first character" />
Hope this helps.

Android - Arranging Buttons at Foot of Screen

An app I am working on needs to have two buttons anchored to the bottom of the screen. The technique I've used in the past is to declare a RelativeLayout for the buttons within a parent RelativeLayout (height = fill_parent) and set align_parent_bottom to true. This is declared first and has an id so the next child layout can declare itself to be above the buttons' RelativeLayout.
However, the screen I'm currently working on has a strange problem - there is a large empty gap before the first View object appears:
Here is my layout XML
Can anyone spot where my problem is? Is there a better way to arrange my buttons?

Try this Code , It will work .
Problem is android:layout_above="#id/alarm_details_buttons_layout"
in Scroll View
Edited Code

I checked your code and here is the modification in your buttons layout:
<RelativeLayout
android:id="#+id/alarm_details_buttons_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<Button
android:id="#+id/alarm_details_return_to_list_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="your text here"
android:textSize="15sp" />
<Button
android:id="#+id/alarm_details_update_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/alarm_details_return_to_list_button"
android:state_enabled="false"
android:text="your text here"
android:textSize="15sp" />
</RelativeLayout>

fixed. http://pastebin.com/ucHwzJQP
Note i removed all "#string/", will need to be added back.

I solved the 'gap' problem. As I have set the scroll view to be positioned above the buttons RelativeLayout, I also had to force it to align with it's parent's top:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#id/alarm_details_buttons_layout"
android:orientation="vertical" >

How to get UI to look right

I am having a problem getting the ListView to display properly. It currently looks like this with the following xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/favs_main">
<Button
android:text="Return to Home"
android:id="#+id/return_button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:textSize="15sp"/>
<ListView
android:id="#+id/favsListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"
android:layout_above="#id/return_button"/>
</RelativeLayout>
If you notice the list is down on the screen. I want it to be just below the favorites text instead of just above the return to home button. The catch however is that I always want the button to show and the list view to just occupy the space between the favorites text and the button. The text is from the background image so I can't just align below that. So even with 100 items I would still like to show the button.
Thanks for the help

If the word "favorites" is part of a background image as suggested in the RelativeLayout's background attribute, then you won't be able to align an element below it without using hacky margins or something to that effect. If you want to align an element below the word, separate that into a different ImageView and set the layout_below of the ListView to the id of that ImageView. To get an element to align properly in between two other elements, use a combination of layout_above and layout_below.

Couldn't you just align the ListView to the Parents' Top and set a margin for the ListView so that it is below the Text of the Background?
Also you could change the background to provide the Text in an ImageView and align the ListView to be below the ImageView.

Instead of trying to make a persistent View always show up under the ListView and align it (which you can do, see other suggestions), you might want to take a look at using a footerView:
http://developer.android.com/intl/de/reference/android/widget/ListView.html#addFooterView
"Add a fixed view to appear at the bottom of the list."
Note that it can be another layout too if you eventually need to do more than just one Button.

this my listview which have multiple entries and textview and button fixed in the botton. i haven't inserted background. try this hope it will help.
http://www.techuv.com/layout-with-butoon-and-textview-fixed-in-bottom/

You could use a simple LinearLayout and use the weight attribute on the ListView :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/favs_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ListView
android:id="#+id/favsListView"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"/>
<Button
android:text="Return to Home"
android:id="#+id/return_button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:textSize="15sp"/>
</LinearLayout>