How to Create ImageButton With same Height and Width in Same Distance in Android

In android or in any mobile application ,It is required that layout design of application is  fit in all size of mobile screen.So for that some time we need  calculation. 
Here i provide code which not need any calculation. ImageButton  with fix Height and Width.If you don't want the buttons to scale, but adjust the spacing between the buttons (equal spacing between all buttons), you can use views with weight="1" which will fill the space between the buttons: 

 <LinearLayout
       android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="@color/splash_background_color">
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1"></Space>
<ImageButton
android:id="@+id/btnGallary"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:scaleType="center"
android:background="@drawable/ic_gallery"
/>
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1"></Space>
<ImageButton
android:id="@+id/btnCamera"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:background="@drawable/ic_camera" />
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1"></Space>
<ImageButton
android:id="@+id/btnSave"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:background="@drawable/ic_save" />
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1"></Space>
<ImageButton
android:id="@+id/btnBackground"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:background="@drawable/ic_background"
/>
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1"></Space>
<ImageButton
android:id="@+id/btnViewphotos"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:background="@drawable/ic_photosview"
tools:ignore="MissingClass" />
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1"></Space>

  </LinearLayout> 

Output is:

Here, layout_weight = "1" equally distribute space of mobile screen which is remain after allocating to ImageButton.

Constraint layout used layout_constraintHorizontal_bias to give space between views. layout_constraintHorizontal_bias = 0.0 means "slide the wedget all the way towards the start side" and  layout_constraintHorizontal_bias = 1.0 means  "slide the wedget all the way towards the end side" and layout_constraintHorizontal_bias = 0.5 means "the widget is centered".

Here in below code display horizontal scrollview with end side close button ,this close button is ImageButton.in this example image button need to end side so it used with  layout_constraintHorizontal_bias = 1.0

<HorizontalScrollView
android:id="@+id/wallpaperScrollview"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="none"
app:layout_constraintVertical_weight="10"
app:layout_constraintWidth_percent="100"
android:background="@color/bannerad_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/btnCloseWallpaper"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/relativeLayout">
<LinearLayout
android:id="@+id/wallpaperLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginRight="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
</HorizontalScrollView>
<ImageButton
android:id="@+id/btnCloseWallpaper"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:background="@drawable/ic_close"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="@id/wallpaperScrollview"
  app:layout_constraintTop_toBottomOf="@+id/relativeLayout"/> 
Output is:

In above example we can see that ImageButton is in Right Side.

With RelativeLayout we can Used ImageButton like bellow example:

<RelativeLayout

    android:id="@+id/deleteLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:gravity="center"
android:orientation="horizontal"
android:background="@drawable/border_bottom"
app:layout_constraintVertical_weight="8"
app:layout_constraintBottom_toTopOf="@id/cordinatorLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="@+id/btnClose"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/ic_close"
android:layout_marginLeft="20dp"/>
<TextView
android:id="@+id/textCount"
android:layout_width="40dp"
android:layout_height="30dp"
android:layout_marginLeft="30dp"
android:text="0"
android:textColor="@color/splash_background_color"
android:gravity="center_horizontal"
android:textSize="22dp"
android:textStyle="bold"
android:layout_toRightOf="@id/btnClose" />
<ImageButton
android:id="@+id/btnSelectAll"
android:layout_width="40dp"
android:layout_height="30dp"
android:background="@drawable/ic_selectall"
android:layout_marginRight="30dp"
android:layout_toLeftOf="@id/btnDelete"
/>
<ImageButton
android:id="@+id/btnDelete"
android:layout_width="25dp"
android:layout_height="25dp"
android:background="@drawable/ic_delete"
android:layout_marginRight="20dp"
android:layout_alignParentRight="true"
/>

</RelativeLayout> 

Output is:


Here in above example two ImageButton display in Right side and two ImageButton in Leftside.





Comments

Popular posts from this blog

Constraint Layout with Appbar Layout

Types of layout in Android