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
Related
I have this problem while using https://labs.udacity.com/android-visualizer/, I can't move the bottom buttons (from the left, bottom side, that it wouldnt be stuck to the sides of the screen but had a bit of a gap.I added the picture, those are the buttons with white background, foto ->Sides
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2b580c">
<TextView
android:textStyle="bold"
android:text="VTMC - Mūsų nuotraukos"
android:layout_width="match_parent"
android:layout_height="70dp"
android:textColor="#android:color/white"
android:textSize="22sp"
android:background="#2b580c"
android:gravity="center"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="#drawable/grass"/>
<Button
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Atgal"
android:background="#FFFFFF"
android:textSize="20sp"
android:padding="4dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>
<Button
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Kitas"
android:background="#FFFFFF"
android:textSize="20sp"
android:padding="4dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
</LinearLayout>
From what I understand you want the buttons to be in the bottom corners yet have some space between the buttons and the corner of the screen.
Add a margin to the buttons
android:layout_margin="(size)"
If you want to customize if further you can add a margin to the right,left,bottom, or top.
Delete
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
from first button and
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
from second one.
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>
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
I am trying to layout an actionbar spinner dropdown list. I have a textview and an imageview in each row. I want the textview to align to the far left of the dropdown (with the paddingLeft) and I want the imageview to align to the far right of the dropdown. The text in the textviews varies in length, so the icons end up being aligned to the immediate right of the textviews. This layout provides a two line item on the actionbar with the spinner title and selected item name.
Here is my current layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/spinner_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp" />
<LinearLayout
android:id="#+id/item_row"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-5dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:layout_weight="1"
android:gravity="left"
android:textSize="18sp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:contentDescription="icon" />
</LinearLayout>
</LinearLayout>
I've tried a relative layout like below, with similar results (see screen shot). The bluetooth icon is a stand in for the yet to be created icon (same size):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/spinner_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp" />
<RelativeLayout
android:id="#+id/item_row"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="18sp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/item_name"
android:contentDescription="icon" />
</RelativeLayout>
Use a RelativeLayout instead of a LinearLayout, and use the alignParentLeft/Right attributes on your children to place them correctly.
I am trying to set a text and 2 or more icons in one single line. Requirement is that Text should be left aligned and icons should to right of the text. If the text is big then it should not overlap the icons.
The problem of this code is that, when i change text of title, width of the title stay the biggest it was and as a result icons stay not aligned to title.
if I needed one icon to the right of the text I would use compoundDrawable of TextView and i wouldn't have problem;
This is my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="#dimen/padding_title_in_list"
android:paddingRight="#dimen/padding_title_in_list" >
<TextView
android:id="#+id/banner_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:layout_weight="1"
android:maxLines="1"
android:textColor="#color/text_title_gray"
android:textSize="#dimen/text_size_title_in_list_promo" />
<ImageView
android:id="#+id/icon_paid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/icon_paid"
android:contentDescription="#null" />
<ImageView
android:id="#+id/icon_hd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/icon_hd"
android:contentDescription="#null" />
<ImageView
android:id="#+id/icon_restrict"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/icon_restrict"
android:contentDescription="#null" />
</LinearLayout>