CODEWITHSUNDEEP
androidxmlandroid-layoutdrawableshapes
Anil P Babu
Anil P Babu

Reputation: 1295

Scale drawable circle according to screen size

Its been a while I am stuck with this. I am a newbie android developer.

I have a drawable circle.

circular_shape.xml

<?xml version="1.0" encoding="utf-8"?>    
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:useLevel="false"
    android:shape="ring"
    android:thickness="0.8dp">
    <solid android:color="@android:color/holo_blue_dark"/>
</shape>

now i want to use this circle in my activity layout in such a way that it covers the whole screen. That is, the width of the screen should be equal to Diameter of the circle. Note that I have not set the radius of the circle.

example_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/exampleLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.anil.raceorganizer.ExampleActivity">
    <ImageView
        android:id="@+id/race_field"
        android:src="@drawable/circular_shape"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"
        android:padding="0dp"
        android:layout_margin="0dp"
        ></ImageView>
</FrameLayout>

Note that I have tried to put padding and margin as 0, but it didn't work. I also tried setting the size of the ImageView through code, but it only changed the size of the ImageView as a whole and not circle alone.

This is what I get with this code.

enter image description here

Any help is greatly appreciated.

Upvotes: 5

Views: 6054

Answers (4)

Bui Minh Duc
Bui Minh Duc

Reputation: 132

You can try this code:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:thickness="0.8dp"
    android:useLevel="false"
    android:innerRadiusRatio="2.1">
    <solid android:color="@android:color/holo_blue_dark" />
</shape>

Upvotes: 2

Sangeet Suresh
Sangeet Suresh

Reputation: 2545

Use this kind of approach to get ring like structure.

Use size tag to preserve 1:1 aspect ratio

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

<size android:width="50dp"
 android:height="50dp"/>

<stroke android:color="#000" android:width="0.1dp"/>

</shape>

Upvotes: 0

Quick learner
Quick learner

Reputation: 11457

Try this You can use this tag in drawable

android:innerRadius="150dp"

change the radius accordingly

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;

use the width from the above 

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:useLevel="false"
        android:shape="ring"
        android:innerRadius="150dp"
        android:thickness="0.8dp">
        <solid android:color="@android:color/holo_blue_dark"/>
    </shape>

Upvotes: 0

Sreehari
Sreehari

Reputation: 5655

Using Canvas, we can draw shapes matching the screen width. 

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Display display = getWindowManager().getDefaultDisplay(); 
    int width = display.getWidth();
    int height = display.getHeight();

    Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444);

    Canvas c = new Canvas(bmp);

    RectF rect = new RectF(0,0,width,width);
    drawCircle(rect, c, width, height);

}

private void drawCircle(RectF rect, Canvas c, int width, int height) {
        Paint paint = new Paint();
        paint.setARGB(255, 255 , 10, 21);
        paint.setStrokeWidth(8);
        paint.setAntiAlias(true);
        paint.setStrokeCap(Paint.Cap.BUTT);
        paint.setStyle(Paint.Style.STROKE);
        int radius;
        if(width < height)
            radius = width/2;
        else 
            radius = height/2;

        radius-= 4;
        c.drawCircle(width/2, height/2, radius, paint);
    }

Not sure if it might help you. If its not , let me know. I will prefer deleting than getting downvotes!

Upvotes: 1

Related Questions