0

I'm using a RelativeLayout with an ImageView on the left. Here I hardcoded the layout_width for it with 150dp but this doesn't look good on other screens. On bigger screens the 150dp is fairly little. So I thought about using layout_weight but I can't use this on RelativeLayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res    
/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/layout_quiz"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    android:padding="2dp"
    app:titleMarginStart="20dp"
    app:titleTextAppearance="@style/MyMaterialTheme.Base.TitleTextStyle"
    app:titleTextColor="@color/textColorPrimary">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@android:color/white"
        android:textStyle="bold|italic"/>

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

<TextView
    android:id="@+id/tv_topic"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/toolbar"
    android:background="@android:color/holo_green_light"
    android:gravity="center"
    android:padding="5dp"
    android:textColor="@android:color/white"/>

<RelativeLayout
    android:id="@+id/layout_question"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:layout_toEndOf="@+id/tv_topic"
    android:layout_toRightOf="@+id/tv_topic"
    android:gravity="top"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_question"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/bt_favorite"
        android:padding="5dp"
        android:text="Schritte der Trainingssteuerung. Was ist hier richtige Reihenfolge?"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textStyle="bold"/>

    <ImageButton
        android:id="@+id/bt_favorite"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#00ffffff"
        android:src="@drawable/star"/>
</RelativeLayout>

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_alignBottom="@+id/layout_question"
    android:layout_toEndOf="@+id/tv_topic"
    android:layout_toRightOf="@+id/tv_topic"
    android:background="?android:attr/listDivider"/>

<View
    android:id="@+id/view"
    android:layout_width="1dp"
    android:layout_height="fill_parent"
    android:layout_below="@+id/toolbar"
    android:layout_toEndOf="@+id/iv_image"
    android:layout_toRightOf="@+id/iv_image"  
    android:background="?android:attr/listDivider"/>

<LinearLayout
    android:id="@+id/layout_multiplechoice"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/layout_question"
    android:layout_margin="5dp"
    android:layout_toEndOf="@+id/iv_image"
    android:layout_toRightOf="@+id/iv_image"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/layout_multiplechoice_solutions"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:orientation="vertical"
        android:visibility="invisible">

        <CheckBox
            android:id="@+id/cb_solution1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:enabled="false"/>

        <CheckBox
            android:id="@+id/cb_solution2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:enabled="false"/>

        <CheckBox
            android:id="@+id/cb_solution3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:enabled="false"/>

        <CheckBox
            android:id="@+id/cb_solution4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:enabled="false"/>

        <CheckBox
            android:id="@+id/cb_solution5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:enabled="false"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_multiplechoice_answers"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:orientation="vertical">

        <CheckBox
            android:id="@+id/cb_answer1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@android:color/holo_green_light"/>

        <CheckBox
            android:id="@+id/cb_answer2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@android:color/holo_green_light"/>

        <CheckBox
            android:id="@+id/cb_answer3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@android:color/holo_green_light"/>

        <CheckBox
            android:id="@+id/cb_answer4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@android:color/holo_green_light"/>

        <CheckBox
            android:id="@+id/cb_answer5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="@android:color/holo_green_light"/>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/layout_singlechoice"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/layout_question"
    android:layout_margin="5dp"
    android:layout_toEndOf="@+id/iv_image"
    android:layout_toRightOf="@+id/iv_image"
    android:orientation="horizontal"
    android:visibility="gone">

    <LinearLayout
        android:id="@+id/layout_singlechoice_solutions"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:orientation="vertical"
        android:visibility="invisible">

        <RadioGroup
            android:id="@+id/rg_solution_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <RadioButton
                android:id="@+id/rb_solution1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:enabled="false"/>

            <RadioButton
                android:id="@+id/rb_solution2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:enabled="false"/>

            <RadioButton
                android:id="@+id/rb_solution3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:enabled="false"/>

            <RadioButton
                android:id="@+id/rb_solution4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:enabled="false"/>

            <RadioButton
                android:id="@+id/rb_solution5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:enabled="false"/>
        </RadioGroup>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_singlechoice_answers"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:orientation="vertical">

        <RadioGroup
            android:id="@+id/rg_answer_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <RadioButton
                android:id="@+id/rb_answer1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <RadioButton
                android:id="@+id/rb_answer2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <RadioButton
                android:id="@+id/rb_answer3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <RadioButton
                android:id="@+id/rb_answer4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <RadioButton
                android:id="@+id/rb_answer5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </RadioGroup>
    </LinearLayout>
</LinearLayout>


<LinearLayout
    android:id="@+id/layout_info"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/layout_progressbar"
    android:layout_below="@+id/layout_question"
    android:layout_toEndOf="@+id/iv_image"
    android:layout_toRightOf="@+id/iv_image"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_infotitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="7dp"
        android:textStyle="bold"/>

    <ScrollView android:id="@+id/sv_infoscroller"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fillViewport="true">

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


            <TextView
                android:id="@+id/tv_infotext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_infotitle"
                android:layout_margin="7dp"
                android:scrollbars="vertical"/>

            <ImageView
                android:id="@+id/iv_infopicture"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_infotext"
                android:layout_margin="7dp"/>
        </LinearLayout>

    </ScrollView>

</LinearLayout>

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_alignTop="@+id/layout_progressbar"
    android:layout_marginTop="5dp"
    android:layout_toEndOf="@+id/iv_image"
    android:layout_toRightOf="@+id/iv_image"
    android:background="?android:attr/listDivider"/>

<RelativeLayout
    android:id="@+id/layout_progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_toEndOf="@+id/view"   
android:layout_toRightOf="@+id/view" android:gravity="bottom"  
android:orientation="horizontal">

    <ImageButton
        android:id="@+id/bt_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="5dp"
        android:enabled="false"
        android:src="@drawable/ic_arrow_right"
        android:text="@string/next"/>

    <ImageButton
        android:id="@+id/bt_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        android:layout_marginTop="15dp"
        android:layout_toLeftOf="@+id/bt_next"
        android:layout_toStartOf="@+id/bt_next"
        android:background="@null"
        android:src="@drawable/ic_info"
        android:visibility="invisible"/>

    <TextView
        android:id="@+id/tv_resultmessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="15dp"/>

    <ImageButton
        android:id="@+id/bt_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="5dp"
        android:src="@drawable/ic_arrow_left"
        android:text="@string/back"/>

    <ProgressBar
        android:id="@+id/pb_quiz"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bt_back"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:progress="1"/>
</RelativeLayout>
<ImageView
    android:id="@+id/iv_image"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_below="@id/toolbar" android:src="@drawable/schmuck"/>

enter image description here

Do you know a solution for this?

Deno Agüero
  • 519
  • 2
  • 9
  • 27

3 Answers3

4

you can use PercentRelativeLayout

     <android.support.percent.PercentRelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

Add this to your gradle dependencies:

compile 'com.android.support:percent:22.2.0'

see the official docs

rafsanahmad007
  • 23,683
  • 6
  • 47
  • 62
  • Don't you think that image may pixelate? – Anurag Singh Jan 25 '17 at 19:12
  • @AnuragSingh yes image can pixelate if it is very small in large screens...you can use `android:adjustViewBounds="true"` for imageview ...so the image holds it's dimension..but it is better approach to put different size of images in `drawable` folders http://stackoverflow.com/questions/29294287/android-studio-drawable-folder-how-to-put-images-for-multiple-dpi – rafsanahmad007 Jan 25 '17 at 19:22
  • In my opinion even putting images in different drawable will still pixelate. PercentLayout will be of more help in ViewGroup where we want to use the unused space instead of using weights. – Anurag Singh Jan 25 '17 at 19:28
  • what do you say to above? – Anurag Singh Jan 25 '17 at 19:36
  • If u know a better approach feel free to share!..percent layout used in many cases other than what u said.. – rafsanahmad007 Jan 25 '17 at 19:41
0

You should define a dimension in two dimens.xml based on screen size. Then to the same dimension res you can assign a different value in dp.

To do so you can create some folder like 

values-hdpi
values-large
values-sw600dp

depending on what you need and put these dimens.xml files into these folders.

firegloves
  • 5,581
  • 2
  • 29
  • 50
0

Since PercentRelativeLayout is a good option as @rafsanahmad007 said, but still if you want to use the same layout with weight_sum, you need a small modification, something like this 

<LinearLayout
 android_orientation:vertical> //parent layout

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

  //this will have two further layout, left include image and text, right for other views and total weightSum for both
  <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:weightSum="your_desired_weight_sum">

      <LayoutLeft>
      add any layout with layout weight 
      </LayoutLeft> 

      <LayoutRight>
      add any layout with layout weight 
      </LayoutRight> 
   <LinearLayout>

</LinearLayout>

Since it is rough view hierarchy to give you whole idea, forgive me if couldn't get :)

Junaid Hafeez
  • 1,618
  • 1
  • 16
  • 25