Can't see Button over fullscreen Imageview - android

I'm trying to show a button over a fullscreen image. I tried to use RelativeLayout as shown in this question but I cannot see the Button.
Can someone tell me why this code isn't working?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/pitchImageView"
android:src="#drawable/gaa_pitch"
android:scaleType="centerCrop"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:id="#+id/stopwatchButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Apologies if this qualifies as a duplicate question.
EDIT:
Screenshots of the activity.
Android design tab
Emulator at runtime

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pitchImageView"
android:src="#drawable/gaa_pitch"
android:scaleType="centerCrop"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:id="#+id/stopwatchButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

My friend you can use FrameLayout alternatively ,and checkout this site : Android Frame Layout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pitchImageView"
android:src="#drawable/desert_road"
android:scaleType="centerCrop"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:src="#drawable/ic_clear_white_24dp"
android:id="#+id/stopwatchButton"
android:layout_gravity="center" />
</FrameLayout>
The Result :

This is a common "problem".
You can try a couple of things:
Invalidate caches and restart Android Studio, or just restart without invalidating
Try the Run -> Clean and rerun option
Or the Build -> Clean project or Build -> Rebuild Project options
When you are done, run the project again.

Well I got it working, I can't exactly explain what fixed it but these are the steps I took:
Utilised a content and activity split. (to get an example of this create a basic activity in android studio).
I deleted other versions of the layout files in the version compatible folders (such as "layout-v24").
I also used "Clean" and "Rebuild" project options whenever I made a change to my code.
activity xml file:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true">
<include layout="#layout/content_record_game"/>
</android.support.design.widget.CoordinatorLayout>
This is my content.xml file
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pitchImageView"
android:contentDescription="#string/image_of_a_gaa_pitch"
android:src="#drawable/gaa_pitch"
android:scaleType="centerCrop"
android:cropToPadding="false"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:id="#+id/stopwatchButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>

Related

Why is the look of the activity different in the Android Studio preview than on the device?

I created an navigation drawer activity and found that its content page looks different in the preview.
This is the preview.
And this is the AVD appearance (it looks like a real device too).
XML code is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
tools:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
What do you think where the problem is?
Try adding android:scaleType="fitXY" in ImageView like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
android:scaleType="fitXY"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
That's probably a little bug with ImageViews´ previews in Android Studio,
Hope it helps
EDIT: I see you've included the style file and it does appear that your app is running the same style (AppTheme) as your preview so I think we can possibly rule out that as a culprit.
I doubt this makes a difference but I noticed your preview is running api 27 and your device is running api 27.
Try removing the
tools:context="com.xy.xy.HomePage" and see if it makes a difference.
The preview can only show you the current view. It doesn't know the parent view. The child view may have a parent view that constricts the size of the child view. Let's say that your image is set to width="match_parent". In this case, the preview may expand the image to fill the full width but at runtime your image my be placed inside a parent with a width="100dp" which would cause the image to have a width of only 100dp. Padding and margin of the parent view can also cause an issue.
If this isn't the problem then it may be a styling issue. I'd have to see more of your Theme and Style setup in order to know for sure. Your preview might be showing you a different style/theme than what you are actually using at runtime.

Android XML Layout Layering

Is there a generally accepted way of doing this? My home screen initially looked like the below image, using the below code, to prompt the user to start a game.
Original home screen
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.snake.SnakeView
android:id="#+id/snake"
android:layout_width="match_parent"
android:layout_height="match_parent"
tileSize="24" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text"
android:text="#string/snake_layout_text_text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
This worked with no errors, but I needed to add items for user input (EditText) and show last 5 scores (Button) and wanted this prompt below it rather than putting the player through multiple screens. From what I've read, I should be able to embed a FrameLayout inside a RelativeLayout with no conflicts, but it only works to the Show Scores button and the game prompt is missing. When I check it in design view, I am also now getting an error that the bottom half (which is now showing) is failing to instantiate the class that would allow the game to play. I am simply beside myself on how to correct this and would like to understand what I have done wrong so as to not allow this to happen again on future projects. Below is the modified code that causes the errors.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username"
android:id="#+id/textViewName"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editTextName"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="?android:attr/buttonStyleSmall"
android:text="Add"
android:id="#+id/btnAdd"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Last 5 Games"
android:id="#+id/btnLastFive"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.snake.SnakeView
android:id="#+id/snake"
android:layout_width="match_parent"
android:layout_height="match_parent"
tileSize="24" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
</LinearLayout>
Proposed layout
You should add the namespace of the custom view com.example.android.snake.SnakeView on your root layout, and add the namespace prefix before the declaration of your custom Views attributes.
So assuming the namespace is "app", tileSize becomes for example app:tileSize
<LinearLayout
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:orientation="vertical">
......
<com.example.android.snake.SnakeView
android:id="#+id/snake"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tileSize="24" />
.....
</LinearLayout>
It also seems that you have removed the text content "Snake Press up to play" from your TextView #+id/text, otherwise you won't be able to see it.

Android emulator will not scroll

I'm targeting Android 4.2.2 level 17 with Eclipse 4.3.1.v20130911-1000. I've created an AVD that emulates an Intel Atom (x86) with HAXM. Here's what it looks like...
And, here's a snippet of my activity code...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1" >
<ImageView
android:id="#+id/bannerImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/banner"
android:scaleType="fitXY"
android:src="#drawable/logo" >
</ImageView>
<CheckBox android:layout_height="wrap_content" android:layout_width="match_parent" android:id="#+id/expiredcheckBox" android:text="#string/show_me_expired_content"></CheckBox>
<TextView android:id="#+id/textLabel1" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/category_"></TextView>
<Spinner android:layout_height="wrap_content" android:layout_width="match_parent" android:id="#+id/comboBox" android:entries="#array/Spinner_array" android:prompt="#string/spinnerPrompt"></Spinner>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible" >
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="#+id/linearLayoutScroll" android:orientation="vertical"></LinearLayout>
</ScrollView>
</LinearLayout>
The activity code dynamically adds TextView objects to the "linearLayoutScroll" within the ScrollView. I start the emulator, debug my program, but, the emulator will not scroll with the middle mouse button. I've had this problem before, but, for the life of me, I don't remember how to resolve it. Can someone shed some light on it?
I have been able to resolve my scrolling problem by downloading and installing GenyMotion android emulator.

"The following classes could not be instantiated:" after using external library in eclipse ADT

screen shot from my app
I'm trying to build an app with sephiroth74/HorizontalVariableListView external library.
The app works fine in emulator but i cant see anything in xml view.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/full_image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".ColorPatern" >
<it.sephiroth.android.library.widget.HListView
android:id="#+id/hListView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<Button
android:id="#+id/btnSetWallpaper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/set_wallpaper" />
</RelativeLayout>
What should i do to get rid of that error?

Adding android:id to xml breaks entire app

I have this XML file:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:text="Disable Filter" android:background="#drawable/buttons" style="#style/ButtonText" android:layout_weight="25" />
<ImageView android:id="#+id/imageFilter" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="75" />
<HorizontalScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
<LinearLayout android:id="#+id/horizontal" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
As soon as I add android:id="#+id/btnFilterPreview" to the Button my app stops working. Why is that?
In Netbeans to solve the issue, Right click on the Project and and chose: Clean and Build
Clean Build your project so that all id is regenerate and application will find reference of new ids.
This is a Same code of you . Running Perfect Without any changes.
I had just Clean & Re-Build Project Nothing else .
Try it.
<Button
android:id="#+id/btnFilterPreview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="25"
android:background="#drawable/ic_action_search"
android:text="Disable Filter" />
<ImageView
android:id="#+id/imageFilter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="75" />
<LinearLayout
android:id="#+id/horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="25"
android:orientation="horizontal" >
</LinearLayout>
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</HorizontalScrollView>
It may also be caused Android automatically adds android.R in its header file remove it
and then Build Project Again
Besides Clean and Build, make sure you do not have duplicate IDs.
Say you have another ImageView with the same ID, it could crash when some code like
(Button)findViewById(R.id.btnFilterPreview)
is executed.

Categories

Resources