CODEWITHSUNDEEP
androidandroid-layout
user2528167
user2528167

Reputation:

Aligning a progress bar in Android for different screen sizes

I am developing an app which has a splash screen, you can see it in the picture below. My problem is that I am needing to put a progress bar as you can see in the picture below without many layouts, because now I have eight layout in order to get this effect (layout-sw320dp, layout-sw320dp-land, layout-sw480dp, layout-sw480dp-land...600,720). I was trying use relative layout and center horizontally the progress bar, but with different screen sizes the progress bar get other position vertically.

Could I solve it with less folders?

enter image description here

This is my layout file for 320dp:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/splash_screen_land"
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp" />

</RelativeLayout>

Upvotes: 0

Views: 808

Answers (3)

user2528167
user2528167

Reputation:

I could solve it with weightSum, layout_weight properties which are very useful to imitate percentages.

This is my code with the problem solved:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/splash_screen_land"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <android.support.v7.widget.Space
        android:id="@+id/space1"
        android:layout_weight="100"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

    <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="15" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="17"
        android:gravity="center"
        android:text="TextView"
        android:textSize="20sp" />

</LinearLayout>

I hope this will be useful for someone else

Upvotes: 0

S.Thiongane
S.Thiongane

Reputation: 6905

I suggest you use just one layout file, let's say splash.xml. Put in a RelativeLayout your ImageView, with android:layout_centerInParent="true". Then your ProgressBar with android:below="@id/image" to put it relatively below the image. You can change the layout paddingBottom to adjust views in the center of the layout.

<RelativeLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/padding_bottom">
    <ImageView 
        android:id="@id/image" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true" />
    <ProgressBar 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:minHeight="@dimen/progress_height"
        android:minWidth="@dimen/progress_height" />
</RelativeLayout>

Now instead of having many layouts, you will keep the above layout, and create many values according to your screen sizes. Meaning :

  • values/dimens.xml
  • values-large/dimens.xml
  • values-land/dimens.xml
  • etc.

Thus, your view's layout won't change from a screen to another, only their size will !

Upvotes: 1

Distwo
Distwo

Reputation: 11749

Maybe 3 horizontal LinearLayout using layout_weight to center everything horizontaly with respect of the ratio, containing a vertical LinearLayout with centered gravity?

If you post your actual layout file, that could be easier to explain.

Edit:

Something like that: (you may have to play with the layout_weight values to get the size you want:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"></LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"></LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:adjustViewBounds="true"
                android:src="@drawable/splash_screen_land"/>
            <ProgressBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />    

        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"></LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"></LinearLayout>

</LinearLayout>

Upvotes: 1

Related Questions