I want to draw a button using a "drawable/selector" so that the background color changes as the button is clicked.
So I defined the background of my RelativeLayout using the drawable (that has the selector). This first step works fine: when i click the layout object, the color changes.
In that RelativeLayout, I now add two independant dynamic Text Views. These Text Views are now using much of the space of the RelativeLayout. So when I click on the text views object, the background of the parent layout does not change anymore.
So, is there a way to have a layout with a dynamic background (to handle user's clicks so it changes color) and have overlapping views on the top?
Note that the background of the relativeLayout is a gradient that goes from top to bottom.
<RelativeLayout
android:id="#+id/titleBackground"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/button_background"
android:gravity="left|center_vertical"
android:clickable="true"
>
<TextView android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/light_text"
android:gravity="left|center_vertical"
android:singleLine="true"
android:ellipsize="end"
/>
<TextView android:id="#+id/subtitle"
android:layout_below="#id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/light_text_alpha"
android:gravity="left|center_vertical"
android:textSize="#dimen/secondarylisttext_size"
android:scrollHorizontally="true"
android:singleLine="true"
android:ellipsize="end"
/>
</RelativeLayout>
Your textview are capturing the click events and they are not passed to the relativelayout in the background. You will need to add a onTouchListener to both textviews and set the background for the relative layout inside the touch listener based on 'ACTION_DOWN,ACTION_UP' of the motion event.
There might be ways to make the textview pass the click events. But Im not sure about it. The above method is just 1 solution. There can be others.
As blessenm said, everything depends on the TextView, if you make them clickable then the parent selector doesn't count anymore (of course you can use a selector also on the TextView).
Related
I know this sounds simple but I wanted to change a button's font size to fill the Button .Even though the text doesn't take all the space inside the button when I decrease text height for example the Button's height decreases as well.Is there any way I can change The text-size so it fills that space inside the Button or do I have to just use an Image Button .
Here is the case :-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#android:color/black"
android:id="#+id/led"
>
<Button
android:id="#+id/grow"
android:layout_width="match_parent"
android:layout_height="39dp"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:textSize="15dp"
android:background="#color/Lightbrown"
android:text="A▲"
android:textAllCaps="false"
/>
<Button
android:layout_width="match_parent"
android:layout_height="39dp"
android:text="A▼"
android:textAllCaps="false"
android:id="#+id/shrink"
android:background="#color/Lightbrown"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:padding="0dp"
android:textSize="10dp"
/>
See I used my Linearlayout as a background for my Buttons the second button's size changes with its font size I just want its size to remain the same as the first Button but with a smaller textsize.
Update
Your second button is not actually smaller, it is just aligned in a way you wouldn't necessarily expect.
Horizontal LinearLayouts with TextView (or subclass, which Button is) children will "baseline align" the children. That means they will make sure that the bottom edge of all the text in the row is at the same height. Since your second button uses smaller text, the text bottom would be higher up inside the button, so the LinearLayout forces the whole button down to accomodate.
Add this attribute to your LinearLayout:
android:baselineAligned="false"
Original
First, I assume you're using android:layout_height="wrap_content". If you don't want your button's height to scale with font size, you'll have to change this to some fixed value (or match_parent if you want it to be the same size as its parent).
As for why the text "doesn't take up all the space", that's because Buttons have padding built into them automatically. You can remove this padding by defining android:padding="0dp"
However, you'll soon notice that the button looks really bad if you give it no padding and too-large text. How to solve that is really up to the requirements of your design.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center_horizontal"
android:padding="0dp"
android:textSize="36sp"
android:text="Hello world"/>
</FrameLayout>
Use a fixed size instead of wrap_content for your button.
f that doesn't work for your design, consider overlaying a TextView on top of your Button (with ConstraintLayout or FrameLayout or RelativeLayout). After that, you can set the TextView's focusable, focusableInTouchMode, and clickable properties to false so that it doesn't intercept your Button's clicks.
This question is in a way a continuation of my last question.
My problem now is pretty much the same, except that instead of separating the image and text in differend views (namely ImageView and TextView) I learned I can use the attribute android:drawableLeft to set an image "for" my text (the suggestion was pointed to me by Eclipse with a warning icon on the LinearLayout line).
I thought the only difference would be that instead of setting the ImageView with setImageResource() method I would simply set the TextView's drawableLeft attributed with the setCompoundDrawablesWithIntrinsicBounds() method. Instead, when I made the change, I was taken back to my original issue: the text aligns with the top edge of the view rather than the center.
This is what my TextView looks like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/account_login"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/pm_gmail"
android:drawablePadding="8dp"
android:text="example#gmail.com"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_centerVertical="true"
android:layout_below="#id/account_login"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="5dp"
android:background="#DDDDDD" />
</RelativeLayout>
The second View is just a separator.
... and this is what the layout looks like after setting the above mentioned attributes:
(I don't have enough reputation to post images yet, so here's the link to it)
(Just to be clear, this is only a static example. My text and image are both set dynamically in the code at runtime).
Any help is greatly appreciated.
Change android:layout_gravity="left|center_vertical" to android:gravity="center_vertical".
layout_gravity is for positioning a View inside a container (layout), while gravity is referred to
the View contents (that is, in this case, the text inside the TextView).
I want to have a TextView (to show a count) hovering over an icon in the ActionBar. What I did was have a RelativeLayout, set a background to it, then put that TextView in that layout and screw with the margin until it fits, but that is broken as soon as the text length varies.
Setting a background on the TextView isn't great either because I can't position the text in relation to the icon.
Here's my XML:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="fill_horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#drawable/cart" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_marginTop="5dp" android:layout_marginLeft="43dp"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout> </RelativeLayout>
and here is a screenshot to show you what I mean:
Is there a stress-free way, a library perhaps, that lets me set a TextView over a Drawable so that the TextView is always centered/ positioned?
Setting a background on the TextView isn't great either because I can't position the text in relation to the icon.
Actually you can position your text relative to your icon. You need to separate the cart icon and the number badge icon as separate images, and lay them out individually. I had to do this myself not too long ago, and I did it with a RelativeLayout, with an ImageView of the cart icon and a TextView for the numbers with a 9-patch "badge" as the background.
The trick is to align your number TextView to the left and bottom of your cart icon ImageView, and then use the left and bottom margins to push your number badge to the top and right of your cart icon. This way, the number badge is always anchored based on your cart icon.
Also, set the gravity of your TextView to center, so as the numbers grow wider, the relative position of the text is about the same. Lastly, use padding on your TextView to control how much gap there is between the edge of the number and the edge of your "badge" 9-patch.
Here's a snippet of my implementation (I've redacted some of this):
<RelativeLayout
android:id="#+id/cartButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/cartIconImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_menu_cart" />
<TextView
android:id="#+id/cartBadge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cartIconImageView"
android:layout_alignLeft="#+id/cartIconImageView"
android:layout_marginBottom="10dp"
android:layout_marginLeft="9dp"
android:background="#drawable/state_list_cart_badge"
android:gravity="center"
android:includeFontPadding="false"
android:lines="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:text="7" />
</RelativeLayout>
And this is what it looks like:
Use a FrameLayout. It's always called useless but if you ask me it's perfect to lay out one View on top of another.
Quote:
Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.
I would just use a TextView, and set a 9 patch as the background:
You might have to play around with it (I just whipped this up in a minute or two), but something like the very bottom right in the image is what you want. It will be a lot more consistent than dealing with two views.
I have a clickable relative layout with textviews that I want to create an outline around to allow users to realize that it is clickable, but I'm not sure how to go about doing this. Any help would be appreciated.
EDIT: I've already implemented clickability, that is, I'm already able to click it and have it do something. I merely want to draw a box around the layout itself to indicate that it is clickable.
If you just want to draw a frame around a RelativeLayout, you can do that very simply.
Place your RelativeLayout inside of a FrameLayout.
Set the background of the FrameLayout to be whatever color you want the box to be.
Set the padding of the FrameLayout to your desired width for the box
So your XML will look something like this:
<FrameLayout
android:id="#+id/colored_frame"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:padding="10dip"
android:background="#FF0055CC">
<RelativeLayout
android:id="#+id/your_relative_layout"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:padding="10dp"
android:background="#FF000000">
<TextView
android:id="#+id/some_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Relative Layout"
android:textSize="40sp"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/some_text"
android:text="..."
android:textSize="30sp"
/>
</RelativeLayout>
</FrameeLayout>
Now you have a box (in this case blue) around your Relative Layout
Is that what you were looking for?
View have an xml attribute name android:onClick="methodName". LinearLayout, RelativeLayout inherit View. You can set your method name to this attribute. Your method must have this format:
public void methodName(View v){
}
Action method must be public, void and have an parameter type View. Put this method on your context(Activity).
Good luck :)
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>