Place ImageView with ProgressBar on the edge of a RelativeLayout

Question

Place ImageView with ProgressBar on the edge of a RelativeLayout

Navigation

#1 by (0 votes)

0

I need to place the ImageView (it has a ProgressBar above) at the end of the RelativeLayout (above the edge). I have managed to do it with a FloatingActionButton but, apparently the ImageView behaves differently.

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"
    android:background="#FFFFFF"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp">

        <ImageView
            android:id="@+id/photoImageView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:alpha="1.0"
            android:scaleType="centerCrop"
            tools:src="@drawable/default_post_photo" />

        <RelativeLayout
            android:id="@+id/playRelativeLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/photoImageView"
            android:layout_alignRight="@id/photoImageView"
            android:layout_marginBottom="16dp"
            android:layout_marginRight="16dp">

            <ImageView
                android:id="@+id/icon_play"
                android:layout_width="56dp"
                android:layout_height="56dp"
                app:srcCompat="@drawable/ic_play2_white_24dp" />

            <ProgressBar
                android:id="@+id/playProgressBar"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:layout_alignLeft="@+id/icon_play"
                android:layout_alignTop="@+id/icon_play"
                android:theme="@style/CircularProgress"
                android:visibility="visible" />
        </RelativeLayout>

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/shareFloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/relativeLayout"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="-28dp"
        android:layout_marginRight="16dp"
        app:backgroundTint="@color/colorPrimary"
        app:srcCompat="@drawable/ic_share_white_24dp" />

</RelativeLayout>

If the ImageView is added android:layout_marginBottom="-16dp" hides half, that is, only half of the ImageView is displayed on the screen.

I had thought to put another FloatingActionButton instead of a ImageView but I could not find a way to add a ProgressBar on top of it.

I hope you can help me and thanks in advance.

android xml

asked by Robert Gomez 10.09.2018 в 21:18

source

1 answer

Insert new records and edit existing SQL In an activity that implements the httpd class to listen to http requests How to modify an element of your layout when receiving a request?

score 0 · Answer 1

Try placing this:

<?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"
    android:background="#FFFFFF"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp">

        <ImageView
            android:id="@+id/photoImageView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:alpha="1.0"
            android:scaleType="centerCrop"
            tools:src="@drawable/default_post_photo" />

        <View
            android:layout_width="match_parent"
            android:layout_height="28dp"
            android:layout_below="@+id/photoImageView"
            android:background="@android:color/transparent"/>

        <RelativeLayout
            android:id="@+id/playRelativeLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/photoImageView"
            android:layout_toLeftOf="@+id/shareFloatingActionButton"
            android:layout_marginTop="-28dp"
            android:layout_marginRight="16dp">

            <ImageView
                android:id="@+id/icon_play"
                android:layout_width="56dp"
                android:layout_height="56dp"
                app:srcCompat="@drawable/ic_play2_white_24dp" />

            <ProgressBar
                android:id="@+id/playProgressBar"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:layout_alignLeft="@+id/icon_play"
                android:layout_alignTop="@+id/icon_play"
                android:theme="@style/CircularProgress"
                android:visibility="visible" />
        </RelativeLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/shareFloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/photoImageView"
            android:layout_marginRight="16dp"
            android:layout_marginTop="-28dp"
            app:backgroundTint="@color/colorPrimary"
            app:srcCompat="@drawable/ic_share_white_24dp" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/relativeLayout"
        android:layout_marginTop="-28dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto para rellenar"
            android:layout_marginLeft="16dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto para rellenar"
            android:layout_marginLeft="16dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto para rellenar"
            android:layout_marginLeft="16dp"/>

    </LinearLayout>

</RelativeLayout>

What I did was to place a transparent view and place the button below imageview and place half the size of the object in marginTop = -28dp.