How to set the linear layout width in a HorizontalScrollView? - android

I have a LinearLayout (let's call it A)that it's width set to fill_parent, this layout contains a bunch of another LinearLayouts(let's call them B), I want the screen only display four B's so i assigned the weight_sum of A as 4 and assigned each one of B's as 1, now i want to add a HorizontalScrollView so that if i have like 6 layouts of B only four will be displayed and the other two will be scrolled. I build this HorizontalScrollView to contain the A layout(as the HorizontalScrollView should has only one direct child), now the fill_parent width i add to the layout A is ruined as it now obeys the HorizontalScrollView so the B layouts width is ruined also, take a look at the following figures:
-- yellow : the Whole Screen.
-- green : A Layout.
-- red : B Layout.
The result I got:
The result i suppose to get:
I'm tried to set the width of both HorizontalScrollView and the Layout A to fill_parent and/or wrap_content but nothing works with me.
My XML Code:
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/A"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4" >
<LinearLayout
android:id="#+id/B1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:id="#+id/icon1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="15dp"
android:layout_weight="0.5"
android:background="#drawable/ac_overlay"
android:orientation="horizontal"
android:tag="normal" >
</LinearLayout>
<LinearLayout
android:id="#+id/icon2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="15dp"
android:layout_weight="0.5"
android:background="#drawable/ac_overlay"
android:orientation="horizontal"
android:tag="normal" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/B2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:id="#+id/icon3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="15dp"
android:layout_weight="0.5"
android:background="#drawable/ac_overlay"
android:orientation="horizontal"
android:tag="normal" >
</LinearLayout>
<LinearLayout
android:id="#+id/icon4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="15dp"
android:layout_weight="0.5"
android:background="#drawable/ac_overlay"
android:orientation="horizontal"
android:tag="normal" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>

You're not going to be able to accomplish this from xml only, you'll need some dynamic code to measure the width of the screen and then programtically set the width of each linearlayout (icon1, icon2 etc) to 1/4 of this width.
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(metrics.widthPixels/4, LayoutParams.MATCH_PARENT);
LinearLayout icon1 = (LinearLayout) findViewById(R.id.icon1);
icon1.setLayoutParams(params);
//etc

Related

How do I overlap three equally-sized views with smaller views between them?

I am trying to make three buttons equally-spaced and aligned vertically with circles overlapping between them like so:
I ran into difficulties because a LinearLayout was needed to equally weight the three buttons, but overlapping views are most easily done in RelativeLayout and FrameLayout (I need to support <21 SDK, so I can't use z-index with LinearLayout).
When I put the "OR" circles in the Frame/RelativeLayouts, there's no easy way to set them at 1/3rd the view height so that they fall in between the buttons.
How do I divide a FrameLayout with the OR circles into thirds to properly place the circles?
I have did following xml coding and generate similar out put
<?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" >
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="3"
android:gravity="center"
>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="dd"
android:background="#CCCCCC"
android:gravity="center"
android:layout_margin="5dp"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="dd"
android:layout_margin="5dp"
android:background="#CCCCCC"
android:gravity="center"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:text="dd"
android:background="#CCCCCC"
android:gravity="center"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:weightSum="3"
android:gravity="center"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="30dp"
android:background="#000000"
android:text="OR"
android:textColor="#FFFFFF"
android:gravity="center"
android:layout_height="30dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="30dp"
android:background="#000000"
android:text="OR"
android:textColor="#FFFFFF"
android:gravity="center"
android:layout_height="30dp" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
I couldn't find a straightforward solution to this, so I'm answering my own question! Please let me know if you have a better solution.
The solution I came up with was to layout the buttons in a LinearLayout inside a FrameLayout and weight them properly. The OR circles are placed in the FrameLayout after the buttons, so that they will be drawn on top. However, they are not positioned in the xml.
In onCreate() I measured the drawn size of the LinearLayout with buttons and then moved the OR circles by one third plus the radius of the circle.
Here is the relevant XML. The key points are:
FrameLayout wrapper, matching parent for full area buttons to be shown.
LinearLayout wrapper for buttons, matching parent.
Button heights all set to 0dp and layout_weight="1"
TextViews for OR circles centered horizontally, but not adjusted vertically. Note their diameter is 30dp
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/buttons_container">
<Button
android:id="#+id/record_topic_option_1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:onClick="topic1"
android:theme="#style/PrimaryButton"/>
<Button
android:id="#+id/record_topic_option_2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:onClick="topic2"
android:theme="#style/PrimaryButton" />
<Button
android:id="#+id/record_topic_option_3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:onClick="topic3"
android:theme="#style/PrimaryButton" />
</LinearLayout>
<TextView
android:id="#+id/top_or"
android:layout_width="30dp"
android:layout_height="30dp"
android:textAlignment="center"
android:text="OR"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:textSize="#dimen/material_text_caption"
android:textColor="#android:color/white"
android:background="#drawable/or_circle_background"
/>
<TextView
android:id="#+id/bottom_or"
android:layout_width="30dp"
android:layout_height="30dp"
android:textAlignment="center"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="OR"
android:textSize="#dimen/material_text_caption"
android:textColor="#android:color/white"
android:background="#drawable/or_circle_background" />
Once that is set up, the trick is to adjust the circles programmatically in onCreate()
final View buttonContainer = findViewById(R.id.buttons_container);
View topOr = findViewById(R.id.top_or);
View bottomOr = findViewById(R.id.bottom_or);
//Get the 15dp radius in pixels at the current screen density.
final int added_height_for_radius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
15, getResources().getDisplayMetrics());
//Use a ViewTreeObserver to make sure that the view is drawn and you get an accurate measurement of the LinearLayout with buttons
buttonContainer.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
#SuppressLint("NewApi")
#SuppressWarnings("deprecation")
#Override
public void onGlobalLayout() {
int width = buttonContainer.getWidth();
int height = buttonContainer.getHeight();
//Moving the topOr and bottomOr by setting the top margin to height/3-radius and 2*height/3-radius
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams)topOr.getLayoutParams();
params.setMargins(0, (height/3)-added_height_for_radius, 0, 0);
topOr.setLayoutParams(params);
FrameLayout.LayoutParams params2 = (FrameLayout.LayoutParams)bottomOr.getLayoutParams();
params2.setMargins(0, (2*height/3)-added_height_for_radius, 0, 0);
bottomOr.setLayoutParams(params2);
buttonContainer.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
});
Thanks to
Get height and width of a layout programmatically

HorizontalScrollView Not Scolling When Specified Width

I'm trying to have a HorizontalScrollView with 8 buttons which I can code fine. But I want to have the layout double the width of the screen so there are 4 buttons on the screen and the user has to scroll to see more (I'm don't want a "snap" scroll).
To do this I've manually change the width of the HorizontalScrollView to say "770dp" but whenever I specify the width it looks correct but does not scroll. Changing the width back to "wrap_content" and it works fine but does not look correct (5 or 6 buttons on the screen).
My xml code is below. This is just an extract - there are many more layouts/views on the screen.
I will be wanting to programmatically specify the width later the double the phone's screen size didn't want to move on to that until I worked out why the above isn't working.
I have included that code if anyone wants to lend a hand, but it is NOT related to the above non-scrolling problem.
Thanks in advance for any help you can give. Much appreciated.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:orientation="vertical"
tools:context="com.example.testScroll.MainActivity"
tools:ignore="MergeRootFrame" >
<HorizontalScrollView
android:id="#+id/topline_Buttons"
android:layout_width="770dp"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:orientation="horizontal" >
<Button
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_1" />
<Button
android:id="#+id/button_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_2" />
<Button
android:id="#+id/button_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_3" />
<Button
android:id="#+id/button_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_4" />
<Button
android:id="#+id/button_5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_5" />
<Button
android:id="#+id/button_6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_6" />
<Button
android:id="#+id/button_7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_7" />
<Button
android:id="#+id/button_8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_8" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
Here is what I have found on SO HERE to programmatically set the width. ALthough I haven't got it working yet
//Set HorizontalScrollView double screen width
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(metrics.widthPixels*2, LayoutParams.MATCH_PARENT);
LinearLayout topline_Buttons = (LinearLayout) findViewById(R.id.topline_Buttons);
topline_Buttons.setLayoutParams(params);
I think trying to increase the size of the scroll view is the wrong way to approach this. If you want the layout that the scroll view wraps to be larger, then change the height of the layout.
Remember that the buttons are in the LinearLayout, and that is currently set to wrap content, so it will only take the space needed to display its children (the buttons).
Try this (with the rest of your code of course):
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:id="#+id/topline_Buttons"
android:layout_width="770dp"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:orientation="horizontal" >
// try this way,hope this will help you..
Note : if fix HorizontalScrollView layout_width then it's not Scrollable so you have gave layout_width "wrap_content"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:orientation="vertical">
<HorizontalScrollView
android:id="#+id/topline_Buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_1" />
<Button
android:id="#+id/button_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_2" />
<Button
android:id="#+id/button_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_3" />
<Button
android:id="#+id/button_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_4" />
<Button
android:id="#+id/button_5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_5" />
<Button
android:id="#+id/button_6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_6" />
<Button
android:id="#+id/button_7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_7" />
<Button
android:id="#+id/button_8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_8" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
**Also remove this peace of code from Activity**
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(metrics.widthPixels*2, LinearLayout.LayoutParams.MATCH_PARENT);
topline_Buttons.setLayoutParams(params);
Ok I've worked it out! Or at least one way of doing it...
If there is a better way let me know.
Instead of specifying the width of the LinearLayout or HorizontalScrollView I needed to specify the width of the buttons inside to 1/4th of the screensize. The HorizontalScrollView should fill the whole page, the LinearLayout wrap content and so the buttons make enough space for themselves.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:orientation="vertical">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:orientation="horizontal" >
<Button
android:id="#+id/button_1"
android:layout_width="92dp" // Specify width here manually
android:layout_height="wrap_content"
android:text="1" />
... etc
That worked but obviously wouldn't look right with many screen sizes, so I specified it programmatically:
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int screenWidth = size.x / 4;
button_1 = (Button)findViewById(R.id.button_1);
button_1.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, LayoutParams.WRAP_CONTENT));

Make a TextView and a Button the same size

I have a TextView and Button in my program and I cannot get the size of the Button and the TextView to be the same. How can I do this?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp"
android:background="#999999"
android:gravity="center"
>
<Button
android:id="#+id/button1"
android:layout_width="130dp"
android:layout_height="60dp"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="130dp"
android:layout_height="60dp"
android:background="#ffffff" android:textColor="#000000"
android:textSize="24dp" android:textStyle="bold"
android:gravity="center"
android:text="0.0" />
</LinearLayout>
Actually, they both have the same size, but the Button uses an image as a background and it seems it has some margins.
To test this, override the background of button with a color and see they are the same size:
android:background="#0F0"
So, the solution would be to provide a custom background for your button, or adapt the TextView to match the Buttons' width and height, minus the margins of Button, which personnaly I don't think is the best approach.
When I want multiple controls to have the same size what i generally do is put them in a TableLayout.
In your case, i'd put a TableLayout inside the linear layout and put the button and textview inside a TableRow, set the weightsum for the TableRow to 2 and set the weights of the individual controls to 1.
This would make the controls take up the same amount of space on the screen. A sample xml is shown below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/hello_world">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>

Place 3 buttons in a LinearLayout to occupy equal amount of space

i would like to have three buttons taking equal amount of available space horizontally in a row.
I used android:layout_gravity. What is the problem?
layout xml :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
>
<Button android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Bg"
android:background="#drawable/button_red"
android:layout_weight=".2"
android:layout_gravity="left"
/>
<Button android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Bm"
android:background="#drawable/button_red"
android:layout_weight=".2"
android:textColor="#ffffff"
android:layout_gravity="center"
/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_red"
android:layout_weight=".2"
android:text="#string/Bf"
android:layout_gravity="right"
/>
</LinearLayout>
if someone see whats wrong, thanks.
The following layout should work. weights are for LinearLayouts..
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
>
<Button android:id="#+id/button1"
...
android:layout_weight="1"/>
<Button android:id="#+id/button2"
...
android:layout_weight="1"/>
<Button
android:id="#+id/button3"
...
android:layout_weight="1"/>
</LinearLayout>
besides of setting a layout_weight you have to set layout_width or layout_height to 0dp. So if you want for example to distribute the buttons horizontally , layout_width should be 0dp and layout_weight .2 or any number as long as is equal through the buttons you have.
so your layout should be like this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/Bg"
android:background="#drawable/button_red"
android:layout_weight="1"
/>
<Button android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/Bm"
android:background="#drawable/button_red"
android:layout_weight="1"
android:textColor="#ffffff"
/>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/button_red"
android:layout_weight="1"
android:text="#string/Bf"
/>
</LinearLayout>
Divide the weight sum to equal proportion in all buttons.
Remove layout_gravity property and add android:layout_weight=0.33.
It will work
Check out this:
<RelativeLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/button1"/>
</RelativeLayout>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Give android:layout_weight="1" for each Button
Here Android Developer Guide:
Layout Weight
LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.
For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.
Source
Put the buttons in a relative layout. add properties to the buttons allignParentleft = true, another allignParentcenter= true and the allignParentRight = true to each button.
Please consider the following layout snippet:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<ImageView
android:src="#drawable/logo1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="left|center_vertical" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Some Title"
android:textColor="#android:color/black"
android:layout_gravity="center"
android:gravity="center"
android:layout_weight="1" />
<ImageView
android:src="#drawable/logo2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="right|center_vertical" />
</LinearLayout>
2 things to note above.
A. I created a LinearLayout with weightSum of 3.
B. Then inside that I create 3 elements each having layout_weight of 1 so that I can have my child elements distribute the entire space among themselves evenly.
I have make it pragmatically without weight
float width = CommonUtills.getScreenWidth(activity);
int cardWidth = (int) CommonUtills.convertDpToPixel(((width) / 3), activity);
LinearLayout.LayoutParams params =
new LinearLayout.LayoutParams(cardWidth,
LinearLayout.LayoutParams.MATCH_PARENT);
btnOne.setLayoutParams(params);
btnTwo.setLayoutParams(params);
btnThree.setLayoutParams(params);
public class CommonUtills {
public static float getScreenWidth(Context context) {
float width = (float) 360.0;
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
width = displayMetrics.widthPixels / displayMetrics.density;
return width;
}
}
<LinearLayout
android: layout_width = "match_parent"
android: layout_height = "50dp"
android: orientation = "horizontal" >
<Button
android: id = "#+id/btnOne"
android: layout_width = "wrap_content"
android: layout_height = "match_parent" > </Button>
<Button
android: id = "#+id/btnTwo"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content" > </Button>
<Button
android: id = "#+id/btnThree"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content" > </Button>
</LinearLayout>
You can divide it like this:
`
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/imageButtonLikedPost">
<ImageButton
android:id="#+id/imageButtonMyPost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/mypost_tab_bg" />
</RelativeLayout>
<ImageButton
android:id="#+id/imageButtonLikedPost"
android:layout_width="40dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/mylike_tab_bg" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/imageButtonLikedPost">
<ImageButton
android:id="#+id/imageButtonMyBlog"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/tab4_bg" />
</RelativeLayout>
</RelativeLayout>`

Android setting Button width half the screen

How to setup(in XML) that the button will have width half of screen. I found only wrap content, match parent(fills whole screen) and exact amount of dp eg: 50dp.
How to set it exactly hold the screen?
<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:weightSum="2"
>
<Button
android:id="#+id/buttonCollect"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:text="przycisk" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button" />
This can be done by having two widgets on your layout:
use a LinearLayout and set layout_width="fill_parent" on both widgets (Button and another widget ), and set layout_weight also to the same value .
and the LinearLayout will split the width between the two widget equally and your button will occupy half of the screen.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/buttonCollect"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:text="przycisk" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button" />
This is not possible in XML. However, you can do it in Java by getting the width of the display using DisplayMetrics, dividing it by 2 and setting it as the width of the button. Something like this:
Button button = (Button) findViewById(R.id.button);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int width = displaymetrics.widthPixels;
int buttonWidth = width/2;
//Apply this to your button using the LayoutParams for whichever layout you have.
Use a textview.
<TextView
android:id="#+id/textViewHelper"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
Then add the two buttons, or just one of them, to left and/or right of it.
<Button
android:id="#+id/saveList"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/deleteAllPlaylists"
android:layout_toRightOf="#+id/textViewHelper"
android:text="#string/save_temp_playlist" />
<Button
android:id="#+id/deleteAllPlaylists"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/textViewHelper"
android:text="#string/delete_all_playlists" />
answer was found here
My first post on stack, hope i helped XD

Categories

Resources