Issue
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.
Solution
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
Answered By - Kishore Jethava
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.