Android buttons equal width - android

I need to have 2 buttons which wrap content but always stay same equal in width.
I want BUTTON 1 stretch to the width of BUTTON 2. Or if BUTTON 1 Would be wider I would need BUTTON 2 to stretch to the width of BUTTON 1
How can I achieve this? I tried using LinearLayout with weights, but it only works if linear layout width matched parent, which makes buttons unnecessary wide.

To make both the button identical you have to calculate width of both the button like this
ViewTreeObserver vto1 = button1.getViewTreeObserver();
vto1.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
width = button1.getWidth();
height = button1.getHeight();
}
});
ViewTreeObserver vto2 = button2.getViewTreeObserver();
vto2 .addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
width = button2.getWidth();
height = button2.getHeight();
}
});
then compare both the button height and set the larger one to both the buttons.

Try this!!! This may help...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2"/>
</LinearLayout>
This will give the output as,

Use Linear Layout Weight Attribute
First Enclose Both Buttons In Linear Layout And give them horizontal orientation.
Then Give Them Equal Weights
android:layout_weight="1"
Try This Result

While Ajay's answer is right, but it requires you to remove the listener once you are done with it.
ViewTreeObserver vto2 = button2.getViewTreeObserver();
vto2 .addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
width = button2.getWidth();
height = button2.getHeight();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
myView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
else {
myView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
}
});

I'm answering an old question, but there exist a one line solution.
Add android:layout_width="0dip" to both (i.e. all) buttons definitions in .xml file.
Another (alternative) solution is to add android:layout_width="fill_parent" to both (all) buttons definitions.

Related

Button disappears when increasing its height

I try to create square buttons. When increasing the button's height, it disappears. However, when increasing it's width, everything works fine. What's going on there?
private void adjustButtons() {
final Button trainerButton = (Button) findViewById(R.id.bu_vocabulary_start_trainer);
trainerButton.setOnClickListener(new Button.OnClickListener() {
#Override
public void onClick(View arg0) {
ViewGroup.LayoutParams params = shareButton.getLayoutParams();
// params.width++; // works fine
params.height++; // button disappears
// params.height = params.width; // what I acutually want to do
shareButton.setLayoutParams(params);
}
});
}
The xml file
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="30dp"
android:orientation="horizontal" >
<Button
android:id="#+id/bu_vocabulary_start_trainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/vocabulary_trainer" />
<Button
android:id="#+id/bu_vocabulary_start_administration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/vocabulary_administration" />
</LinearLayout>
try this,
private void adjustButtons() {
final Button trainerButton = (Button) findViewById(R.id.bu_vocabulary_start_trainer);
trainerButton.setOnClickListener(new Button.OnClickListener() {
#Override
public void onClick(View arg0) {
LinearLayout.LayoutParams params = shareButton.getLayoutParams();
// params.width++; // works fine
params.height++; // button disappears
// params.height = params.width; // what I acutually want to do
shareButton.setLayoutParams(params);
}
});
}
you should use dp number for your height and weight.
height++ doesn't work for wrap_content
First of all, WRAP_CONTENT is just an integer value, which maps to -2. Increasing it would change it to -1, which is MATCH_PARENT.
You see the situation now? Your LinearLayout has height WRAP_CONTENT. This means "make its height as large as need be to contain its children". If the children are set to MATCH_PARENT, that would mean "make them as large as their parent". This situation is resolved by making both parent and children 0 pixels high. Hence, they "disappear".
What you could do, though, is something like:
params.height = shareButton.getHeight() + 1;
This line might help you:
button.setLayoutParams (new LayoutParams(LayoutParams.WRAP_CONTENT, yourheight++);

Custom View and Layout Animation android

I have a layout which at start has '0dp' width but when a button is clicked it animates from Left to right and its width is increased accordingly. In this layout I am initializing a custom view. The view is initialized correctly when I place it at right or at centre but when I place it on the left it's not shown.
Here is my XML:
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:background="#drawable/bg">
<com.example.Wheel
android:id="#+id/wheel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" >
</com.example.Wheel>
</RelativeLayout>
And here is what I do in java:
MenuListLeft = (RelativeLayout) findViewById(R.id.ControlLayout);
openButton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
if (isExpandedLeft) {
isExpandedLeft = false;
MenuListLeft.startAnimation(new CollapseAnimationLTR(MenuListLeft, 0,(int)(screenWidth*1), 5));
}
else {
isExpandedLeft = true;
MenuListLeft.startAnimation(new ExpandAnimationLTR(MenuListLeft, 0,(int)(screenWidth*1), 5));
init();
}
}
});
You would be better of using weights in a combination of Relative and Linear Layout rather than just in a Relative Layout.
Here...
weight = 0 gets you no space expansion. Try setting it to 1.
In case you want to understand more on how weight works:
http://teamdroid.wordpress.com/2012/06/06/android-layout-weight-explained/
Also, for your case, wouldn't a View.Visibility GONE, VISIBLE...with animation may work better.

Dynamically setting relative dimension of a linearlayout

I want to resize my LinearLayout (or a view) to a dimension which is relative to the parent or itself. For example, I want the width to be 1/3 of the parent's width. Or, the height should be same as its own width. I don't want to use any constants , so that it works for all devices.
adding code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<LinearLayout android:id="#+id/ll_board"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
...
</LinearLayout>
code:
public class GMActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
LinearLayout board_layout = (LinearLayout)findViewById(R.id.ll_board);
// I wanted to resize board_layout here ..
// getParent().getWidth() returns 0
Log.d("gm", "layout: " + ((LinearLayout) board_layout.getParent()).getWidth());
// ..
}
}
getWidth() is giving 0. Is it too early to call this? If yes, what is the correct place to call this?
Basically my intention is to make the width of the layout a fraction of the screen size width, and, height same as its own width.
Considering layout your LinearLayout and that its parent it's another LinearLayout:
Get the parent's width:
int parentWidth = ((LinearLayout) layout.getParent()).getWidth();
Get the view's width:
int viewWidth = ((LinearLayout) layout).getWidth();
set the
view.setHeight(viewWidth );
view.setWidth(parentWidth / 3);
I found height=width solution (square shaped layout) in LinearLayout in Square Form

How to measure the width of view in android

I am having two text views in Linear layout having horizontal orientation. Width of text views are wrap_content. If the sum of width of two text views is less than the screen width it is fine. If the sum of width exceeds the screen width then i need to change the orientation from horizontal to vertical.
I tried using getWidth() in onCreate of the activity but it returned 0. I can try creating a custom view with onSizeChanged() function but i am using two text views so i am not sure that when onSizeChanged() in one text view will not make sure that the other textview is fully drawn to get the width. Any suggestions is really helpful for me.
<LinearLayout android:id="#+id/status_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal">
<TextView android:id="#+id/view1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView android:id="#+id/view2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
// In OnCreate() function
TextView view1 = (TextView) findViewById(R.id.view1);
TextView view2 = (TextView) findViewById(R.id.view2);
view1.setText("Good Morning,");
view2.setText("I am Ron");
int view1_width = view1.getWidth();
int view2_width = view2.getWidth();
if ((view1_width + view2_width) > screen_width) {
// Change the Linear Layout orientation to Vertical
}
Here view1_width and view2_width are returning 0. I want to check if the view1_width + view2_width is greater than the screen width then i need to change the orientation into vertical, or else Horizontal orientation is fine.
-Ron
Add this to your activity's onCreate
ViewTreeObserver vto = layout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
//You should be able to get the width and height over here.
layout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
});

How do I calculate the required height of a GridView that is inside of a ScrollView on Android?

I have a GridView inside of a LinearLayout inside of a ScrollView that pages in data from the server. Beneath the GridView is a button to load more data. My GridView will have an ultimate height that is larger than the screen. If I set the height of my GridView to either wrap_content or parent_fill, it sizes itself to the exact available on-screen height and does not scroll at all, cropping out the extra rows. If I explicitly set the layout_height to something large, like 1000dip, scrolling behaves properly, however I cannot predict the final height of my scroll view apriori.
How do I programmatically determine the necessary height of a GridView to get the desired behaviour?
Here is my layout below. As you can see I set the height to 1000dip, but that is bogus, I need that value to get set automatically/programmatically:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_weight="1"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid"
android:layout_width="fill_parent"
android:layout_height="1000dip"
android:columnWidth="70dp"
android:numColumns="auto_fit"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:background="#000000"
android:layout_weight="1"
/>
<Button
android:id="#+id/load_more"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Load More Foo"
/>
</LinearLayout>
</ScrollView>
Here is one way to do this, if someone needs it. A bit of a hack but does the trick. You have to set GridView initially big enough for all the views (e.g. 10000dip)
final GridView imageContainer = // your GridView
imageContainer.getViewTreeObserver().addOnGlobalLayoutListener( new OnGlobalLayoutListener()
{
#Override
public void onGlobalLayout()
{
imageContainer.getViewTreeObserver().removeGlobalOnLayoutListener( this );
View lastChild = imageContainer.getChildAt( imageContainer.getChildCount() - 1 );
imageContainer.setLayoutParams( new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, lastChild.getBottom() ) );
}
});
I know it's an old case, but I had a similar problem where my ScrollView contained multiple LinearLayouts, which in their turn contained a header and a GridView.
Basically I made categorised sections with headers containing images belonging to that category.
The GridView had to have a flexible height.
I found a lot of answers about overriding onMeasure(), but it worked only on some devices, not all. The height would eventually be 1, or 3 or just 0, displaying only a few pixels of the image.
StretchingGridView class
I overrode the drawableStateChanged() method with this code, inspired by #Karitsa's solution:
#Override
public void drawableStateChanged() {
getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
getViewTreeObserver().removeOnGlobalLayoutListener( this );
View lastChild = getChildAt( getChildCount() - 1 );
if (lastChild != null) {
int height = Math.max(lastChild.getBottom(), getColumnWidth());
float child = getAdapter().getCount();
float col = getNumColumns();
int rows = (int) Math.ceil(child / col);
height = rows * getColumnWidth() + (getHorizontalSpacing() * rows-1);
setLayoutParams( new LinearLayout.LayoutParams( LayoutParams.MATCH_PARENT, height ) );
}
}
});
}
Note: My GridView uses square images, so I base the height on their width. I don't think it works well with flexible grid item heights.
Apparently GridViews inside ScrollViews are not kosher in Android-land. Switching to ListView with custom-made rows. That seems to behave better.

Categories

Resources