below code I wrote for android but this design is not fitting all the android screens
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical"
android:scrollbarStyle="insideOverlay"
>
<LinearLayout
android:id="@+id/layout_status"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/wight"
android:baselineAligned="false"
android:orientation="vertical" >
<TextView
android:id="@+id/tseriesname"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_margin="5dp"
android:gravity="center"
android:singleLine="true"
android:text="@string/series_name"
android:textColor="@color/textgraycolor"
android:textSize="10.0sp"
android:textStyle="bold" />
<Button
android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:background="@drawable/list_border_back_red"
android:text="Live"
android:textColor="@android:color/white"
android:textSize="15.0sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout_match"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/layout_status"
android:layout_weight="0.14"
android:background="@color/wight"
android:baselineAligned="false"
android:orientation="horizontal"
android:padding="5dp" >
<LinearLayout
android:layout_width="65dp"
android:layout_height="90dp"
android:layout_gravity="center_vertical"
android:orientation="vertical" >
<ImageView
android:id="@+id/flag_team1"
android:layout_width="65dp"
android:layout_height="65dp"
android:src="@drawable/flag1" />
<TextView
android:id="@+id/team_name1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="center"
android:text="KKR"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout_score_team1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="0.32"
android:background="@color/wight"
android:baselineAligned="true"
android:orientation="vertical" >
<TextView
android:id="@+id/score_team1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="left|center_vertical"
android:text="160/3"
android:textColor="@color/txtscore"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="@+id/over_tem1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="left"
android:text="(ov : 20)"
android:textColor="@color/textgraycolor"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="@+id/vs"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:background="@drawable/vs"
android:gravity="center_horizontal|center_vertical"
android:text="@string/vs"
android:textColor="@color/wight"
android:textSize="15sp"
android:textStyle="bold" />
<LinearLayout
android:id="@+id/layout_score_team2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="0.32"
android:background="@color/wight"
android:baselineAligned="true"
android:orientation="vertical" >
<TextView
android:id="@+id/score_team2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="right"
android:text="140/2 "
android:textColor="@color/txtscore"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="@+id/over_tem2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="right"
android:text="(ov: 18.3 )"
android:textColor="@color/textgraycolor"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="65dp"
android:layout_height="90dp"
android:layout_gravity="center_vertical"
android:orientation="vertical" >
<ImageView
android:id="@+id/flag_team2"
android:layout_width="65dp"
android:layout_height="65dp"
android:src="@drawable/flag2" />
<TextView
android:id="@+id/team_name2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:gravity="center"
android:text="MI"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/layout_over_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/layout_match"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:layout_weight="0.16"
android:background="@color/wight"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="horizontal" >
<TextView
android:id="@+id/re_rr"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_marginLeft="10dp"
android:background="@android:color/white"
android:gravity="left"
android:text="Required RR : 2.56"
android:textColor="@android:color/black"
android:textSize="10sp"
android:textStyle="bold" />
<TextView
android:id="@+id/cu_rr"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="0.15"
android:background="@android:color/white"
android:gravity="right"
android:text="Current RR: 5.36"
android:textColor="@android:color/black"
android:textSize="10sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_margin="3dp"
android:layout_weight="0.40"
android:background="@color/wight"
android:gravity="center_vertical|center_horizontal"
android:text="OVER 19"
android:textColor="@color/txtscore"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/TextView05"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="3dp"
android:background="@drawable/roundtxt4"
android:gravity="center_vertical|center_horizontal"
android:text="4"
android:textColor="@color/wight"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/TextView04"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="3dp"
android:background="@drawable/roundtxtw"
android:gravity="center_vertical|center_horizontal"
android:text="W"
android:textColor="@color/wight"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/TextView03"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="3dp"
android:background="@drawable/roundtxtb"
android:gravity="center_vertical|center_horizontal"
android:text="NB"
android:textColor="@color/wight"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/TextView02"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="3dp"
android:background="@drawable/roundtxt6"
android:gravity="center_vertical|center_horizontal"
android:text="6"
android:textColor="@color/wight"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/TextView01"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="3dp"
android:background="@drawable/roundtxt0"
android:gravity="center_vertical|center_horizontal"
android:text="."
android:textColor="@color/wight"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/o1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="3dp"
android:background="@drawable/roundtxt4"
android:gravity="center_vertical|center_horizontal"
android:text="4"
android:textColor="@color/wight"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Mubai Indians needed 91 runs in 9 balls to win. "
android:textColor="@android:color/black"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
<Button
android:id="@+id/button1"
android:layout_margin="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/layout_over_details"
android:background="@color/txt_full_score"
android:gravity="center"
android:paddingLeft="2dp"
android:text="Full ScoreBoard"
android:textColor="@color/wight"
android:textSize="20sp"
android:textStyle="bold" />
<TableLayout
android:id="@+id/batting_table"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button1"
android:layout_weight="1"
android:background="@color/txt_full_score"
android:weightSum="1"
android:layout_margin="10dp">
<TableRow
android:id="@+id/Batting_heading_Row"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="0.40" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="@color/wight"
android:padding="1dp"
android:paddingLeft="2dp"
android:text="BATTING"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:gravity="left"
android:padding="1dp"
android:text="R"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:gravity="left"
android:padding="1dp"
android:text="B"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:gravity="left"
android:padding="1dp"
android:text="4s"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:gravity="left"
android:padding="1dp"
android:text="6s"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:gravity="left"
android:padding="1dp"
android:text="SR"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="@+id/Batting_one_row"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="0.30" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="@color/wight"
android:padding="1dp"
android:paddingLeft="2dp"
android:text="Aroan Finch"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="30"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="36"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="2"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="1"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="54.55"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="@+id/Batting_two_row"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.30" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="@color/wight"
android:padding="1dp"
android:paddingLeft="2dp"
android:text="Rohid Sharma"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="80"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="40"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="6"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="1"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/wight"
android:padding="1dp"
android:text="101.40"
android:textColor="@color/txtscore"
android:textSize="20sp"
android:textStyle="bold" />
</TableRow>
</TableLayout>
<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@id/batting_table"
android:layout_centerVertical="true"
android:background="#F44238"
android:paddingLeft="2dp"
android:text="Full Commentary"
android:textColor="@color/wight"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="68.0dip"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button2"
android:layout_weight="1"
android:background="@android:color/transparent"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_margin="10dp" >
<RelativeLayout
android:layout_width="56.0dip"
android:layout_height="56.0dip" >
<TextView
android:id="@+id/image_thumbnail"
android:layout_width="48.0dip"
android:layout_height="48.0dip"
android:layout_centerInParent="true"
android:background="@color/ball6"
android:gravity="center_horizontal|center_vertical"
android:text="6"
android:textColor="@color/wight" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="56.0dip"
android:background="@android:color/transparent"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="@+id/text_title"
android:layout_width="fill_parent"
android:layout_height="69dp"
android:layout_marginLeft="6.0dip"
android:paddingBottom="2dp"
android:scrollbars="vertical"
android:singleLine="false"
android:text="David Warner and Joe Burns started off positively and added 49 runs before the former was caught behind when he gloved one off Wagner. Khawaja and Burns then made sure Australia don't lose any further wickets and negotiated the last few overs."
android:textColor="@color/txtscore"
android:textSize="13.0sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Simple, use relative layout with the set margin code. Set the margins between each text view, button, etc and it will look the same on every phone. android:layout_marginTop="10dp" // change Top to Bottom, Left or Right for what you need.
You are using custom android:layout_width
and android:layout_height
attributes in the xml, hence this xml code will be differently viewed in different devices with different screen sizes.
I would suggest you to study the following developer docs:
Supporting Different Screen Sizes
Supporting Different Screens
Either you can use ScrollView
, or use different folders for different layout sizes -
layout-ldpi (Low DPI phones)
layout-mdpi (Medium DPI phones)
layout-hdpi (High DPI phones)
layout-xhdpi (Very High DPI phones)
layout-xxhdpi (Very Very High DPI phones)
If you are using Android Studio, it will automatically tell which DPI is suitable for which screen size.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With