Layout with two colors for the background, a rounded image placed between the two colors in the background and a border on the round image

Question

I am still very new to Android Studio and the Layouts are still confusing.. SwiftUI just has the 3 stacks to work with making this way easier. Anyway I will attach a picture showing what I am trying to achieve. I would like two colors for the background, a rounded image placed between the two colors in the background and a border added to the round image.

Ex of what I am looking for

Answer 1

To do what you want, first you have to create a new xml file in the drawable resource folder. To do this click on res > drawable. RIght click drawable and create a new xml file. Give it a name, and add the following code into it.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="#000000" android:width="2dp"/>

    <solid
        android:color="@color/colorPrimary"/>
</shape>

The stroke is the outline, and the solid is the fill color of the oval. You can modify the color values. Then in your layout in which you want a button like the shown picture, add

<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:background="@drawable/circle_bg"
        android:src="@drawable/ic_baseline_image_24"/>

The padding can be modified to how close you want the outline of the background to be to the image. The src is your image. If you want your button image to be larger, hold down command or control (depends if you are using a mac or not), and click on the path you put in your source.

After you click on it you should see the following:

Modify the width and height to your liking if the image appears too small.