Making on-screen buttons scrollable - java

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>

Related

Android: creating two linearlayout in single relative layout with on click button

In my single screen android project(using only one XML file) when i press button1 then linerlayout1 is open and when i press button2 then linearlayout2 is open.my button1 and button2 is placed in linearlayout3.can it works??if yes then how??
thanks in advance.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_above="#+id/linearLayout3"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/linearLayout1" />
<RadioButton
android:id="#+id/radioButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/linearLayout1" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Button2" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<RadioButton
android:id="#+id/radioButton13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/linearLayout2" />
<RadioButton
android:id="#+id/radioButton14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/linearLayout2" />
</LinearLayout>
</RelativeLayout>
Yes, it's very simple:
Use the android:Visibility XML tag initially, and when each respective button is pressed, you'd obtain your reference to the LinearLayouts, and set their visibility to VISIBLE or GONE in code.
Note: you want to use GONE rather than INVISIBILE as INVISIBILE will still take up screen space, so there'll be a large chunk of blank space where it was before, whereas I assume you want them in place of each other
in the layout xml of linear layout 1 and 2, use
android:visibility="gone"
From code
LinearLayout l1 = (LinearLayout) findViewById(R.id.linearLayout2);
you can use the following to make it visible
l1.setVisibility(View.VISIBLE);
and to hide it
l1. setVisibility(View.GONE):
You can play around with the "setVisibility" property of your layout.
In the "onCreate()" method you can do something like this
LinearLayout layout1 = (LinearLayout) view.findViewById(R.id.linearLayout1);
layout1.setVisibility(View.GONE);
And then on your button press
layout1.setVisibility(View.VISIBLE);

Get two buttons 50/50 width in my layout

i've got a layout that looks like below. But ideally I want the buttons Save and Cancel to be 50% width each, next to each other. Can't quite seem to get them to work though.
Any suggestions?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<Button
android:id="#+id/btnMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="-" />
<EditText
android:id="#+id/txtCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnPlus"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/btnPlus"
android:layout_toRightOf="#+id/btnMinus"
android:ems="10"
android:inputType="number" >
<requestFocus />
</EditText>
<Button
android:id="#+id/btnPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="+" />
<Button
android:id="#+id/btnGo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/btnMinus"
android:layout_toRightOf="#+id/button1"
android:maxWidth="100dp"
android:text="Save"
android:width="100dp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/btnMinus"
android:text="Cancel" />
</RelativeLayout>
You shouldn't be using a RelativeLayout for this design. You should be using a LinearLayout.
Something like this outline (very stripped-down):
<LinearLayout android:orientation=vertical>
<LinearLayout android:orientation=horizontal>
<Button android:layout_width=100 /> <!-- Minus -->
<EditText android:layout_width=0 android:layout_weight=1 />
<Button android:layout_width=100 /> <!-- Plus -->
</LinearLayout>
<LinearLayout android:orientation=horizontal>
<Button android:layout_width=0 android:layout_weight=1 /> <!-- Cancel -->
<Button android:layout_width=0 android:layout_weight=1 /> <!-- Save -->
</LinearLayout>
</LinearLayout>
Your looking for android:layout_weight="0.5". This only works with LinearLayouts, though.
So what you could do is add a LinearLayout that contains your two buttons and set the weights then.
You should use a LinearLayout, inside the RelativeLayout, only for buttons, and give them the same android:layout_weight (1 and 1, 2 and 2, as you wish).

Android Dynamically center the buttons when inflating layout

I need to center layout dynamically, but the problem is I use inflate method to add the layout. And I want buttons to be center.
I tried adding xml attributes like gravity, layout_gravity. But it didn't work.
And I tried to add parameters, but since I inflate xml I can't add parameters. Because I can't use addRule method.
Then I tried to make every element center by adding gravity attribute to root layout, it didn't work out either.
Here is the my code.
actvity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<SurfaceView
android:id="#+id/surfaceView1"
android:layout_width="match_parent"
android:layout_height="335dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:id="#+id/buttons_layout"
android:layout_below="#+id/surfaceView1"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="29dp"
android:text="Button" />
</RelativeLayout>
</RelativeLayout>
three_buttons_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="29dp"
android:text="Button 1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="29dp"
android:text="Button 2" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
And here is my java code
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
parent = (ViewGroup)findViewById(R.id.buttons_layout);
captureButton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
camera.takePicture(null, null, photoCallback);
captureButton.setVisibility(View.GONE);
inflater.inflate(R.layout.three_buttons_layout, parent, true);
}
});
I want Button1, Button2, and Button3 to be center.
A horizontal LinearLayout will always left-align its subviews. You're going to have to use a RelativeLayout in order to get the positioning you want. I'd suggest giving button1 the android:layout_alignParentLeft attribute, button2 the android:layout_centerHorizontal attribute and button3 the android:layout_alignParentRight attribute, like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginBottom="29dp"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="29dp"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button 3" />
</RelativeLayout>
(I'm just editing your code in the comment editor, so there might be a syntax error in there somewhere, but you get the idea.)
Also, you should be able to set any attribute you want on those buttons after inflating the view. Just call findViewById(R.id.button1) and it should return you the view you want (as long as its after the inflater.inflate call). On that note, you've given all your buttons the same id, which probably isn't a good idea.
Hope that helps! Let me know if it's still not working.
Edit: I just realized you're going to need that RelativeLayout to have android:layout_width="match_parent". I've edited the above xml accordingly.
//try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
//your can remove this below line from parent to make it as center horizontally
android:layout_gravity="center"

Android HorizontalScrollView content Stretch

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.

Android UI - align buttons in the centre, order vertically

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 !

Categories