How to move LayoutBackground behind an ImageView

android imageview set image
android resize imageview based on screen size
android scale image to fit imageview
android:adjustviewbounds
android:drawable
android imageview aspect ratio
android scale image programmatically
image is stretched in imageview android

I tried to add on the top right corner of my app a notificationBar which shows how many msgs are in the inbox. Later on I want to add a custom drawable to my background, for now I added only a black color as bg to reach my goal, as you can see on the left side of my image: This is a TextView constraint to the END of my ImageView. I want my Background to go behind the imageview BUT not to go outside of its dimensions neither to start before the imageview (you would see the top left and bottom right corner of the textview - rectangle

I'm stuck on that with the following Code:

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/msg_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"

    >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/black"
        app:layout_constraintStart_toEndOf="@+id/imageView"

        >

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0 MSGs"
        android:textColor="@color/white"
        android:paddingStart="@dimen/default_padding"
        android:padding="@dimen/small_padding"

        />

    </androidx.constraintlayout.widget.ConstraintLayout>



    <ImageView
        android:id="@+id/imageView"
        android:layout_width="46dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W, 1:1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/ic_contact"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

How can I fix this?


If no other view is constrained to the TextView you can simply apply a negative "x" translation to the TextView: android:translationX="-15dp". I chose -15dp but it could be another negative value that works for your layout.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/msg_bar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:padding="@dimen/small_padding"
        android:paddingStart="@dimen/default_padding"
        android:text="0 MSGs"
        android:textColor="@color/white"
        android:translationX="-15dp"
        app:layout_constraintBottom_toBottomOf="@id/imageView"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@id/imageView" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="46dp"
        android:layout_height="0dp"
        android:background="@drawable/ic_contact"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="W, 1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

SebastienRieu's solution should work but you may need to add a margin to the start of the TextView to hide its top-left and bottom-left corners.

How to put Imageview Behind other layout, At the simplest level, an ImageView is simply a view you embed within an XML layout that is used to display an image (or any drawable) on the screen. What usually works for me is, I wrap the imageview inside a RelativeLayout when then goes into a LinearLayout making sure that height and width attributes of the relativelayout matches the linearLayout. And you know how to keep the imageview in the center of the relativelayout.


change constraint of textview to start with imageView and add text alignment to textview

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/msg_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent" >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/black"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="0 MSGs"
            android:textColor="@color/white"
            android:paddingStart="@dimen/default_padding"
            android:padding="@dimen/default_padding"
            android:textAlignment="textEnd"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="46dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W, 1:1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/ic_contact" />

</androidx.constraintlayout.widget.ConstraintLayout>

Working with the ImageView, Add the ImageView to the layout. Set the layout as the content view. a ShapeDrawable object to set the background of a view by passing it� Insert imageView inside android app using dynamically coding via MainActivity file. Dynamically creating imageView using coding file through MainActivity.java programming file is very easy and useful because some time android app developer need to create imageview at application run time and set its properties so that can be only possible through programmatically method.


Constraint layout works as a frame layout. For such designs, we can use guidelines. Guidelines work greats for such a view . I have made a few changes in your layout, I hope this can be helpful.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
    android:id="@+id/text_msg_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/black_primary"
    android:paddingStart="@dimen/space_28"
    android:text="0 MSGs"
    android:textAlignment="textEnd"
    android:textColor="@color/white_color"
    android:layout_marginEnd="@dimen/space_28"
    android:paddingEnd="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="@id/imageView"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="@+id/imageView" />


<ImageView
    android:id="@+id/imageView"
    android:layout_width="46dp"
    android:layout_height="0dp"
    android:layout_margin="@dimen/space_28"
    android:background="@drawable/ic_contact"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="W, 1:1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.3"
    app:layout_constraintEnd_toEndOf="@id/imageView"
    app:layout_constraintStart_toStartOf="@id/imageView" />
 </androidx.constraintlayout.widget.ConstraintLayout>

Below link, you can use to get more info on guidelines https://constraintlayout.com/basics/guidelines.html

Drawables overview, A raised Button adds dimension to a flat layout—it shows a background (no text ), use the ImageButton class, which extends the ImageView class. ACTION_MOVE) : Log.d(DEBUG_TAG,"Action was MOVE"); return true; case ( MotionEvent. flag=(ImageView)findViewById(R.id.ImageView01); flag.setBackgroundResource(R.d rawable.flag_de); Inside android application, in "res/drawable-hdpi" i have saved all needed flags with the following names: flag_de.jpg, flag_uk.jpg, flag_ro.jpg and so on.


4.1: Buttons and clickable images � GitBook, Note that an image named starry_night.jpg is used as the background image on my RelativeLayout . This layout code results in the following: The� To show image programmatically, instantiate ImageView in Activity class and assign image by setImageResource() and add it to layout by LinearLayout.addView(). To refer layout programmatically we should provide an id to our layout in XML. ImageView by XML To use ImageView with XML, we need to create an ImageView tag as follows.


How to put a background image behind a translucent/opaque , First add the two ImageViews as children of a RelativeLayout. To position it relative to the Why can't I drag or move home screen apps on an Android? 10,902 Views � What is an How do I stop a background app on Android? 5,000 Views. Move a picture anywhere on the touch screen by tapping and dragging, with touch events in Android. Create new project with Application name: Move Image; Minimum SDK: API 27 – Android 8.1 (Oreo). Add a picture (picture.png) in res->drawable folder. In app->res->layout->activity_main.xml write the code:


How to overlay an imageView on another imageView in Android in a , Set layout background color android programmatically. This example contains a single view that you can touch and drag to move horizontally. To show image by XML, we need to add ImageView tag in our layout in XML. which is behind of first object,in android we can see Layout which is behind of� Objects on screen will often need to be repositioned. This can occur due to user interaction or some processing done behind the scenes. Instead of immediately updating the objects position, which would cause it to blink from one area to another, you should use an animation to move it from the starting position to its end position.