Evenly spacing buttons with layout_weight but having a maxWidth - android

I have 4 buttons that I space out evenly using layout_weight="1" and layout_width="0dp". However, on large tablet layouts the buttons are too spread out and looks ugly, so I want to set a maxWidth for all of them, and having empty spaces on both sides of the entire LinearLayout instead (so the four buttons are clustered to the center). However, crawling through StackOverflow, many say they don't work together. Is there a way for me to achieve what I want to do above?
tl;dr:
Below a certain width (say, 100dp), all 4 buttons are spaced evenly.
If layout requires buttons to be bigger than 100dp, all 4 buttons are set to 100dp width and stick together, leaving space on both sides of the layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/layout_height"
android:background="#drawable/layout_background"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/button_background"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/button_background"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/button_background"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/button_background"/>
</LinearLayout>

Try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/layout_height"
android:background="#drawable/layout_background"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxWidth="100dp"
android:background="#color/button_background"/>
</LinearLayout>
</LinearLayout>
A simple hack could be
Wrap your button with a Linear layout and set weight to this layout
Set max width to button inside this sub layout

try this one `
<Button
android:background="#color/button_background"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:layout_weight="1"
android:layout_width="0dp" />
<Button
android:background="#color/button_background"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:layout_weight="1"
android:layout_width="0dp" />
<Button
android:background="#color/button_background"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:layout_weight="1"
android:layout_width="0dp" />
<Button
android:background="#color/button_background"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:layout_weight="1"
android:layout_width="0dp" />
`
add margin to each button as you want .

Related

Xamarin:Android - Layout_Height changes with wordwrap

I have three identical buttons in one linear layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Kamera öffnen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Bild hochladen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Abbrechen" />
</LinearLayout>
If I turn my device from horizontal to vertical, the text of the first two buttons need a wordwrap.
The problem is, that the buttons change their height -> the two buttons with wordwrap have a lower height than the third button with only one text line.
Horizontal view:
Vertical view:
Why is that happening and how can I prevent it?
Hope this following xml will resolve your problems.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android"
android:weightSum="3">
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Kamera öffnen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Bild hochladen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Abbrechen" />
Use weightSum on root layout while your are using layout_weight coz it will make conflict when you have more view or complex view. You should also use layout_width/height="0dp" depending on root layout orientation for getting the advantage of layout_weight. Because you trying to control your view using weight. Thank you

How to programically shrink a button and rearrange the rest of the layout accordingly?

I have a layout across the bottom of my screen with 4 buttons and a Space in the center. The space is there for a FAB to be displayed above it, but when the layout is hidden, I want to shrink the space in the center to 0dp so that the 4 buttons span evenly across the screen.
I tried using a ViewPropertyAnimator to scale the width to 0, but it does not work.
How can I shrink and expand the space in the center of the 4 buttons programatically (and ideally, animated), such that the 4 buttons will resize and move according to the size of the space?
The layout code I'm using is:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/background"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/button_background" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/button_background" />
<Space
android:id="#+id/space"
android:layout_width="100dp"
android:layout_height="match_parent" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/button_background" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/button_background" />
</LinearLayout>
Set it's visibility to GONE
<Space
android:id="#+id/space"
android:layout_width="100dp"
android:layout_height="match_parent"
android:visibility="gone" />
and the simpler animation method it's to add this line to the root tag of the Layout XML file:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/background"
android:orientation="horizontal"
android:animateLayoutChanges="true">

Can't get android layout to do what I want

I've spent years working with GridBagLayout in java, so I thought setting up a simple layout would be easy. After hours of fiddling with nested LinearLayouts, reading tutorials, and looking at RelativeLayout, I'm getting nowhere.
Below is what I want my main menu to look like. I assume this is possible to do, but many things do not make sense to me, for instance increasing weights seems to decrease the amount of space that a View takes up?
One thing I'm considering doing is just using a relative layout, laying everything else without caring about sizes, and then just setting the sizes in my onCreate since I'll know the size of the display and I can just set each element a certain number of pixels. Is that considered bad practice?
I'm just trying to create a layout with a title on top (the text as large it is can be to fill the width of the screen). That should take up the top 30%. Then the next 50% contains two buttons on the left, an area where I want to draw some animations (I assume using a SurfaceView is a good idea), and then two more buttons on the right.
The remaining 20% will be for a banner ad once I figure out how to add those in.
Is this possible to do? Can anyone show me some XML for this?
So thanks to Alok Nair, this was not hard to do ... I just had to set the sizes to 0px and let the layout weights take care of the sizing.
This is what it ended up being:
<LinearLayout
android:background="#drawable/main_menu_background"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="top"
android:id="#+id/mainSectionMenu"
>
<TextView
android:layout_width="match_parent"
android:layout_height="0px"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="LUNA PUMA"
android:id="#+id/mTitleText"
android:layout_gravity="center"
android:textColor="#ffffffff"
android:autoText="false"
android:textSize="50dp"
android:layout_weight=".3"
android:gravity="center"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight=".5">
<LinearLayout
android:orientation="vertical"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight=".25">
<Button
android:layout_width="wrap_content"
android:layout_height="0px"
android:text="Easy"
android:id="#+id/mEasyButton"
android:layout_gravity="center"
android:layout_weight=".5"
android:background="#android:color/transparent"
android:textColor="#ff000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="0px"
android:text="Medium"
android:id="#+id/mMediumButton"
android:layout_gravity="center"
android:layout_weight=".5"
android:textColor="#ff000000"
android:background="#android:color/transparent"/>
</LinearLayout>
<SurfaceView
android:layout_width="0px"
android:layout_height="match_parent"
android:id="#+id/mAnimationSurfaceView"
android:layout_weight=".5"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight=".25"
>
<Button
android:layout_width="wrap_content"
android:layout_height="0px"
android:text="Hard"
android:id="#+id/mHardButton"
android:layout_gravity="center"
android:layout_weight=".5"
android:textColor="#ff000000"
android:background="#android:color/transparent"/>
<Button
android:layout_width="wrap_content"
android:layout_height="0px"
android:text="More ..."
android:id="#+id/mMoreButton"
android:layout_gravity="center"
android:layout_weight=".5"
android:background="#android:color/transparent"
android:textColor="#ff000000"/>
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight=".2">
</FrameLayout>
</LinearLayout>
You will have to use a combination of layouts, and to achieve this you can use either use android:layout_weight parameters to your views or use Android Percent Support Library.
With layout_weight you can specify a size ratio between multiple views. E.g. you have a view1 and a view2. The view1 should use 3/4 of the screen and view2 should use 1/4 of the screen. Then you will set the layout_weight of the view1 to 3 and the layout_weight of the view2 to 1.
To get it work you also have to set the height or width (depending on your orientation) to 0px.
The Android Percent Support Library allows to specify dimensions of views in terms of percentages instead of absolute numbers, or weights.
The library consists of two main layouts which allow nested views to specify percentage based layouts: PercentRelativeLayout and PercentFrameLayout which work much like their non-Percent counterparts.
Once you've incorporated one of these containers into your layout you can then specify attributes in percentages such as app:layout_widthPercent or app:layout_marginTopPercent="25%".
For using it in your app, just add percent support library to your project
dependencies {
compile 'com.android.support:percent:22.2.0'
}
Here is an example layout using this lib:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
style="#style/match"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
style="#style/block"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.percent.PercentRelativeLayout
android:layout_marginTop="?attr/actionBarSize"
android:clickable="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/row_one_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#5182bb"
app:layout_heightPercent="15%"
app:layout_widthPercent="30%" />
<View
android:id="#+id/row_one_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#+id/row_one_item_one"
android:background="#396190"
app:layout_heightPercent="15%"
app:layout_widthPercent="30%" />
<View
android:id="#+id/row_one_item_three"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#+id/row_one_item_two"
android:background="#8fb5e1"
app:layout_heightPercent="15%"
app:layout_widthPercent="40%" />
<View
android:id="#+id/row_two_item_one"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/row_one_item_one"
android:background="#d89695"
app:layout_heightPercent="15%" />
<View
android:id="#+id/row_three_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_two_item_one"
android:background="#f9c093"
app:layout_heightPercent="20%"
app:layout_widthPercent="40%" />
<View
android:id="#+id/row_three_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_two_item_one"
android:layout_toRightOf="#+id/row_three_item_one"
android:background="#948957"
app:layout_heightPercent="10%"
app:layout_widthPercent="60%" />
<View
android:id="#+id/row_four_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_three_item_one"
android:background="#ccc2d9"
app:layout_heightPercent="20%"
app:layout_widthPercent="40%" />
<View
android:id="#+id/row_four_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_three_item_two"
android:layout_toRightOf="#+id/row_four_item_one"
android:background="#c3d59e"
app:layout_heightPercent="25%"
app:layout_widthPercent="60%" />
<View
android:id="#+id/row_five_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_four_item_one"
android:background="#948957"
app:layout_heightPercent="10%"
app:layout_widthPercent="40%" />
<View
android:id="#+id/row_five_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_four_item_two"
android:layout_toRightOf="#+id/row_five_item_one"
android:background="#e6e0ec"
app:layout_heightPercent="10%"
app:layout_widthPercent="60%" />
<View
android:id="#+id/row_six_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_five_item_one"
android:background="#f9c093"
app:layout_heightPercent="20%"
app:layout_widthPercent="20%" />
<View
android:id="#+id/row_six_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_five_item_one"
android:layout_toRightOf="#+id/row_six_item_one"
android:background="#588fd3"
app:layout_heightPercent="20%"
app:layout_widthPercent="20%" />
<View
android:id="#+id/row_six_item_three"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="#+id/row_five_item_two"
android:layout_toRightOf="#+id/row_six_item_two"
android:background="#a6a6a6"
app:layout_heightPercent="25%"
app:layout_widthPercent="60%" />
</android.support.percent.PercentRelativeLayout>
You can get idea from this and use it to implement for your design requirements.

Center text vertically independently of View height?

I'm doing my best to center the text vertically but I cannot manage to do it. The problem is that I have rows of buttons with height=fill_parent and weight=1 and as the rows become smaller my text starts touching the bottom of the view as seen here:
I tried removing the padding, margin, changing the height and so on. But nothing seems to do it.
How can I align it vertically even when the text size is close the the view height?
Here's the code for the view containing number 5:
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="5"
android:layout_weight="1"
tools:ignore="HardcodedText"
android:clickable="false"
android:textSize="90dp"
android:textColor="?attr/color1"
android:gravity="center"
android:paddingLeft="#dimen/normal_margin"
android:paddingRight="#dimen/normal_margin"
android:padding="0dp" />
As per my advice if you have two options to make such layout and getout from the issue you are having.
1. Use GridView
Using gridview you will have equal space in all four directions(left, right, top, bottom). You dont have to worry about the equal spacing for the grid item.
<GridView
android:id="#+id/album_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:cacheColorHint="#00000000"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="spacingWidthUniform"
android:drawSelectorOnTop="true"/>
Just try above code with which you will have all view equally distributed in the grid.
2. Use TableLayout and TableRow
Please check below code to use TableLayout and TableRow with its attribute to have all view equally arranged. Even if you smaller the height and width of the TableLayout, it will remain equally arranged in that view.
<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="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_margin="5dp">
<TableRow android:weightSum="3"
android:layout_weight="1" android:gravity="center">
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
</TableRow>
<TableRow android:weightSum="3" android:layout_weight="1" android:gravity="center">
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
</TableRow>
<TableRow android:weightSum="3" android:layout_weight="1" android:gravity="center">
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
<Button android:gravity="center"
android:textSize="13sp" android:textColor="#000000"
android:text="1" android:layout_weight="1"/>
</TableRow>
</TableLayout>
Please find output of this TableLayout.
Let me know if this issue is resolved. If not, I will be happy to help you again.
Enjoy Coding... :)
If this button is inside a linearlayout with vertical orientation. Since you define the weight, you want to make the height to be "0dp" instead of "fill_parent".
To make the text center vertical. Did you try android:gravity:"center_vertical"?
Try this
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_below="#+id/dialer_title"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2" >
<ImageButton
android:id="#+id/btn1"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_1"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_1_no_vm" />
<ImageButton
android:id="#+id/btn2"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_2"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_2" />
<ImageButton
android:id="#+id/btn3"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_3"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2" >
<ImageButton
android:id="#+id/btn4"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_4"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_4" />
<ImageButton
android:id="#+id/btn5"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_5"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_5" />
<ImageButton
android:id="#+id/btn6"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_6"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2" >
<ImageButton
android:id="#+id/btn7"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_7"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_7" />
<ImageButton
android:id="#+id/btn8"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_8"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_8" />
<ImageButton
android:id="#+id/btn9"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_9"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_9" />
</LinearLayout>
<LinearLayout
style="#style/DialPadRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2" >
<ImageButton
android:id="#+id/btnStar"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_astr"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_star" />
<ImageButton
android:id="#+id/btn0"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_0"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_0" />
<ImageButton
android:id="#+id/btnHash"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_hash"
android:scaleType="centerCrop"
android:soundEffectsEnabled="false"
android:src="#drawable/dial_num_hash" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2" >
<ImageButton
android:id="#+id/btnContacts"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/string_menu_contacts"
android:scaleType="centerCrop"
android:soundEffectsEnabled="true"
android:src="#drawable/selector_dial_contact_b" />
<ImageButton
android:id="#+id/btnCall"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/string_menu_call"
android:scaleType="centerCrop"
android:soundEffectsEnabled="true"
android:src="#drawable/dial_num_call" />
<ImageButton
android:id="#+id/btnDelete"
style="#style/DialPadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.33"
android:contentDescription="#string/desc_backspace"
android:scaleType="centerCrop"
android:soundEffectsEnabled="true"
android:src="#drawable/dial_num_delete" />
</LinearLayout>
</LinearLayout>
This will create phone dealer with equal button size.
For style="#style/DialPadButton" create style with name DialPadButton and customize buttons as you want. In my case I have added item name="android:layout_margin" with value 5dp.
design this using a grid view you will have some more functionality. else take one Linear Layout inside that set another three linear layout orientation horizontal and weight sum= 3 ,put each button on the child layout and give layout weight =1 for each button.
It does not mean that the text "5" is not centered. The text "5" appears slightly below center because the button is not given enough space to layout its text content. Even though it is provided the adequate height, the text "5" will appear slightly above center. This is because, there are characters('y', 'g', etc) with larger descent than "5" (maximum possible ascent and descent are considered during layouting the text even tough your text contains no taller glyph or glyph with non zero descent). Also see this.
If more height is provided for the buttons in row, they will neatly center align their texts.
I would suggest using a TextView instead of a Button, because that has less tricky margins and gives you more control on how to place your Text. (In general I only seldom use buttons, but tend to make other views TextView, ImageView,... clickable instead)
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="5"
android:layout_weight="1"
tools:ignore="HardcodedText"
android:clickable="false"
android:textSize="90dp"
android:textColor="?attr/color1"
android:gravity="center"
android:paddingLeft="#dimen/normal_margin"
android:paddingRight="#dimen/normal_margin"
android:padding="0dp" />
In case you need some kind of indication on whether or not the TextView was pressed, you can add a selector as a background.
For this, have a look here.
Finally if you want your text to fit for any possible view sizes, have a look at the AutoFitTextView.
I think the simplest way to achieve this by using AutoFitTextView
You can get this library from this link : https://github.com/grantland/android-autofittextview
It will dynamically resize text size with current height and width.
I hope this will help you.
Good Luck.
Try to use a negative top padding, for example:
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="5"
android:layout_weight="1"
tools:ignore="HardcodedText"
android:clickable="false"
android:textSize="90dp"
android:textColor="?attr/color1"
android:gravity="center"
android:paddingLeft="#dimen/normal_margin"
android:paddingRight="#dimen/normal_margin"
android:paddingTop="-2dp" />
You can play with that, and get the necessary value for top padding. Of course, you can use different values for different screen densities by using #dimen.
you can't use upper spacing for centering because it belongs to font. I mean every font has ascent and descent metric. See pic below.
so when android centers text it calculates it's overall height (including upper nad bottom spacing). And than centers resulted rect. You can get FontMetrics to see font acsent and descent values.
E.g. calling Paint.FontMetrics fm = textView.getPaint().getFontMetrics();we get:
fm = {android.graphics.Paint$FontMetrics#3668}
ascent = -25.976562
bottom = 7.5878906
descent = 6.8359375
leading = 0.0
top = -29.572266
Intresting? So how to remove top and bottom spacing and use this space to center font? I see two solutions:
create custom component and layout text excluding those spacings. If
you want only single line text it will be easy. See TextView code.
we know spacings, so we can move text accordingly. Set translation to
a Button content. To remove top spacing you can do:
button.setTranslationY(fm.top - fm.ascent); If you want text centered
without spacing, do following: button.setTranslationY((fm.top - fm.ascent) + (fm.bottom - fm.descent));

Android - how to make sure the header fits all the buttons?

I have a header that I am working on and I got the buttons to render in a single row, but one button does not fit on the screen and there is a space between the buttons.
Here is my layout for the header so far:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/home"
android:layout_width="0dp"
android:orientation="horizontal"
android:layout_height="10dp"
android:layout_weight="1"
android:text="Home"
/>
<Button android:id="#+id/questions"
android:layout_width="0dp"
android:layout_height="10dp"
android:orientation="horizontal"
android:layout_weight="1"
android:text="Questions"
android:layout_toRightOf="#+id/home" />
<Button android:id="#+id/businesses"
android:layout_width="0dp"
android:layout_height="10dp"
android:orientation="horizontal"
android:layout_weight="1"
android:text="Businesses"
android:layout_toRightOf="#+id/questions"
/>
<Button android:id="#+id/learn"
android:layout_width="0dp"
android:layout_height="10dp"
android:layout_weight="1"
android:orientation="horizontal"
android:text="Learn"
android:layout_toRightOf="#+id/businesses"
/>
<Button android:id="#+id/extra_help"
android:layout_width="0dp"
android:layout_height="10dp"
android:orientation="horizontal"
android:layout_weight="1"
android:text="Help"
android:layout_toRightOf="#+id/learn"
/>
</LinearLayout>
How can I make each button smaller, and make it so there is no space between them? Also, what is some devices have narrower screens? How do I make sure the header fits into all the screens?
Thanks!
You could use a LinearLayout and set each of the Button's layout_width to 0dp and layout_weight to 1. That way, the entire space of the LinearLayout would be equally distributed among your Buttons.
Use RelativeLayout instead of LinearLayout. Than whichever screen you have it will fit in properly.

Categories

Resources