Develop Reference

Android TextView inside RelativeLayout not acting properly

So I have a custom Header view that contains several widgets. My idea is to have a frame layout with ImageView (icon) aligned parent start and ImageButton (menu) aligned parent end. Also, TextView (title) to right of ImageView.. Those should always be visible.
To right of ImageView(icon) there should be a TextView (title) whose text should expand based on visibility of other widgets on the right side of it..
So the order from left to right goes like this: ImageView(icon) - TextView (title) - ImageView (unread messages) - ImageView (battery) - ImageButton (menu)
The problem is, the text from TextView goes behind the widgets on the right side of it, like it's visible on this image:
Here is my xml preview :
And this is the actual xml:
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="58dp"
android:background="#color/view_controller_header">
<FrameLayout
android:id="#+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_margin="10dp">
<ImageView
android:id="#+id/imageViewIC"
android:layout_width="#dimen/view_controller_header_icon_width"
android:layout_height="#dimen/view_controller_header_icon_height"
android:layout_gravity="center" />
<TextView
android:id="#+id/textViewKK"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:focusable="false"
android:gravity="center"
android:padding="10dp"
android:shadowColor="#color/text_shadow"
android:shadowDx="-1"
android:shadowDy="-1"
android:shadowRadius="1"
android:textColor="#color/main_text_color"
android:textSize="#dimen/view_controller_header_kk_texSize"
android:visibility="gone" />
<ProgressBar
android:id="#+id/progressBarVC"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
<TextView
android:id="#+id/textViewDName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_marginRight="#dimen/view_controller_header_margin2"
android:layout_toRightOf="#id/frame"
android:ellipsize="end"
android:fontFamily="sans-serif"
android:gravity="center|left"
android:maxLines="2"
android:textColor="#color/main_text_color"
android:textSize="17sp"
tools:text="This is the text that is too long .........." />
<ImageButton
android:id="#+id/imgSubMenu"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_gravity="center"
android:background="?android:selectableItemBackground"
android:scaleType="center"
android:src="#drawable/ic_more_vert_white_24dp" />
<LinearLayout
android:id="#+id/bat"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toStartOf="#id/imgSubMenu"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageViewBattery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:scaleType="centerInside"
android:visibility="visible"
app:srcCompat="#drawable/ic_battery_full" />
<TextView
android:id="#+id/textViewBattery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="visible"
tools:text="100%" />
</LinearLayout>
<TextView
android:id="#+id/unreadMessages"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_centerInParent="true"
android:layout_toStartOf="#id/bat"
android:background="#color/color_widget_security_back_red"
android:gravity="center"
android:textStyle="bold"
android:visibility="visible"
tools:text="2" />
Any ideas, why does this text goes behind those widgets? I want it to resize if batery and unread messages are visible, like it goes into two lines instead of one, or to show ... if it's too long..

Probably you forgot add one more properties text as below :
android:layout_toLeftOf
android:layout_toLeftOf="#+id/imgSubMenu"
As per you requirement you want show text right to left icon and left to right menu icon but you add one relative reference toRight not toLeft so it's overlap on right side menu icon

Button with background image text positioning

I would like to position the text in my button like this:
At the moment the text is positioned in the bottom left corner of the button:
I have four rows of this type of buttons and in every row there is two buttons. Here is my code for one row of buttons:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/main_fashion_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/thumbnail_channel_fashion"
android:text="Fashion"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:layout_weight="1"/>
<Button
android:id="#+id/main_science_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/thumbnail_channel_science"
android:text="Science"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:layout_weight="1"/>
</LinearLayout>
how can I add some padding to the left and below of the text without moving the background image? Margin seems to add white space around button and padding creates space between background image and button's edges.
Thanks for help!

You can use this
<TextView
android:id="#+id/main_fashion_button"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#mipmap/ic_launcher"
android:text="Fashion"
android:textColor="#FFFFFF"
android:gravity="bottom"
android:padding="10dp">

Check this out
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/image" />
<TextView
android:id="#+id/imageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|left"
android:layout_alignBottom="#+id/imageButton"
android:text="FASHION"
android:padding="16dp"
android:textColor="#fff" />
</RelativeLayout>

Linear Layout negative margin , need one layout above another

i got this problem while giving negative margin
after giving negative margin i want that red part go below white part, to get shadow of categories on top of red box but as you see the redbox is coming on top
that white part is my relative layout and red part is my custom listview
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dim_10"
android:layout_marginRight="#dimen/dim_10"
android:background="#drawable/stripe_sort"
android:layout_marginTop="#dimen/dim_5"
android:layout_marginBottom="-15dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/dim_10"
android:text="Categories"
android:textColor="#ff000000"
android:textSize="13sp"
tools:ignore="HardcodedText" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:checked="true"
android:src="#drawable/sort_downarrow"
android:layout_centerVertical="true"
android:padding="#dimen/dim_15"
android:id="#+id/dropDown_categories"/>
</RelativeLayout>
<com.eminosoft.ebookread.util.ExpandableHeightListView
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_marginLeft="#dimen/dim_12"
android:layout_marginRight="#dimen/dim_12"
android:background="#c03f2f"
android:id="#+id/ListView_Sort_categories"
android:visibility="visible"
android:paddingBottom="#dimen/dim_10"
android:divider="#null"
android:layout_gravity="center_horizontal"
/>
in this i added negative margin bottom to relative layout, i also tried to add negative margin top to my custom list view but still same result , parent of these both layouts is a linear layout
how can i make that listview go below relativelayout?

<RelativeLayout
android:id="#+id/one"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.eminosoft.ebookread.util.ExpandableHeightListView
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_marginLeft="#dimen/dim_12"
android:layout_marginRight="#dimen/dim_12"
android:layout_marginTop="-15dp"
android:layout_below="#+id/partone"
android:background="#c03f2f"
android:id="#+id/ListView_Sort_categories"
android:visibility="visible"
android:paddingBottom="#dimen/dim_10"
android:divider="#null"
android:layout_gravity="center_horizontal"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dim_10"
android:layout_marginRight="#dimen/dim_10"
android:background="#drawable/stripe_sort"
android:layout_marginTop="#dimen/dim_5"
android:id="#+id/partone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/dim_10"
android:text="Categories"
android:textColor="#ff000000"
android:textSize="13sp"
tools:ignore="HardcodedText" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:checked="true"
android:src="#drawable/sort_downarrow"
android:layout_centerVertical="true"
android:padding="#dimen/dim_15"
android:id="#+id/dropDown_categories"/>
</RelativeLayout>
</RelativeLayout>
You can try this code,basically we put your layouts inside another relative layout

Simple Layout Issue - Aligning menu button to far right, center

Having a lot of trouble getting an icon to huddle into the position I want it in. I looked at 3 different Stack Overflow questions and tried placing the image in a RelativeLayout, LinearLayout, and a TableRow. All with various XML options. Never managed to get the icon to go right and center itself between top and bottom of the allotted space. In the pic below, red is where it is now, blue is where I want it. Here's a pic (of how it looks now, which is incorrect) and the code (imageView1 is what I want to align):
And the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/loginScrollView">
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/logoImageView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/logo" android:contentDescription="#string/app_name" />
<TextView android:id="#+id/demoTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/logDetails" android:gravity="center_horizontal|center" />
<EditText android:id="#+id/emailEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/loginHint" android:imeOptions="actionNext"
android:inputType="textEmailAddress" android:padding="20dp" />
<EditText android:id="#+id/passEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/password" android:imeOptions="actionDone"
android:inputType="textPassword" android:padding="20dp" />
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/rememberDetails" android:layout_gravity="center" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_holo_dark" android:layout_weight="1" android:layout_gravity="center|right"/>
</TableRow>
<TableRow android:id="#+id/buttonTableRow"
android:layout_width="match_parent" android:layout_height="wrap_content">
<Button android:id="#+id/registerButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/register" />
<Button android:id="#+id/loginButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/login" />
</TableRow>
</TableLayout>
</ScrollView>
Here are the SO questions I've already looked at and tried to use as solutions:
Aligning ImageView to right of the layout android
Aligning with center in android with hierarchical Layouts
Android ImageButton not displaying on right side of the screen

There are multiple options, as far as I can tell. I'll give you two:
First option is to set a scaletype on the ImageView containing the overflow icon. You make it take up all remaining available space and set the scaletype to fitEnd. This will position the icon all the way at the right.
<ImageView android:id="#+id/imageView1"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:scaleType="fitEnd"
android:layout_weight="1" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
You can accomplish the same effect by setting a weight of 1 on the CheckBox, which will make it 'push' the ImageView with the overflow icon all the way to the right (thanks to a TableRow behaving similarly to a LinearLayout). You can then simply make the ImageView wrap its content. You may want to double check if there are no weird side effects to the clickable region in this case though.
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:text="#string/rememberDetails" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_weight="1" android:padding="20dp" />
<ImageView android:id="#+id/imageView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
</TableRow>

android can android:gravity do this?

Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.

One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.

You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>