About design and nearby

Android development: How to Center an ImageView

Posted: July 31st, 2015 | Author: | Filed under: Mobile Design and Development, Tips and Tricks | Tags: , , , , , , , | No Comments »

Android splash screen is used to show a user some kind of progress before the app loads completely. Or you can show case the app or company logo for a couple of second.

Android development: how to center an item

A typical splash screen consists of background (color or image) and a centered item.

I created a layout file for splash screen under Resources -> layout folder: activity_splash.axml.

There is no sense to use a LinearLayout for such simple layout (it’s for displaying a number of items in a row). So I started with a RelativeLayout. The key option for the relevant RelativeLayout is android:layout_centerInParent=”true”:

  1. <?xml version="1.0" encoding="utf-8"?>
  2.   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/RelativeLayout01"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@drawable/blue_wave_background">
  7.     <ImageView android:id="@+id/imageView1"
  8.                android:layout_height="wrap_content"
  9.                android:layout_width="wrap_content"
  10.                android:layout_centerInParent="true"
  11.                android:src="@drawable/icon" />
  12.   </RelativeLayout>

However there could be instances where you need to use a LinearLayout and center content. This case the solution is in android:gravity=”center” for the parent layout:

  1. <LinearLayout
  2.     android:id="@+id/LinearLayout01"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:gravity="center"
  6.     android:orientation="vertical"
  7.     android:background="@drawable/blue_wave_background">
  8.   <ImageButton
  9.       android:id="@+id/btnFindMe"
  10.       android:layout_width="wrap_content"
  11.       android:layout_height="wrap_content"
  12.       android:background="@drawable/icon" />
  13. </LinearLayout>
Share Button

Check Related Posts:


Leave a Reply


  • two + = 4

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now