I have 3 horizontal LinearLayouts, I've been making xml on 4.7 screen and it looked good, then i switched to bigger screen and it doesnt look good. So my xml looks good on screen size of 4.7 but on 10.01 and 7 it screws up
on 4.7 screen:
on 10,01 :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backgroun"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Load" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Play"
android:layout_weight="1" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Mute"
android:layout_weight="1"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Volume up"
android:layout_weight="1" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Volume up"
android:layout_weight="1" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Mute"
android:layout_weight="1"/>
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Play"
android:layout_weight="1"/>
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Load"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="7"/>
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<SeekBar
android:id="#+id/seekBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="7"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<SeekBar
android:id="#+id/seekBar3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<SeekBar
android:id="#+id/seekBar4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
First of all when you use android:layout_weight you should set the android:layout_width="0dp"
Besides that now, I would suggest having a separate layout for xlarge screens. The way to do that is to create a separate folder that will contain a layout with the same name as your original layout (eg. main.xml). The folder name for 10" screens should be something like layout-xlarge. For more details you should check here.
For different size screens. you can also make another layout for bigger screen.
res/layout-small
res/layout-large
res/layout-xlarge
create a new folder as named "layout-xlarge" and copy your xml layout in there and you can adjust the sizes.
Android will automatically select the appropriate layout for the current device. Remember that, layout name should be the same in each folder.
Related
I want to place 9 buttons in my activity with two conditions:
1.If the screen is small the buttons get scroll.
2.If the screen enough big to fit all of them in one go then they get stretched to fill the screen.
I tried but its not working. thanks.
screenshot of layout
<include
android:id="#+id/toolbar"
layout="#layout/appbar"></include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff0fd"
android:orientation="vertical"
android:layout_margin="8dp">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/First_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Second_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:onClick="onButtonClick"
android:text="#string/Third_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Forth_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Fifth_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Sixth_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Seventh_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button8"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Eighth_Semester"
android:textStyle="bold" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/Gate"
android:textStyle="bold" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
You have to make different layouts for them, by creating folders in your res folder named layout-small , layout-large, as described here: Supporting Multiple Screens
the folder named 'layout' will be used ofcourse. But, when you create a folder named layout-small, that one will be used instead if the screen size is lower than 470dp x 320dp , which is the minimum resolution for layout-normal.
As for the stretching, use the layout weights and weightsum in a linearlayout for the layouts that look like they can fit in the preview.
Remove the weight parameters, and set layout_height to wrap_content, like so:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff0fd"
android:orientation="vertical"
android:layout_margin="8dp">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/First_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Second_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onButtonClick"
android:singleLine="true"
android:text="#string/Third_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Forth_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Fifth_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Sixth_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Seventh_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Eighth_Semester"
android:textStyle="bold"/>
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/Gate"
android:textStyle="bold"/>
</LinearLayout>
</ScrollView>
You can preview different screen resolutions in the editor to determine which to make with or without a scrollview right here:
I am trying to create a layout in XML something along of the lines of http://i.stack.imgur.com/aPoeU.png but I am little confused as to how to position the buttons in that format. I have created the buttons and tried different things like alignParentBottom, alignParentRight etc but I can't seem to get it the way I want it to be. Can someone please help me out?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button" />
We can manage it in all screen and in all resolution by weight_sum
Paste below code in your xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#000"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bebebe"
android:layout_weight="0.30"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button3" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.30"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>
Paste it in your XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2258A2"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.20"
android:orientation="horizontal"
android:weightSum="1" >
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button3" />
</LinearLayout>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>
Your code seems correct, but if you want to replicate the size of the buttons then you can't set the height as wrap_content. This will make it as tall as the text, change that to some given value:
android:layout_height="50dp"
Well, in RelativeLayout, as the name suggests, the elements are positioned relative to something else, like the parent view, or another widget in the layout. So you can align the widget in many many ways, like apending it to the right of a view, to the left, above, below, and so on.
Please refer to this link and this other link for more information.
So, if you want to make your buttons look exactly like your example image, try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button2"
android:text="Button 3" />
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button3"
android:text="Button 4" />
You can simply make the button width to fill_parent instead of align left and right. And the height, you can define the measures you'd like to use.
Btw, I used alignParentLeft and alignParentStart because I don't know which API level you're using, so I've used both parameters, old and new. But the effect is the same, your buttons will always start to the left of the parent view.
EDIT: As the user hasternet suggested, you could also use LinearLayout and get similar results.
EDIT 2: And if you like to change the look of your buttons, try to change the style (Take a look here to know what I mean).
Since you need to set the height of the buttons differently and also it depends on different screen size, you cannot achieve this with Relative Layout.
So go for LinearLayout and weightsum attribute. This way screen big or small, you can achieve your expected UI. Mentioned code below modified.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:Orientation="vertical"
android:weightsum="8" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button"
android:layout_weight="1"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button"
android:layout_weight="3"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button"
android:layout_weight="3"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button"
android:layout_weight="1"/>
</LinearLayout>
I gave the answer in this question a try, the only difference being that I'm using a vertical LinearLayout instead of horizontal:
Children in Linear Layout with equal padding
As such, I figured that I would swap around the width/height attributes so that width for all elements would be wrap_content, where as height would be match_parent. Is that how it should be?
Anyway, my weight selection is still causing my buttons to stretch in horrible ways.
Here is the xml file:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleX="0.8"
android:scaleY="0.8"
android:src="#drawable/logo" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#drawable/button1_image"
android:onClick="button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#drawable/button2_image"
android:onClick="button2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:background="#drawable/button3_image"
android:onClick="button3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:background="#drawable/button4_image"
android:onClick="button4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.4"
android:onClick="Button5"
android:text="Text"
android:textSize="26dp" />
</LinearLayout>
I feel like I'm close - what am I missing here?
If you want to prevent an item from being stretched, set it's height and width attributes to
android:layout_width="wrap_content"
android:layout_height="wrap_content"
So the buttons will only be as wide as the background image given.
If your background image is too large, that can be skewing things as well.
i don't know excetly what you require, but is this helpful to you?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleX="0.8"
android:scaleY="0.8"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/ic_launcher"
android:onClick="button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/ic_launcher"
android:onClick="button2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/ic_launcher"
android:onClick="button3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/ic_launcher"
android:onClick="button4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:onClick="Button5"
android:text="Text"
android:textSize="26dp" />
</LinearLayout>
I have a layout problem.
There are 9 buttons on my layout from top to bottom.
When i run my android app on my 3.7 inc telephone, buttons seems good. But when i run on 3 inc telephone, last 2 buttons dont seem on display.
How can i fix my problem ?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/arkaplan3"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".AnaEkran" >
<Button
android:id="#+id/btn1"
android:layout_width="160dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="33dp"
android:text="Buton"
android:textSize="15sp" />
If you have 9 Buttons like you said you can:
- Resize all the Buttons so take them small
- Create other layout.xml like that you have for the different screen sizes.
Like this:
res/layout/your_file.xml
------------------------
res/layout-small/your_file.xml
------------------------
res/layout_big/your_file.xml
Also take a look a this http://developer.android.com/training/multiscreen/screensizes.html.
Hope I helped you.
You have to put up a graphic of what your trying to do or at least all your layout file.
If were trying to achieve a basic calculator layout simply nest LinearLayout's (DO NOT NEST MORE THAN ONCE, google expectedly said not to). Then just give all your buttons the same wighting attribute to make sure they are all the same size no matter the scene
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- </LinearLayout> -->
<LinearLayout
android:orientation="horizontal"
android:paddingLeft="4.0dip"
android:paddingTop="5.0dip"
android:paddingRight="4.0dip"
android:paddingBottom="1.0dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_below="#+id/TextView01">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"
android:layout_gravity="center"
android:id="#+id/B1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="2"
android:id="#+id/B2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="3"
android:id="#+id/B3"
/>
<Button
android:id="#+id/BPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+"
android:layout_gravity="center"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:paddingLeft="4.0dip"
android:paddingTop="5.0dip"
android:paddingRight="4.0dip"
android:paddingBottom="1.0dip"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_below="#+id/TextView01">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"
android:layout_gravity="center"
android:id="#+id/B4"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="2"
android:id="#+id/B5"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="3"
android:id="#+id/B6"
/>
<Button
android:id="#+id/BPlus2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+"
android:layout_gravity="center"
/>
</LinearLayout>
</LinearLayout>
I am new to Android programming, and I have tried to research this thoroughly, but still not quite understanding how to resolve this problem. I will include my XML code below. I have tried using set "dip" sizing in Relative Layout in Eclipse to get the appearance desired of my app. Simple layout - Title Header and 3 buttons down the middle. Obviously, the problem I'm running into is the awkward stretching of everything due to the set specific dimensions. Any suggestions on how to properly use "match_parent" and "wrap_content" here? I'm just not quite understanding how to apply them in this situation. Maybe I should have used a Linear Layout, but Relative Layout seemed to be the better choice in case I increased the button count from 3 to upwards of 9 in the future for performance. Any help is much appreciated!
Here is my XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
android:background="#ffffff" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="60dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/pets_titlecrop" />
<Button
android:id="#+id/button1"
android:layout_width="80dip"
android:layout_height="80dip"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="48dp"
android:background="#drawable/call_now" />"
<TextView
android:id="#+id/textView2"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:background="#808080" />
<TextView
android:id="#+id/textView3"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/textView2"
android:background="#808080" />"
<Button
android:id="#+id/button3"
android:layout_width="80dip"
android:layout_height="80dip"
android:layout_alignLeft="#+id/button2"
android:layout_below="#+id/button2"
android:layout_marginTop="36dp"
android:background="#drawable/bpaw_printedit" />
<Button
android:id="#+id/button2"
android:layout_width="80dip"
android:layout_height="80dip"
android:layout_alignLeft="#+id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="36dp"
android:background="#drawable/blue_globemap" />
<TextView
android:id="#+id/textView5"
android:layout_width="100dip"
android:layout_height="30dip"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/textView3"
android:layout_toRightOf="#+id/textView2"
android:background="#drawable/by_wvg" />
</RelativeLayout>
You should try nested Linear layout and thus using weights you may achieve a flexible user interface, try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="60dip" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#808080" />
</LinearLayout>