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

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.

Related

how to stop components in android GUI not to overlap

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>

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.

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"

why android:layout_gravity="right" not working here in android xml

my xml code for list view's row is
<?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:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="2"
android:gravity="center" >
<ImageView
android:id="#+id/iv_image"
android:layout_width="50dp"
android:layout_height="40dp"
android:background="#drawable/app_icon_17"
android:contentDescription="#string/empty" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="2"
android:gravity="center" >
<Button
android:id="#+id/btn_delete"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/btn_delete_new"
android:focusable="false" />
</LinearLayout>
</LinearLayout>
I want the last button with id btn_delete to stay right aligned. And its showing as I wanted in "graphical layout" while designing. But when I run it, on emulator it's not working.
See the output :
So why the delete button not getting right aligned?
Use this, using relative layout
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_name"
android:layout_marginLeft="10dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" >
<Button
android:id="#+id/btn_delete"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/btn_delete_new"
android:focusable="false" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/rl_btn" >
<ImageView
android:id="#+id/iv_image"
android:layout_width="50dp"
android:layout_height="40dp"
android:background="#drawable/app_icon_17"
android:contentDescription="#string/empty" />
</RelativeLayout>
</RelativeLayout>
You seem to have misunderstood layouts, those embedded LinearLayouts aren't needed. Use a RelativeLayout, e.g.:
<?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="wrap_content" >
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp" />
<ImageView
android:id="#+id/iv_image"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/tv_time"
android:background="#drawable/app_icon_17"
android:contentDescription="#string/empty" />
<Button
android:id="#+id/btn_delete"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:background="#drawable/btn_delete_new"
android:focusable="false" />
</RelativeLayout>
As we can see that you have assign weight to your row layout.
If you assign weight your parent layout you just need to set accordingly height or with 0dp.
In your case android:layout_width="0dp"
but when you have child layout of that weighted layout then you must give that layouts property as fill_parent i.e: button's android:layout_height="fill_parent"
So if you don't want to change your parent layout and want to work with existing code you can try below code.
<?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:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
>
<ImageView
android:id="#+id/iv_image"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#drawable/icon"
android:contentDescription="#string/app_name" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2" >
<Button
android:id="#+id/btn_delete"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#drawable/icon"
android:focusable="false" />
</LinearLayout>
</LinearLayout>
Change this
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="2"
android:gravity="center" >
<Button
android:id="#+id/btn_delete"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#drawable/btn_delete_new"
android:focusable="false" />
</LinearLayout>
to
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn_delete"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="right"
android:background="#drawable/btn_delete_new"
android:focusable="false" />
</LinearLayout>
You were applying android:layout_gravity="right" to layout. Instead, you should apply it to a button inside layout. And I don't think you need weight 2 for that layout. But you can add it if its required for you. Hope it helps.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical" >
<Button
android:id="#+id/btn_delete"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="right"
android:gravity="right"
android:background="#drawable/btn_delete_new"
android:focusable="false" />
</LinearLayout>

Categories

Resources