How can i show image and text view according to my idea?

Question

I'm beginner in android and want show something with this plan:

and my xml file is this:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout"
    android:layout_width="match_parent" android:layout_height="match_parent"
    tools:context=".MainActivity">
    <FrameLayout android:id="@+id/container" android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <ImageView
                    android:id="@+id/ExplainImage"
                    android:layout_gravity="center"
                    android:layout_width="fill_parent"
                    android:layout_height="78dp"
                    android:src="@drawable/abc_btn_check_material" />
        <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    >
            <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceLarge"
                        android:text="Large Text"
                        android:id="@+id/MAINLABEL"
                        android:layout_gravity="center" />

            </ScrollView>
    </FrameLayout>
</android.support.v4.widget.DrawerLayout>

but when run my app,i see like this:

How can i solve that problem?thanks.

i change XML file but so not work!,my complete xml file after change:

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout"
    android:layout_width="match_parent" android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout android:id="@+id/container" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="3" >
        <ImageView
            android:id="@+id/ExplainImage"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:src="@drawable/abc_btn_check_material" />
        <ScrollView
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="2">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Large Text"
                android:id="@+id/MAINLABEL" />

        </ScrollView>
    </LinearLayout>
    <ListView
        android:id="@+id/myLIST"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
    <fragment android:id="@+id/navigation_drawer"
        android:layout_width="@dimen/navigation_drawer_width" android:layout_height="match_parent"
        android:layout_gravity="start"
        android:name="com.example.nothing.myapplication.NavigationDrawerFragment"
        tools:layout="@layout/fragment_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>

use weight for both of views – Shakeeb Ayaz Jul 28 '15 at 06:35 — Shakeeb Ayaz, Jul 28 '15 at 06:35
@ShakeebAyaz please post your solution. – behzad razzaqi Jul 28 '15 at 06:36 — behzad razzaqi, Jul 28 '15 at 06:36

score 2 · Accepted Answer · edited May 23 '17 at 11:51

The 1st figure is your requirement. So i will first answer what would be the best way to achieve your desired result. Using LinearLayout instead of FrameLayout would be recommended in this case. Then you should use layout_weight attribute for your ImageView and TextView along with layout_height="0dp". Note that TextView automatically scrolls vertically so you don't really need ScrollView.

Do something like this.

          <ImageView
                android:id="@+id/ExplainImage"
                android:layout_gravity="center"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_weight="0.3"  
                android:src="@drawable/abc_btn_check_material" />

          <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:text="Large Text"
                    android:id="@+id/MAINLABEL"
                    android:layout_weight="0.7" 
                    android:layout_gravity="center" />

Refer this answer for a better understanding.

So finally you do something like this

<LinearLayout
        android:id="@+id/lin_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:weightSum="4"
        android:orientation="vertical" >

        <ImageView 
              android:id="@+id/ExplainImage"
                android:layout_gravity="center"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_weight="1"  
                android:src="@drawable/abc_btn_check_material">

        </ImageView>

            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:text="Large Text"
                    android:id="@+id/MAINLABEL"
                    android:layout_weight="3" 
                    android:layout_gravity="center" />


    </LinearLayout>

However if your TextView doesn't scroll automatically , use ScrollView as mentioned in other answers by setting layout_weight and layout_height attributes.

listview show any data in fullscreen mode,and when user click one item of listview,listview invisibile,and image and textview visible,and show explain that item . — behzad razzaqi, Jul 28 '15 at 07:02
Make listview visible by default using `android:visibility="visible"` and linearlayout `gone` using `android:visibility="gone"`.Then programatically inside your `onItemClickListener` of your `ListView` alter the visibility using `linearlayout.setVisibility(View.VISIBLE)`. However there are better ways to achieve what you want. — Sash_KP, Jul 28 '15 at 07:09
thanks,but in linearlayout.setVisibility(VIEW.VISIBLE) error :can not resolve linearlayour. — behzad razzaqi, Jul 28 '15 at 07:21
`LinearLayout linearlayout; linearlayout = (LinearLayout)findViewById(R.id.lin_layout); linearlayout.setVisibility(View.VISIBLE);` — Sash_KP, Jul 28 '15 at 07:31

score 0 · Answer 2 · answered Jul 28 '15 at 06:36

Replace xml file with this:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/ExplainImage"
        android:layout_gravity="center"
        background="color_code"
        android:layout_weight="0.3"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:src="@drawable/abc_btn_check_material" />

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.7">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/MAINLABEL"
            android:layout_gravity="center" />

    </ScrollView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>

Christopher · Answer 3 · 2015-07-28T06:48:21.347

You can use a LinearLayout with weights:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout android:id="@+id/container" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="3" >
        <ImageView
                android:id="@+id/ExplainImage"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:src="@drawable/abc_btn_check_material" />
        <ScrollView 
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_weight="2">
        <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:text="Large Text"
                    android:id="@+id/MAINLABEL" />

        </ScrollView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>

i get this error: Suspicious size: this will make the view invisible, probably intended for layout_width less... (Ctrl+F1) Using 0dp as the width in a horizontal LinearLayout with weights is a useful trick to ensure that only the weights (and not the intrinsic sizes) are used when sizing the children. However, if you use 0dp for the opposite dimension, the view will be invisible. This can happen if you change the orientation of a layout without also flipping the 0dp dimension in all the children. — behzad razzaqi, Jul 28 '15 at 06:42
Oh, I'm sorry. Please add the attribute android:orientation="vertical" to your LinearLayout-attributes. I updated the answer. — Christopher, Jul 28 '15 at 06:48

SANAT · Answer 4 · 2015-07-28T06:52:51.363

Try this :

<LinearLayout
            android:id="@+id/ll"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:weightSum="5"
            android:orientation="vertical" >

            <ImageView 
                android:layout_height="0dp"
                android:layout_width="fill_parent"
                android:layout_weight="1.5">

            </ImageView>
            <ScrollView 
                        android:layout_width="fill_parent"
                        android:layout_height="0dp"
                        android:layout_weight="3.5"
                        >
                <TextView
                            android:layout_width="fill_parent"
                            android:layout_height="fill_parent"
                            android:textAppearance="?android:attr/textAppearanceLarge"
                            android:text="Large Text"
                            android:id="@+id/MAINLABEL"
                            android:layout_gravity="center" />

                </ScrollView>
        </LinearLayout>

score 0 · Answer 5 · answered Jul 28 '15 at 07:21

You can try this one as I am able to get proper output as you needed.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1">


<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.3" 
    android:background="@color/blue">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.7" 
    android:background="@color/orange">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="TestView" />
</LinearLayout>

How can i show image and text view according to my idea?

5 Answers5