Android drawable changing according to device screen size

Question

I want to design below UI. To achieve same, i tried with drawables. But issue is : drawable showing differently on different screen sizes. For screen size 6.0 : drawables coming Oval and in below : coming circle.

UI Design try to acheive:

content_layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="16dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.mediaagility.drawablesample.MainActivity"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/linear">

        <TextView
            android:id="@+id/textview1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_layout"
            android:gravity="center"
            android:text="10"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:background="@drawable/linear">

        <TextView
            android:id="@+id/textview2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_layout"
            android:gravity="center"
            android:text="10"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:background="@drawable/linear">

        <TextView
            android:id="@+id/textview3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_layout"
            android:gravity="center"
            android:text="10"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

    </LinearLayout>
</LinearLayout>

linear_layout drawable:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false">


    <stroke
        android:width="3dip"
        android:color="#FFB300" />
    <corners android:radius="10dip"
        />
    <padding
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp" />
    </shape>

bg_layout:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

    <gradient
        android:angle="-90"
        android:endColor="#1c75d1"
        android:gradientRadius="20dp"
        android:type="linear"
        android:startColor="#609ede" />


    <padding
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp" />
</shape>

main.class:

 LinearLayout linear1 = (LinearLayout) findViewById(R.id.linear1);
        LinearLayout linear2 = (LinearLayout) findViewById(R.id.linear2);
        LinearLayout linear3 = (LinearLayout) findViewById(R.id.linear3);


        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        );

        layoutParams.width = ApplicationUtils.getScreenWidth(this) / 4 +50;
        layoutParams.height = ApplicationUtils.getScreenWidth(this) / 4 +50;
        layoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL;
        layoutParams.leftMargin = ApplicationUtils.dpToPx(4);
        layoutParams.rightMargin = ApplicationUtils.dpToPx(4);

        linear1.setLayoutParams(layoutParams);
        linear2.setLayoutParams(layoutParams);
        linear3.setLayoutParams(layoutParams);

Please help me by suggesting how to design below UI which independent on screen size.

Why are you adding those code under Main.class? **ApplicationUtils.getScreenWidth** is leading your UI change. I don't see any point in having those. — Sanjog Shrestha, Apr 05 '17 at 11:27
@SanjogShrestha i added this to get circle size according to screen size but if i don't do this and set ui completely on drawables than it still changing o screen size — young_08, Apr 05 '17 at 11:29
@KishoreJethava below is link showing output : https://www.dropbox.com/s/nqxidh9aozom8te/IMG_1100.JPG?dl=0 — young_08, Apr 05 '17 at 11:32
Used this library:-https://github.com/Pkmmte/CircularImageView — Joy, Apr 05 '17 at 13:53

score 1 · Answer 1 · answered Apr 05 '17 at 11:38

Instead of having multiple background drawable, try using this way:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="4dp"
        android:right="4dp"
        android:bottom="4dp"
        android:left="4dp">
        <shape
            android:shape="oval">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item>
        <shape
            android:shape="oval">
            <stroke android:width="4dp"
                android:color="@color/colorAccent"/>
        </shape>
    </item>
</layer-list>

Now set background to TextView as:

android:layout_width="your_width"
android:layout_height="your_height"    
android:background="@drawable/drawable_name"

This way, you don't have to look for LinearLayout.

If u see the UI pic,...there is an space between outer and inner circle. How would i able to achieve that in single drawable? — young_08, Apr 05 '17 at 11:40

score 1 · Accepted Answer · edited May 23 '17 at 12:02

1

Because you are setting fix size in LinearLayout thats why it stretched. Remove it if not required.

your xml look proper you need work out at here

layoutParams.width = ApplicationUtils.getScreenWidth(this) / 4 +50;
layoutParams.height = ApplicationUtils.getScreenWidth(this) / 4 +50;

If you want support multiple screen with fix size then you should use dimens.xml for different dpi folder

values-sw320dp-hdpi
values-sw320dp-mdpi
values-sw320dp-xhdpi
values-sw320dp-xxhdpi
values-sw320dp-xxxhdpi

this answers will guide you how to use dimens.xml. one, two

edited May 23 '17 at 12:02

Community

1
1

answered Apr 05 '17 at 11:50

Kishore Jethava

6,666
5
35
51

if i remove 50 than my 3 circles comes very congested. How to handle it? – young_08 Apr 05 '17 at 11:55
Thanks a lot. Information really helped. Please upvote question if u feel like. Thanks again :) . – young_08 Apr 05 '17 at 16:46
glad to help you! – Kishore Jethava Apr 05 '17 at 16:50

score 0 · Answer 3 · answered Apr 05 '17 at 12:39

0

The easiest and fastest way to import drawables to your project is to use drawable importer. This solves the problem with the size of the images in different devices with different screen sizes.

answered Apr 05 '17 at 12:39

Simo

345
4
12

Android drawable changing according to device screen size

3 Answers3