CODEWITHSUNDEEP
androidsizeimagebutton
melvintcs
melvintcs

Reputation: 551

Stretched ImageButton

I have created an Android layout by using few ImageButtons. My layout works fine on small screens (e.g. 3.6 inch to 4.2 inch), but when I use my application on 7 inch or 9 inch tablets the layout becomes ugly in both portrait and landscape mode. I didn't use any pixel dimensions for the ImageButton. How can I fix this?

On 4 inch screens:

on 3.8"

On 7 inch screens:

on 7"

This is my layout code:

<?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:orientation="vertical" >

   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
       android:layout_height="35dp"
       android:background="#81BEF7"
       android:orientation="vertical"
       android:scrollbars="vertical" >

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/buttonlayout" android:orientation="horizontal"
                android:layout_width="fill_parent" android:layout_height="wrap_content"
                android:height="32dp" android:gravity="left|top" android:background="#000000"
                android:paddingTop="2dp" android:paddingBottom="2dp">
                <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:id="@+id/buttonlayout2" android:orientation="horizontal"
                        android:layout_height="wrap_content" android:gravity="left|center_vertical"
                        android:layout_gravity="left" android:layout_width="wrap_content">
                        <ImageButton android:id="@+id/imgbtn1"
                                android:layout_width="32dp" android:layout_height="32dp"
                                android:background="@drawable/logo" />
                        <TextView android:id="@+id/txtTest" android:layout_width="fill_parent"
                                android:layout_height="fill_parent" android:textStyle="bold"
                                android:text="Max-Apps" android:textColor="#ffffff"
                                android:textSize="15sp" android:gravity="center_vertical"
                                android:paddingLeft="5dp" />
                        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                android:id="@+id/buttonlayout2" android:orientation="horizontal"
                                android:layout_height="wrap_content" android:gravity="right"
                                android:layout_gravity="right" android:layout_width="fill_parent">
                        </LinearLayout>
                </LinearLayout>
                <TableLayout android:id="@+id/TableLayoutTop"
                        android:layout_gravity="left" android:scrollbars="horizontal|vertical"
                        android:scrollbarAlwaysDrawVerticalTrack="true"
                        android:scrollbarAlwaysDrawHorizontalTrack="true"
                        android:layout_height="wrap_content" android:layout_width="fill_parent"
                        android:orientation="horizontal">
                        <TableRow android:id="@+id/TableRowTop"
                                android:layout_height="wrap_content" android:layout_width="fill_parent" />
                </TableLayout>
        </LinearLayout>
</LinearLayout>
<HorizontalScrollView
        android:id="@+id/scrollView1"
        android:layout_height="50dp"
        android:layout_width="fill_parent" >

<LinearLayout
    android:id="@+id/select_names_tags_ll1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@android:drawable/bottom_bar" 
    android:orientation="horizontal"
    android:paddingBottom="1.0dip"
    android:paddingLeft="4.0dip"
    android:paddingRight="4.0dip"
    android:paddingTop="5.0dip" 
    android:gravity="center">

    <Button
        android:id="@+id/btnPageTwo"
        android:layout_width="80dp"
        android:layout_height="wrap_content"        
        android:padding="5dp"
        android:text="Featured" 
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:text="Category"
        android:onClick="onClickCategory" />

    <Button
        android:id="@+id/button2"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:text="Top Download" 
        android:onClick="onClickList"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:text="About us" />
</LinearLayout>    
</HorizontalScrollView>

<ScrollView
        android:id="@+id/scrollView2"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <LinearLayout
        android:orientation="horizontal"        
        android:paddingLeft="4.0dip"
        android:paddingTop="5.0dip"
        android:paddingRight="4.0dip"
        android:paddingBottom="1.0dip"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_below="@+id/TextView01">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content" 
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_margin="2dip"
            android:background="@drawable/winnie"
            android:onClick="onClickPageTwo" /> 0       

        <ImageButton
                 android:id="@+id/imageButton2"
                 android:layout_width="wrap_content" 
                 android:layout_weight="1"
                 android:layout_height="wrap_content"
                 android:layout_margin="2dip"                                 
                 android:background="@drawable/games"
                 android:onClick="onClickPageTwo" /> 
    </LinearLayout>   
</RelativeLayout>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" 
        android:layout_below="@+id/TextView01">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/papago"
            android:onClick="onClickPageTwo" />
    </LinearLayout>
</RelativeLayout>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <LinearLayout
        android:orientation="horizontal"        
        android:paddingLeft="4.0dip"
        android:paddingTop="1.0dip"
        android:paddingRight="4.0dip"
        android:paddingBottom="1.0dip"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_below="@+id/TextView01">        

        <ImageButton
                 android:id="@+id/imageButton3"
                 android:layout_width="fill_parent" 
            android:layout_weight="1"
                 android:layout_height="wrap_content"
                 android:layout_margin="2dip"                                 
                 android:background="@drawable/winnie"
                 android:onClick="onClickPageTwo"  />

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="fill_parent" 
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_margin="2dip"
            android:background="@drawable/mickey"
            android:onClick="onClickPageTwo" />
    </LinearLayout>   
</RelativeLayout>           


<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"    
    android:layout_centerHorizontal="true">

    <LinearLayout
        android:orientation="horizontal"        
        android:paddingLeft="4.0dip"
        android:paddingTop="1.0dip"
        android:paddingRight="4.0dip"
        android:paddingBottom="1.0dip"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" 
        android:layout_below="@+id/TextView01">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"            
            android:layout_height="wrap_content"
            android:layout_margin="1dip"
            android:background="@drawable/fb"                         
            android:onClick="onClickPageTwo" />
    </LinearLayout>   
</RelativeLayout>
        </LinearLayout>            
    </ScrollView>

</LinearLayout>

Upvotes: 1

Views: 907

Answers (1)

Yogesh Somani
Yogesh Somani

Reputation: 2624

(1) You can put the images of different sizes in different folders i. e. hdpi, mdpi, ldpi for big screens, medium screens and low-size screens respectively. Device will automatically pick the image for itself according to its size.

(2) Create a new folder named "layout-land" in the "res" folder and create your xml file with the same name(as of your main xml file) in this folder. Just copy and paste the code of your main xml file into this file. Now create a method (actually override) "onConfigurationChanged()" in your activity class and copy-paste the code of "onCreate()" method into it.

After doing the above 2 steps , you will see that no matter what the size or orientation of the device is , your app's layout will always be correct and as per wanted.

Upvotes: 2

Related Questions