I added 3 buttons to a Linear Layout, and assign to them an onClick listener in my activity, Two of them shrink and wrap only the text included when running the code,
and the third one shrinks after clicking on it :
The buttons i'm using:
The code i'm using in XML :
<LinearLayout
android:id="#+id/bottomButtons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/LivingRoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ac_button_active"
android:text="Living Room"
android:textSize="20dp"
android:textColor="#00CCCC"
android:layout_marginTop="3dp"
android:layout_marginLeft="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:tag="pressed" />
<Button
android:id="#+id/NoAC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ac_button_inactive"
android:text="No AC"
android:textSize="20dp"
android:textColor="#00CCCC"
android:layout_marginTop="3dp"
android:layout_marginLeft="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:tag="transparent"/>
<Button
android:id="#+id/office"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ac_button_inactive"
android:text="Office"
android:textSize="20dp"
android:textColor="#00CCCC"
android:layout_marginTop="3dp"
android:layout_marginLeft="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:tag="transparent"/>
when ever you use 9-patch images as background, they will be shrinked/adjusted to fit exactly to the Button size. Button size depends on the Text size and it's width.
so use paddings for Button to increase it's size along with margins if you need.
<Button
.......
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
.......... />
Related
I have a relative layouts for some parts of my app, made up of a checkbox, a button, some text, and another button (please see first screenshot, ex: [5min] after screen off [except]).
The problem is for other languages, the text to the left of the last button could be much longer, pushing the "except" button slightly or completely off screen. How else could I do this so that the button (along with the text) wrap around to the next line? Right now only the text does. Here is the code:
<RelativeLayout
android:id="#+id/layout_after_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp">
<Button
android:id="#+id/button_set_time_turn_off"
android:layout_width="wrap_content"
android:layout_height="35sp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
style="?android:attr/buttonStyleSmall"
android:layout_centerVertical="true"
android:textSize="16sp"/>
<TextView
android:id="#+id/textView_data_check_minutes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginStart="3dp"
android:layout_toRightOf="#+id/button_set_time_turn_off"
android:layout_toEndOf="#+id/button_set_time_turn_off"
android:layout_centerVertical="true"
android:textSize="16sp"
android:textColor="#android:color/primary_text_dark"
android:text="#string/text_disable_after_time" />
<Button
android:id="#+id/button_set_disable_exceptions"
android:layout_width="wrap_content"
android:layout_height="35sp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
android:layout_toRightOf="#+id/textView_data_check_minutes"
android:layout_toEndOf="#+id/textView_data_check_minutes"
style="?android:attr/buttonStyleSmall"
android:layout_centerVertical="true"
android:text="#string/button_disable_except"
android:textSize="16sp"/>
</RelativeLayout>
Normal layout:
"except" button pushed off screen:
You can wrap these in a LinearLayout instead since, after all, they are just linear. Then position the LinearLayout how you need to according to your needs.
This will allow you to make use of layout_weight which will make sure that each View only takes up as much space as needed. You would need to play with the weights to get what you want but something like 1|2|1 looks close to what you want.
<LinearLayout
android:id="#+id/layout_after_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp">
<Button
android:id="#+id/button_set_time_turn_off"
android:layout_width="0dp"
android:layout_height="35sp"
android:layout_weight="1"
android:paddingTop="0dp"
android:paddingBottom="0dp"
style="?android:attr/buttonStyleSmall"
android:layout_gravity="center_vertical"
android:textSize="16sp"/>
<TextView
android:id="#+id/textView_data_check_minutes"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_marginLeft="3dp"
android:layout_marginStart="3dp"
android:layout_gravity="center_vertical"
android:textSize="16sp"
android:textColor="#android:color/primary_text_dark"
android:text="#string/text_disable_after_time" />
<Button
android:id="#+id/button_set_disable_exceptions"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="35sp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
style="?android:attr/buttonStyleSmall"
android:layout_gravity="center_vertical"
android:text="#string/button_disable_except"
android:textSize="16sp"/>
</LinearLayout>
Note that I made the width of each "0dp" because you typically need that when using weight for a horizontal layout. I also replaced the android:layout_centerVertical="true" with android:layout_gravity="center_vertical" to match the corresponding attributes of LinearLayout. I also removed the to_right_of and such attributes as those are no longer needed with a LinearLayout.
I haven't tested it but this should get you close.
LinearLayout docs
Another option may be to use the maxWidth property of TextView.
I am developing an app. In that I am getting data from webservice and I am inserting it in TextView. But, the alignment of the textview is getting scrambled. Please check the image.
First 3 rows(black colored) is in proper order, from the 4th it is scrambled. I googled on it so many times but not getting the exact solution as I wanted.
XML Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/schedule_1_textView_day_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KKR"
android:layout_weight="1.5"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_matchno"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
android:layout_weight="1.5"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:text="6"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_team1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:text="4"
android:textSize="7sp"
android:textColor="#color/Black"
/>
<TextView
android:id="#+id/schedule_1_textView_team2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_venue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_blank"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_marginTop="20dp"
android:textColor="#color/Black"
android:textSize="6sp"
android:visibility="invisible"
/>
</LinearLayout>
Try this..
You forget to add android:layout_weight="1" for below two TextView Use android:singleLine="true" for all TextView
<TextView
android:id="#+id/schedule_1_textView_venue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:text="6"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp"
/>
<TextView
android:id="#+id/schedule_1_textView_blank"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:text="B"
android:layout_marginTop="20dp"
android:textColor="#color/Black"
android:textSize="6sp"
android:visibility="invisible"
/>
you might wanna assigh android:layout_weight property to the TextViews like:
<TextView
android:id="#+id/schedule_1_textView_venue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6"
android:layout_marginTop="10dp"
android:textColor="#color/Black"
android:textSize="7sp" />
you will need to assign weight according to your requirement. i.e for bigger views you want to assign higher values.
[EDIT] and for the last TextView you may want to set android:layout_gravity="center|right" and android:layout_gravity="center|left" for the first for the text alignment for the rest you should use android:layout_gravity="center"
Add gravity to your TextView like:
android:gravity="center_vertical|center_horizontal"
change gravity to left, right or center as you need...
have you tried adding weight to schedule_1_textView_venue?
It's a little more work, but did you try using TableLayout? This is very useful tutorial that can help you organizing the correct order of views.
EDIT: I think i know what causes the mismatch of the TextViews. It comes from the different length of the values in your last column named VENUE. Take for example the values HYDEBARAD and DELHI - the first one is much longer than the second which makes all the TextViews on the row to go left. I am sure that if you put identical padding to the TextViews you will align them. For example: take your TextViews in MATCH column and write the following: myTextView.setPadding(40, 0, 0, 0) (padding on the left side) this will put them exactly in a straight row. Do the same with the rest TextViews with the proper padding value, take into consideration the length of the values in the other columns... It is a little bit tricky though. :)
Is there a way to specify that a view should lie strictly to the left of the center (or strictly to the right of the center)? I have two textviews, one for LOGIN and one for REGISTER. I have them as children of RelativeLayout. No matter what I do I can't get them to behave. The one configuration that works in the Graphical Layout of eclipse, only shows the registration button on a real device. Here it is
<RelativeLayout 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="#drawable/login_bckg"
android:padding="10dip"
tools:context=".LoginActivity" >
...
<View
android:id="#+id/center_btns"
android:layout_width="1dp"
android:layout_height="20dp"
android:layout_below="#id/text_fields"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/login_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="login"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Login"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/register_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="register"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
...
</RelativeLayout>
If I set them as children of a horizontal linearLayout, how do I specify their relationship to get it to work? I already tried that and no avail.
I wish I could post this as a comment but I don't quite have the rep... Anyway, to clarify, do you want the items to be right next to each other on the same line? If so the LinearLayout should work just fine...
<LinearLayout
...android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
/>
Should work just fine. If not you may try playing with weights depending on which one you want to take up more space. For weights to work you will need to see the width of both to fill_parent.
I have this layout inside of a RelativeLayout:
<LinearLayout
android:id="#+id/llWatchItemCommentButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/myMasterCat_Item"
style="#style/DropShadowEffect"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="99"
android:shadowColor="#ffffff"
android:text="Item"
android:textColor="#515b61"
android:textSize="22sp" />
<ImageView
android:id="#+id/bFollowComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/featured_button_selector"
android:padding="5dp"
android:src="#drawable/comment" />
</LinearLayout>
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />
Essentially, if that TextView in the Layout becomes two lines, it will overlap with the TextView positioned below theLinearLayout`.
Is there an attribute perhaps that could correct this? As in, I want the bottom TextView to be below the entire LinearLayout at all times, even if it begins to grow. Right now, the position appears fixed.
Have you tried the following:
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/llWatchItemCommentButton" //add this line in
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />
I'm trying to create a button based menu using relative layout. I am trying to lay them out in a grid formation using the
android:below=""
android:above=""
android:toLeftOf=""
android:toRightOf=""
commands
I tried to add one more button below the three buttons I already had, but instead of the buttons resizing to fit the parent the fourth button instead drops below the screen edge. Is there a work around for this because I don't want buttons to appear missing on smaller screens. Here is my layout
<RelativeLayout android:id="#+id/level1layout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_horizontal">
<Button android:id="#+id/OneLevel1Button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:text="1"
android:textSize="25dp"
android:background="#drawable/warpbutton"
android:visibility="gone"/>
<Button android:id="#+id/OneLevel2Button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_below="#id/OneLevel1Button"
android:text="2"
android:textSize="25dp"
android:background="#drawable/warpbutton"
android:visibility="gone"/>
<Button android:id="#+id/OneLevel3Button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_below="#id/OneLevel2Button"
android:text="3"
android:textSize="25dp"
android:background="#drawable/warpbutton"
android:visibility="gone"/>
<Button android:id="#+id/OneLevel4Button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_below="#id/OneLevel3Button"
android:text="4"
android:textSize="25dp"
android:background="#drawable/warpbutton"
android:visibility="gone"/>
</RelativeLayout>
The visibilities are set to gone by default because they are hidden deeper in the menu system on start up.
Have you considered using a GridLayout? http://developer.android.com/reference/android/widget/GridLayout.html
At OP's suggestion, a very helpful site creating a custom ButtonAdapterfor aGridView.