how to stop components in android GUI not to overlap - android

I am trying to make the image button fix completely on the screen and the spinner. It seems to have a problem with the weight sum and weight layout. I have tried to fix it, but haven't gotten anywhere. This is my code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".ElderActivity"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/first"
android:background="#ffab7c74"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Smart House"
android:id="#+id/textView"
android:gravity="center"
android:autoText="true"
android:textColor="#fffff7f4" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/environment"
android:layout_weight="1"
android:id="#+id/imageButton" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/law"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner"
android:layout_weight="1" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner1"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/consumer"
android:layout_weight="1"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/educations"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_weight="1" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner3"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
[screem shot of screen][1]: https://i.stack.imgur.com/tPFDi.jpg

It is very bad practice to use the weight option, especially if you have weight options in deep hierarchy of layout. For your example you need to use RelativeLayout or even TableLayout.
But if you want a mess up for your bottom part you can use tricky thing like:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<View android:id="#+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text1"
android:layout_alignEnd="#id/strut"
android:layout_alignParentStart="true"
/>
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/strut"
android:layout_alignParentEnd="true"
android:text="#string/text2"
/>
</RelativeLayout>

Related

How can I make this layout for android?

[SOLVED]I have a very specific layout that I want to make. It feels like it should be very easy to create but I can't seem to wrap my fingers around it. So I want to create a layout that looks like the image below. How the hell do I get this? I just get the text and the 2 images and then get the buttons to be visible. Posted my layout below as well.
Thanks in advance // eXpliCo.
http://imgur.com/Qu5CRDC
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="20"
android:orientation="vertical" >
<TextView
android:id="#+id/question_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/question_text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:id="#+id/image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/picture_placeholder" />
<ImageView
android:id="#+id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/picture_placeholder" />
</LinearLayout>
<LinearLayout
android:id="#+id/navigation_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/vote_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center" >
<Button
android:id="#+id/vote_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button" />
<Button
android:id="#+id/vote_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button" />
</LinearLayout>
</LinearLayout>
EDIT: I got a solution now. I don't know if it's the best but it works for me. But I can't answer my own code yet so I'll just post my solution here.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Test123 312 123 312"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="100" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="test" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="test" />
</LinearLayout>
</LinearLayout>
In your second LinearLayout, set the orientation to horizontal.
Here you go
<?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" >
<TextView
android:text="Some Text here"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/SomeText"
android:gravity="center"
android:textSize="20sp" />
<LinearLayout
android:id="#+id/image_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/SomeText"
android:orientation="horizontal" >
<ImageView
android:id="#+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight="1" />
<ImageView
android:id="#+id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:id="#+id/button_layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/image_layout"
android:orientation="horizontal" >
<Button
android:id="#+id/vote_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_weight="1"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp" />
<Button
android:id="#+id/vote_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_weight="1"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/button_layout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/button_layout1"
android:orientation="horizontal" >
<Button
android:id="#+id/vote_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_weight="1"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp" />
<Button
android:id="#+id/vote_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4"
android:layout_weight="1"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp" />
</LinearLayout>
</RelativeLayout>
It sounds like this works with smaller images but not larger images. If this is the case then use layout_weight in each child LinearLayout so that each takes up a certain amount of space. This will help the layout to look similar on different screen sizes and resolutions.
So, for instance...
<TextView
android:text="Some Text here"
android:layout_weight="1"
...
LinearLayout
android:id="#+id/image_layout"
android:layout_weight="3"
...
<LinearLayout
android:id="#+id/button_layout1"
android:layout_weight="2"
...
<LinearLayout
android:id="#+id/button_layout2"
android:layout_weight="2"
...
You may have to adjust the weights to what you want/need but something like that should help. You will also want to set your height for each of those to 0dp since the parent LinearLayout is vertical.

how to fill complete screen with differnt views in android

I have simple question but this is making my development terrible.
in different activities i have different set of views. for example textview, buttonview, editview. what i want is, all views should be fit dynamically on screen (no matter i have one view or 5 views) but its not happening. some time views go out side the screen and some times white space left on screen.
bellow is what i tried, i do not want to provide android:layout_height="75dp".
Please F1
<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" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_height="75dp"
android:background="#drawable/btnmusic"
android:scaleType="fitCenter" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:onClick="onClick"
android:scaleType="fitXY"
android:src="#drawable/btnselectedsong" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:src="#drawable/btnplay"
android:onClick="onClick"
android:scaleType="fitXY" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:background="#drawable/btnpause"
android:onClick="onClick"
android:scaleType="centerInside" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:background="#drawable/btnstop"
android:onClick="onClick"
android:scaleType="fitCenter" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
set layout_weight=1 to all the wiews, which you want to share available space equally.
for your code :
<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="odp"
android:layout_weight="1" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_height="75dp"
android:background="#drawable/btnmusic"
android:scaleType="fitCenter" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="odp"
android:layout_weight="1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="odp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:onClick="onClick"
android:scaleType="fitXY"
android:src="#drawable/btnselectedsong" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:src="#drawable/btnplay"
android:onClick="onClick"
android:scaleType="fitXY" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:background="#drawable/btnpause"
android:onClick="onClick"
android:scaleType="centerInside" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:background="#drawable/btnstop"
android:onClick="onClick"
android:scaleType="fitCenter" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="odp"
android:layout_weight="1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
Have a LinearLayout as Parent
Set its layout_height="fill_parent" and orientation="horizontal"
Add the the views you have, to this parent
Finally to every view set layout_weight="1"
By the last line you mean, no matter how many view you have, they all must be of equal height and by 1st line you mean, all together, the views must occupy the whole screen.
If you use a relative layout you can define features in respect to the edges of the screen and the horizontal and vertical centers allowing for a dynamic placment of the buttons.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_centerHorizontal="true"
android:background="#drawable/btnmusic"
android:scaleType="fitCenter" />
</RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/spinner1"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
....
....
....
</RelativeLayout>
Something like that should give you a dynamic layout.
As you are using LinearLayout so you can use layout_weight that will take care of adjusting whole space.
If you want to give specific space apart from equal spacing you can define a android:weightSum="100"
and can distribute it to child layout according to your requirement
I simply tried with some demo and changed your layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:android:weightSum="100" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/btnmusic"
android:scaleType="fitCenter" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="40" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClick"
android:scaleType="fitXY"
android:src="#drawable/btnselectedsong" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/btnplay"
android:onClick="onClick"
android:scaleType="fitXY" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="30" >
<ImageButton
android:id="#+id/btnplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btnpause"
android:onClick="onClick"
android:scaleType="centerInside" />
<ImageButton
android:id="#+id/btnpause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/btnstop"
android:onClick="onClick"
android:scaleType="fitCenter" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
Hope this will help you.

two linear layouts in the same screen

hi im trying to design my app for both android phone and tablet. So i already had it designed but needed to redesign for scaling purposes for different screens.
This is the layout im going for.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#color/white">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:orientation="horizontal" >
<fragment
android:id="#+id/map"
android:layout_marginTop="5dp"
android:layout_weight=".1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.google.android.gms.maps.MapFragment"
/>
<Button
android:id="#+id/button3"
android:layout_weight=".25"
android:layout_marginLeft="34dp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="ClickTourismButton"
android:text="#string/Tourism" />
<Button
android:id="#+id/button4"
android:layout_weight=".25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="34dp"
android:text="#string/Nearby" />
<Button
android:id="#+id/button2"
android:layout_weight=".25"
android:layout_marginLeft="34dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Favourites" />
<Button
android:id="#+id/button1"
android:layout_weight=".25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="34dp"
android:text="#string/Map" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal" >
<TextView
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:id="#+id/feedupdate1" />
<ListView
android:id="#android:id/list"
android:background="#color/red"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"/>
<TextView
android:id="#+id/empty"
android:textIsSelectable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="#+id/feedupdate"
android:layout_marginLeft="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:textIsSelectable="true"/>
<ListView
android:id="#+id/list1"
android:background="#color/blue"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:layout_marginLeft="6dp" />
</LinearLayout>
</RelativeLayout>
When i run the app the two linear layouts are on top of each other?? or the map fragment which is seen above as the black rectangle takes up all the screen??? Ive no idea what im doing wrong, ive looked through several tutorials and t seems right?
Need assistance please
thanks
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="2"
android:background="#color/white">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<fragment
android:id="#+id/map"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
class="com.google.android.gms.maps.MapFragment"
/>
<Button
android:id="#+id/button3"
android:layout_marginLeft="34dp"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="ClickTourismButton"
android:text="#string/Tourism" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="34dp"
android:text="#string/Nearby" />
<Button
android:id="#+id/button2"
android:layout_marginLeft="34dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Favourites" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="34dp"
android:text="#string/Map" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:id="#+id/feedupdate1" />
<ListView
android:id="#android:id/list"
android:background="#color/red"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"/>
<TextView
android:id="#+id/empty"
android:textIsSelectable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="#+id/feedupdate"
android:layout_marginLeft="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:textIsSelectable="true"/>
<ListView
android:id="#+id/list1"
android:background="#color/blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:layout_marginLeft="6dp" />
</LinearLayout>
</LinearLayout>
one component takes up each side??
its divided in two but the map fragment takes up all of one side and the first listview takes up all of the other???
Change your orientation of both child LinearLayouts to VERTICAL
For top remove Relative and use LinearLayout with orientation HORIZONTAL
and have weightSum=2
Now in both child linearlayout views give layout_width="0dp" and layout_weight="1"
Example XML for you : http://pastebin.com/2MCBN9qk
Try changing RelativeLayout with LinearLayout, please take a look at this link for a deeper understanding about the different types of layouts.
Try using weightSum
and add your linear layouts inside a Relative layout for better positioning.

How to prevent layout moving?

I have one main layout in my quiz game and in it 3 more nested layout, one below another, vertical. In the top one I have a text view for the question, the middle one with four buttons vertically arranged. Now, when I have one line question everything is fine, but as soon as question goes to two line, my buttons move down one row. How to prevent this? I want everything below my question to be fixed, static, not to move.
<?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="#drawable/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="404dp"
android:orientation="vertical"
android:weightSum="2"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1" >
<TextView
android:id="#+id/tvPitanje"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="#string/tvPitanje"
android:textSize="22sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1" >
<Button
android:id="#+id/bOdgovor1"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor1"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor2"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor2"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor3"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor3"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor4"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor4"
android:textSize="26sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/bIzlazIzKviza"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:background="#drawable/buttons"
android:text="#string/bIzlazKviz"
android:textSize="23sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/tvCountdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="#string/tvCountdown"
android:textColor="#ff0000"
android:textSize="29sp" />
<TextView
android:id="#+id/tvSkor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="#string/tvSkor"
android:textSize="23sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/tvBrojPitanja"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="30dp"
android:text="1"
android:textSize="32sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
A little later, but here we go, there are several solutions for this problem I will point out here two of them that probably are the most user friendly:
Use a scrollview for everything, IMHO this is the most user friendly solution.
Use scrollview just for text and buttons with a defined height, and put the below text and buttons static underneath, make use of a relative layout then.
Marquee text view
the first option I will put out here, with some layout refactoring included, the second one I wont recommend to use, put pretty simple to achieve if you have example one:
<?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="#android:color/background_light"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
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="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tvPitanje"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="long text that will automaticly scroll and make sure all content will be displayed right in the scrollview this is the best case scenario"
android:textSize="22sp"/>
<Button
android:id="#+id/bOdgovor1"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="one"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor2"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="two"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor3"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="three"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor4"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="four"
android:textSize="26sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<Button
android:id="#+id/bIzlazIzKviza"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:text="left"
android:textSize="23sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/tvCountdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="next"
android:textColor="#ff0000"
android:textSize="29sp"/>
<TextView
android:id="#+id/tvSkor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="middle"
android:textSize="23sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:id="#+id/tvBrojPitanja"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="30dp"
android:text="right"
android:textSize="32sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Marquee solution less nice
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit ="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"

How to fix the position of views in an Android layout?

I have designed a layout with some views (listview, buttons etc..).
When I install my app into an Android phone, the position of views is not the same as I designed.
Some buttons are only partially visible. Can anyone please tell me how to fix the position of views in the layout?
here is the code I used to design.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/bg4" android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent" android:layout_height="10dp"
android:orientation="horizontal">
<TextView android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="3dp" android:text=" " />
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<ImageView android:id="#+id/imageView1"
android:layout_width="100dp" android:layout_height="60dp"
android:src="#drawable/logo" />
<TextView android:id="#+id/Loginas"
android:layout_width="120dp" android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp" android:gravity="center"
android:text="Logged in as..." android:textColor="#802A2A"
android:textSize="18dp" android:typeface="serif" />
<Button android:id="#+id/btnlgout"
android:layout_width="80dp" android:layout_height="30dp"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" android:background="#drawable/logout"
android:onClick="logout" />
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp" android:orientation="horizontal">
<TextView android:id="#+id/count"
android:layout_width="90dp" android:layout_height="25dp"
android:layout_marginLeft="5dp" android:layout_weight="1"
android:text="Count : 4" android:textColor="#802A2A"
android:textSize="15dp" />
<Spinner android:id="#+id/refresh"
android:layout_width="150dp" android:layout_height="25dp"
android:background="#drawable/drop" />
<Button android:id="#+id/btnpreferences"
android:layout_width="90dp" android:layout_height="30dp"
android:layout_marginLeft="10dp" android:background="#drawable/pref"
android:onClick="getPreferences" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp" android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<TextView android:id="#+id/column1"
android:layout_width="70dp" android:layout_height="wrap_content"
android:text="column1" android:textStyle="bold" />
<TextView android:id="#+id/column2"
android:layout_width="70dp" android:layout_height="wrap_content"
android:text="column2" android:textStyle="bold" />
<TextView android:id="#+id/column3"
android:layout_width="70dp" android:layout_height="wrap_content"
android:text="column3" android:textStyle="bold" />
<TextView android:id="#+id/column4"
android:layout_width="70dp" android:layout_height="wrap_content"
android:text="column4" android:textStyle="bold" />
</LinearLayout>
<ListView android:id="#+id/listViewTickets"
android:layout_width="match_parent"
android:layout_height="200dp" android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp">
</ListView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:orientation="horizontal">
<TextView android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text=" " />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginBottom="80dp" android:orientation="horizontal">
<Button android:id="#+id/btnNew"
android:layout_width="80dp" android:layout_height="30dp"
android:background="#drawable/btnnew" />
<Button android:id="#+id/btnUpdate"
android:layout_width="80dp" android:layout_height="30dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" android:background="#drawable/edit" />
</LinearLayout>
</LinearLayout>
Use ScrollView:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/cherry"
android:orientation="vertical" >
// your components
</RelativeLayout>
</ScrollView>
inside linear layouts in views you used a constant width. It would be better if you use weight-sum for same and provide them width in by weight.
You should read up a few layout practices like Romain Guy's layout tricks, and consider using more efficient containers than the LinearLayout.
You should also position your components relatively to each-other and their parent, this is the way you can achieve a proper layout that looks the same on all screens / resolutions.
Much better if you use RelativeLayout so that you can arrange the views very well.

Categories

Resources