We Keep Coding

Create Spacing with Percentage Relative Layout

My problem is that I have four Buttons on the screen, I used a PercentageRelativeLayout to place them where I want them and everything was working great.
They even resize!
However, when they do resize, the Buttons start touching each other, and when I make it so they do not touch each other on a tablet, when I go back to a phone the space is too far apart.
Does anyone have any idea on how I could create a spacing that could work on all devices?
Because I thought that PercentageRelativeLayouts were the perfect solution to get things to resize, without using any LinearLayout and it is not working out the way I thought.
Below is my code
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#696969">
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="9%"
app:layout_marginTopPercent="21%"
android:background="#00ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/opt1"
android:scaleType="fitCenter"
android:id="#+id/purpleButton"
android:layout_align="#+id/option1"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="9%"
app:layout_marginTopPercent="58%"
android:background="#00ff0000"
android:layout_height="fill_parent"
android:src="#drawable/opt2"
android:scaleType="fitStart"
android:id="#+id/option2"
android:layout_width="fill_parent"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="50%"
app:layout_marginTopPercent="58%"
android:background="#00ff0000"
android:layout_height="fill_parent"
android:src="#drawable/opt3"
android:scaleType="fitStart"
android:id="#+id/option3"
android:layout_width="fill_parent"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="50%"
app:layout_marginTopPercent="21%"
android:background="#00ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/option4"
android:scaleType="fitCenter"
android:id="#+id/opt4"
android:longClickable="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Pick an Answer"
android:id="#+id/pickLabel"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="28dp"
app:layout_widthPercent="100%"
app:layout_heightPercent="7%"
app:layout_marginTopPercent="15%"
android:textColor="#ffffff"
android:textAlignment="center"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_widthPercent="100%"
app:layout_heightPercent="12%"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="00"
android:id="#+id/timeLabel"
android:textAlignment="gravity"
android:textSize="72sp"
android:gravity="center|center_vertical|center_horizontal" />

You can set android:weightSum="1" on the outside layout and android:layout_weight="0.25" for the inside layouts.

Android: Placing imageButton over a Button

I would like to place 2 small icons (with actions) over a big Button that take the 1/3 of the screen. The 2 icons and the button have to support actions when we click on them. I'm pretty sure I have to use imageButton for the icons. However I can't find any way to keep the icons (imageButton) on top of the button.
Here is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<ImageButton
android:id="#+id/icon1"
android:src="#drawable/ic1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/ic1"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action1"/>
<ImageButton
android:id="#+id/icon2"
android:src="#drawable/ic2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/ic2"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
<com.myapp.CustomViews.myButton
android:id="#+id/big_button1"
android:text="#string/text_big_button1"
android:background="#drawable/changing_button1"
android:textColor="#color/white"
android:layout_height="match_parent"
android:textSize="#dimen/font_size_buttons"
android:layout_width="match_parent"
android:gravity="center"
android:textAllCaps="false"
android:capitalize="none"
android:onClick="bigAction1"/>
</RelativeLayout>
The "#drawable/changing_button1" on the big Button allows me to put one color for the button and a different one when focused or pressed.
I tried so many different things and I couldn't find a way while I'm sure there is a simple solution. The icons remain hidden behind the big Button.
Thank you for your help!

You could use FrameLayout to overlay views. For example:
<FrameLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<com.myapp.CustomViews.myButton
android:layout_gravitiy="center"
.../>
<ImageButton
android:layout_gravitiy="left|center_vertical"
.../>
<ImageButton
android:layout_gravitiy="right|center_vertical"
.../>
</FrameLayout>

Here is a slightly modified version of your layout, which works fine.
I replaced all your custom stuff with plain android and standard buttons, and moved the big button up in the layout, because if it is at the bottom, it has a higher z-index and overlays the two small buttons.
<?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">
<Button
android:id="#+id/big_button1"
android:text="BIG BUTTON"
android:background="#android:color/holo_blue_dark"
android:textColor="#color/white"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center"
android:textAllCaps="false"
android:capitalize="none"
android:onClick="bigAction1"/>
<Button
android:id="#+id/icon1"
android:text="BT1"
android:background="#android:color/holo_red_dark"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action1"/>
<Button
android:id="#+id/icon2"
android:text="BT2"
android:background="#android:color/holo_green_dark"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
</RelativeLayout>

How about changing order in the layout ? Place your Button widget on top, then declare 2 icons after that ?
You should add android:translationZ="5dip" for the 2 imageButton. It works (you should run and see, it didn't appear so on the IDE)

I finally found a way to do it.
The solution is to use the RelativeLayout as a button and replace the Button by a simple TextView:
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"
android:background="#drawable/custom_button_changing_color"
android:clickable="true"
android:focusable="true"
android:id="#+id/button_layout"
android:onClick="bigAction1">
<TextView
android:id="#+id/text_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text"
android:gravity="center"
android:layout_centerVertical="true"
android:textColor="#color/white"
android:textSize="#dimen/font_size_buttons"
android:textAllCaps="false"
android:background="#color/transparent"/>
<ImageButton
android:id="#+id/icon1"
android:src="#drawable/ic1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/ic1"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action2"/>
<ImageButton
android:id="#+id/icon2"
android:src="#drawable/ic2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/ic2"
android:layout_width="48dp"
android:layout_height="48dp"
android:onClick="action3"/>
</RelativeLayout>
I hope this helps! :)

Layouts not scaling properly

I have 7 image buttons I am displaying and while editing the xml the preview looks perfect, however when I launch the app in an emulator it doesn't seem to scale and is cutting off the images.
It should look like this:
-0-0-
0-0-0
-0-0-
Where the '0's are the buttons. I have it setup for one overall relative layout and three linear layouts. The middle places first then the top and bottom align off the middle.
Here is my XML file
<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="horizontal"
android:id="#+id/activity_color_wheel">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/middle_left">
<ImageButton
android:id="#+id/dode1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon1"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
<ImageButton
android:id="#+id/dode2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon2"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"
/>
<ImageButton
android:id="#+id/dode3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon3"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/middle_left"
android:layout_centerInParent="true"
android:id="#+id/bottom">
<ImageButton
android:id="#+id/dode4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon4"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
<ImageButton
android:id="#+id/dode5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon5"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/middle_left"
android:layout_centerInParent="true"
android:id="#+id/top">
<ImageButton
android:id="#+id/dode6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon6"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
<ImageButton
android:id="#+id/dode7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon7"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center_horizontal"
android:textSize="25dp" />
</RelativeLayout>
Basically the top and bottom layouts get cut off near the bottom. I figure i'm missing some kind of scaling property, but i'm not sure.

All of your views' width and height are "wrap content".
In that case if the total images width/height is greater then the screen's width/height it will just cut off.
what you should do is:
1) set the LinearLayouts width to "match parent".
2) set weight to the children views as you wish.
3) set children width to 0dp for better performance.
Example code snippet:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:id="#+id/middle_left">
<ImageButton
android:id="#+id/dode1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
<ImageButton
android:layout_weight="1"
android:id="#+id/dode2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"
/>
<ImageButton
android:layout_weight="1"
android:id="#+id/dode3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
</LinearLayout>
Good luck.

If your problem is only with the top and bottom images, then you only need to add a ScrollView as a parent to your RelativeLayout.

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.

TextView not scrolling Smoothly

I am trying to scroll my textview using the following code:
TextView text = (TextView) findViewById(R.id.textView12);
text.setMovementMethod(ScrollingMovementMethod.getInstance());
int height = getResources().getDrawable(R.drawable.pic_ground_pranic).getIntrinsicHeight();
text.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.FILL_PARENT, height));
text.setText("As part of an Android App I am building a button set.For performance reasons and to keep the code simpler, the Android system uses pixels as the standard unit for expressing dimension or coordinate values. That means that the dimensions of a view are always expressed in the code using pixels, but always based on the current screen density. For instance, if myView.getWidth() returns 10, the view is 10 pixels wide on the current screen, but on a device with a higher density screen, the value returned might be 15. If you use pixel values in your application code to work with bitmaps that are not pre-scaled for the current screen density, you might need to scale the pixel values that you use in your code If you need to control exactly how your application will look on various screen configurations, adjust your layouts and bitmap drawables in configuration-specific resource directories. For example, consider an icon that you want to display on medium and high density screens. Simply create your icon at two different sizes (for instance 100x100 for medium density and 150x150 for high density) and put the two variations in the appropriate directories, using the proper qualifiers: For instance, suppose a device has a WVGA high-density screen, which is 480x800 and about the same size as a traditional HVGA screen, but it's running an application that has disabled pre-scaling. In this case, the system will lie to the application when it queries for screen dimensions, and report 320x533 (the approximate mdpi translation for the screen density). Then, when the application does drawing operations, such as invalidating the rectangle from (10,10) to (100, 100), the system transforms the coordinates by scaling them the appropriate amount, and actually invalidate the region (15,15) to (150, 150). This discrepancy may cause unexpected behavior if your application directly manipulates the scaled bitmap, but this is considered a reasonable trade-off to keep the performance of applications as good as possible. If you encounter this situation, read Based on the density of the current screen, the system uses any size- or density-specific resources from your application and displays them without scaling. If resources are not available in the correct density, the system loads the default resources and scales them up or down as needed to match the current screen's density. The system assumes that default resources (those from a directory without configuration qualifiers) are designed for the baseline screen density (mdpi), unless they are loaded from a density-specific resource directory. Pre-scaling is, thus, what the system does when resizing a bitmap to the appropriate size for the current screen density. to match the un-scaled bitmap source. The buttons are part of a nested set of LinearLayouts.The question then is: How to resize the layout.I have tried several suggested techniques, and none come close to working. Here is a subset of the XML that builds the button set:");
All is working fine but my text view is not scrolling smoothly. I thought I have to put my Textview inside a Scrollview but this is also not working.
Does it happen because I am resizing my textview?
Please provide any solution for this problem. I already spent a lot of time on this.
My xml layout file is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/include1"
android:layout_centerHorizontal="true"
android:background="#android:color/white"
android:scrollbarStyle="insideInset" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="14dp"
android:text="Text 1"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView2"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#+id/textView2"
android:text="Text 2"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView3"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#+id/textView3"
android:text="Text 3"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/textView4"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#+id/textView4"
android:text="Text 4"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView2"
android:layout_marginLeft="5dp"
android:layout_marginTop="3dp"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView3"
android:layout_below="#+id/textView3"
android:layout_marginTop="3dp"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView4"
android:layout_below="#+id/textView4"
android:layout_marginTop="3dp"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView5"
android:layout_below="#+id/textView5"
android:layout_marginTop="3dp"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/relativeLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:soundEffectsEnabled="true" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Volume 1"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/relativeLayout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<SeekBar
android:id="#+id/seekBar2"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:soundEffectsEnabled="true" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Volume 2"
android:textColor="#android:color/black" />
</RelativeLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAligned="false" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Save Volumes" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/frameLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical" >
<TextView
android:id="#+id/textView12"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="top|left"
android:scrollbars="vertical"
android:visibility="visible" />
</FrameLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow8"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center"
android:layout_marginRight="30dp"
android:clickable="true"
android:text="Detailed Instruction" />
</FrameLayout>
</TableRow>
</TableLayout>
</ScrollView>
</RelativeLayout>
Thanks in advance!

In my case I just needed to put my TextView inside a ScrollView. Scrolling got very smooth and users lived happily every after!
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
>
<TextView
android:id="#+id/textview_about"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:textSize="20dp" />
</ScrollView>

problem is ScrollView inside ScrollView.
When you put ScrollView inside ScrollView android just get confused which scroll view is touched. So sometimes it gets unable to deliver touch event.
After searching for a time I found a link or blog that will extract this problem and also have solution.
Take a look at this blog. This is exactly what you have been searching for and i am sure that it will solve your problem.
Now time to Enjoy ;)

The TextView scroll only if you restrict its height. Simple rule is when the text is more then the available space then textview start scrolling.
One way is what you are following by assigning a fixed height which you got from some image size. One other way is by setting the maximum number of lines.
TextView text = (TextView) findViewById(R.id.textView12);
text.setMaxLines(5);
text.setMovementMethod(ScrollingMovementMethod.getInstance());
you can even make it more dynamic. Simply by calculating number of lines.
Number of lines = (image Height in pixels)/(text font size in pixel)

First of all there is no need of the setting the Layoutparams as because you have give it in to the xml layout.
And if you have such long string then dont put it directly on java code. Instead of it put that string to the resources directory.
go to values, and open strings.xml file and define your string.
See below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelperStackOverflowActivity!</string>
<string name="app_name">HelperStackOverflow</string>
<string name="String1">"PUT YOUR STRING HERE" </string>
</resources>
After doing that set the string in Java code whenever you want.
as like:
text = (TextView)findViewById(R.id.textView12);
text.setText(getResources().getString(R.string.String1));
it Scroll nice as normal scrolling.
Hope it will help you.
Enjoy. :)