Design layout for fit all orientation

Question

look at my picture I want to design layout like that. look at my XML code below, I already design it but when I rotate it to landscape, the button is not fit the shop area(short) and linear layout in image price area is out of boundary(longer). I want it fit all orientation.why I am using button? because when I pragmatically, I can use it as onClickListener

1. how can I design this layout for fit all orientation?

2. Have any way to design this layout using XML code (not use background image)

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@drawable/bar_all"
    android:gravity="center_vertical"
    android:orientation="vertical" >

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

        <Button
            android:id="@+id/btn_all"
            android:layout_width="265dp"
            android:layout_height="match_parent"
            android:background="#00000000" />

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

            <ImageButton
                android:id="@+id/btn_ic_mypage"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="right"
                android:layout_marginRight="12dp"
                android:background="#00000000"
                android:scaleType="fitXY"
                android:src="@drawable/icon_mypage" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

1. Linear Layout for place backgroud image
2. Linear Layout for put button cover the shop area. easy coding onClickListener
3. Linea Layout for cover $ image area and put the image area.

Answer 1

here is the code what you looking for..

Also PL make sure you should avoid any length, height, width value is 20 dp,13 dp etc

This code will be fit for all screen sizes.

main.xml

   <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="top">
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background_main"
        android:gravity="right|center_vertical">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:id="@+id/linearLayout3"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center">
            <Button
                android:layout_height="match_parent"
                android:id="@+id/button_shop"
                android:layout_width="match_parent"
                android:background="@null"></Button>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">
            <Button
                android:background="@drawable/button"
                android:id="@+id/button_doller"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></Button>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity implements OnClickListener {

    private Button btnShop = null;
    private Button btnDoller = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        btnShop = (Button) findViewById(R.id.button_shop);
        btnShop.setOnClickListener(this);

        btnDoller = (Button) findViewById(R.id.button_doller);
        btnDoller.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        if (btnShop == v) {
            Toast.makeText(this, "shop button clicked", Toast.LENGTH_LONG)
                    .show();
        } else if (btnDoller == v) {
            Toast.makeText(this, "doller button clicked", Toast.LENGTH_LONG)
                    .show();
        }

    }
}

PS : if you get image small then create bigger image size icon, i have just used dummy only.

Hope it helps!!