Search code examples
androidandroid-layoutandroid-screen-support

Scaling textviews and images as one group in Android


I am trying to scale a group of images and textView so they scale appropriately on tablets and phones. Good looking

This above looks great. This is what I want to achieve an tables and well any other phone because it only works on Nexus S 4" 480x800

The issue comes up with any other screen size: bad result

I would like to scale both the text and images and keep them inside the circle.

My main layout:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.balazs_gerendai.intentopener.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/circle" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center|top">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="192dp"
            android:text="Hello" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/circle_placeholder"/>
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="&lt;Username>" />
    </LinearLayout>
</RelativeLayout>

The circle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="100dp"
    android:shape="ring"
    android:thickness="10dp"
    android:useLevel="false">

    <solid android:color="#ababf2" />

</shape>

Solution

  • You can do like this :

    <?xml version="1.0" encoding="utf-8"?>
    <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"
    tools:context="com.example.balazs_gerendai.intentopener.MainActivity">
    
    <!--<ImageView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:src="@drawable/circle" />-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/circle"
        android:gravity="center">
    <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_gravity="center"
    android:layout_height="wrap_content">
        <TextView
            android:id="@+id/textView"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello" />
        <ImageView
            android:layout_below="@+id/textView"
            android:id="@+id/image"
            android:layout_centerHorizontal="true"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/circle_place"/>
        <TextView
            android:id="@+id/textView2"
            android:layout_centerHorizontal="true"
            android:layout_below="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="&lt;Username>" />
    </RelativeLayout>
    </LinearLayout>
    </RelativeLayout>