I need to put some ImageButton with equal space in layout(something like the picture I attached).
I checked a lot of similar posts like:
Android: How to make all elements inside LinearLayout same size?
give equal space between ImageViews
What is android:weightSum in android, and how does it work?
However they didn't help me.
Using margin and padding didn't solve my problem, because I want to have equal space around ImageButton. It is important for me to keep the space equal in any device. Also I want to set size to my ImageButton. It's a rounded image so the height and width of image should be equal . When I use weightsum, I can't set arbitrary width as layout_width for ImageButton.
Thanks for helping me.
P.S. This is not duplicate post. In the first link which i brought, it is not possible to set equal space. It just put objects next to each other.
This is a layout with 2 ImageButton with arbitrary size:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="info.androidhive.materialdesign.activity.HomeFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/background_home">
<ImageButton
android:layout_width="#dimen/log_guid_image_height"
android:layout_height="#dimen/log_guid_image_height"
android:onClick="onLastClick"
android:id="#+id/btn_menu_last"
android:background="#drawable/menu_last" />
<ImageButton
android:layout_width="#dimen/log_guid_image_height"
android:layout_height="#dimen/log_guid_image_height"
android:onClick="onAddClick"
android:id="#+id/btn_menu_add_records"
android:background="#drawable/menu_add_records" />
</LinearLayout>
I added android:layout_weight="1" to each ImageButton, and set android:layout_width="0px" and it gave me this:
The problem is that how I can add equal space around ImageButton and gave arbitrary size to them!!!
You can use TableLayoutas below:
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left|top"
android:stretchColumns="*">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/imageButton" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton2" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton3" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton4" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton5" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageButton6" />
</TableRow>
</TableLayout>
You can you use a inner LinearLayout at the place of ImageButton to customize your ImageButton position.
Try this:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_home"
android:weightSum="1" >
<ImageView
android:id="#+id/btn_menu_last"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="onLastClick"
android:src="#drawable/menu_last" />
<ImageView
android:id="#+id/btn_menu_add_records"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:onClick="onAddClick"
android:src="#drawable/menu_add_records" />
</LinearLayout>
Just nest LinearLayouts like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Put ImageButtons inside each LinearLayouts.
Using LinearLayout and getting equal space is essentially the same idea as the past Q&A you read.
And inside these equal spaced cells, you can put ImageButtons with layout_gravity="center" (or gravity="center" with LinearLayout as shown abobe).
I think for this problem you need use a GridView and specify columnWidth option.
Related
I have a bunch of RelativeLayout inside LinearLayout. Inside this will be ProgressBar and other elements.
The problem at the moment is that the ProgressBar is extending the height dimension of the parent LinearLayout when placed inside the RelativeLayout.
Here's the basics of what I have.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<RelativeLayout
android:id="#+id/timer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/darker_gray">
<ProgressBar
android:layout_width="200dp"
android:layout_height="20dp"
style="#android:style/Widget.ProgressBar.Horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/timer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"/>
</LinearLayout>
The ProgressBar looks like it is extending height of the parent LinearLayout by the height of the ProgressBar. Which of course is not wanted.
Bare in mind that the above LinearLayout is inside another vertical LinearLayout where weightSum="3". So this distortion of the height means all will not fit in the screen vertically.
The one flaw I may have in my thinking is that because I have not yet completed the code (not put ProgressBar in each of the three levels) that it's just a quirk. I'll do that and report back. But it still seems to me this can't be a good thing.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/timer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/darker_gray">
<ProgressBar
android:layout_width="200dp"
android:layout_height="20dp"
style="#android:style/Widget.ProgressBar.Horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/timer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"/>
</LinearLayout>
when using weights use the width or the height to 0dp which ever orientation u need
Well there you go. After I filled all three levels of the outer LinearLayout (not visible in example code above), the layout seemed to sort itself out.
All height parameters are the same (each taking up one third of the height of the screen) and this is true in both the xml Preview pane and when tested on an emulator.
So it looks to me that if you have a weightSum of 3, then the layout will not balance out until you have actually written the code for all three weight divisions.
For example, this would work:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:wieghtSum="3" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<LinearLayout/>
But the following would potentially show a distorted height of the text views because the code is incomplete. weightSum is set to 3 but only code for two of the three divisions is written.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:wieghtSum="3" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<LinearLayout/>
I'm trying to build a RelativeLayout which distributes excess space between its children, much as shown here:
I've figured out how to center the red widget inside the blue one, but what I also want to do is distribute any excess vertical space evenly above, below, and between the blue and olive widgets. Currently, everything is bunched up at the top.
My XML looks roughly like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<ImageButton android:id="#+id/blue_button"
android:src="#drawable/blue_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/red_box"
android:src="#drawable/red_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/blue_button"
android:layout_marginLeft="10dp"
android:layout_alignTop="#id/blue_button"
android:layout_alignBottom="#id/blue_button"
/>
<ImageButton
android:id="#+id/green_button"
android:src="#drawable/green_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/blue_button"
android:layout_weight="1"
/>
</RelativeLayout>
First, you are using layout_weight with RelativeLayout parent. It's useless because layout_weight works only with LinearLayout parent.
Actually I didn't understand your question (an image of wanted layout would be good) but I guess this will work for you:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<RelativeLayout
android:id="#+id/blueAndRedWrapperLay"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton android:id="#+id/blue_button"
android:src="#00CCFF"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_weight="1"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/red_box"
android:src="#ff0000"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/greenWrapperLay"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton
android:id="#+id/green_button"
android:src="#669900"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>
I have a layout with 6 included layouts in a TableLayout. I want to do this in landscape mode, because a ScrollView would be awkward in my scenario.
I have a 48dp-high horizontal layout, which contains a square ImageView, a SeekBar with full weight, and a square ImageButton. I set the drawables for the ImageView in Java.
In the main layout, I use an include for each one and I am trying to even out the columns, because they only take up half the screen, by the way this is an activity with Theme.Holo.Dialog as its theme.
However, when I run the app, I get a 40-60% unbalanced view. Why? What am I doing wrong?
Part of layout-land/main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
... >
...
<TableLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:stretchColumns="1"
android:layout_height="wrap_content">
<TableRow android:layout_width="match_parent" android:layout_height="wrap_content">
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/systemToast"/>
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/ringerToast"/>
</TableRow>
<TableRow android:layout_width="match_parent" android:layout_height="wrap_content">
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/notifyToast"/>
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/mediaToast"/>
</TableRow>
<TableRow android:layout_width="match_parent" android:layout_height="wrap_content">
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/alarmToast"/>
<include android:layout_weight="1" layout="#layout/toast_item" android:id="#+id/inCallToast"/>
</TableRow>
</TableLayout>
...
</LinearLayout>
layout-land/toast_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:id="#+id/icon"
android:src="#drawable/ic_audio_alarm"
android:layout_width="48dp"
android:layout_height="48dp"
android:scaleType="center"
android:clickable="false"
android:layout_weight="0"/>
<SeekBar
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:layout_marginLeft="4dp"
android:maxHeight="1000dp"
android:layout_marginRight="4dp"
android:id="#+id/seekbar"/>
<ImageButton
android:id="#+id/schedules"
android:layout_width="48dp"
android:layout_height="match_parent"
android:scaleType="center"
android:layout_weight="0"
android:src="#drawable/ic_action_event"
android:background="?android:attr/selectableItemBackground"
/>
</LinearLayout>
I noticed you have android:layout_weight, but I didn't seem android:weightSum.
I would suggest you have android:weightSum="2" so that your two objects that have android:layout_weight="1" will distribute evenly.
According to the Android Documentation:
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.
I am developing an app which has a splash screen, you can see it in the picture below.
My problem is that I am needing to put a progress bar as you can see in the picture below without many layouts, because now I have eight layout in order to get this effect (layout-sw320dp, layout-sw320dp-land, layout-sw480dp, layout-sw480dp-land...600,720).
I was trying use relative layout and center horizontally the progress bar, but with different screen sizes the progress bar get other position vertically.
Could I solve it with less folders?
This is my layout file for 320dp:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_screen_land"
android:orientation="vertical" >
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp" />
</RelativeLayout>
I suggest you use just one layout file, let's say splash.xml. Put in a RelativeLayout your ImageView, with android:layout_centerInParent="true". Then your ProgressBar with android:below="#id/image" to put it relatively below the image. You can change the layout paddingBottom to adjust views in the center of the layout.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/padding_bottom">
<ImageView
android:id="#id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:minHeight="#dimen/progress_height"
android:minWidth="#dimen/progress_height" />
</RelativeLayout>
Now instead of having many layouts, you will keep the above layout, and create many values according to your screen sizes. Meaning :
values/dimens.xml
values-large/dimens.xml
values-land/dimens.xml
etc.
Thus, your view's layout won't change from a screen to another, only their size will !
Maybe 3 horizontal LinearLayout using layout_weight to center everything horizontaly with respect of the ratio, containing a vertical LinearLayout with centered gravity?
If you post your actual layout file, that could be easier to explain.
Edit:
Something like that: (you may have to play with the layout_weight values to get the size you want:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/splash_screen_land"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
I could solve it with weightSum, layout_weight properties which are very useful to imitate percentages.
This is my code with the problem solved:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/splash_screen_land"
android:gravity="center_horizontal"
android:orientation="vertical" >
<android.support.v7.widget.Space
android:id="#+id/space1"
android:layout_weight="100"
android:layout_width="match_parent"
android:layout_height="0dp" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="17"
android:gravity="center"
android:text="TextView"
android:textSize="20sp" />
</LinearLayout>
I hope this will be useful for someone else
Im trying to get two ImageViews side by side with a gap around the image. Ive been using Padding, Margin etc and all have had the same effect (See Image Below)
as you can see the image on the right is shifted upwards, how do i stop this?
Here's the layout file im using:
<?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" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
</LinearLayout>
I am going to be using more rows of images hence the extra LinearLayout
Use layout_weight to divide your layout equally. Try the following code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
</LinearLayout>
</LinearLayout>
Also, never use sp for specifying layout dimensions. Use dp instead.
You have given layout_margin for left side image and didn't give for the right side image.That's where the issue lies. If you want only two images in a row and if the image size is same for the both then you can make use of layout_weight attribute and give padding for space in between them.
so,try this. It will work.
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
</LinearLayout>
To fix Vertical alignment :
Use android:layout_height="match_parent" in your ImageView
by using android:layout_height="match_parent" inside ImageView it will be matched to its parent your LinearLayout which is android:layout_height="wrap_content"
Now Question arises why the height will be same for both ImageViews ?
Reason your parent LinearLayout's Height will be automatically chosen from ImageView Whose height is greater because of android:layout_height="wrap_content" in your LinearLayout !
and by using android:layout_height="match_parent" you will be using same height for ImageView whose height is smaller !
To Fix Horizontal alignment :
use android:layout_weight="equal weight value for btoh"
change your code to
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>