I have 2 ImageButtons and a ToggleButton in a relative layout that fills it's parent. Here is the xml code:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/relative2">
<ImageButton
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageButton4"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:src="#drawable/ic_exposure_minus1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp" />
<ImageButton
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageButton6"
android:src="#drawable/ic_cancel_black"
android:layout_alignTop="#+id/imageButton4"
android:layout_toEndOf="#+id/imageButton4"
android:layout_marginLeft="5dp" />
<ToggleButton
android:layout_width="80dp"
android:layout_height="80dp"
android:text="New ToggleButton"
android:id="#+id/toggleButton"
android:checked="false"
android:clickable="true"
android:textOn="+"
android:textOff="-"
android:textSize="18dp"
android:layout_below="#+id/imageButton4"
android:layout_toStartOf="#+id/imageButton6"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_alignParentEnd="false"
android:layout_alignParentStart="false" />
</RelativeLayout>
When the device is in portrait mode there is enough height room for the buttons. When the device is rotated to landscape, the relative layout gets smaller and there is no room for all the buttons. The lack of room is in the height dimension. So the Togglebutton that lays at the bottom of the other buttons is scaled automatically to smaller height, so that it fits.
I would prefer that all the buttons' height would be changed equally instead of just the last one (the ToggleButton) getting smaller in height. I would then have 3 buttons that have the same height, instead of 2 keeping the initial height and one with smaller height.
Could I get this result by changing the xml file?
PS: To make it more clear:
To make 3 buttons equal height, change your parent layout from relative layout to linear layout. And enable layout weight attribute equally. So they will be in same size.
You should use LinearLayout if you want to make a uniform UI across different orientation.
Use Orientation property along with layout weights and you will get your desired result.
You just have to make nested Linearlayouts accordingly.
Here is your layout made using linear layout.
Hope you understand the significance of using linearlayouts.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="5dp" >
<ImageButton
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_weight="0.5"
android:id="#+id/imageButton4"
android:src="#drawable/ic_exposure_minus1"
android:layout_marginLeft="5dp"/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_weight="0.5"
android:id="#+id/imageButton6"
android:src="#drawable/ic_cancel_black"
android:layout_marginLeft="5dp" />
</LinearLayout>
<ToggleButton
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="New ToggleButton"
android:id="#+id/toggleButton"
android:checked="false"
android:clickable="true"
android:textOn="+"
android:textOff="-"
android:textSize="18dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"/>
</LinearLayout>
Related
I'm trying to create a layout (which I could include in other layouts), which contains 3 Image buttons (back, menu, forward).
Those 3 Image buttons should be on the same line (because later I would include this layout to other layouts in the bottom of each layout)
I don't understand what I'm doing wrong, I can't see the all 3 Buttons, and they are not in the same row (same horizontal line)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
it won't fit because it looks like some of your images are way too big, but we can proportionally weight it so it'll fit.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
using weightSum and layout_weight, 3 and 1, we ensure they all each take 1/3 of the space in your linearlayout (oh, and layout_width is 0 because layout_weight overrides it)
You can use LinearLayout with orientation as "horizontal". This will make all the views appear in a row. This LinearLayout can reside as a nested layout inside a another layout, like for example RelativeLayout. You can use this layout design by importing it in other XMLlayouts too.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu"
android:background="#drawable/HomButton"
android:onClick="onClickButtomMenu"/>
<ImageButton
android:id="#+id/buttomMenuForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:background="#drawable/forward_button"
android:onClick="onClickButtomMenu"/>
</LinearLayout>
Looks like different sized images.
Assuming you have these in a horizontal linear layout; Try changing the height to a fixed dp and put the weight to 1 for all three imagebuttons
Example:
<ImageButton
android:id="#+id/buttomMenuBack"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="35dp"
android:text="Back"
android:background="#drawable/back_button"
android:onClick="onClickButtomMenu"/>
If you do this for all three imagebuttons, they will fill the screen and all be the same height, right beside each other.
I am trying to create a layout as per this picture (paint'ed).
Layout Design
Target level is API 17. This has to be created programmatically, not using XML. This has to be a responsive design.
I extensively researched and attempted other partially similar situations on stackoverflow, using GridLayout, TableLayout, GridView, various layout parameters, gravity, weight, view nesting and so on. However,
(a) I can't get the text buttons width to fill the available width real estate as per device screen size and orientation. Buttons with shorter texts are coming with shorter width.
(b) The plus, minus and number buttons are of fixed height and width irrespective of screen sizes and orientation. But they are not aligning with the text button in the left on the same row. only the bottom few pixels are visible.
I would appreciate any code snippet that can achieve the above layout. Thanks a million.
UPDATE:
Following inputs from #tiny-sunlight, I did this. Next I will recreate this programmatically.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTable"
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layoutRow"
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginEnd="10dp"
android:layout_weight="17"
android:text="This is my button"
android:textSize="15sp"
android:textAllCaps="false"
android:gravity="start"
android:layout_width="0dp"
android:layout_height="40dp" />
<Button
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:text="-"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="0"
android:textSize="15sp"
android:gravity="center"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:layout_weight="1"
android:text="+"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Try to build layout below programmatically.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="1111"
android:layout_width="0dp"
android:layout_height="40dp" />
<ImageView
android:layout_marginRight="5dp"
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginRight="5dp"
android:background="#44bb11"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="11"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You can use a recycler view, which will provide you scrolling option plus bind views on the fly for you.
So load a linear layout (orientation horizonal) into the recycler view. now for the layout, it then becomes easier. You need a textview, button,textview,button.
For each of these textview and buttons, set widht = 0dp and weight as 7,1,1,1 respectively i.e. your leftmost textview occupy 70% of width whereas all other occupy 10%. Obviously you can change these weights as per your requirements. Thats it for the layout.
Now just fill your data using the adapter.
this is my layout code
i use like root a grid layout and then for every row a frame layout inside that frame layout two frame layouts with image and txt...
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:columnCount="1"
android:rowCount="2">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="200dp"
android:layout_height="220dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0.1dp"
android:layout_marginRight="2dp"
android:layout_row="1"
android:layout_column="1">
<ImageView
android:layout_width="150dp"
android:layout_height="190dp"
android:id="#+id/am"
android:layout_gravity="top|center_horizontal"
android:src="#drawable/black" />
<TextView
android:layout_width="153dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="text"
android:id="#+id/w"
android:layout_gravity="bottom|center"
android:layout_marginBottom="10dp" />
</FrameLayout>
<FrameLayout
android:layout_width="200dp"
android:layout_height="220dp"
android:layout_marginRight="2dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="0dp"
android:layout_row="1"
android:layout_column="0"
android:layout_gravity="right|center_vertical">
<ImageView
android:layout_width="150dp"
android:layout_height="190dp"
android:id="#+id/imageView"
android:layout_gravity="top|center"
android:src="#drawable/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="text"
android:id="#+id/textView2"
android:layout_gravity="bottom|center"
android:layout_marginBottom="10dp" />
</FrameLayout>
</FrameLayout>
this is how its seen
looks cool rigth?
well this is my problem when i take this to a bigger screen this happends
well i dont whant this i whant that the text and images grow to take half of screen like first one...
HOW I DO THIS!!!
You are using fix layout_width and layout_height sizes at the FrameLayout and ImageView too. This way you wont reach the desired goal. You should use wrap_content value instead of fix sizes and play with the layout_weight. For example in a LinearLayout put two FrameLayout which contains the image and the text, after that add layout_weight="1" to the FrameLayout attributes.
Don't use a frame layout.
Layout_weight is what you should use if you want to set your dimensions in relation to your view size(but don't nest weights as it quickly becomes very inefficient), or set the dimensions in your code based on the size of your view.
you hardcoded all of your view dimensions so they are always going to interact poorly with changes in screen size
I have a problem with a layout in android. I want that two views should have the equal width, and they should almost use the full width of the screen. Each view should contain a centered label.
It should look like this when it's done:
Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="10dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp" />
<View
android:id="#+id/view2"
android:layout_width="10dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp" />
</RelativeLayout>
I just have placeholder values for the width right now.
Thanks.
You have to use android:layout_weight attribute in xml so try below code hope it will resolve your problem :-
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:text="Register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
<Button
android:text="Not this time"
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
</LinearLayout>
To create a linear layout in which each child uses the same amount of
space on the screen, set the android:layout_height of each view to
"0dp" (for a vertical layout) or the android:layout_width of each view
to "0dp" (for a horizontal layout). Then set the android:layout_weight
of each view to "1"
For more info you need to read Linear layout.
It will be easier with LinearLayout, set the layout to match_parent with horizontal orientation.
After that, set layout_width to 0px and layout_weight=1 in both of your view.
See this for good explanation :
Layout buttons so each divides up the space equally
You have to use layout_weight attribute for this.
<Button
android:text="Register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
<Button
android:text="Not this time"
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
</LinearLayout>
I still dont really get it how many space layouts take.
I have the following xml.
The inner LinearLayout's for the bottom space height is set to wrap_content, so it should take the height of the maximum height in there. Which is 52dp. And there is the ImageButton which is set to wrap_content, so the button should be centered vertically on the right side, since its an 24dp image (in xhdpi it has 32x32 pixels). So why is it stretched over the full height like displayed here?:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp">
<de.ph1b.audiobook.utils.SquareImageView
android:id="#+id/cover"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_gravity="bottom">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="52dp"
android:paddingLeft="16dp"
android:maxLines="2"
android:ellipsize="end"
android:paddingRight="16dp"
android:gravity="center_vertical"
android:textSize="16sp" />
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
</LinearLayout>
</LinearLayout>
either #drawable/ic_more_vert_grey600_24dp is larger than you think or borderlessButtonStyle has a larger background.
Please check the size. I have replicated the behavior and the ImageButton is set to wrap_content and is centered.
change your image button code
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:scaleType="fitXY"
android:gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />