Develop Reference

Android notification custom layout XML imageview not showing

<?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"
android:layout_width="match_parent"
android:layout_height="96dp"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingStart="24dp"
android:paddingBottom="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/pushIcon"
android:layout_width="16dp"
android:layout_height="16dp"
app:srcCompat="#drawable/push_icon" />
<TextView
android:id="#+id/textView23"
style="#style/TextAppearance.Compat.Notification.Info.Media"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:text="YOLOL"
android:textColor="#color/browser_actions_title_color" />
</LinearLayout>
<TextView
android:id="#+id/text_view_collapsed_1"
style="#style/TextAppearance.Compat.Notification.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="New Message!"
android:textColor="#color/colorPrimary" />
<TextView
android:id="#+id/text_view_collapsed_2"
style="#style/TextAppearance.Compat.Notification.Info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Expand to show!" />
</LinearLayout>
<ImageView
android:id="#+id/notifPreviewImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
app:srcCompat="#drawable/bb" />
</LinearLayout>
The pushIcon ImageView takes the place but is invisible, any idea why?

A quick tip that always helps in the debug process - add a background color to the view in question (also helps to set a specific Width and Height as well for testing) - it will enable you to see if the view is being rendered at all or not. If you see the background color, then the view is being rendered properly, but the image is not loading correctly. Without knowing this, it could be any combination of those issues.
With that aside, if you are dynamically changing the icon at runtime, I would look at your code there. If this is a static image then I would check that your resource file is a Vector drawable as that is only allowed when using app:srcCompat="#drawable/push_icon"
If your file is a non-vector drawable, then use android:src="#drawable/push_icon"
Here's a discussion that elaborates on this in more detail.

ImageView "fitXY" scaleType not working on phone

I am creating an Android application for an RGBCCT LED strip controller. This application is basically a control panel that lets the user specify the colour of the RGB portion of the strip, as well as the colour temperature of the CCT portion. The problem here lies in the slider for selecting the hue of the RGB part. What I want it to be is a seekbar in the default Android style, except the background is a rainbow to reflect the hue spectrum in HSV colours. The problem is that I am unable to get the rainbow image to stretch along the length of the seekbar, such that it starts at red, runs through the entire spectrum, and ends at red. However, the scaling of the image causes it to tile, rather than stretch along the length.
Initially, I tried to create a seekbar style (progress drawable) that does the stretching by itself, but I was unsuccessful. I tried using bitmaps and scale drawables. As such, I resorted to visualizing the rainbow with an ImageView widget under the seekbar by using a FrameLayout. The ImageView uses the "fitXY" scale type. This seemed like a success, as the preview showed what I had in mind. However, on my phone, the rainbow does not stretch as intended at all, as it does the tiling exactly as it did in the seekbar progress drawable. What am I doing wrong? Could it be related to the way the layout_width parameters are handled?
Here is the XML code of the front page of the application. I collapsed the textview widgets as they are not of interest, at least I think, as they take up loads of lines. The actual seekbar implementation is at the bottom.
<androidx.constraintlayout.widget.ConstraintLayout
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=".MainActivity">
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:scrollbarStyle="outsideInset"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<nl.madmijk.rgbwwcontrolepaneel.ConnectionView
android:id="#+id/connection_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_regular" />
<!-- Top half of the sliders for the CCT portion -->
<LinearLayout ...>
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_regular" />
<!-- Bottom half of the sliders for the RGB portion -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<ImageView
android:id="#+id/RGB_accent"
android:layout_width="#dimen/spacing_accent"
android:layout_height="match_parent"
app:srcCompat="?attr/colorAccent" />
<Space
android:layout_width="#dimen/spacing_regular"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView .../>
<TextView .../>
</LinearLayout>
<SeekBar
android:id="#+id/RGB_bar_intensity"
android:layout_width="match_parent"
android:layout_height="#dimen/seekbar_height"
android:max="255"
android:progress="0" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_regular" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView .../>
</LinearLayout>
<SeekBar
android:id="#+id/RGB_bar_sat"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="match_parent"
android:layout_height="#dimen/seekbar_height"
android:max="255"
android:progress="0" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_regular" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView .../>
</LinearLayout>
<!-- Here is the portion of interest -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="#dimen/huebar_thickness"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:adjustViewBounds="false"
android:scaleType="fitXY"
android:src="#drawable/hue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<SeekBar
android:id="#+id/RGB_bar_hue"
android:layout_width="match_parent"
android:layout_height="#dimen/seekbar_height"
android:max="255"
android:progress="0"
android:progressDrawable="#drawable/hue_seekbar_progress" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Below are the preview of the layout in Android Studio and the resulting layout on my phone, respectively.
Expectations vs reality (I cannot embed images yet...)
Just as a test to make sure it is actually a stretching issue, I hard-coded the width of the image, and sure enough, it won't squeeze the image on my phone. Test preview, Test result.

How to properly draw layout with image and add text to it

I have created a grid view in Android. Now I want to use this custom layout to put text in the view. I can work on all views, but how can I create the view shown in picture and add text in the white space of image and inside blue rectangle too?

Try framelayout. I have tried one for you. Feel free to ask if you are not getting something.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageViewCircle"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="3dp"
android:layout_marginTop="2dp"
android:src="#drawable/mypng" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:gravity="center|center_horizontal"
android:text="50"
android:textSize="40sp" />
<TextView
android:id="#+id/textViewNumeric"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:gravity="bottom|center_horizontal"
android:text="Text"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold" />
</FrameLayout>

android layout leaving small gaps

So I have a image view and below a relative layout. The desired is to always have the users see the text views and buttons in the nested layout. And the image is a top image ( not a full screen background) but some how there is a small gap and the background of the image is bleed past the image view. I have tried different Image scale types and different layouts completely(frame, all linear,etc..)
http://imgur.com/a/n4aIq
and some code
https://gist.github.com/whatkai/92f66d2322957d86dd3fe28a9a5d03c0
FYI layout-weights left gaps too.

There is too many ways to do it.
Try this solution using LinearLayout (orientation: vertical):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/REFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#color/accidentAssistanceColor">
<ImageView
android:id="#+id/SettingsImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/ers"
android:layout_weight="1"/>
<LinearLayout
android:background="#color/appStartERSBackground"
android:layout_centerHorizontal="true"
android:id="#+id/onView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/SettingsImage"
android:gravity="bottom|clip_vertical|center"
android:orientation="vertical">
<Button
android:gravity="bottom|end"
android:layout_centerHorizontal="true"
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/transparent"
android:text="Not Now"
android:textColor="#color/white"/>
<Button
android:id="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/button"
android:text="approve"
android:textColor="#color/white"/>
<TextView
android:gravity="center_horizontal|center_vertical"
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button2"
android:layout_gravity="center"
android:text="BLdfdsAH"
android:textColor="#color/white"/>
<TextView
android:gravity="center_horizontal|center_vertical"
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BLAH"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
And to answer you about how to scall your image i used android:scaleType fitXY to respect to ratio aspet.
If you desire to understand how every scallType works, see the following link:
https://robots.thoughtbot.com/android-imageview-scaletype-a-visual-guide

set view tag between your image and layout.
like this.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" />

ImageView: scale properly above Button

I'm new to Android and everything went well until now I have to deal with the layout.
What I want is this layout:
Layout how it should be:
The image should be properly scaled and keep its ratio.
That's why I tried this XML code, but it doesn't work the way I want. The image keeps its ratio but the left and right side are out of the screen when vertical and cut at the top and bottom when horizontal:
Layout how it is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:background="#color/background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:src="#drawable/logo"
android:gravity="center"
android:scaleType="centerCrop"
android:contentDescription="#string/app_logo"
android:layout_weight="2.5" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center">
<Button
android:id="#+id/id1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="20dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text1"
android:textSize="40sp"
/>
<Button
android:id="#+id/id2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/text2"
/>
<Button
android:id="#+id/id3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_gravity="center"
android:text="#string/text3" />
</LinearLayout>
</LinearLayout>
I googled a lot but just could not find what I was looking for.
Please help!

It looks like android:scaleType="fitCenter" is what you are looking for

you have to design 2 layout for you vertical state and horizontal state and put them in two different folder in your android project:
while you put your regular layout in the layout folder you should put the landscape layout in the layout-land folder.

Try setting android:scaleType="fitXY" to your ImageView.