android layout is not showing proper on some resolutions

Question

My android layout with grid view is not showing properly on 480 x 854 pixels (~196 ppi pixel density) device.and please suggest me is there any method to work with layout creation at run time.

Answer 1

@N.shah , For Gridview, You should make all view dynamic, So that all the cells come exactly on each and every device How We can do this Like we have 4 rows and 2 columns All 4 rows should show on window 1. Find out the device width and height 2. Lets say height is X. Find out height of status bar i.e Y and action bar Z 3. Find out the exact height where we have to show our gridview i.e X=X-(Y+Z) 4. Divide the X by no. of rows you want to show to find out row height i.e R R=X/4( where 4 is no. of rows) 5. Create an xml which you want to show in gridview

custom_gridview

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

    <LinearLayout
        android:id="@+id/ll_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="@dimen/menu_grid_vertical_spacing"
        android:orientation="vertical"
        android:weightSum="4.5" >

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1.9"
            android:gravity="center" >

            <ImageView
                android:id="@+id/img_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/app_name"
                android:padding="@dimen/menu_page_padding"
                android:src="@drawable/ic_launcher" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.4" />

        <com.slinfy.ikharelimiteduk.custom.CustomTextViewSegoeUISemiBold
            android:id="@+id/txt_name"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1.2"
            android:gravity="top|center_horizontal"
            android:text="@string/app_name"
            android:textColor="@android:color/white"
            android:textSize="@dimen/app_menu_text_size" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/menu_grid_vertical_spacing"
        android:layout_alignParentBottom="true"
        android:background="#2E3A60" />

</RelativeLayout>

Make an adapter

GridViewAdapter

import com.slinfy.ikharelimiteduk.R;

import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

@SuppressLint({ "ViewHolder", "InflateParams" })
public class GridViewAdapter extends BaseAdapter {
    String[] mMenuNames;
    int[] mColors;
    Integer[] mMenuIcons;
    Context mContext;
    private LayoutInflater inflater;
    float mGridSize;
    float mPadding;
    int noOfColums = 4;

    public GridViewAdapter(String[] menuNames, Context context, int[] colors, Integer[] menuIcons, float gridSize) {
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mMenuNames = menuNames;
        mMenuIcons = menuIcons;
        mColors = colors;
        mContext = context;
        mGridSize = gridSize;
        mPadding = context.getResources().getDimension(R.dimen.menu_grid_vertical_spacing);
    }

    @Override
    public int getCount() {
        return mMenuIcons.length;
    }

    @Override
    public Object getItem(int arg0) {
        return null;
    }

    @Override
    public long getItemId(int arg0) {
        return 0;
    }

    @Override
    public View getView(int index, View arg1, ViewGroup arg2) {
        ViewHolder holder = null;
        if (arg1 == null) {
            holder = new ViewHolder();
            arg1 = inflater.inflate(R.layout.custom_gridview, null);
            holder.imgMenu = (ImageView) arg1.findViewById(R.id.img_menu);
            holder.txtName = (TextView) arg1.findViewById(R.id.txt_name);
            holder.layout = (RelativeLayout) arg1.findViewById(R.id.layout);
            arg1.setTag(holder);
        } else {
            holder = (ViewHolder) arg1.getTag();
        }
        holder.txtName.setText(mMenuNames[index]);
        holder.imgMenu.setImageResource(mMenuIcons[index]);
        holder.layout.setBackgroundResource(mColors[index]);
        holder.layout.setLayoutParams(new GridView.LayoutParams(GridView.AUTO_FIT,
                (int) ((mGridSize / noOfColums) - 5/* - (mPadding) - 6 */)));
        return arg1;
    }

    class ViewHolder {
        TextView txtName;
        ImageView imgMenu;
        RelativeLayout layout;
    }
}

Set the adapter in your main class

GridView grid = (GridView) findViewById(R.id.grid_view);
grid.setAdapter(new GridViewAdapter(menuNames, getApplicationContext(), colors, menuIcons, gridSize));

Answer 2

Android categorizes device screens using two general properties: size and density. You should expect that your app will be installed on devices with screens that range in both size and density.

Create Different Layouts

To optimize your user experience on different screen sizes, you should create a unique layout XML file for each screen size you want to support. Each layout should be saved into the appropriate resources directory .

More info you can visit official guideline

1. Supporting Different Screen Sizes