I'm trying to create a UI that has a banner on the top but one table row below has a list of buttons ordered vertically, but aligned horizontally...
My code so far is...
<?xml version="1.0" encoding="utf-8"?>
<Button android:id="#+id/button1" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Theme">
</Button>
<Button android:id="#+id/button1" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Theme2">
</Button>
<Button android:id="#+id/button1" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Theme3">
</Button>
All this does is put all the buttons in the centre, how do I make each button flow down? I basically want a similar UI design to http://www.appbrain.com/app/friday-soundboard-rebecca/com.randomcrap.soundboard
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:text="Button" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/button1"
android:layout_alignParentTop="true" android:layout_centerHorizontal="true"></Button>
<Button android:text="Button" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/button2"
android:layout_below="#+id/button1" android:layout_centerHorizontal="true"></Button>
<Button android:text="Button" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/button3"
android:layout_below="#+id/button2" android:layout_centerHorizontal="true"></Button>
<Button android:text="Button" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/button4"
android:layout_below="#+id/button3" android:layout_centerHorizontal="true"></Button>
</RelativeLayout>
you have to use android:layout_weight="1"
on all the buttons for making them in the center .
Also make all the android:gravity and android:layout_gravity at "center"
and for the spacing stuff
use
padding-left="20dp"
padding-right="20dp"
padding-top="5dp"
paddding-bottom="5dp"
i think this all should work !
Related
The image is covering the textView and buttons(I cant even see them at all so I'm guessing they are behind the image). Image is attached. I want the textview and buttons to appear below the imageview. Below is my xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/bw" />
<EditText
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2" />
</LinearLayout>
You can change the main layout to RelativeLayout, set the ImageView at the top and wrap the views below the ImageView, inside a separate layout.
By setting android:layout_above="#+id/linear" for the ImageView, you will be sure that the ImageView will never cover the other views.
<?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"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linear"
android:layout_alignParentTop="true"
android:scaleType="fitStart"
android:src="#drawable/bw" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:gravity="center_horizontal">
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
</LinearLayout>
</RelativeLayout>
Try changing the parent layout to a RelativeView, or a ConstraintView. If you don't want to redo your positioning of your layout, you can wrap everything except the Image in a LinearLayout.
<RelativeView>
<ImageView>
<LinearLayout>
//...All your stuff
</LinearLayout>
<RelativeView>
This isn't one way of course, try to experiment. Feel free to ask if you still encounter problems.
Im trying to make an app for the sony smart watch 2.
Im trying to make a basic converter app which consists of one text box, two radio buttons and one button. Yet when testing on the watch everything is massive. If I resize things in eclipse things disappear and other things what is happening? Picture of it on watch:http://content.screencast.com/users/jeremyc12/folders/Jing/media/050d6158-1daa-4ebe-8eb2-ed8a46e3d024/2014-04-23_1334.png
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="#dimen/smart_watch_2_control_width"
android:layout_height="#dimen/smart_watch_2_control_height"
android:background="#color/myColor"
android:onClick="calculate"
tools:ignore="PxUsage" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:inputType="numberSigned"
android:width="5px" >
<requestFocus />
</EditText>
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/editText1"
android:layout_alignBottom="#+id/editText1"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:checked="true"
android:text="#string/kmh" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button2"
android:layout_alignLeft="#+id/radioButton1"
android:text="#string/miles" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/editText1"
android:text="#string/calc" />
Two issues I see here:
As Aritra pointed out, make sure in your XML layout that you aren't doing any scaling. So don't use "dp" just "px".
There are only a few Views in Android supported on SW2. See here for details:
http://developer.sonymobile.com/reference/sony-addon-sdk/com/sonyericsson/extras/liveware/aef/control/Control.Intents#EXTRA_DATA_XML_LAYOUT
EditText, RadioButton and Button views are not included there so thats why you're seeing some strange issues even without scaling.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#ff0000"
android:onClick="calculate" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:inputType="numberSigned"
android:width="5px" >
<requestFocus />
</EditText>
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:layout_toRightOf="#+id/radioButton2"
android:checked="true"
android:text="kmh"
android:textSize="8sp" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:text="miles"
android:textSize="8sp"/>
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/radioButton2"
android:layout_toRightOf="#+id/editText1"
android:text="calculate"
android:textSize="8sp"/>
</RelativeLayout>
I am busy designing my first app in android but I am having some problems.
I have created this:
<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:orientation="vertical"
tools:context="com.mfr.calculatorapp.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_margin="15dp"
android:text="123"
android:id="#+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1" />
</LinearLayout>
But the two Buttons appear underneath each other and not on top of each other, I know that if I change orientation to horizontal that I will be able to position it next to each other but I want to be able to span a textview over the top.
What do I do?
Regards
Matt
You will want to use a relative layout. You will see the below code didn't need a lot of extra attributes to pull this off.
Notice that the buttons now have three additional attributes.
andoid:layout_below="#id/" : positions the element under another element
android:layout_alignWithParentIfMissing : if the above mentioned element is not present, align with the parent
android:layout_alignParentLeft : allows you to position one button to the left and one to the right
UPDATE use android:layout_alignRight="#id/textView" to properly align your second button to the right
<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="com.mfr.calculatorapp.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_margin="15dp"
android:text="123"
android:id="#+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="1"
android:id="#+id/button_1"
android:layout_below="#id/textView"
android:layout_alignWithParentIfMissing="true"
android:alignParentLeft="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/number_button_size"
android:textSize="#dimen/number_button_size"
android:layout_margin="10dp"
android:text="2"
android:id="#+id/button_2"
android:layout_below="#id/textView"
android:layout_alignWithParentIfMissing="true"
android:alignParentRight="true"
android:layout_alignRight="#id/textView"
/>
</RelativeLayout>
I have screen with 18 buttons, Is it possible to make this group of buttons scrollable so that user can see buttons which are out of the viewable area. I tried putting these buttons in ScrollView but got the exception that only their can be only 1 child of scroll view.
Currently the buttons are present in a RelativeLayout like:
<Button
android:id="#+id/btnChapter2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter1"
android:layout_below="#+id/btnChapter1"
android:text="Chapter 2" />
<Button
android:id="#+id/btnChapter3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter2"
android:layout_below="#+id/btnChapter2"
android:text="Chapter 3" />
<Button
android:id="#+id/btnChapter4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter3"
android:layout_below="#+id/btnChapter3"
android:text="Chapter 4" />
<Button
android:id="#+id/btnChapter5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter4"
android:layout_below="#+id/btnChapter4"
android:text="Chapter 5" />
<Button
android:id="#+id/btnChapter6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter5"
android:layout_below="#+id/btnChapter5"
android:text="Chapter 6" />
The current screen with buttons 9, 17 and 18 being screwed up looks as:
Well, ScrollView may have only one child. In this case, put a LinearLayout or RelativeLayout as the ScrollView's child. The put your button inside the LinearLayout or RelativeLayout. That should've done it. Example code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</ScrollView>
I have a HorizontalScrollView with some buttons, I am trying to stretch these buttons to fill the whole width of the HorizontalScrollView so that they can appear organized and equally spaced between each others. Here is the Image which I have.
I want these 4 buttons to be stretched over the whole width! here is my code
<HorizontalScrollView
android:id="#+id/items_HorizontalBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/vf"
android:background="#80000000"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Light"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Door"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Alarms"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Window"
android:textColor="#color/green_color"
android:textSize="20sp" />
</LinearLayout>
</HorizontalScrollView>
Instead of messing with LinearLayout you should follow the correct solution that is setting the HorizontalScrollView (or Vertical) to FillViewPort.
XML:
android:fillViewport="true"
Programmatically:
hsv.setFillViewport(true);
For equal distributions, set the weightSum value of the parent, and assign layout_weight to its children.
For 4 equal sized buttons, add android:weightSum="1" to the LinearLayout. For each of the buttons set android:layout_width="0dp", then add android:layout_weight="0.25".
This is what occurs in the code but depending on the View, the "Distribute Weights Evenly" button in the Eclipse GUI can also help.
However, HorizontalScrollView can only host one direct child, I wonder about the structure of this layout...
try making the container a horizontal scroll view. After that add in a table layout, and in each row of the table add in a horizontal linear layer. what will now happen instead, is that the scroll view will be stretched to fit the button size you set, and should scroll w/o you having to program a thing, and you should have effectively created a grid.
try something similar to this:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="233dp"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
Also perhaps you could wrap the horizontal scroll view in a vertical scroll view then you can scroll up/down, left/right and do as you need.