CODEWITHSUNDEEP
androidandroid-layout
Peter
Peter

Reputation: 1931

How to create android layout button end, and start with a textview on centre

Please can anyone assist me on how i can make a layout with a close button on gravity start Textview on centre and a share button on gravity end?

Am trying to create a layout for FrescoImageViewer OverlayView, but my layout isn't in a straight line as i expected.

Below is my layout example.

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

   <LinearLayout
        android:orientation="vertical"
        android:gravity="top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null">
       <ImageButton
           android:id="@+id/btnClose"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="start"
           android:layout_weight="3"
           android:background="@null"
           android:padding="10dp"
           android:scaleType="fitCenter"
           android:src="@drawable/com_facebook_close"
           tools:src="@drawable/com_facebook_close" />

       <TextView
            android:id="@+id/tvDescription"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Image"
            android:textColor="@color/white"
            android:layout_weight="0"
            android:textAppearance="?android:attr/textAppearanceLarge" />

       <ImageButton
           android:id="@+id/btnShare"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="end"
           android:gravity="top"
           android:layout_weight="3"
           android:background="@null"
           android:padding="0dp"
           android:scaleType="fitCenter"
           android:src="@android:drawable/ic_menu_share"
           tools:src="@android:drawable/ic_menu_share" />
    </LinearLayout>

</LinearLayout>

The above layout design output this.

Updated with image

enter image description here

enter image description here

enter image description here

Upvotes: 0

Views: 482

Answers (3)

SowlM
SowlM

Reputation: 992

On your inner LinearLayout set the android:orientation="horizontal"

You should also change your weighting system as I wrote bellow and remember to always add android:weightSum="10" or other weights base on your calculation "I recommend weight some of 100 so it's comparable as a percentage" and give each child the right amount of weight you desire for that column or row.

As a final advice, I really recommend changing to ConstraintLayout which has percentage support by default and is more reliable on different screen resolutions.

your code should change like this:

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

<LinearLayout
    android:orientation="horizontal"
    android:gravity="top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="10"
    android:background="@null">
    <ImageButton
        android:id="@+id/btnClose"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_weight="1"
        android:background="@null"
        android:padding="10dp"
        android:scaleType="fitCenter"
        android:src="@android:drawable/ic_menu_share"
        tools:src="@android:drawable/ic_menu_share" />

    <TextView
        android:id="@+id/tvDescription"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Image"
        android:layout_weight="8"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageButton
        android:id="@+id/btnShare"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:gravity="top"
        android:layout_weight="1"
        android:background="@null"
        android:padding="10dp"
        android:scaleType="fitCenter"
        android:src="@android:drawable/ic_menu_share"
        tools:src="@android:drawable/ic_menu_share" />
</LinearLayout>

Upvotes: 1

hamid keyhani
hamid keyhani

Reputation: 461

check this out:

<android.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:orientation="vertical">

            <ImageButton
                    android:id="@+id/btnClose"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    android:layout_weight="3"
                    android:background="@null"
                    android:padding="10dp"
                    android:scaleType="fitCenter"
                    android:src="@drawable/com_facebook_close"
                    tools:src="@drawable/com_facebook_close" />

            <TextView
                    android:id="@+id/tvDescription"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/btnClose"
                    app:layout_constraintEnd_toStartOf="@+id/btnShare"
                    android:textAlignment="center"
                    android:text="image"
                    android:textColor="@color/white"
                    android:layout_weight="0"
                    android:textAppearance="?android:attr/textAppearanceLarge" />

            <ImageButton
                    android:id="@+id/btnShare"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:layout_gravity="end"
                    android:gravity="top"
                    android:layout_weight="3"
                    android:background="@null"
                    android:padding="0dp"
                    android:scaleType="fitCenter"
                    android:src="@android:drawable/ic_menu_share"
                    tools:src="@android:drawable/ic_menu_share" />

    </android.constraintlayout.widget.ConstraintLayout>

I hope to be useful ;)

Upvotes: 2

Mohammed Alaa
Mohammed Alaa

Reputation: 3320

You can use layout_weight to achieve this or other layout like constraintLayout 

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

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@null">
    <ImageButton
        android:id="@+id/btnClose"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_gravity="center"
        android:padding="10dp"
        android:scaleType="fitCenter"
        android:src="@drawable/com_facebook_close"
        tools:src="@drawable/com_facebook_close" />

    <TextView
        android:id="@+id/tvDescription"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Image"
        android:textColor="@color/white"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageButton
        android:id="@+id/btnShare"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="0dp"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        android:src="@android:drawable/ic_menu_share"
        tools:src="@android:drawable/ic_menu_share" />
</LinearLayout>

</LinearLayout>

Upvotes: 1

Related Questions