Show a part of the image in Parent layout

Question

I want to design a layout where a part of the image should be visible in the layout.

I am using Constraint Layout.I want to design the image provided.I have the green round image available with me.

<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">

<androidx.appcompat.widget.AppCompatImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/round_green"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
  />

</androidx.constraintlayout.widget.ConstraintLayout>

The expected output is that of the image i have posted in my question — Suvarthee Chakravarti, Apr 18 '19 at 07:31
The image is showing half with respect to the Y axis. The code is in my question .Can you plz help me out where I did get wrong? — Suvarthee Chakravarti, Apr 18 '19 at 07:39
@SuvartheeChakravarti check this https://stackoverflow.com/a/49725237/7666442 — AskNilesh, Apr 18 '19 at 07:39
I think you need to create drawable xml. Like this https://stackoverflow.com/questions/49724329/how-can-i-recreate-this-background-in-xml/49725237#49725237 . Or https://android.jlelse.eu/android-shape-drawables-tutorial-17fbece6fef5 — Hayk Mkrtchyan, Apr 18 '19 at 07:42
@NileshRathod creating another layer in the last option i want to try.I want to do it with the image provided to me. Thanks for the link :) — Suvarthee Chakravarti, Apr 18 '19 at 07:52
@SuvartheeChakravarti also check this **[ArcLayout](https://github.com/florent37/ArcLayout)** — AskNilesh, Apr 18 '19 at 07:54

score 2 · Accepted Answer · answered Apr 18 '19 at 13:12

From the image that you posted, it looks like you have an oversized circle with the center place at or near the top of the enclosing layout. Here is one way to accomplish this layout.

Create the oversized circle by specifying the following in the ImageView:

android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="1.5"

Create a Space widget in the center of the layout. Constrain the bottom of the ImageView to the top of the Space. (See the layout, below.) The circle can now be moved up and down by changing the vertical bias of the Space widget. The placement can be made statically in the XML or dynamically in code.

Here is that the result looks like as the bias is changed on the Space widget:

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/round_green"
        app:layout_constraintBottom_toTopOf="@+id/space"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="1.5" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.40" />
</androidx.constraintlayout.widget.ConstraintLayout>

round_green.xml

<shape 
    android:shape="oval">
    <gradient
        android:angle="45"
        android:centerColor="#79FFD6"
        android:endColor="#79FFD6"
        android:startColor="#A5F74D" />
</shape>

Although this will give you the layout you are looking for, it may be problematic as you change to different devices or display in landscape. Depending upon your actual requirements, you may want to consider the options presented in the comments as more robust solutions.

Show a part of the image in Parent layout

1 Answers1