I have two Buttons called btnBeginner and btnAdvanced.
I have divided these two Buttons equally by using the layout_weight property. But the layout_weight is bad for performance.
Because of that, I would like to change my existing code - which is shown below.
<LinearLayout
android:id="#+id/lLayoutBeginAdv"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnBeginner"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#color/color_exam_btn_hlight"
android:text="beginner"
android:textAllCaps="false"
android:textColor="#color/white"
android:textStyle="normal" />
<Button
android:id="#+id/btnAdvanced"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#color/color_exam_btn_normal"
android:text="advanced"
android:textAllCaps="false"
android:textColor="#color/white"
android:textStyle="normal" />
</LinearLayout>
Please help me to do the same without using the layout_weight property.
EDIT : PercentRelativeLayout was deprecated in API level 26.1.0.
consider using ConstraintLayout and associated layouts instead.
Nested weights are bad for performance because :
Layout weights require a widget to be measured twice. When a
LinearLayout with non-zero weights is nested inside another
LinearLayout with non-zero weights, then the number of measurements
increase exponentially.
So in your case, weight will not create the performance problem. But still if you want to divide the layout into two equal parts without using weight, you can use PercentRelativeLayout
Sample :
android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnBeginner"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/color_exam_btn_hlight"
android:text="beginner"
android:textAllCaps="false"
android:textColor="#color/white"
android:textStyle="normal"
app:layout_heightPercent="50%"
app:layout_widthPercent="50%"
/>
<Button
android:id="#+id/btnAdvanced"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/color_exam_btn_normal"
android:text="advanced"
android:textAllCaps="false"
android:textColor="#color/white"
android:textStyle="normal"
app:layout_heightPercent="50%"
app:layout_widthPercent="50%"/>
</android.support.percent.PercentRelativeLayout>
Visit this Github repo for more information
I'd place a dummy View in the center of a RelativeLayout.
Then set a Button to the right of it and another one to the left of it.
Something like so
<RelativeLayout>
<!-- Dummy in the center -->
<View
android:id="#+id/dummy"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
<!-- Left Button -->
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:toLeftOf="#id/dummy"
android:text="New Button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>
<!-- Right Button -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:toRightOf="#id/dummy"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
You should set layout_width = "0dp" for all the buttons in Linear Layout.
As layout_weight, superseding layout_width. So essentially the layout_width is getting ignored.
So basically you code should be like :
<LinearLayout
android:id="#+id/lLayoutBeginAdv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/btnBeginner"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
...../>
<Button
android:id="#+id/btnAdvanced"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
..... />
</LinearLayout>
For more reference you should this link :
layout_width and layout_weight - performance
If you don't want use layout_weight use Relative Layout`
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>`
If you are looking out to divide two buttons in single row using constraint layout then below is the example for you.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.com.schooldemo.example.MainActivity">
<Button
android:id="#+id/buttonA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintEnd_toStartOf="#+id/buttonD"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/buttonD"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="D"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/buttonA" />
</android.support.constraint.ConstraintLayout>
Related
I'm attempting to resize buttons on rotate to expand proportionately. Right now, they are a fix length, but I'm unsure of an alternative method to get the buttons to resize (setting the weight doesn't seem to help). I want the buttons to essentially fill the length of the screen both vertically and horizontally. Please let me know if you need more information.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="center_vertical" >
<Button
android:id="#+id/mainCommentBtn"
android:layout_width="119dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="1"
android:text="#string/commentBtn" />
<Button
android:id="#+id/mainProfileBtn"
android:layout_width="119dp"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="1"
android:layout_centerInParent="true"
android:text="#string/profileBtn" />
<Button
android:id="#+id/mainDetailBtn"
android:layout_width="119dp"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/shareBtn" />
</LinearLayout>
Replace your resource with this. Copy the edited changes
Notice how there width is 0dp because they are using weight.
Using Weight:
1. In order to use weight you need to set the weightSum in the parent.
2. Make sure the width or height is set to 0 according to how you are using weight.
(for instance since we are going with horizontal orientation we want to use "0dp" width. This allows weight to control the width of the object.
3. Lastly make sure the weight of all the objects add up to the weightSum.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/mainCommentBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="#string/commentBtn" />
<Button
android:id="#+id/mainProfileBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="#string/profileBtn" />
<Button
android:id="#+id/mainDetailBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="1"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="#string/shareBtn" />
</LinearLayout>
You need to specify an orientation for the LinearLayout.
I guess you want to use android:orientation="horizontal".
Then, in order to make android:weight work, you'd need to specify the width of every button as 0px by using android:layout_width="0px" for every button.
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
These xml properties size the button to fill the screen both vertically and horizontally.
You can create the layout with the help of layout weight so that it will automatically fill the screen in landscape mode also as below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_weight="1" />
</LinearLayout>
I was thinking it would be something like android:layout_startOf"centerHoriztonal" or something like that but I have searched and couldn't find anything. If it helps I am trying to make a soundboard app where all the buttons can be the same size across multiple device screens.
try this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:text="Here is button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button2"
android:text="Here is button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
You can wrap the button(s) inside a horizontal LinearLayout and use layout_weight to divide the screen in half and then layout_alignParentLeft/layout_alignParentRight to align the buttons inside a RelativeLayout that takes up exactly half the screen width.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button Text"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
Another way to do it is to create a dummy view object that is centered horizontally in the parent view, and align your buttons to the left or right of it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/dummyview"
android:layout_width="0px"
android:layout_height="0px"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dummyview"
android:text="Button Text"/>
</RelativeLayout>
Are you sure you want the same size of buttons in all devices? People try to avoid it and make make view elements flexible.
Anyways if you want to set same size just directly write in layout
android:layout_width = "#dimen/valueForButton"; //some absolute value
For starting at same point, just add all buttons inside LinearLayout and make some operations there, such as
android:layout_gravity = "center_horizontal";
Your layout must be something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
I want to layout 3 element Button , TextView , Button on the bar like this
[Button1] --- TextView --- [Button2]
2 button are always anchor fixed in left and right screen(padding 4dp) ,and TextView is center (change width depend on screen size),They should be apply for all screen size(not scaled in larger screen). How can I do it??
It would look something like this.-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
Notice that you still need to set other properties such as texts, ...
You can use LinearLayout with android:weightSum
Try Like this, By using android:weightSum, you can divide how much space for Button and textView.. And it will automatically adjust in all the density devices.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="LeftButton" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="4dp"
android:layout_weight="4"
android:gravity="center"
android:text="Center TextView text" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="Right Button" />
</LinearLayout>
android:weightSum work fine for me, I resolved all my troubles :)
<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
I tried above code to display 3 buttons in Liner layout. It works but I need to put space between the two buttons.
android:layout_margin="10dp"
for each button
If the orientation of your LinearLayout is vertical, use
android:layout_marginTop="10dp"
otherwise, use
android:layout_marginLeft="10dp"
<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="25dp"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="25dp"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
Try this.
The easiest way to make space between 3 buttons in an horizontal LinearLayout to use this on the center button:
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
If you have vertical LinearLayout, you can use marginTop and marginBottom.
The best is to use android:layout_marginTop="10dp" in your XML activity as this gives accurate spacing between that button and the other button or widget.
Repeat this for rest of the buttons.
Happy Programming!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/o_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/p2"
android:text="#string/o_pharmacy"
android:textSize="26sp" />
<Button
android:id="#+id/lab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/lab"
android:text="#string/lab"
android:textSize="26sp" />
<Button
android:id="#+id/i_pharmacy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:drawableLeft="#drawable/p1"
android:text="#string/i_pharmacy"
android:textSize="26sp" />
I am assuming that you are using a Vertical orientation for your LinearLayout, otherwise this code won't make sense as your buttons are Fill_parent for layout_width. Notice the line that says android:layout_marginTop="10dip" which ensures that you leave a reasonable 10 dip space in between your buttons. Ofcourse, you can increase (or decrease) that space in between your buttons. That's your choice.
Hope this answered your question satisfactorily.
android:layout_marginBottom="50dp"
android:layout_marginTop="50dp"
I think you can try layout_weight. If you need 3 in a row with some space in between. you can do like this
<LinearLayout
android:id="#+id/buttons"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.google.android.material.button.MaterialButton
android:id="#+id/o_pharmacy"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:text="#string/o_pharmacy"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/lab"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:padding="5dp"
android:text="#string/lab"
/>
<com.google.android.material.button.MaterialButton
android:id="#+id/i_pharmacy"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_weight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="#string/i_pharmacy"
/>
</LinearLayout>
It's better to use
android:textSize="26dp"
instead of
android:textSize="26sp"
to have a better result in all devices of varied sizes!
This is my custom dialog, there are some textboxs and two buttons.
I'm using a RelativeLayout on it.
I'd like the dialog size to match the content, not all that blank space under there.
I don't want to use explicit pixel heights (it's not good practice).
Another thing, there's a way to have some space between every view?
This is my XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_desc"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/txt_place"
android:layout_toRightOf="#+id/view"
android:text="#string/btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txt_place"
android:layout_toLeftOf="#+id/view"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="#string/btn_edit" />
</RelativeLayout>
First question
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
Second question
Plus use android:marginTop="5dp" if you want to separate a View from Top for 5 dp.
marginLeft|Right|Bottom are also available.
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp" <-----------------
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
By the way, if I were you, I'd nest some layouts to make order. You can have a general Relative Layout, then 2 linear layouts: one horizontal for TextViews and one vertical for Buttons. You can definely play with your editor and try to make the best appearance for your dialog.
EDIT
Try this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000"
android:orientation="vertical"
android:paddingBottom="50dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="prova"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="btn_edit" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I've hard-coded the texts. The main idea is to use a big container layout in background, which is trasparent (background=#0000) and in top of that a layout in wrap_content containing your Views.
If this solution doesn't resolve your problem, I think you could edit height directly in your code. Try to relate to this question
Set your relative layout's height to wrap_content.
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- More XML -->
</RelativeLayout>
Also be aware that fill_parent is deprecated for widths and heights.
You can add either margin (extra space outside a view) or padding (extra space inside a view) with android:layout_margin or android:padding respectively. There are also variants such as layout_marginTop that only apply to a specific side of the view.