how to place text on button at edges in android - android

I want to place text in a button on the extreme edges that is
Click on the left part of the button and Here on the right part of the button. How this can be achieved.
i have used the TAGandroid:text="Click Here", as the button is on the full screen i want these words to be at extreme edges

Use the below RelativeLayout. You can customize the values. Here you can make all of the RelativeLayout and TextViews act like a button by setting them OnClickListeners.
<RelativeLayout
android:id="#+id/mybutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:background="#3983B1" >
<TextView
android:id="#+id/leftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Click"
android:textColor="#ffffff" />
<TextView
android:id="#+id/rightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Here"
android:textColor="#ffffff" />
</RelativeLayout>
The layout looks like:

Related

Textview next to an ImageView

I am trying to have a TextView with an ImageView directly to its right. Right now the image partially overlaps the far right of the text, so if the text inputted is long, then the image is "over" the text. I have an ellipse setting on the text but I need the TextView to "stop" right at the left border of the ImageView.
TextView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
ImageView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv"
android:singleLine="true"
android:maxLines="1"
android:ellipsize="end"
.... />
<!-- background == #null if you don't want default button background -->
<ImageButton
android:id="#id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="3dp"
android:background="#null"
.... />
</RelativeLayout>
EDIT
See the comments in regards to why this works and the posted question doesn't. Also take a look at
Android Relative Layout alignParentRight and alignParentEnd
for a reference to end/right and start/left attributes.

How do you remove the extra inner padding inside a Spinner button in an Android layout?

I am trying to create a Button that looks like a Spinner.
I have done this by creating a Button like this:
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
android:textSize="15sp"
style="?android:attr/spinnerStyle"
android:gravity="center_vertical|center_horizontal" />
The problem is that the text ("default text") inside the Button seems to have extra padding around it, which makes the Button look bloated and expanded in its height.
I thought that setting the layout_height for the button to "wrap_content" would fix this and make the button thinner, but it does not have any effect.
Does anyone know how to make this button's height wrap to the text inside it?
Here is the example code:
<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_marginLeft="10dp" >
<TextView
android:id="#+id/dateLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="Select date:"
android:textSize="15sp" />
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
android:textSize="15sp"
style="?android:attr/spinnerStyle"
android:gravity="center_vertical|center_horizontal" />
</RelativeLayout>
android:gravity="center_vertical|center_horizontal" instead of this you can write
android:gravity="center" but as per your requirment just remove this line.do not add any gravity and change your height size android:layout_height="40dp"
i changed your code
<Button
android:id="#+id/dateButton"
android:layout_width="150dp"
android:layout_height="35dp"
android:layout_toRightOf="#+id/dateLabel"
android:text="default text"
style="?android:attr/spinnerStyle"
/>
The padding of this button is decided by the drawable of it. You either need to change the spinner drawable (can be done at runtime) , or provide your own drawable to the given button that would make it look like a spinner, without using the default one

Button size and padding within RelativeLayout

I'm attempting to create a a Heading + button similar to the Google Music App, e.g. where there is a "Songs" Header on the Left and then on the right there is a Button with the text "X more"..
I've using a RelativeLayout for the TextView and Button
My problem is that the button is taking up the size of the layout that contains the text the height is all wrong and the padding doesn't seem to do anything.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
[REMOVED for clarity]
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/list_foreground"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/photo_button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#color/actionbar_background"
android:padding="10dp"
android:text="test" />
</RelativeLayout>
What am I doing wrong here?
RelativeLayouts are designed to have children in the layout "relative" to each other. In other words, if you want the Button to the right of the Textview, you need to tell it.
Because you are aligning relative to the parent LEFT / RIGHT, it appears that things are "kind of" working.
You may be better off with a LinearLayout, depending on your needs. LinearLayouts use "orientation" not RelativeLayouts.
You should look over some tutorials (like this one: http://mobile.tutsplus.com/tutorials/android/android-layout/) but ultimately you will probably put your button in first and then your text view so that the textview content will wrap appropriately.
To get the same effect as the Music App I ended up using a RelativeLayout but instead of a Button I'm using another TextView, this is giving the impression it's a button but it gives me more scope to format the background etc. I think just setup a OnClickListener in the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/photo_title">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/more_photo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#color/actionbar_background"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="10 MORE"
android:textColor="#color/button_text"
android:textSize="12sp" />
</RelativeLayout>

Relative Layout giving a lot of trouble

Here's the code:
<RelativeLayout
android:id="#+id/tc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tc"
android:layout_marginLeft="185dip"
android:layout_marginTop="25dip"
>
<ImageView
android:id="#+id/tc_icon"
android:background="#drawable/count_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/tc"
android:layout_mar
/>
<TextView
android:id="#+id/tc_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:text="1"
android:layout_gravity="bottom"
android:textColor="#f7e906"
android:textStyle="bold"
/>
</RelativeLayout>
I have somehow managed to make the image and the text views overlap each other (which I wanted). Now, I want them to be placed to the bottom left corner of their parent RelativeLayout (with id 'tc').... However, they just wouldn't move.
If I used alignParentBottom.... the entire relative layout stretches across the screen and aligns to its parent relativeLayout.
Please help. Thanks! :)
If you wanna overlap an image and a textview, simplw use a android:drawableleft or ony position where you want.
For example:
<TextView
android:id="#+id/tc_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:text="1"
android:layout_gravity="bottom"
android:textColor="#f7e906"
android:textStyle="bold"
android:drawableleft="#drawable/yourimage.jpg"/>
This will give you an image on the left of your textview. Check it out

RelativeLayout Three Buttons Centered Above TextViews

So in my layout, I've got three buttons on the same line, one left, center and right aligned. I also have TextViews below the buttons to serve as labels, but they too are aligned left, center and right respectively. I'd like them to instead be centered below the buttons and on the same line as one another, but I can't figure out how to do this without explicitly setting coordinates, which will then break on some phones. I tried setting various weights and layout options, but it just doesn't work how I'd like. Is there a way to do this in a RelativeLayout? Or maybe it's just not possible. Finally, I've got more three TextViews on the same line and one button on the bottom. I would like to align as shown bellow:
http://imgur.com/vYuqk
Thanks in advance.
You can't center one element below another with RelativeLayout. You could try a horizontal LinearLayout with three RelativeLayouts (one for each column). You could contain the whole thing in a vertical LinearLayout to get the bottom button.
TableLayout or GridLayout are possibilities as well.
As people suggested, there is no way to center a View below another View in RelativeLayout. You could maybe use this hack if you can confirm that the TextView width need not be more the Button width. The solution is: you make the TextView align its left and right edge to the Button above. Then set the gravity of the TextView to center so that the text inside TextView is centered.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="130dp"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_centerHorizontal="true"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_alignParentRight="true"
android:text="Button3" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button1"
android:layout_alignRight="#id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt1" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button2"
android:layout_alignRight="#id/button2"
android:layout_below="#+id/button2"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt2" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button3"
android:layout_alignRight="#id/button3"
android:layout_below="#+id/button3"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt3" />
</RelativeLayout>

Categories

Resources