I want to do something similar to a Map behavior where I have a large Image (bigger than the phone screen) and a group of buttons I want to put over special XY locations over the image, and when the user scrolls the image (horizontally and vertically), the buttons keep the same position over the image (like markers do). Then the user can click over a button and open a new activity.
I want to do this in xml. Any suggestion?
I cant figure out how to attach the buttons with the image XY positions:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/map_view"
android:background="#drawable/myImage"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 1"
android:id="#+id/radioButton" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 2"
android:id="#+id/radioButton2" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 3"
android:id="#+id/radioButton3" />`
/>
</RelativeLayout>
</ScrollView>
Instead of scrollview you should change imageview position on touch. If user touches top-down , imageview position should goes to negative direction same as top-down pixels. Therefore your imageview can move to right-left as well.
Get the touch position inside the imageview in android
Android move view on touch event
Here, make sure the the ImageView should always be larger than the screen as you say.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/map_view"
android:layout_width="1800px"
android:layout_height="1800px"
android:background="#drawable/the_large_image"/>
<RadioButton
android:id="#+id/radioButton"
android:layout_marginTop="20dp"
android:layout_marginLeft="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 1"/>
<RadioButton
android:id="#+id/radioButton2"
android:layout_marginTop="200dp"
android:layout_marginLeft="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 2"/>
<RadioButton
android:id="#+id/radioButton3"
android:layout_marginTop="80dp"
android:layout_marginLeft="60dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 3"/>
</RelativeLayout>
</ScrollView>
Thanks to #Sheychan that gave me some clue for getting this as I wanted.
First of all: the xml. Use 2 scroll views (one main that is vertical, and another horizontal), so that we can get horizontal and vertical scrolling. Then a RelativeLayout so that we can put the radiobuttons over the image in desired positions. Is important the "src" and "scaleType" in image so that we can get correct image dimensions. Here is the code for xml
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/svVertical">
<HorizontalScrollView android:id="#+id/hsvHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isScrollContainer="true">
<ImageView
android:id="#+id/map_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/imagen"
android:scaleType="centerCrop"/>
<RadioButton
android:id="#+id/radioButton"
android:layout_marginTop="20dp"
android:layout_marginLeft="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 1"/>
<RadioButton
android:id="#+id/radioButton2"
android:layout_marginTop="200dp"
android:layout_marginLeft="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 2"/>
<RadioButton
android:id="#+id/radioButton3"
android:layout_marginTop="80dp"
android:layout_marginLeft="60dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Position 3"/>
</RelativeLayout>
</HorizontalScrollView>
</ScrollView>
But with this solution we got odd scrolling (only vertical or horizontal, not both at the same time: call it "diagonal" scrolling). To resolve this: a simple override on Activity holding this layout:
ScrollView scrollY;
HorizontalScrollView scrollYChild;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
scrollY = (ScrollView)findViewById(R.id.svVertical);
scrollYChild = (HorizontalScrollView)findViewById(R.id.hsvHorizontal);
}
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
scrollYChild.dispatchTouchEvent(event);
scrollY.onTouchEvent(event);
return super.dispatchTouchEvent(event);
}
This start working better, but still in an odd way. Is like the move "jumps" while scrolling.
The solution: take away the action bar:
On the Manifest, add the "NoActionBar" theme in the application tag (or the activity tag)
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:theme="#android:style/Theme.Holo.NoActionBar.Fullscreen" >
...
</application>
But, be careful, cause the activity must not be an "ActionBarActivity", you must change it to "Activity".
And, just in case, by Android recommendation, add a compatible old SDK versions with a "hide the status bar" on the OnCreate of the Activity.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// If the Android version is lower than Jellybean, use this call to hide
// the status bar.
if (Build.VERSION.SDK_INT < 16) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
setContentView(R.layout.activity_main);
scrollY = (ScrollView)findViewById(R.id.svVertical);
scrollYChild = (HorizontalScrollView)findViewById(R.id.hsvHorizontal);
}
And that's all folks :) Hope it helps you as it helped me.
Related
I'm trying to align the seekbar to the top of a view, but i can't center it with the thumb.
Is there some kind of "alignCenter" with the RelativeLayout children.
Here's a sample of my xml code :
<RelativeLayout
android:id="#+id/rl_fragment_audio_player"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/black_transparent"
android:padding="5dp"
android:visibility="gone" >
<TextView
android:id="#+id/tv_fragment_audio_begin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:textColor="#color/white" />
<TextView
android:id="#+id/tv_fragment_audio_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textColor="#color/white" />
<Button
android:id="#+id/btn_fragment_audio_play"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:background="#drawable/btn_play"
android:visibility="gone" />
</RelativeLayout>
<SeekBar
android:id="#+id/sb_fragment_audio"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_above="#id/rl_fragment_audio_player" />
For example, Google Play Music does it.
As you said the height of your seekbar might vary, unless you specify it different. Here is how you can make sure it fits all, always.
android:layout_above="#id/rl_fragment_audio_player"
is setting your seekbar bottom above rl_fragment_audio_player top. There is no direct method to specify centerAlignWith but I would remove the space it occupies within it's parent. To know the height of the seekbar you must wait until the global layout has changed. This code should be placed inside your onCreateView
sb = (SeekBar) rootView.findViewById(R.id.sb_fragment_audio);
sb.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener(){
#Override
public void onGlobalLayout() {
sb.getViewTreeObserver().removeOnGlobalLayoutListener(this);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) sb.getLayoutParams();
params.setMargins(0, - sb.getHeight() / 2, 0, - sb.getHeight() / 2);
sb.setLayoutParams(params);
// I suggest you set the seekbar visible after this so that it won't jump
}
});
The last view in the xml will be in the front. Therefore make sure your seekbar is added after the the other views. Like this
<RelativeLayout
android:id="#+id/rl_fragment_audio_player"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
// your bottom panel
</RelativeLayout>
<View
android:id="#+id/image_above"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/rl_fragment_audio_player" />
<SeekBar
android:id="#+id/sb_fragment_audio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/image_above" />
Have you tried adding a negative margin to the seekbar?
<SeekBar
android:id="#+id/sb_fragment_audio"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_marginBottom="-15dp"
android:layout_above="#id/rl_fragment_audio_player" />
I am trying to show a pair of hidden buttons (using setVisibility(View.VISIBLE), within a RelativeLayout), but it doesn't always work. The button shows OK on a Galaxy Tab 10.1" but not in a smaller tablet (not sure which model), nor on an Android 4.0 emulator.
I randomly discovered that, for a certain TextView t, the following code causes the buttons to become visible:
t.setText(t.getText());
...
button.setVisibility(View.VISIBLE);
t is located in the same RelativeLayout but is not related to the buttons (their locations are independent and non-overlapping).
Edit: In case some Android dev wants to track this down...
I was able to reduce the code to the following layout that exhibits the problem on an Android 4.0.3 emulator but not a Galaxy Tab. I found that I need a SurfaceView or the problem does not occur (for example, change it to TextView and the problem disappears).
<?xml version="1.0" encoding="utf-8"?>
<!-- layout/test.xml -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<SurfaceView
android:id="#+id/mapCtrl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/bottomPanel"
android:text="Placeholder"
android:layout_marginTop="18dip" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/map_mode_title" />
<!--=================================================-->
<!-- Bottom bar: current road name and current speed -->
<LinearLayout
android:id="#+id/bottomPanel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#f228"
android:orientation="horizontal"
android:textColor="#ffff" >
<Button
android:id="#+id/btnNavMode"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="3dip"
android:textColor="#fff"
android:text="Switch to\nNav Mode" />
<RelativeLayout
android:id="#+id/currentStreetPanel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClick"
android:clickable="true"
android:orientation="vertical" >
<TextView
android:id="#+id/currentStreetHdg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Current street"
android:textColor="#fff"
android:textSize="10dip" />
<TextView
android:id="#+id/currentStreet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/currentStreetHdg"
android:layout_marginTop="-8dip"
android:singleLine="true"
android:text="Current street"
android:textColor="#fff"
android:textSize="30dip" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#ff606060"
android:orientation="vertical" >
<TextView
android:id="#+id/yourSpeedHdg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="3dip"
android:text="Your speed"
android:textColor="#fff"
android:textSize="10dip" />
<TextView
android:id="#+id/speed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/yourSpeedHdg"
android:layout_marginLeft="3dip"
android:layout_marginTop="-8dip"
android:text="0"
android:textColor="#fff"
android:textSize="30dip" />
<TextView
android:id="#+id/speedUnit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/speed"
android:layout_marginLeft="5dip"
android:layout_toRightOf="#+id/speed"
android:text="kph"
android:textColor="#fff"
android:textSize="18dip" />
</RelativeLayout>
</LinearLayout>
<!--================-->
<!-- On-map buttons -->
<Button
android:id="#+id/btnClearRoute"
android:background="#F00"
android:textColor="#fff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clear\nroute"/>
<ZoomControls
android:id="#+id/zoomControls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/mapCtrl"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-25dip"
android:orientation="horizontal" />
<Button
android:id="#+id/btnFindRoute"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/mapCtrl"
android:layout_alignParentRight="true"
android:layout_marginRight="2dip"
android:layout_marginBottom="65dip"
android:text="Route to selected location"
android:textSize="17dip"/>
<Button
android:id="#+id/btnUnselect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnFindRoute"
android:layout_alignTop="#+id/btnFindRoute"
android:layout_alignParentLeft="true"
android:layout_marginLeft="2dip"
android:text="Unselect" />
<LinearLayout
android:id="#+id/showMePanel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnFindRoute"
android:layout_alignRight="#+id/btnFindRoute"
android:layout_alignLeft="#+id/btnFindRoute"
android:padding="4dip"
android:background="#bbbb"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show me..."
android:textColor="#fff"/>
<Button
android:id="#+id/btnShowVehicle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My car"/>
<Button
android:id="#+id/btnShowRoute"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="The route"/>
<Button
android:id="#+id/btnShowDestination"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Destination"/>
<Button
android:id="#+id/btnShowMap"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="The map"/>
</LinearLayout>
</RelativeLayout>
The Activity class simply toggles the visibility of the two buttons when any of the buttons are clicked. Again, on some devices it works, on others it does not.
package mentor.simplegps;
import android.app.*;
import android.os.Bundle;
import android.view.*;
import android.widget.*;
public class TestActivity extends Activity implements View.OnClickListener
{
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.test);
boilerplate();
setVisibilities();
}
Button _btnShowMap, _btnShowVehicle, _btnShowRoute, _btnShowDestination;
Button _btnUnselect, _btnFindRoute, _btnNavMode;
TextView _title;
void boilerplate()
{
_btnUnselect = attachBtn(R.id.btnUnselect);
_btnShowMap = attachBtn(R.id.btnShowMap);
_btnShowVehicle = attachBtn(R.id.btnShowVehicle);
_btnShowRoute = attachBtn(R.id.btnShowRoute);
_btnShowDestination = attachBtn(R.id.btnShowDestination);
_btnFindRoute = attachBtn(R.id.btnFindRoute);
_btnNavMode = attachBtn(R.id.btnNavMode);
_title = (TextView)findViewById(R.id.title);
}
private Button attachBtn(int btnId) {
Button b = (Button)findViewById(btnId);
b.setOnClickListener(this);
return b;
}
boolean haveSel;
public void onClick(View v)
{
haveSel = !haveSel;
setVisibilities();
}
void setVisibilities()
{
_btnFindRoute.setVisibility(haveSel ? View.VISIBLE : View.INVISIBLE);
_btnUnselect.setVisibility (haveSel ? View.VISIBLE : View.INVISIBLE);
// Fixes the problem
//_title.setText(_title.getText());
}
}
SurfaceView is the sole culprit (of course, this also applies to GLSurfaceView, RSSurfaceView and VideoView, all of which inherits from SurfaceView). It exposes lots of weird behaviours when dealing with other views on top of it. Playing with View.setVisibility() is one of those issues. Clearly, SurfaceView has not been designed to be used with other views (even though the official doc says it ought to be) but as a standalone view for videos, games or OpenGL stuffs.
For the visibility issue, I've found that using View.GONE instead of View.INVISIBLE resolve it. If you don't want to use GONE, try changing the focus for example (and back to the one that had focus before), or changing other states. The goal is to wake up the underlying UI system somehow.
In short: when something weird happens with your views and you have a SurfaceView (or subclass) somewhere, try replacing it with something else so you don't lose hours searching what you're doing wrong when you're doing it right (and no false beliefs). This way, you know SurfaceView is to blame and you can hack around it with beautiful comments to piss on it without qualms.
For the record: I had this problem, tried a bunch of random stuff (thanks Alex!), and in my case what solved it was doing seekBar.requestLayout() directly after the setVisible on the very seekbar that was refusing to show.
This is my Solution
setAlpha(0)
btnName.setAlpha(0)
Is working for all views like => Buttons - Images - Texts and ...
In my case View.VISIBLE/View.GONE was not working always. When I switched my toggle to View.VISIBLE/View.INVISIBLE it started to work as intended.
I (annoyingly) had similar difficulty with having a button on top of a SurfaceView preview and had to put the Button in a RelativeLayout and make the RelativeLayout VISIBLE/INVISIBLE. Might be worth a shot for anyone else having the same issue.
...And I also had to programatically call the layout to be brought to from: buttonLayout.bringToFront() right after findViewById.
I'm new to android development(v 4.0, API 14) and stuck in implementing orientation change.
I've added the following line in manifest file
android:configChanges="orientation|keyboardHidden|screenSize">
But it looks like screenSize parameter is not working so I have to manually write these two methods:
public void ChangetoLandscape() {
ed.setTranslationX(300.0f);
btnindex.setTranslationX(300.0f);
btngainer.setTranslationX(300.0f);
btnloser.setTranslationX(300.0f);
lsym.setTranslationX(200.0f);
ltable.setTranslationX(300.0f);
tv1.setTranslationX(290.0f);
tv2.setTranslationX(300.0f);
tv4.setTranslationX(300.0f);
mySimpleXYPlot.setScaleX(3.0f);
mySimpleXYPlot.setScaleY(0.8f);
mySimpleXYPlot.setPlotMarginLeft(50.0f);
mySimpleXYPlot.setTranslationX(60.0f);
mySimpleXYPlot.setTranslationY(-70.0f);
sv1.setTranslationY(-80.0f);
}
public void ChangetoPortrait() {
//NOTE THAT IF I DON'T WRITE BELOW CODE,
//SWITCHING TO PORTRAIT MODE AFTER LANDSCAPE MODE RUINS THE WHOLE LAYOUT.
ed.setTranslationX(-1.0f);
btnindex.setTranslationX(-1.0f);
btngainer.setTranslationX(-1.0f);
btnloser.setTranslationX(-1.0f);
lsym.setTranslationX(-1.0f);
ltable.setTranslationX(-1.0f);
tv1.setTranslationX(-1.0f);
tv2.setTranslationX(-1.0f);
tv4.setTranslationX(-1.0f);
mySimpleXYPlot.setScaleX(1.0f);
mySimpleXYPlot.setScaleY(1.0f);
mySimpleXYPlot.setPlotMarginLeft(1.0f);
mySimpleXYPlot.setTranslationX(-1.0f);
mySimpleXYPlot.setTranslationY(-1.0f);
sv1.setTranslationY(-1.0f);
}
.
I'm using RelativeLayout, so I've to manually translate each view to specified position on orientation change.
main.xml
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="#+id/MainLayout">"
<EditText
android:id="#+id/txt1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:hint="Search"
android:layout_marginLeft="220dp"
android:selectAllOnFocus="true"
android:cursorVisible="false" >
</EditText>
<Button
android:id="#+id/btnindex"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="Index"
android:layout_marginLeft="140dp"
android:layout_below="#id/txt1"
android:textSize="12dp"/>
<Button
android:id="#+id/btngainer"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="Gainer"
android:layout_below="#id/txt1"
android:layout_toRightOf="#id/btnindex"
android:textSize="12dp"/>
<Button
android:id="#+id/btnloser"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="Loser"
android:layout_below="#id/txt1"
android:layout_toRightOf="#id/btngainer"
android:textSize="12dp"/>
<TextView
android:id="#+id/tv1"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="100dp"
android:textStyle="bold"
android:gravity="center"
android:textSize="10dp"
android:textColor="#00ff00"
android:text="SYMBOL"/> <!-- 2 similar textviews -->
<ListView
android:id="#+id/ltable"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="70dp"
android:layout_alignParentRight="true"
android:layout_width="match_parent"
android:layout_below="#id/txt1">
</ListView>
<com.androidplot.xy.XYPlot
android:id="#+id/mySimpleXYPlot"
android:layout_width="140dp"
android:layout_height="200dp"
android:layout_alignTop="#+id/btnindex"
title="Index"/>
<ScrollView android:id="#+id/sv1"
android:layout_width="300dp"
android:layout_height="100dp"
android:layout_marginTop="250dp">
<LinearLayout android:id="#+id/LinearLayout02"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:orientation="vertical">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tv1"
android:text="Scrollview Item 1"/> <!-- 5 similar textviews -->
</LinearLayout>
</ScrollView>
</RelativeLayout>
.
But as showed in below screenshot, in landscape mode, graph which is plotted using android plot is not getting properly displayed. The reason behind this is I've used setScaleX() method bcoz setWidth() is not available. I don't want graph to look stretched. Instead it's width should be increased.
ScrollView is getting displayed properly in portrait mode but in landscape mode, it is not visivle according to it's height which is 100dp.
Edit: After changing android:configChanges="orientation|keyboardHidden|screenSize" to
android:configChanges="orientation|screenSize",
I get this when I switch to landscape mode:
use LayoutParams to place the graph at appropriate location instead of scale() function.
I am trying to have a picture show up in the middle of the screen guiding people what to press (eg an arrow to a button). What do I use so that the arrow design will show up at the appropriate spot and dissapear after I do something (like press the screen)
Thanks!
EDIT
Here is the xml layout for one of my activities, note the imageview at the bottom, it shows the picture in the front
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="45dp" android:background="#drawable/mytitlebackground" android:id="#+id/relativeLayout1">
<ImageButton android:id="#+id/btnAddFriends"
android:layout_width="wrap_content" android:src="#android:drawable/ic_input_add"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:layout_alignParentRight="true"></ImageButton>
<TextView android:id="#+id/textView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="#string/imTracking" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_centerVertical="true" android:layout_centerHorizontal="true"></TextView>
</RelativeLayout>
<Button android:id="#+id/btnUpdateLocation" android:text="Update Location"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"></Button>
<ImageButton android:src="#drawable/mapbutton"
android:layout_width="wrap_content" android:id="#+id/btnMaps"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" android:layout_alignTop="#+id/btnUpdateLocation"></ImageButton>
<ImageButton android:text="Refresh"
android:src="#android:drawable/stat_notify_sync" android:layout_width="wrap_content"
android:id="#+id/btnRefresh" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"></ImageButton>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_below="#+id/relativeLayout1"
android:layout_alignParentLeft="true" android:layout_above="#+id/btnUpdateLocation" android:id="#+id/linearLayout1">
<ListView android:id="#+id/imtrackinglistview"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:layout_weight="1"></ListView>
</LinearLayout>
<ImageView android:id="#+id/iVImtrackingpopup" android:layout_width="300dp" android:layout_height="330dp" android:src="#drawable/imtrackinghelp_en" android:layout_centerVertical="true" android:layout_centerHorizontal="true"></ImageView>
When I try to "click" the relative layout to make the image invisible, it doesn't work unless I click the top of the layout
RelativeLayout Imtrackingrelativelayout=(RelativeLayout) findViewById(R.id.relativeLayoutImtracking);
Imtrackingrelativelayout.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
ImageView imtrackingoverlay=(ImageView) findViewById(R.id.iVImtrackingpopup);
imtrackingoverlay.setVisibility(View.INVISIBLE);
}
});
make the image centre aligned and put click listener over root layout and on click make this image invisible......Better to use relative layout for this.....
Have you tried using the ShowcaseView library? It offers a more cleaner approach to what you are trying to achieve
Check out the project here:-
https://github.com/amlcurran/ShowcaseView
I am trying to create a screen (in portrait mode) that shows 4 images (same size, intended to scale down to fit screen), taking up the entire screen, breaking up the screen into quadrants (a tall, 2x2 grid). This will act as a main menu type of activity and each image should be clickable, in order to take the user to a different activity.
I have tried using a GridView inside a LinerLayout (using a lot from Google's GridView tutorial) but cannot get the images to all scale properly to fill the entire screen. I get extra margins around the images and/or scrolling of the entire screen.
I have also tried using a TableLayout, placing 2 images in each of the 2 rows. Visually, that worked perfectly. Unfortunately when using that, I cannot seem to reference the ImageView items in the TableLayout in my activity code (findViewById always returns null).
I feel like a TableLayout is really not the "right thing to do" but I would like to hear what others have to say. Either way, what should be done to accomplish my desired functionality?
Thanks.
Edit 1.1:
The relative layout works much better for getting things lined up. Now I'm just left with the issue where findViewById always returns null. Here is my code so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/homescreen_bgcolor"
>
<ImageView id="#+id/one"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/two"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:src="#drawable/item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/three"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/item3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/four"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/item4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
public class HomeScreenActivity2 extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.homescreen2);
ImageView imageView = (ImageView) findViewById(R.id.one);
imageView.setClickable(true);
imageView.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Log.i("Test", "test");
}
});
}
}
Here is a sample layout showing how you can achieve a 2 X 2 grid that covers the entire screen using just a RelativeLayout.
<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" >
<View
android:id="#+id/centerVerticalShim"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerVertical="true"
android:visibility="invisible" />
<View
android:id="#+id/centerHorizontalShim"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVerticalShim"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/centerHorizontalShim"
android:background="#42A5F5"
android:gravity="center"
android:text="#string/one"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVerticalShim"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/centerHorizontalShim"
android:background="#EF5350"
android:gravity="center"
android:text="#string/two"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/centerVerticalShim"
android:layout_toLeftOf="#+id/centerHorizontalShim"
android:background="#66BB6A"
android:gravity="center"
android:text="#string/three"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/centerVerticalShim"
android:layout_toRightOf="#+id/centerHorizontalShim"
android:background="#5C6BC0"
android:gravity="center"
android:text="#string/four"
android:textColor="#FFFFFF" >
</TextView></RelativeLayout>
The above layout results in this:
I think a TableLayout could work for you, but I'd recommend trying out RelativeLayout as well. You can basically pin your images to the four quadrants by using combinations of
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"`
on your images.
I'm doing something similar in my app where I have multiple buttons on a homepage that can launch corresponding activities. RelativeLayout works fine, and it avoids nested Layout objects, which can hamper performance during render and layout procedures (if it gets out of hand).