Adjust texview according to screen size to fit the content in proper scale

53 views Asked by At

In my application, i am creating a date view using the below code. I have to create these date UI elements multiple times to make a calender like tabular UI. I am using GridLayoutManager and RecycleView to create the entire view which will look like a month. When UI is loaded all the textviews in the UI still shows the big in big font. How i can shrink the text proportionally? Do i have to adjust the font programmatically or is there a way i can adjust the content to fit/scale accroding to available UI?

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.myApps.app1.calendarDayViewFragment">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/cardview_light_background"
        tools:context="com.myApps.app1.monthDetailedDayViewFragment"
        android:id="@+id/layout_detailed_day_view">

        <LinearLayout android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true">

            <!-- Section Row 2 -->
            <LinearLayout android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/linear_layout_section_1">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="row_text_1_1"
                    android:textAlignment="textStart"
                    android:id="@+id/textView_day_information_row_1_1"
                    android:textStyle="normal|bold"
                    android:textSize="16sp"
                    android:textColor="@color/colorPrimary" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="row_text_1_2"
                    android:id="@+id/textView_day_information_row_1_2"
                    android:textStyle="normal|bold"
                    android:textSize="16sp"
                    android:gravity="right"
                    android:textColor="@color/colorPrimary" />
            </LinearLayout>

            <!-- Section Row 2 -->
            <LinearLayout android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/linear_layout_section_2" >

            <LinearLayout android:orientation="vertical"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:id="@+id/linear_layout_section_2_1"
                android:layout_weight="1" >

                <!-- Next to Big TEXT, row 1 -->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Section_2_text_row_1"
                    android:textAlignment="textStart"
                    android:id="@+id/textView_day_information1"
                    android:textStyle="normal|bold"
                    android:textSize="16sp"
                    android:textColor="@color/colorPrimary" />

                <!-- Next to Big TEXT, row 2 -->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Section_2_text_row_2"
                    android:textAlignment="textStart"
                    android:id="@+id/textView_day_information2"
                    android:textStyle="normal|bold"
                    android:textSize="16sp"
                    android:textColor="@color/colorPrimary" />

                <!-- Next to Big TEXT, row 3 -->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Section_2_text_row_3"
                    android:textAlignment="textStart"
                    android:id="@+id/textView_day_information3"
                    android:textStyle="normal|bold"
                    android:textSize="16sp"
                    android:textColor="@color/colorPrimary" />

                <!-- Next to Big TEXT, row 4 -->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Section_2_text_row_4"
                    android:textAlignment="textStart"
                    android:id="@+id/textView_day_information4"
                    android:textStyle="normal|bold"
                    android:textSize="16sp"
                    android:textColor="@color/colorPrimary" />

                <!-- Next to Big TEXT, row 5 -->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Section_2_text_row_5"
                    android:textAlignment="textStart"
                    android:id="@+id/textView_day_information5"
                    android:textStyle="normal|bold"
                    android:textSize="16sp"
                    android:textColor="@color/colorPrimary" />

            </LinearLayout>

            <LinearLayout android:orientation="horizontal"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:id="@+id/linear_layout_section_2_2"
                android:layout_weight="1">

                <!-- Big Text -->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="१०"
                    android:id="@+id/calendar_day_header"
                    android:textStyle="normal|bold"
                    android:textSize="140dp"
                    android:textColor="@color/colorPrimary"
                    android:gravity="right" />

            </LinearLayout>

        </LinearLayout>

            <!-- Section Row 3 -->
            <LinearLayout android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/linear_layout_section_3">

            <LinearLayout android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/linear_layout_section_3_1">
                <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="text_row_3_1"
                android:id="@+id/textView_information_row_3_1"
                android:textStyle="normal|bold"
                android:textSize="16sp"
                android:gravity="right"
                android:textColor="@color/colorPrimary" />
                <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="text_row_3_2"
                android:id="@+id/textView_information_row_3_2"
                android:textStyle="normal|bold"
                android:textSize="16sp"
                android:gravity="right"
                android:textColor="@color/colorPrimary" />
            </LinearLayout>

        <LinearLayout android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/linear_layout_section_3_2">

            <ImageView
                android:layout_width="32dp"
                android:layout_height="32dp" android:src="@drawable/ic_image1"
                android:layout_alignParentRight="true"
                android:layout_gravity="right"/>

        </LinearLayout>

    </LinearLayout>

        </LinearLayout>

    </RelativeLayout>
</FrameLayout>

Here is the RecycleView code:

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
                            android:id="@+id/recyclerview_mothly_dates"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:scrollbars="vertical"
                            android:background="@android:color/holo_green_light" >

                        </android.support.v7.widget.RecyclerView>

Thanks, IamHuM

2

There are 2 answers

0
Subir Chakraborty On

You can add this library to your gradle file
compile 'com.intuit.sdp:sdp-android:1.0.3'

All you need to do is: add android:textSize="@dimen/_13sdp"

You have to use sdp instead of dp, this will automatically scale your textView or any other View according to the dimension that is required by any device irrespective of its size.

hope this solves your problem.

    <TextView
    android:id="@+id/profile_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World"
    android:textSize="@dimen/_13sdp" />
0
sanjeev kumar On

create multiple folder for values like this and paste dimens.xml in each folder and manage Text Size from here same name with different values.

values
values-xhdpi
values-xxhdpi
values-xxxhdpi
values-sw600dp
values-sw800dp

<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="१०" android:id="@+id/calendar_day_header" android:textStyle="normal|bold" android:textSize="@dimen/test_140_size" android:textColor="@color/colorPrimary" android:gravity="right" />

NOTE: Give different value of Text size in sp according to resolution in each dimens.xml file with same name.