How to add Imageview on WebView in Final Android App - android

As i am going to make Alerting App, I am using my website instead of XML code. But for going to my alert activity for web Activity, I made an intent which works onclick on my small image view.
It's my XML code Below:
activity_web.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".WebActivity">
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
</WebView>
<ImageView
android:id="#+id/imageView"
android:layout_width="81dp"
android:layout_height="75dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
tools:srcCompat="#drawable/bell_icon" />
</RelativeLayout>
But the main Problem is that imageview is not visible when I install's the app in my mobile.
It is also visible in my android Studio Layout.
You Check My Android Studio Layout here
Now tell me what should do for making visible it in final build apk which will work in my mobile.

you can set it properly by using constraint layout, here is a code maybe it's work!
In this i set an ImageView at the top and webview is set at bottom of ImageView.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#color/white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<WebView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

you are using wrong attribute namespace, I'm supprised that AS preview tool is showing this image, it shouldn't. but your ImageView is there on device, it is clickable (wehn you set so), it just have transparent content (wrongly resolved srcCompat attr, as below). as a test you may add android:background="#789810" tag, ImageView will show up with visible background (still without image)
in your code you have
tools:srcCompat="#drawable/bell_icon"
tools namespace points on "some tools", like used tools:context=".WebActivity". for setting custom attribute of particular View you have to use (custom) resources namespace, these are declared in your XML with xmlns:app="http://schemas.android.com/apk/res-auto" line, thus you should use below line
app:srcCompat="#drawable/bell_icon"
btw. if you are using srcCompat the you should also use AppCompatImageView. it works with usual ImageView only because AS project by default is exchanging all ImageViews to AppCompatImageViews during building project to APK/bundle. this behavior may be changed or disabled, then your ImageView will stay without any image set. fully proper line for setting image is default src attribute of ImageView, so:
android:src="#drawable/bell_icon"
android namespace in here as this attribute belong to framework ("built-in"), not some additional library and View (AppCompatImageView comes from AppCompat or AndroidX library)

Related

Switch between multiple views in Android Studio design

I have an activity that presents a list and some icons. My activity design contains a ConstraintLayout at the top level with the list and the icons as children.
Now there can be a situation where we don't have any data. In that case I would like the activity to show neither list nor icons but instead show an image and some error text.
How would I go about implementing this in a way that I can still edit the layout in the Android Studio design view? In other words, not just add the image and the error text overlapping my normal activity elements and toggle their visibility programmatically. Are there layers or something? Or switchable fragments?
Or like this: How can I group view elements in a way that I can show and hide the whole group in the designer?
Yes, in android are Fragments (Android docs) and You can create two fragments, one for a situation when data is loaded successfully and second if data isn't loaded. You can start with the first fragment and when You get information about failed loading data You can switch fragments to second with information about fail.
But I think You can do this in one ConstraintLayout layout. In Your main layout add on top image as You would like to display it and set visibility parameter android:visibility="gone". Now You see everything and can create UI in design mode. And when You get information about failed with loading data just change image parameter to visible.
To do it programmatically:
ImageView imageView = findViewById(R.id.imageDataFailed);
imageView.setVisibility(View.VISIBLE);
How it looks with two containers:
<androidx.constraintlayout.widget.ConstraintLayout 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">
<!-- Here is container for success data load. When You failed load data set visibility="gone"-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button Success"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- Here is container for failed data load. If You want to change design just set `visible`-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button Failed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Android Studio: Can you display a view just for preview?

My app has a lot of views that are containers for fragments (which load an image and other views) and depend on an API to fetch images. To make the development of the design easier, I like to add a sample of that image in my xml. Right now, I'm adding a RelativeLayout with the FragmentContainer and a dummy ImageView using different visibility values for android:visibility and tools:visibility.
Is there a better way to show images just for preview purposes ? I'd like to have the preview Views not compiled in the release version.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
tools:adjustViewBounds="true"
tools:src="#drawable/image"
tools:visibility="visible" />
<RelativeLayout
android:id="#+id/FragmentContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
If I understood your problem correctly, you could do something like this:
instead of using dummy views, use
<include tools:layout="#layout/layout_preview" layout="#layout/layout_actual"/>
where layout_preview.xml is whatever you want to use only in the preview, and layout_actual.xml is what will be used in the app
in case you wanted to only add a view in the preview, but have no view at all in the app, you can use a layout_actual.xml with an empty merge tag
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"/>
if you don't want to include useless layout, you might want to create the dummy ones only for debug build type, it will show an error in the layout because layout_dummy will be missing but since it's tools attribute you should be able to compile and run

Make view clickable underneath recyclerview

I am trying to achieve a similar look like the Google Play Store App
For now I got this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="200dp" />
</FrameLayout>
Looks great but since the Recyclerview is overlapping the ImageView, it's not clickable anymore. I am looking for a solution.
You can make use of scrolling activity template in the android studio it has similar behaviour to what you want to do.
and put ImageView in AppBarLayout
and handle the click events like any other view.
this won't give you the exact behaviour of google play app but if it's the eases way to do it.
if you want the exact behaviour I know an open source library that do that let me know if you want it and I will search for it.

Android - How to get ripple effect on GridView items?

I have implemented image gallery using GridView. The layout for the grid item:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants" >
<ImageView
android:id="#+id/media_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/thumbnail_for_image"
android:scaleType="centerCrop" />
<View
android:id="#+id/overlay_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground" />
</FrameLayout>
My goal is to get this nice material ripple effect upon touching the grid item.
Unfortunately, I couldn't manage to find pure solution for my problem.
So I came up with using this, as author says, work around - adding overlay View on top of main ImageView, and setting background to
?attr/selectableItemBackground
Putting it to ImageView's background or parent FrameLayout background didn't work.
I'm sure, there must be a better way to handle it.
android:drawSelectorOnTop="true" in GridView did the trick
If you want this ripple to be supported in pre-lollipop versions I suggest you to use ripple libraries like The ones here. I guess using ?attr/selectableItemBackground won't give you ripple on pre-L androids.

Eclipse Content Assist Not Working Properly For Android Layout

Whenever I have Views inside a ViewGroup inside a android.support.v4.widget.DrawerLayout, Eclipse's autocomplete starts working weird. It doesn't display most of the properties
Example with DrawerLayout -> LinearLayout -> ImageView:
In the previous screenshot, you can see that I typed "android:scale..." and the IDE's intellisense isn't showing me the ImageView's android:scaleType
If I use Eclipse's Properties window for the ImageView, I can see that it is only displaying the basic properties for "View" (and not for ImageView...):
Now if the ImageView is not a descendant of the DrawerLayout and I put it somewhere else, the autocomplete works properly:
I've seen related questions such as:
Autocomplete does not work in XML files in particular hierarchy
Content Assist doesn't work in xml with support library
but they have been dead with no answers for quite a while...
Content assist doesn't work for Views (be it TextViews, EditText, Buttons...) that I add inside the DrawerLayout. It only suggests the 'basic' properties.
Does anybody know why this happens or how to fix this?
Sample layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/some_image" />
</LinearLayout>
<RelativeLayout
android:id="#+id/drawer_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" >
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Just to give some closure to this 5 months-old question, I'll quote and link to Atul O Holic's answer. Thanks to Dileep Perla for pointing me there.
When using support package Widgets this is a common scenario (a weird
one too).
Here you using, android.support.v4.widget.DrawerLayout and hence the
issue. Happened with me a lot of time.
You can also try couple of options mentioned here.
I've found that using the tag can be handy in this case. Just put your layout that is inside the drawer in a separate layout file and then include it inside the drawer layout.

Categories

Resources