I've tried a couple of things and read many topics, but I didn't find any solution for my problem.
At the moment I have an xml file with the layout on the picture. This is how it should look like the design and I did it with LinearLayouts and works perfect.
The problem is that I want when I click somewhere on the screen to add a highlighted column from top to bottom.
I read that this should be done with RelativeLayout, but I tried to do it that way, but I can't arrange my other elements to be with equal size.
Do you know how this could be done ?
This is part of my xml:
<LinearLayout
android:id="#+id/chart1Layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:layout_weight="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:background="#color/color"
android:gravity="bottom|center"
android:maxLines="4"
android:padding="3dp"
android:text="#string/cap"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/orange"
android:textSize="30sp"
android:textStyle="bold" />
<com.some.chart
android:id="#+id/result_widget_chartView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="8"
palette="grayscale"
android:background="#color/dark_header"
android:padding="0dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp" />
</LinearLayout>
Design : http://i.stack.imgur.com/fkHvG.png
Thanks a lot.
see my pic:
if this what you want?
Thanks for your answers. It's not exactly what I tried to achieve, but you gave some direction and I did it as I want.
The solutions was to add Relative Layout as root and keep everything as-is, to keep the design.
http://i.stack.imgur.com/j18Dw.png
I was doing wrong when I tried to replace my Linear layout container with Relative layout - I just needed to add all my things in new Relative container (not to replace).
Thanks.
Related
I've tried to track down what's going wrong here, and I'm coming up with nothing. If i change my layout weight from 1 to 2, on the first view in my horizontal linear layout, the resulting width actually decreases. Here is the code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:weightSum="7">
<TextView android:id="#+id/filterButton"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:padding="0dp"
android:textColor="#android:color/white"
android:text="filter"></TextView>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="fill_parent"
android:gravity="center" >
<AutoCompleteTextView
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:ems="14"
android:imeOptions="actionDone"
android:inputType="textAutoComplete|textAutoCorrect"
android:textColor="#FFFFFF"
android:singleLine="true"
android:gravity="left">
</AutoCompleteTextView>
<ImageView android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/close"
android:layout_alignParentRight="true"
android:scaleType="fitEnd"
android:adjustViewBounds="true"
android:padding="12dp"
android:visibility="invisible"
android:tint="#android:color/white"/>
</RelativeLayout>
<ImageView android:id="#+id/listButton"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:src="#drawable/list"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:padding="9dp"
android:tint="#android:color/white"></ImageView>
</LinearLayout>
Here is what my action bar looks like with the TextView's layout weight set to 1.
You can see I'm already getting some overflow on the right element. It's getting bumped off screen. Here is what it looks like with the TextView's weight set to 2.
Which is odd because the TextView has actually decreased in size. Here is the action bar without the TextView. The sizes are behaving well here.
Any help would be greatly appreciated!
It looks similar to problem i have sometimes.
For layout with weight 7 it would give space like that [[..2..][.5]].
Like in your example making weight smaller actually give more space for layout.
Try to change background color of the middle layout to have better grasp what space exacly is given to your layouts.
Unlucky on my computer your code works normally so I can't help more than that.
I am trying to put 6 buttons in the middle of the screen and it worked until I added text to one of them, as you can see in the picture below :
https://imgur.com/IxIVgHj
This is the code for the 2 buttons that causes problems :
<LinearLayout
android:id="#+id/tableRow3"
android:padding="5dp"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/utilitiesButton"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_marginLeft="10dp"
android:background="#drawable/menu_sms"
android:gravity="bottom|right"
android:padding="10dp"
android:text="0"
android:textColor="#color/red"
android:textSize="40dp" />
<Button
android:id="#+id/statisticsButton"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_marginLeft="10dp"
android:background="#drawable/menu_statistics"
android:gravity="center_vertical|center_horizontal" />
</LinearLayout>
I need the text to be bottom|right. The bigger the text size from the left button is, right button goes down more. Any ideas on this ?
Thank you,
Marius
If you set android:baselineAligned="false" on the LinearLayout, then the buttons inside the LinearLayout would align properly.
Reference: https://possiblemobile.com/2013/10/shifty-baseline-alignment/
Comment
Instead of using a LinearLayout try and use relative layout instead, with an android:gavity of fill_horizontal, and add a bit of space between your textviews, also try and decrease the padding on the first button.
I'm trying this now days and it still doesn't work. I read lots of tutorials about the Relative layout but I still can't do it. Please give me an idea, what I can do. I want a simple layout like in the picture.![enter image description here][1]
edit: Looks like I can't upload images ... :(
Its a layout for a simple quiz App with these widgets below each other. A ProgressBar, a TextView for a question, 4 Buttons for the answers. The TextView should take all the place the other widgets don't need. The Button should be always at the end.
I tried with alignParentTop, Bottom, nested LinearLayouts and it still doesn't work. What can I do? It would be REALLY REALLY great to have an idea? Thanks a lot!
Good idea: I uploaded the image: http://imgur.com/Z0YmLw2
Here is the actual code. (I edited it about 20x times)
<?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">
<ProgressBar
android:id="#+id/answerProgressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/countdownTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/answerProgressBar"
android:text="00:00:00" />
<ImageView
android:id="#+id/questionImageView"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="#id/countdownTextView"
android:layout_margin="5dp"
android:background="#drawable/ic_launcher"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/questionTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/answerProgressBar"
android:layout_margin="5dp"
android:layout_toRightOf="#id/questionImageView"
android:text="jfh rhguijfhg fhge hugutbh r rut hruteruzt dkjfh uzdt ggu zguzg zuh ftz huuh rh grhtughrtu thiohjriwetk lkj rgjrjkrjek"
android:textSize="22dp" />
<Button
android:id="#+id/answert1Button"
style="#style/answerButton"
android:text="answer 1" />
<Button
android:id="#+id/answer2Button"
style="#style/answerButton"
android:text="answer 2" />
<Button
android:id="#+id/answer3Button"
style="#style/answerButton"
android:text="answer 3" />
<Button
android:id="#+id/answer4Button"
style="#style/answerButton"
android:text="answer 4 Butto d uzrr rd drtd gzugt ffzft drtn" />
</RelativeLayout>
With RelativeLayout it's the easiest way to position your widgets to the screen. However, it may take some time until you master it. Since if you're designing your layout with Graphic Tool, it will be harder.
Try editing it in XML Text. Make sure to read this Android Dev Tutorial on all the options you can access with using RelativeLayout.
I am sure you did check it, but I'm also quite sure that you were only searching for the obvious solutions. Sometimes, some not so obvious options will lead you to your goal - so be patient and try to do it from scratch with help of the tutorial.
Otherwise you could also use FrameLayout which divides your screen into several frames. BUT, again, it might complicate things for you in your App.
First, to make it easier, remove countdownTextView and questionImageView, and let's try.
I think you need to place layout_alignParentTop attribute with the ProgressBar:
<ProgressBar
android:id="#+id/answerProgressBar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
And put all Buttons in a vertical LinearLayout with layout_alignParentBottom:
<LinearLayout
android:id="#+id/answerButtons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<Button
android:id="#+id/answerButton1"
style="#style/answerButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="answer1" />
(...)
</LinearLayout>
And at last, the TextView has to have both layout_below and layout_above attributes with setting layout_height="match_parent":
<TextView
android:id="#+id/questionTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="R.id.answerProgressBar"
android:layout_above="R.id.answerButtons"
android:text="blah blah blah" />
I have a TableLayout inside a RelativeLayout with android:layout_centerInParent="true" as one of its attributes, but it is not being centered vertically.
Here is my xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/line_drawing_relativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableLayout
android:id="#+id/activity_linking_tl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<TableRow
android:id="#+id/table_row_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1dp" >
<com.xx.myview
android:id="#+id/id_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.xx.myview
android:id="#+id/id_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
<ImageButton
android:id="#+id/line_drawing_b_restart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:padding="22dp"
android:src="#drawable/ic_restart" >
</ImageButton>
<!-- There are more views/widgets here -->
</RelativeLayout>
How would I solve this?
Are you sure that the RelativeLayout is taking up as much space as you think? It might be that the TableLayout is centered, but that the RelativeLayout is wrapping content, so it ends up being centered but in a smaller container than you expected. It's hard for me to gauge without seeing the RelativeLayout portion of the XML.
One way to check your layouts is to use the developer option "show layout bounds":
It will give you a better idea of how your layouts are being constructed. If you are running an older phone without this developer option, I would just start setting flat colors for View backgrounds (e.g. android:background="#F00").
Try setting parent RelativeLayout width and height to match_parent.
and add this to your TableLayout
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
The problem was that I had android:layout_below="xxx" as well (for some reason not shown in the code I posted), which overrode the centering I was trying to achieve. Removing this solved it. Obvious really.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" android:background="#drawable/robo">
<TextView android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Max Time(Sec)">
</TextView>
<EditText android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="100"
android:id="#+id/maximum"
android:inputType="number">
</EditText>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:id="#+id/startbtn"
android:focusable="true">
</Button>
<ImageButton android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/icon"
android:id="#+id/imageButton1">
</ImageButton>
</LinearLayout>
In LinearLayout you can't change positions a whole lot - because the layout is Linear (sequential). But you can use layout_margin to somewhat move the widgets.
I don't know what you want to do, but you should look into FrameLayout (which will let you put the image anywhere!). My personal favorite is RelativeLayout.
Position depends on position of it's parent container/component (Layout) and on it's layout_* properties.
And u did'n tell what u want. If u want change it position - switch it with another view in Layout.
put more buttons in layout and hide or show them according to your needs
views in android are in relationship, not only in RelativeLayout but in Others, so you should choose the best way to describe your app layout, using more than one is commonly used.
to change position of label, you 'd better using AbsoluteLayout then using android:layout_x="", android:layout_y=""
what is your exact requirement???
you can put two buttons and make one visible and other one invisible or vice verse.or you can put layout_margin for all direction.And try to put all your component in different layout.