I would like to see if anyone knows how WunderList did this? See picture:
Basically, if you click on any List Item you add, this drawer pops out to show the item details. In this case I randomly added an item, apparently called "Rgh". Clicked on it, and it slides out from the right. You can swipe it and it goes back to whence it came from.
I thought it was a SliderMenu library, perhaps one like jfeinstein10's, but Wunderlist already has a slider on the left. The one on the right (in picture) acts totally different. Its bigger, instead of pushing content, it just goes over the previous Activity (or Fragment?). And its not openable from swiping (only closing). I know with jfeinstien's, you can't do any of that - Right and LEft ahve to be very similar (unless you sublcass it).
I know there was something called the SlidingDrawer, but I hardly see this used anymore, could this be it? What is the most preferred way to implement this?
LinearLayout plus Animation. I've done similar in my app.
Not even using Fragments. Using an Animation class, the code is here:
/*
This class is responsible for showing the sliding animation
*/
public class SlideAnim extends Animation {
int targetWidth;
View slideView;
ImageView imageView;
boolean close;
public SlideAnim(View _v, boolean _close, int _maxWidth, ImageView imageView) {
this.slideView = _v;
this.imageView = imageView;
targetWidth = _maxWidth;
close = _close;
}
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newWidth;
if (!close) {
newWidth = (int) (targetWidth * interpolatedTime);
} else {
newWidth = (int) (targetWidth * (1 - interpolatedTime));
}
slideView.getLayoutParams().width = newWidth;
slideView.requestLayout();
imageView.setImageResource(slideView.getWidth() > 0 ? R.drawable.purple_arrow_right : R.drawable.purple_arrow_left);
}
public void initalize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
public boolean willChangeBounds() {
return true;
}
}
Here is how I am invoking the animation from another Activity:
SlideAnim slideAnim = new SlideAnim(trendingListLayout, false, maxListWidth, imageView);
slideAnim.setDuration(500);
slideAnim.reset();
trendingListLayout.clearAnimation();
trendingListLayout.startAnimation(slideAnim);
I am animating a LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.eazyigz.views.EazyigzImageView
android:id="#+id/whole_screen"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<View
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/explore_expander"
android:layout_width="30dp"
android:layout_height="fill_parent"
android:background="#color/eazyigz_bg_primary"
android:orientation="horizontal"
android:visibility="invisible" >
<ImageView
android:id="#+id/explore_expander_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/purple_arrow_left" />
</LinearLayout>
<!-- List Layout -->
<LinearLayout
android:id="#+id/explore_list_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingTop="50dp"
android:background="#color/eazyigz_bg_secondary"
android:orientation="vertical"
android:visibility="invisible" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="0dp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal|center_vertical"
android:singleLine="true"
android:ellipsize="marquee"
android:focusable="true"
android:fadingEdge="horizontal"
android:marqueeRepeatLimit ="marquee_forever"
android:scrollHorizontally="true"
android:text="#string/top_trending"
android:textColor="#color/eazyigz_green"
android:textSize="30sp" />
<ProgressBar
android:id="#+id/explore_spinner"
android:layout_width="50dp"
android:layout_height="45dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:indeterminateDrawable="#drawable/progress_spinner"
android:visibility="visible"
android:layout_gravity="center_horizontal|center_vertical"/>
<ListView
android:id="#+id/explore_list"
style="#style/EazyigzListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#00000000"
android:divider="#0000"
android:layout_marginLeft="10dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="50dp"
android:paddingLeft="20dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" />
<Button
android:id="#+id/eazyigz_play"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/eazyigz_button"
android:drawablePadding="0dp"
android:gravity="left|center_vertical"
android:padding="5dp"
android:text="#string/playing"
android:textColor="#color/eazyigz_white"
android:textSize="36sp"
android:visibility="gone"/>
<Button
android:id="#+id/eazyigz_create"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/eazyigz_button"
android:drawablePadding="0dp"
android:gravity="left|center_vertical"
android:padding="5dp"
android:text="#string/create"
android:textColor="#color/eazyigz_white"
android:textSize="36sp" />
<Button
android:id="#+id/eazyigz_explore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/eazyigz_button"
android:drawablePadding="0dp"
android:gravity="left|center_vertical"
android:padding="5dp"
android:text="#string/explore"
android:textColor="#color/eazyigz_white"
android:textSize="36sp" />
<Button
android:id="#+id/eazyigz_listen"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/eazyigz_button"
android:drawablePadding="0dp"
android:gravity="left|center_vertical"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="50dp"
android:paddingTop="5dp"
android:text="#string/stations"
android:textColor="#color/eazyigz_white"
android:textSize="36sp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" />
</LinearLayout>
</merge>
The explore_list_layout is what gets animated.
See video of what the screen looks like: Sliding Animation
Hello KickingLettuce
Hi Igor
We needed a panel coming from the right, on top of the rest of the application, and we wanted it to be "swipeable" including the basic "nearest-point" opening or closing and acceleration tracking to decide what to do if the swiping was done half-way.
We tried initially with Android's SlidingDrawer but firstly its deprecation and then the ability to swipe just from a knob in the side + its not-so-perfect performance made us to think about doing something else.
We call it SlidingLayer and we are shortly planning to open-source it very soon. We just want to make sure to add a pair of tweaks that give you some flexibility without having to dive deep into unnecessary parts of the code (ie.: adding shadow easily).
In the meantime and if it helps you, we based a huge part of it on the SlidingMenu operation (we love how it works).
It's basically a container (extends from a RelativeLayout that might turn into a ViewGroup - I'd love to debate that - RelativeLayout -> pro: versatile, avoid extra views. con: you might need a different layout). That is being scrolled (with scrollTo) following the moves of your finger -> by overriding and analyzing touch in onInterceptTouchEvent and onTouchEvent.
It's relatively easy. I'd cheer you to go for it. There are already good tutorials and code examples around this two methods.
Nevertheless and if you prefer to not to get into the burden, I'll let you know whenever we are ready.
I'll make a brief follow up here in case you decide to go for it.
All the best.
Related
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.
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 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).
Basically I am trying to recreate the default contact screen when you click on "+" button another row of Phone number added to the list.
Right now I have an ImageView as the "+" button and a ListView to contain the list of phone numbers. The problem is that the ListView doesn't expand when I add more item into the list.
I could build the same look with LinearLayout but how can I save all those numbers that way?
Below is the layout of the item that will be inflate with custom Adapter
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="60px"
android:stretchColumns="1"
android:background="#FFFFFFFF"
android:gravity="center_vertical">
<TableRow>
<Button
android:id="#+id/type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="Home" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
>
<EditText
android:id="#+id/value"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:text=""
android:hint="Name"
android:lines="1"
android:textSize="10pt"
android:typeface="sans"
android:textColor="#FF000000"
android:gravity="left"
/>
</RelativeLayout>
<ImageView
android:id="#+id/del"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:paddingRight="14dp"
android:src="#android:drawable/ic_delete" />
</TableRow>
</TableLayout>
This is the ListView portion.
<ListView
android:id="#+id/phoneList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFFFF"
android:scrollbars="none" />
This is really confusing :S. Could anyone help me please?
You should use a ViewStub.
A ViewStub is an invisible, zero-sized
View that can be used to lazily
inflate layout resources at runtime.
When a ViewStub is made visible, or
when inflate() is invoked, the layout
resource is inflated.
Here you have some tutorials or you can clone the android's git repo to check how they did it.
I've built an Animation class, which animates the margin to negative values, making the item disappear.
The animation looks like this:
public class ExpandAnimation extends Animation {
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
if (interpolatedTime < 1.0f) {
// Calculating the new bottom margin, and setting it
mViewLayoutParams.bottomMargin = mMarginStart
+ (int) ((mMarginEnd - mMarginStart) * interpolatedTime);
// Invalidating the layout, making us seeing the changes we made
mAnimatedView.requestLayout();
}
}
}
I have an entire example app for this animation on my blog post:
http://udinic.wordpress.com/2011/09/03/expanding-listview-items/
I ended up created my own class extending LinearLayout and have its size recalculate every time item is added or removed. I'm sure the code is dirty and takes up lots of memories but it work for now.
I've got this odd problem which is happening on 1.6, 2.2, and a MyTouch 3G Slide (which is API #7, and listed as "2.1-Update1" in the Android Device Chooser). If anyone can explain what I'm doing wrong & how to fix it (or possibly confirm that this is an Android bug), I'd greatly appreciate it!
The basic idea for my app is to make a stopwatch-sort of thing, in that the user can tap a button to start a timer, then tap it again to stop (pause) the timer; further taps alternate between resuming the timer and pausing the timer.
I've got a top-level ScrollView which contains a RelativelLayout, which contains a bunch of widgets. The first widget is a HUGE button (so that it's easy to press), which pushes all my other widgets below the bottom of the screen. This is intentional, as I want to rely on the ScrollView (and an on-screen reminder to the user) to make the rest of the input options available.
I've got a simple state-machine type setup, where mState is the current mode (STATE_TIMER_NOT_STARTED before the user presses any buttons, ...RUNNING after the first press, and then ...PAUSED after the second, back to ...RUNNING after the third, etc, etc).
All this works great EXCEPT that when the timer is running, and the user presses the start/stop/resume button again, the ScrollView will scroll down a ways. I am NOT issuing this command (I don't even have a reference to ScrollView object), and I'm not sure why it's doing this.
REPRO:
Compile + run the below samples. When the app starts, press the 'Start Timing' button. Use your thumb (or the mouse) to touch-drag the screen upwards (so you can see the RatingBar), then drag it back downwards (so the button is again completely on-screen). Tap the button (which now reads 'PauseTiming') again, and it'll jump down a bit. It should NOT be jumping/scrolling down, since there's no statement (that I can see) that tells it to scroll down. As near as I can tell, it's the setText that causes the scrolling ( when I comment those lines out, no scrolling occurs).
WHAT I'M ASKING FOR:
If I'm doing something dumb & you could point out what it is, I'd really appreciate it! :)
*** I wonder if 'touch mode' might have something to do with this, since it does NOT appear to happen (in the emulator) when I use the mouse's scroll wheel to move the panel upwards (i.e.,instead of the simulated finger-dragging). I can't find a whole lot on touch-mode, and nothing specific on focus/selection in touch mode within a ScrollView
If you can confirm that this error occurs for you too, that would be ok, too (since misery loves company.AHEM I mean, since it might help confirm that it's not just me :) ).
MyTestApp.java
package bug.android.scrollview;
import android.app.Activity;
import android.os.Bundle;
import android.text.format.Time;
import android.view.Display;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.TextView;
public class MyTestApp extends Activity {
public final static int STATE_TIMER_NOT_STARTED = 1;
public final static int STATE_TIMER_RUNNING = 2;
public final static int STATE_TIMER_PAUSED = 3;
private int mState;
Time t = new Time();
private Time data = new Time();
private Button btnStartStopResume;
private TextView lblSpacer;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.new_time_entry);
btnStartStopResume = (Button) findViewById(R.id.btnStartStopResume);
// Set the button's size so that the other info will also be visible
Display display = ((WindowManager) getSystemService(WINDOW_SERVICE))
.getDefaultDisplay();
// This is such a hack, but the windowScroller doesn't appear to
// have a height at this point in the lifecycle (nor in 'onResume' :( )
btnStartStopResume.setHeight(display.getHeight() - 200);
lblSpacer = (TextView) findViewById(R.id.lblSpacer);
reset();
}
public void doStartStopResume(View v) {
if (mState == MyTestApp.STATE_TIMER_NOT_STARTED) {
mState = MyTestApp.STATE_TIMER_RUNNING;
data.setToNow();
} else if (mState == MyTestApp.STATE_TIMER_RUNNING) {
mState = MyTestApp.STATE_TIMER_PAUSED;
String s = getString(R.string.add_scroll_down_to_add);
lblSpacer.setText(s);
} else if (mState == MyTestApp.STATE_TIMER_PAUSED) {
mState = MyTestApp.STATE_TIMER_RUNNING;
}
}
public void doReset(View v) {
}
public void doNewRunClick(View v) {
}
public void doAddTiming(View v) {
}
public void reset() {
mState = STATE_TIMER_NOT_STARTED;
}
}
new_time_entry.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/windowScroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="#+id/btnStartStopResume"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:text="Start Timing"
android:textSize="40dp"
android:height="290dp"
android:onClick="doStartStopResume" />
<TextView
android:id="#+id/lblSpacer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/btnStartStopResume"
android:layout_centerHorizontal="true"
android:text="#string/add_scroll_down_for_more" />
<TextView
android:id="#+id/lblTimeStartLabel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lblSpacer"
android:layout_alignParentLeft="true"
android:clickable="true"
android:onClick="adjustStartTime"
android:text="Start of this run:"
android:textSize="8dp" />
<TextView
android:id="#+id/lblTimeStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/lblTimeStartLabel"
android:layout_alignParentLeft="true"
android:clickable="true"
android:onClick="adjustStartTime"
android:text="--:--:-- --"
android:textColor="#FFFFFF"
android:textSize="26dp" />
<TextView
android:id="#+id/lblElapsedLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/lblSpacer"
android:layout_alignRight="#id/lblSpacer"
android:layout_marginRight="5dp"
android:text="Elapsed Time:"
android:textSize="8dp" />
<TextView
android:id="#+id/lblTimeElapsed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/lblElapsedLabel"
android:layout_alignRight="#id/lblSpacer"
android:layout_marginRight="5dp"
android:textColor="#99ff66"
android:text="-- m -- sec"
android:textSize="26dp"
android:layout_marginBottom="10dip"/>
<CheckBox
android:id="#+id/chkNewRun"
android:onClick="doNewRunClick"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lblTimeElapsed"
android:text="This is a new run of timings"
android:layout_marginBottom="10dip" />
<TextView
android:id="#+id/lblIntensity"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Intensity (1 = none 5 = max)"
android:layout_below="#id/chkNewRun" />
<RatingBar
android:id="#+id/rbIntensity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/lblIntensity"
android:numStars="5"
android:rating="2"
android:layout_marginBottom="5dip" />
<TextView
android:id="#+id/lblNotes"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Notes:"
android:layout_below="#id/rbIntensity" />
<EditText
android:id="#+id/txtNotes"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:layout_below="#id/lblNotes"
android:layout_marginBottom="10dip" />
<Button
android:id="#+id/btnReset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txtNotes"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:text="Reset"
android:onClick="doReset" />
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txtNotes"
android:layout_toRightOf="#id/btnReset"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:text="Add Timing To List"
android:onClick="doAddTiming" />
</RelativeLayout>
</ScrollView>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Timer</string>
<string name="dlg_edit_timing_title">Edit A Timing</string>
<string name="add_scroll_down_for_more">< Scroll down for more options! ></string>
<string name="add_scroll_down_to_add">< Scroll down to save this timing! ></string>
<string name="start_timing">Start Timing\n\n</string>
<string name="stop_timing">Pause Timing\n\n</string>
<string name="resume_timing">Resume Timing\n\n</string>
</resources>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="bug.android.scrollview"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="#drawable/icon" android:label="#string/app_name">
<activity android:name=".MyTestApp"
android:label="#string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="5" />
</manifest>
UPDATE 1: Adding
if( btnStartStopResume.isInTouchMode() )
Toast.makeText(this, "TOUCH MODE", 2000);
else
Toast.makeText(this, "NOT touch mode", 2000);
then setting breakpoints in the debugger confirms that the button is always in touch mode (regardless of whether I finger-drag the panel up/down, or mouse-wheel it up/down). So it's a combination of being in touch-mode AND finger-dragging the panel after the 2nd button-press (i.e, when the app is in 'stopped/paused timing' mode) that's causing the odd extra-timing in subsequent pauses.
UPDATE 2:
I just noticed that it's scrolling down to the EditText, and no further. It looks like when you move the panel down the EditText gets the selection, and after the click event the ScrollView scrolls back to the thing that has the selection. Seems to explain why the mouse-wheel approach doesn't have this problem (it moves the selection/focus back up to the button).
Old thread, but I thought I'd add this in case anyone's searching around like me. I had the same problem, but just clearing focus didn't help. This is what finally solved it for me:
editText.clearFocus();
editText.setTextKeepState(text);
Hope this helps someone.
TextView docs
Ok, I've got handle on what's going on, and enough of an idea of how to work around it that I thought I might as well post this here, as an answer:
If you call clearFocus on the EditText before any call to setText (which is both the button event handler, and a couple of timers I'm running via the thread's Handler in the 'real' version of this program), then everything works they way I expect (no weird auto-scrolling).
If you wanted to use this solution you'd need to clear the focus for anything that could get the focus, though, which makes it a lame solution - I'll try to keep looking at this. Under the ScrollView docs there's a method named onRequestFocusInDescendants with the cryptic note "When looking for focus in children of a scroll view, need to be a little more careful not to give focus to something that is scrolled off screen. This is more expensive than the default ViewGroup implementation, otherwise this behavior might have been made the default." which may point to what's going on here...
I tried solutions on this page and they didn't work for me. I had a scrollview that scrolled every time I clicked a refresh button in the view. What I ended up doing was making a title that is just to the left of the button focusable and set that item to be focused in my button callback.
Part of my onCreateView in my Fragment:
final View view = inflater.inflate(R.layout.fragment_diagnostic, container, false);
view.findViewById(R.id.button_refresh_bluetooth_device).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
updateBluetoothDevice();
view.findViewById(R.id.bluetooth_device_title).requestFocus();
}
});
view.findViewById(R.id.button_refresh_network).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
updateNetworkSection();
view.findViewById(R.id.android_network_title).requestFocus();
}
});
Simplified version of my layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/parentPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/alert_dialog_padding_material"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/topPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingLeft="#dimen/alert_dialog_padding_material"
android:paddingRight="#dimen/alert_dialog_padding_material"
android:paddingBottom="#dimen/floating_action_button_margin">
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_alignParentRight="true"
android:padding="#dimen/floating_action_button_margin"
android:src="#drawable/ic_fab_refresh"
android:contentDescription="#string/content_description_refresh"
app:elevation="4dp"
app:borderWidth="0dp"
app:fabSize="mini"/>
<TextView
android:id="#+id/alertTitle"
style="?android:attr/windowTitleStyle"
android:singleLine="true"
android:ellipsize="end"
android:layout_toLeftOf="#id/button_refresh"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:paddingBottom="#dimen/floating_action_button_margin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_diagnostics"/>
</RelativeLayout>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipChildren="false"
android:clipToPadding="false"
android:layout_weight="1"
android:orientation="vertical"
android:minHeight="48dp"
android:paddingLeft="#dimen/alert_dialog_padding_material"
android:paddingRight="#dimen/alert_dialog_padding_material"
android:paddingBottom="#dimen/alert_dialog_padding_material">
<TableLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:clipChildren="false"
android:shrinkColumns="1"
android:stretchColumns="1,2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:id="#+id/bluetooth_device_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/title_bluetooth_device"
android:focusable="true"
android:focusableInTouchMode="true"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_refresh_bluetooth_device"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/floating_action_button_margin"
android:src="#drawable/ic_fab_refresh"
android:contentDescription="#string/content_description_refresh"
app:elevation="4dp"
app:borderWidth="0dp"
app:fabSize="mini"/>
</LinearLayout>
<TableRow>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_gravity="center_vertical"
android:id="#+id/bt_connection_status_image"
tools:src="#drawable/ic_check"
android:contentDescription="#string/content_description_diagnostic_status"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_gravity="center_vertical"
android:text="#string/label_state"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_gravity="center_vertical"
tools:text="Connected"
android:id="#+id/bt_connection_status"/>
</TableRow>
<LinearLayout
android:id="#+id/android_network_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/title_android_to_network"
android:focusable="true"
android:focusableInTouchMode="true"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_refresh_network"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/floating_action_button_margin"
android:src="#drawable/ic_fab_refresh"
android:contentDescription="#string/content_description_refresh"
app:elevation="4dp"
app:borderWidth="0dp"
app:fabSize="mini"/>
</LinearLayout>
<TableRow>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_gravity="center_vertical"
android:id="#+id/android_network_state_image"
tools:src="#drawable/ic_check"
android:contentDescription="#string/content_description_diagnostic_status"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_gravity="center_vertical"
android:text="#string/label_state"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_gravity="center_vertical"
tools:text="Connected"
android:id="#+id/android_network_state"/>
</TableRow>
</TableLayout>
</ScrollView>
</LinearLayout>