image stretched in tabs android

Question

I have a TabHost in my app and im trying to put images instad of text. My problem is that the images are stretching to the whole screen instead of its real size. im using "wrap_content" in the hight and width and its still doing it. when im putting the same image some ware else with "wrap_content" its ok. only in the tabs its weird. thats how it looks:

instead of looking like this:

thats my code:

<TabHost
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

           <TabWidget
               android:id="@android:id/tabs"
               android:layout_width="wrap_content"
               android:layout_height="60dp"
               android:gravity="center_vertical"
               android:showDividers="none" >

            </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

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

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

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="first tab" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                 <Button
                    android:id="@+id/button3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="second tab B" />

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Secont tab" />

            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

Thanks!

Answer 1

You can try scaling you image view from java code like this;

yourImageView.setScaleType(ScaleType.CENTER);

or from XML like this;

android:scaleType="fitCenter"

Answer 2

I fixed it using Relative-layout like so:

<TabHost
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.8" >

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

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

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="false"
                android:layout_centerHorizontal="true"
                android:gravity="center_vertical"
                android:showDividers="none" >
            </TabWidget>

        </RelativeLayout>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.9" >

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

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

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

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="first tab" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                 <Button
                    android:id="@+id/button3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="second tab B" />

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Secont tab" />

            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

Thanks anyway!!

Answer 3

You need to use 9-patch images.

Here is a guide that will help you create 9-patch images. http://radleymarx.com/blog/simple-guide-to-9-patch/

Answer 4

Very late answer, and I'm sure you don't care anymore, but someone else might.

Here is another Link for this

The nine-patch generator allows you to quickly generate simple nine-patches at different screen densities, based on the specified source artwork.

If you have any problem for this Please take a look Here . Read CommonsWare Answer .