I'd like to draw three squares side-by-side in xml, so that they fill the screen horizontally (minus a margin of 12 dp on each side). According to this post it seems possible to do this messily with table layouts, but I'm wondering if there's a better way. Here's my attempt using nested LinearLayouts, which draws rectangles which fill the entire screen vertically but otherwise does what I'm looking for:
<?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:layout_margin="12dp"
android:background="#ffffff"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/rectangle" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/rectangle" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/rectangle" >
</LinearLayout>
</LinearLayout>
Try to change the three internal linearlayouts' android:layout_width="match_parent" to "wrap_content".
I just did a test using the following xml code. Notice that, there are two changes from your version:
1 I changed match_parent to wrap_content of the three children layouts.
2 Since I don't have your background image, I just use three different colors for background.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="12dp"
android:background="#ffffff"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff121212" >
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#ff676767" >
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#ffababab" >
</LinearLayout>
</LinearLayout>
I get this screen:
So if have changed match_parent to wrap_content but not work, I guess your background image is too big.
Also, turning to the understanding about layout_weight. Layout_weight doesn't decide element's size, it only works after each element has required neccessary size from parent layout, then parent layout assign rest of size to each element according to layout_weight.
Try this way for margins and height.
<?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:background="#ffffff"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="12dp"
android:background="#drawable/rectangle" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/rectangle" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:layout_marginRight="12dp"
android:background="#drawable/rectangle" >
</LinearLayout>
</LinearLayout>
It seems the best solution is to create a custom view component with an overridden onMeasure():
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
Related
Im trying to align a circular image in the middle of two linearlayout with different colors, however the view for some reason does not align to the center
but stick to the left, below it I want to place a fragment. any help?
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<com.mikhaellopez.circularimageview.CircularImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:gravity="center"
android:src="#drawable/doge"
app:border_color="#EEEEEE"
app:border_width="4dp"
app:shadow="true" />
</FrameLayout>
<LinearLayout
android:id="#+id/calendarCard1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"
android:background="#e6e6e6" />
</LinearLayout>
why not use a relative layout instead of so many nested Linear Layout. Using Relative layouts are easy and efficient. Check this http://www.mkyong.com/android/android-relativelayout-example/ for understanding the relative layouts
Your circular image layout is inside a FrameLayout along with the LinearLayout. FrameLayout basically puts all its children one atop another.
I need to create a layout as shown in the image.
The rounded button with the arrow needs to be exactly between the blue and the gray background.
I'm having difficulties placing it without specifying the margins precisely, which is something I don't want to do because there is no guarantee it will look good on all resolutions and devices.
I would appreciate an xml sample for that
Thanks!
Use the desired drawable.. hope it works.. you can set width and height according to your need.
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/arrow" />
</FrameLayout>
</LinearLayout>
I am creating a design in Android for this list item:
I thought that the best solution would be create a linear layout with two relative layout inside it and a space. So I have tried to do it but I have a problem with weights.
In this picture you can see that I have added two relative layout with a space using layout_weight of linear_layout and the proportion works.
This is the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/fondo_chiste_lista_item"
android:weightSum="147"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="41"
android:layout_height="0dp" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="94"
android:layout_height="0dp" >
</RelativeLayout>
<android.support.v7.widget.Space
android:id="#+id/space1"
android:layout_width="wrap_content"
android:layout_weight="12"
android:layout_height="0dp" />
</LinearLayout>
But, now If I add a textview inside a relative layout proportions won't work. As you can see the boxes of the relative layouts have a different size.
This is the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/fondo_chiste_lista_item"
android:weightSum="147"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="41"
android:layout_height="0dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="46dp"
android:text="TextView" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="94"
android:layout_height="0dp" >
</RelativeLayout>
<android.support.v7.widget.Space
android:id="#+id/space1"
android:layout_width="wrap_content"
android:layout_weight="12"
android:layout_height="0dp" />
</LinearLayout>
So... What is the problem? Why the proportion change when I add elements? Is there any better solution?
I will add is as an answer since that fixed your problem
instead of
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
use something like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
Hi I have an activity with an imageview and a row with buttons at the bottom.The buttons are added to the iconView layout programmatically.When I test my app on my HTC one the buttons are displayed correct.
Once I run it on a device with a smaller screen it is cropped i.e. only the top of the buttons is displayed.
How can I make my code device independent?
<?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:background="#000000"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.95"
android:orientation="vertical"
android:paddingLeft="4dp"
android:paddingTop="4dp"
android:paddingRight="4dp"
android:paddingBottom="4dp"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_weight="0.05"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Thanks in advance.
Try this layout:
<?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:background="#000000" >
<RelativeLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:layout_above="#+id/iconView"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
</RelativeLayout>
</LinearLayout>
Try this
make the first view with android:layout_weight="1"
and the with a static height without the layout_weight, this should solve it
Unfortunately the solutions did not work. Eventually I changed my code and add the buttons in the xml, not programmatically. This works fine. I don't know why...
When adding button either programmatically or in XML layout, try to use LinearLayout as the parent for button and leverage the "weightsum" property of that LinearLayout.
When you're going to share the real state of screen's width or height equally between a number of views such as buttons or textview or ..., you can set "layout_weight" property on those controls. Notice that, this is only possible when using LinearLayouts.
What happens at the end is that the linearlayout's real estate is calculated and allocated according to each child's element's "layout_weight" value.
The example below shows how to put two buttons beside each other and make them fill the screen's width equally :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
>
<Button
android:id="#+id/btn_left"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<LinearLayout/>
I have a layout like below. Now, I don't want to set the width of relative layout to fixed 240 dp. I want to set the width of the relative layout to 1/3 the width of the screen. Is it possible to do that in the xml file. If it is impossible, how can I achieve that using java code ?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/fullscreen"
style="#style/translucent">
<RelativeLayout
android:layout_width="240dp"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:gravity="center"
android:background="#88000000"
android:id="#+id/sidebar">
</RelativeLayout>
</FrameLayout>
use weightsum="3" in the parent and layout_weight=1 in the child. Take a look a this reference
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/fullscreen"
style="#style/translucent"
android:orientation="horizontal"
android:weightSum="3">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:gravity="center"
android:background="#88000000"
android:id="#+id/sidebar"
android:layout_weight="1"
>
</RelativeLayout>
<!-- other views, with a total layout_weight of 2 -->
</LinearLayout>
You have to use a LinearLayout to get the width of a view to be a third of its parentview.
Something like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="#88000000">
</RelativeLayout>
<ViewGroup
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2">
</ViewGroup>
</LinearLayout>
The key bit is the ratio of the layout_weights. The documentation is pretty good.
A LinearLayout with a android:layout_orientation="horizontal" is what you want, along with weights.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
...all your stuff... />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />
</LinearLayout>