I would like to know the best way of using Linear Layout or Table Layout for designing attached android screen.
I am using Linear layout as main layout and then adding the sub Linear layouts and Table Layouts in it. Is this the best way of doing???
Use RelativeLayout or GridLayout (ICS and above only).
This should get you started. It's not perfectly what you want but it hopefully is close. I didn't test the code so I don't even know if it compiles. Shouldn't be too far from the final code though. :)
<RelativeLayout>
<!-- Image, may want to size this as a square using dp pixels say, 64dpx64dp -->
<ImageView android:id="#+id/PhotoImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" />
<!-- TextViews at the right of the image. Stacked, caution this might end up being taller than the ImageView itself. -->
<TextView android:id="#+id/PersonNameTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_toRightOf="#id/PhotoImageView" />
<TextView android:id="#+id/TitleTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_toRightOf="#id/PhotoImageView" android:layout_below="#id/PersonNameTextView" />
<!-- Stacked TextViews below, you can split this out to side by side TextViews but that's more work. -->
<TextView android:id="#+id/PhoneTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="#id/PhotoImageView" />
<TextView android:id="#+id/EmailTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="#id/PhoneTextView" />
<!-- Delete button placed at the bottom. -->
<Button android:id="#+id/DeleteButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" />
</RelativeLayout>
Related
I want to make an base calculator app, so i started to make buttons for each number and operation. To keep them align i used an RelativeLayout but under it i have five LinearLayouts, each LinerarLayout represents a row of buttons.
My problem is the following, after i use layout_alignBottom to the first row in order to keep it at the bottom of the screen, i tried to use layout_above to align the second row above the first but it seems that i can't do that because i get an No resource found that matches the given name (at 'layout_above' with value '#id/firstRow'). error, in fact i get this error for all the alignments attributes.
Here is a part of my xml
<LinearLayout
android:id="#+id/secondRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#id/firstRow">
<Button
android:id="#+id/b1"
android:layout_width="85dp"
android:layout_height="85dp"
android:text="1" />
<!-- more buttons -->
</LinearLayout>
<LinearLayout
android:id="#+id/firstRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<Button
android:id="#+id/bP"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_marginLeft="0dp"
android:text="." />
<!-- more buttons -->
</LinearLayout>
How can i align the LinearLayouts in an way that the first row is at the bottom of the screen and the others are one above each others ?
The XML is rendered from top to bottom, therefore, if you want to add a reference to an element that is after the one you are adding the reference to, you need to call #+id instead of #id. In your case you should write this:
android:layout_above="#+id/firstRow"
This happens because at the time you are running the code from your first LinearLayout, Android doesn't have any element registered with the id "firstRow" since it wasn't compiled yet, so you need to add the + meaning that if it find any reference later on, it will be set, if not, it just aligns the view without the reference.
Try using android:layout_toStartOf and android:layout_toEndOf
You're doing this in a more complicated way than is necessary.
Just wrap them in a vertical oriented linear layout.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/b1"
android:layout_width="85dp"
android:layout_height="85dp"
android:text="1" />
<!-- more buttons -->
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/b1"
android:layout_width="85dp"
android:layout_height="85dp"
android:text="3" />
<!-- more buttons -->
</LinearLayout>
<!-- Your rows in order from top to bottom -->
</LinearLayout>
I have 4 image buttons which should be aligned like this:
As you can see they overlap, so I can't use a simple table layout, because of "collapsing" table rows. My attempt was to use transparent images among those image buttons while I used nested and overlapping LinearLayouts to align them. With this attempt I don't have to worry about density related calculations. This seemed to work in the first place, but unfortunately one of the invisible buttons overlays the real image buttons, so I can't click at least one image button anymore, because it's like clicking the invisible button, overlaying the real image button.
Another difficulty is that I can't use density related alignments within the xml file. The reason is that these image buttons are scaled in a different way than other scaled images. This is because these image buttons should always be as big as a thumbnail despite of a phone or a tablet. So the usual alignment with margin is not applicable here.
I think the only way to achieve this is to calculate it programmatically. Or any other ideas?
Here's my version (less Views), based on my original tip:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/controller_container"
android:layout_width="240dp"
android:layout_height="240dp"
>
<ImageButton
android:id="#+id/button_invisible_center"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:contentDescription="button_invisible"
android:visibility="invisible"
/>
<ImageButton
android:id="#+id/button_left"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toLeftOf="#id/button_invisible_center"
android:layout_alignTop="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_left"
/>
<ImageButton
android:id="#+id/button_up"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_above="#id/button_invisible_center"
android:layout_alignLeft="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up"
/>
<ImageButton
android:id="#+id/button_right"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toRightOf="#id/button_invisible_center"
android:layout_alignTop="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up"
/>
<ImageButton
android:id="#+id/button_down"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#id/button_invisible_center"
android:layout_alignLeft="#id/button_invisible_center"
android:background="#drawable/button_control"
android:contentDescription="#string/button_down"
/>
</RelativeLayout>
The result is:
I re-arranged the Views in order to minimize their count and therefore increase performances, being the layout lighter.
What was the trick? wrap_content in the container, shrunk everything to the center, whyle match_parent (which worked perfectly) was just out of specifics.
So I gave the buttons fixed sizes 80*80 dp and the container 3 times 80 dp (maximum combined width and height).
The image I used is't "cut out", so it better illustrates the concept.
Enjoy!
[EDIT]
In your case, this part
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
is not needed. Just replace it with
<RelativeLayout
since it's meant to be placed inside another container.
Now I have a solution due to Golem's tip although it doesn't work with just one centered invisible item. I had to place invisible buttons left of "up", right of "up", left of "down" and in the center where one button has 100x100dp, the invisible side buttons have 80x80dp and the invisible center button has 60x60dp. If you know any better, let me know.
<RelativeLayout
android:id="#+id/controller_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left" >
<ImageButton
android:id="#+id/button_invisible_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_top_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up" />
<ImageButton
android:id="#+id/button_invisible_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_up"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_invisible_top_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_left" />
<ImageButton
android:id="#+id/button_invisible_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_left"
android:layout_below="#id/button_up"
android:background="#drawable/button_control_invisible_center"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_center"
android:layout_below="#id/button_invisible_top_right"
android:background="#drawable/button_control"
android:contentDescription="#string/button_up" />
<ImageButton
android:id="#+id/button_invisible_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_left"
android:background="#drawable/button_control_invisible_side"
android:contentDescription="#string/button_invisible" />
<ImageButton
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_invisible_bottom_left"
android:layout_below="#id/button_invisible_center"
android:layout_alignBottom="#id/button_invisible_bottom_left"
android:background="#drawable/button_control"
android:contentDescription="#string/button_down" />
</RelativeLayout>
I have a LinearLayout that contains a lot of TextViews and ImageButtons, I want to align some of these elements to right, i had a look at this and this but i can't use their tips as i can't change the orientation and can't make android.gravity:right as i don't want to align all the elements to right, also i can't use nested layouts or but the desired elements into RelativeLayout because that shifts the rest of elements to the left and i want them at the center.
this is my code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.15"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:gravity="center"
android:background="#drawable/media_mediabar"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/move_backward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:scaleType="centerInside"
android:src="#drawable/media_button_rewind"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:tag="released"/>
<ImageButton
android:id="#+id/rmeote_mines"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:scaleType="centerInside"
android:src="#drawable/remote_minus" />
<TextView
android:id="#+id/remote_plus_minus"
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp" />
.
.
.<!.. some other elements ..!>
</LinearLayout>
The desired result:
The simplest solution would be using empty views with weights as separators.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- Left button -->
<Button ...
... />
<View android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!-- Middle button -->
<Button ...
... />
<View android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!-- Right button -->
<Button ...
... />
</LinearLayout>
The separator views can be made invisible as an optimization, because they don't draw anything and are used only for layout. You can tweak the actual 'layout_weight' values to get the desired layout. Starting from API level 14 you can use instances of Space as separators which will improve performance and readability (there is also a version of Space in the support library).
For such a complex layout you'd be way better of using RelativeLayout instead.
i can't use nested layouts
Then you can't solve your problem.
Nested layout are the heart of Android layout, to create such complex view that you desire, I think you must use nested layouts.
#Ridcully suggested you to use RelativeLayout, this is a good idea. You can combine it with few linear layouts and you be fine.
I think that RelativeLayout should be your base layout.
I have in my Android app a fairly simple Activity that displays three buttons, each launching a different Activity. Currently, I use a RelativeLayout to center the middle button both horizontally and vertically, then place the top and bottom buttons 30dp off the middle one (and also horizontally centered).
What I'd like to do, however, is make the buttons stretch to be a certain percentage of the screen width. I can't figure out how to do this and keep the buttons centered. Is there a good object I can use as a "filler" in a LinearLayout on either side of the buttons (so I could just set the weights)? Or is there a way to do this that doesn't involve a LinearLayout?
The XML for the layout as it stands is:
<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" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:onClick="button1Callback"
android:text="#string/button1Label" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="button2Callback"
android:text="#string/button2Label" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="#string/button3Label" />
</RelativeLayout>
Sure. View or Frame both work.
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="60" />
<Button android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="20" />
<View android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="20" />
</LinearLayout>
works fine as a spacer and seems to be utterly harmless as far as I can tell. I use this quite a bit in my app (although honestly, most of my buttons are fixed-width).
At one point I actually wrote a custom view with proportional layout. But in the end I ended up not using it at all. In almost all cases you can get equivalent proportional layout with judiciously applied weights in a linear layout.
I need to create an XML with the following content:
* Two TextViews with varying text (1- 3 rows), one TextView below the other.
* One ImageView to the right of the 2 TextViews, centered vertically, 30x30 px.
One major limitation is that it can't take the whole screen when inflated into a PopupWindow, which means that I cannot use the attributes fill_parent in many places.
I tried a lot of different layouts, but the ImageView keeps getting pushed away by the TextViews when the text is long. When the text is "half long" the image gets tiny but is still visible. I want it to always be 30x30 px, the text can wrap and use another line instead.
I tried to specify values for width and minWidth. Also tried layout_weight="1" for the ImageView. Also tried wrapping the ImageView into a LinearLayout and give that the layout_weight="1" parameter. Nothing works.
Here's an example of what is not working:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/popupTitle" android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/popupContent"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img_30x30_px" />
</LinearLayout>
I've had a similar problem and i found that the TableView layout worked for me. It took a while but you can play with the stretch and strink columns proeprties to change the behaviour of how the columns expand to match there content.
Note that you should be able to set the linearLayout of your text to fill_parent (to fill the column space).
Read this on how TableRow works http://developer.android.com/resources/tutorials/views/hello-tablelayout.html
<TableRow>
<!-- Column 1 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</LinearLayout>
<!-- Column 2 -->
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img_30x30_px" />
</TableRow>
(Afraid i'm not on a machine with Android so i couldn't test the above code).
Thank you so much Emile! It works! You made my weekend! :)
I had to try it right away (althought it's friday evening), and here's what my xml now looks like:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:shrinkColumns="0">
<TableRow>
<!-- Column 1 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/popupTitle"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:id="#+id/popupContent"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
<!-- Column 2 -->
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:src="#drawable/img_30x30_px" />
</TableRow>
</TableLayout>