How to give 20 screen width to an ImageView

Question

How do I create an UI header like this image?

enter image description here

I'm using the code below but how do I adjust 30% of the screen to the image and 70% to a TextView. I also use two TextViews on that 70% of width. This is my code, it does not look as in the image

<?xml version="1.0" encoding="UTF-8"?><LinearLayout   
   xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#000000"
 android:orientation="vertical" >



  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#=#EFECE5"

    android:orientation="horizontal" >

     <ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:src="@drawable/ic_launcher" 


    />

    <TextView 
        android:id="@+id/txtCaption"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:text="San Diego Uified"
       />

    <TextView 
        android:id="@+id/txtCaption"
        android:layout_width="fill_parent"
         android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:text="School District"
      />

    </LinearLayout>


  </LinearLayout>

score 2 · Answer 1 · answered Jul 12 '13 at 11:53

2

add android:layout_weight="3" property to image and android:layout_weight="7" to text

answered Jul 12 '13 at 11:53

Vlad K.

320
3
19

and also setting linearlayout's weight_sum to 10 may help – Ercan Jul 12 '13 at 11:58

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

checkout weight for textviews and imageviews and weightSum for LinearLayout

What is android:weightSum in android, and how does it work?

edited May 23 '17 at 12:21

Community

1
1

answered Jul 12 '13 at 11:48

AndroidGecko

14,034
3
35
49

score 0 · Answer 3 · answered Jul 12 '13 at 12:02

Try to use "android:layout_weight"

Assigning a value 'android:layout_weight' will split up the available space in the parent View, according to the value of each View‘s layout_weight and its ratio to the overall layout_weight specified in the current layout for this and other View elements.

In your case

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#=#EFECE5"

    android:orientation="horizontal" >

     <ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:src="@drawable/ic_launcher" 
    android:layout_weight="30"

    />

    <TextView 
        android:id="@+id/txtCaption"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:text="San Diego Uified"
        android:layout_weight="35"
       />

    <TextView 
        android:id="@+id/txtCaption"
        android:layout_width="fill_parent"
         android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:text="School District"
        android:layout_weight="35"
      />

    </LinearLayout>

score 0 · Answer 4 · answered Jul 12 '13 at 12:13

here you go..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#000000" android:orientation="vertical" >

<!-- Header Layout -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:weightSum="1.0" >
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:orientation="horizontal"
    android:weightSum="0.30" >
 <ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:src="@drawable/ic_launcher"
/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="horizontal"
    android:weightSum="1.0" >
    <TextView 
        android:id="@+id/txtCaption"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textColor="#ffffff"
        android:gravity="center"
        android:text="San Diego Uified"
        android:layout_weight="0.50"
       />

    <TextView 
        android:id="@+id/txtCaption"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textColor="#ffffff"
        android:gravity="center"
        android:text="School District"
        android:layout_weight="0.50"
      />
    </LinearLayout>
    </LinearLayout>
</LinearLayout>

<!-- Body layout -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="horizontal"
    android:layout_weight="0.70"
    android:weightSum="1.0" >
    <TextView 
        android:id="@+id/txtCaption"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textColor="#ffffff"
        android:gravity="center"
        android:text="School aasdadadad adasd"
        android:layout_weight="0.50"
      />
</LinearLayout>

How to give 20 screen width to an ImageView

4 Answers4