CODEWITHSUNDEEP
androidandroid-linearlayout
Zar E Ahmer
Zar E Ahmer

Reputation: 34360

Design a LinearLayout and set images to them

I want to create given layout but i can't do it. I have three images and a textView attached to each.

enter image description here

I can't use weight here because there is a gap between 2nd and last ImageView.

my xml 

 <LinearLayout
    android:id="@+id/item_com_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/item_layout"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/item_comment_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/cmmt_icn" />

    <TextView
        android:id="@+id/item_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="22 COMMENTS"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/item_tableview_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/table_viewcount_icn" />

    <TextView
        android:id="@+id/item_tableview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/item_readmore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="READ MORE"
        android:layout_gravity="right"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/item_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:src="@drawable/nxt_icn" />
</LinearLayout>

I simply want to create this. I think there must be a way using weight attribute but still can't get what i want

Upvotes: 0

Views: 57

Answers (6)

Rajaji subramanian
Rajaji subramanian

Reputation: 288

hey try this it will work , i tried this its work for me

intead of all your Xml Element change the below code you reach your goal 

<LinearLayout
    android:id="@+id/item_com_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
<LinearLayout
    android:id="@+id/item_com_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
  android:orientation="horizontal"
android:weightSum="10"> 
    <ImageView
        android:id="@+id/item_comment_img"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:weight="2"
        android:src="@drawable/cmmt_icn"/>

    <TextView
        android:id="@+id/item_comment"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:weight="2"
        android:text="22 COMMENTS"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/item_tableview_img"
       android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:weight="2"
        android:src="@drawable/table_viewcount_icn" />

    <TextView
        android:id="@+id/item_tableview"
       android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:weight="2"
        android:text="12"
        android:textSize="12sp" />

<LinearLayout
    android:id="@+id/item_com_sub_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
  android:orientation="horizontal"
android:gravity="right"
android:weight="2"> 
 <TextView
        android:id="@+id/item_readmore"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="READ MORE"
        android:layout_gravity="center_horizontal"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/item_arrow"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/nxt_icn" />

</LinearLaouyt>
</LinearLayout>
<LinearLayout>

Upvotes: 1

Manishika
Manishika

Reputation: 5564

Instead of using ImageViews for every Image ,use drawableLeft and drawableRight in TextView and give android:layout_weight="1" to the second TextView

Try the following data :

 <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/item_tableview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_launcher"
            android:gravity="center_vertical"
            android:text="1 Comments"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/item_readmore"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableLeft="@drawable/back_icon"
            android:gravity="center_vertical"
            android:text="12"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/item_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:drawableRight="@drawable/camera_icon"
            android:gravity="center_vertical"
            android:text="Read More" />
    </LinearLayout>

Upvotes: 0

Android_dev
Android_dev

Reputation: 320

Use this 

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



<TextView
    android:id="@+id/item_comment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="22 COMMENTS"
    android:gravity="center"
    android:drawableLeft="@drawable/ic_launcher"
    android:textSize="12sp" />



<TextView
    android:id="@+id/item_tableview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="12"
    android:drawableLeft="@drawable/ic_launcher"
     android:gravity="center"
    android:textSize="12sp" />
<View android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_weight="1"/>

   <TextView
    android:id="@+id/item_readmore"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="READ MORE"
    android:layout_gravity="right"
     android:drawableRight="@drawable/ic_launcher"
     android:gravity="center"
    android:textSize="12sp" />


 </LinearLayout>

I hope this will work..

Upvotes: 0

Sunil Kumar Sahoo
Sunil Kumar Sahoo

Reputation: 53657

You can try like following

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

    <TextView
        android:id="@+id/item_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="22 COMMENTS"
        android:textSize="12sp"
        android:drawableLeft="@drawable/cmmt_icn"
        android:gravity="center_vertical"
        android:layout_alignParentLeft="true"
        />



    <TextView
        android:id="@+id/item_readmore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="READ MORE"
        android:layout_gravity="right"
        android:textSize="12sp" 
        android:drawableRight="@drawable/nxt_icn"
        android:gravity="center_vertical"
        android:layout_alignParentRight="true"/>

    <TextView
        android:id="@+id/item_tableview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12"
        android:textSize="12sp" 
        android:drawableLeft="@drawable/table_viewcount_icn"
        android:gravity="center_vertical"
        android:layout_toLeftOf="@+id/item_readmore"
        android:layout_toRightOf="@+id/item_comment"/>

</RelativeLayout>

Upvotes: 1

Umer Kiani
Umer Kiani

Reputation: 3370

Try this. This is exactly what you want adjust your layouts accordingly like the way you want and adjust weightsums.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="10"
    android:layout_weight="30" >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Button" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="4"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Button" />

    </RelativeLayout>

</LinearLayout>

</LinearLayout>

Upvotes: 0

Shivansh
Shivansh

Reputation: 906

try this, 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_com_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/item_layout"
    android:orientation="horizontal"
    android:weightSum="2" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/item_layout"
        android:layout_weight="1.5"
        android:orientation="horizontal" >

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

        <TextView
            android:id="@+id/item_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="22 COMMENTS"
            android:textSize="12sp" />

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

        <TextView
            android:id="@+id/item_tableview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="12"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/item_layout"
        android:layout_weight=".5"
        android:gravity="right|center_vertical"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/item_readmore"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="READ MORE"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/item_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

</LinearLayout>

Upvotes: 1

Related Questions