0

I am trying to build an image view that has two images inside of it; a photo in the background with a small indicator on top of it. However, I'm stuck in trying to get the indicator to appear in the bottom-right of the image, while the photo in the background is supposed to be centered and scaled to fit the main image.

Playing with the gravity property of the various elements does not really seem to accomplish anything.

Below is the code I tried to use to set the gravity inside the drawable, and the XML element that contains the LayerDrawable with its own gravity set, but neither seems to do anything.

    Resources r = fragment.getActivity().getResources();
    Drawable[] layers = new Drawable[2];
    layers[0] = r.getDrawable(R.drawable.addcoverphoto);        
    layers[1] = r.getDrawable(R.drawable.project_active); // this is usually user-content instead 
    ((BitmapDrawable)layers[1]).setGravity(Gravity.RIGHT);
    LayerDrawable layerDrawable = new LayerDrawable(layers);
    image.setImageDrawable(layerDrawable);      

   <ImageView
    android:layout_width="100dp"
    android:layout_height="0dp"        
    android:id="@+id/todayPhotoView"
    android:scaleType="center"
    android:layout_gravity="bottom"/>
Erik
  • 3,598
  • 14
  • 29

1 Answers1

1

You could make the overlayed image (the one for the bottom right corner) a nine-patch image where the image is located in the bottom right corner of the nine patch. That would require making the leftmost two pixels and the topmost two pixels the scalable part. That way the drawable will stretch to match on the left and top, leaving your image in the bottom right corner.

if you need more flexibility in the solution, you can use a framelayout around two ImageViews. use the first imageview to display your photo and set the layout gravity on the second imageview to bottom|right with wrap_content for layout_width & height.

dangVarmit
  • 5,641
  • 2
  • 22
  • 24