In my activity_main.xml I have a number of elements, which out of all I want to make two FrameLayout elements center. If I have only the two FrameLayout elements, they are correctly centered. Here are the code and screenshot that show that:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context="com.abcd.testlayout.MainActivity">
<FrameLayout
android:id="#+id/vertical_line"
android:background="#color/colorPrimary"
android:layout_width="50dp"
android:layout_height="280dp">
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#android:drawable/presence_audio_away" />
</FrameLayout>
<FrameLayout
android:id="#+id/vertical_line2"
android:background="#color/colorAccent"
android:layout_width="280dp"
android:layout_height="50dp"
android:layout_below="#+id/vertical_line">
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#android:drawable/ic_lock_idle_alarm" />
</FrameLayout>
</RelativeLayout>
As you can see I have two lines, a vertical blue line, and a horizontal pink line. The pink line is centered horizontally and the blue line is centered vertically. This is exactly what I want.
Now if I add all other elements to the layout here are the code and the screenshot:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context="com.abcd.testlayout.MainActivity">
<FrameLayout
android:id="#+id/vertical_line"
android:background="#color/colorPrimary"
android:layout_width="50dp"
android:layout_height="280dp">
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#android:drawable/presence_audio_away" />
</FrameLayout>
<FrameLayout
android:id="#+id/vertical_line2"
android:background="#color/colorAccent"
android:layout_width="280dp"
android:layout_height="50dp"
android:layout_below="#+id/vertical_line">
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#android:drawable/ic_lock_idle_alarm" />
</FrameLayout>
<ImageView
android:id="#+id/img1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter" />
<RelativeLayout
android:gravity="center"
android:id="#+id/rel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:antialias="true"
android:scaleType="matrix" />
</RelativeLayout>
<ImageButton
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
app:srcCompat="#android:drawable/btn_default_small"/>
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/imageButton"
android:layout_marginStart="42dp"
android:layout_marginLeft="42dp"
app:srcCompat="#android:drawable/arrow_up_float"/>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:layout_above="#+id/seekBar"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
app:srcCompat="#android:drawable/arrow_down_float"/>
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:max="100"
android:progress="0"
android:visibility="visible"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
As you can see the blue and red lines are moved to top left corner, but I like the location of these two elements to stay at the exact position as in the previous screenshot.
Is there a way to do that, meaning moving the blue and red lines to the exact same location as the previous screenshot and keep the location of other elements untouched without trying to add left or button margin to those elements? Something that works on all phone size and even tablets, just using gravity:center or something like that?
Wrap those two views in another RelativeLayout as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/vertical_line"
android:layout_width="50dp"
android:layout_height="280dp"
android:background="#color/colorPrimary">
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#android:drawable/presence_audio_away" />
</FrameLayout>
<FrameLayout
android:id="#+id/vertical_line2"
android:layout_width="280dp"
android:layout_height="50dp"
android:layout_below="#+id/vertical_line"
android:background="#color/colorAccent">
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#android:drawable/ic_lock_idle_alarm" />
</FrameLayout>
</RelativeLayout>
<!-- Your other views -->
</RelativeLayout>
Related
I need to add some buttons at the bottom of a RecyclerView but whatever i do it always takes up the whole space and the buttons wont show on screen.
I tried adding padding that's the same size as the height of the buttons but it doesn't work.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:gravity="top|center"
android:orientation="horizontal">
<ImageView
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:scaleType="fitXY"
android:src="#drawable/accueil"
app:tint="#color/orange" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/redressed"
android:gravity="center"
android:text="#string/app_name"
android:textColor="#color/bleu"
android:textSize="30sp" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="60dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Generer horaire"
android:layout_gravity="start"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ajouter tache"
android:layout_gravity="end"
/>
</LinearLayout>
</LinearLayout>
I used the following code to display a series of image Buttons vertically. I can successfully scroll through the images that I created but there's a gap in the middle of the screen that I can't fix. I believe that the error stems from the LinearLayout I used but switching that out with a relative or contained layout that didn't change anything.
My code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/homepbckrnd">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
app:srcCompat="#mipmap/facebook" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="229dp"
app:srcCompat="#drawable/ddrr" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="0dp"
app:srcCompat="#drawable/ic_poll_black_24dp" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="0dp"
app:srcCompat="#mipmap/google" />
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ddrr" />
<ImageButton
android:id="#+id/imageButton6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/facebook" />
<ImageButton
android:id="#+id/imageButton7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/facebook" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Remove android:layout_marginTop="229dp" from your imageButton2 as by doing that you are applying a top margin of 229dp on your image which is causing this issue for you.
I am trying to create a custom row for my RecyclerView. Here is my custom row layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_margin="5dp"
android:background="#00000000">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_above="#+id/gameText"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#fff"
android:textSize="45sp" />
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing" />
</RelativeLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone" />
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</RelativeLayout>
This is how it looks like:
The problem is, I have to define a predefined height of the custom row i.e 170dp currently. I am facing 2 problems because of this:
1) If I open the application in a small screen or a tablet device. The custom row is looking ugly i.e I loose the circular shape of the ImageView.
2) The text doesn't remain at the centre if there is a slight change in the layout.
Try this in your code .
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#00000000">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="1"
android:textColor="#fff"
android:textSize="45sp"/>
</RelativeLayout>
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing"/>
</LinearLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone"/>
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</RelativeLayout>
Try This. You can use Linearlayout as root than for image and text use RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_margin="5dp"
android:background="#00000000"
android:orientation="vertical">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#fff"
android:textSize="45sp" />
</RelativeLayout>
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing" />
</LinearLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone" />
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</LinearLayout>
Use constrain layout which helps you to set image like you want just by drag and drop and add constrain
For supporting multiple screen. First you have to go through this link
enter link description here
Once you fix first issue, second issue also will get fix
I have three RelativeLauouts in a LinearLayout and I can't make it fill the whole screen on my emulator?? What is the problem?
Here is my xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/letteord"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/letteord"
android:scaleType="centerCrop"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Let"
android:id="#+id/letteOrdbutton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textSize="50dp"
android:background="#a4000000"
android:textColor="#FFFFFF" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/normaleord"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/normaleord"
android:scaleType="centerCrop"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Normal"
android:id="#+id/normaleOrdbutton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textColor="#FFFFFF"
android:background="#a4000000"
android:textSize="50dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/svaereord"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/svaereord"
android:scaleType="centerCrop"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Svær"
android:id="#+id/svaereOrdbutton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textSize="50dp"
android:textColor="#FFFFFF"
android:background="#a4000000" />
</RelativeLayout>
</LinearLayout>
I have tried changing the layout with and height but it still won't fill the whole screen as you can see on this screenshot:
Well, I see no paddings or margins in the code above. Is this just a portion of your code in your xml file? Check your main activity layout to see if there is any padding or margins. Delete them if there is and it should work fine.
I have three 3 Relative layout in a LinearLayout.
First Relative layout contains Tabhost.
All Tabhost content should be aligned above the 2nd RelativeLayout at all times.
The problem is the content is always viewed as behind the 3rd and 2nd Relative Layout.
How can it make as always above the 2nd RelativeLayout?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#FFFFFFFF">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#color/background_floating_material_dark">
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:gravity="top"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="62dp"/>
</android.support.v4.app.FragmentTabHost>
<RelativeLayout
android:id="#+id/rel_for_sip_active"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#19c031"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_above="#+id/relativeLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Online"
android:id="#+id/online_offline"
android:layout_marginLeft="39dp"
android:layout_marginStart="39dp"
android:textColor="#afafaf"
android:textStyle="bold"
android:layout_marginTop="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="On going call....."
android:id="#+id/textView12"
android:layout_marginLeft="39dp"
android:layout_marginStart="39dp"
android:textColor="#color/white"
android:textStyle="bold"
android:visibility="gone"
android:layout_marginTop="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="00:00:00"
android:id="#+id/callcounter"
android:textColor="#afafaf"
android:textStyle="bold"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/unmute"
android:onClick="Unmute"
android:src="#mipmap/ic_action_mute"
android:visibility="gone"
android:background="#android:color/transparent"
android:layout_marginRight="26dp"
android:layout_marginEnd="26dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mute"
android:onClick="Mute"
android:src="#mipmap/ic_action_mute_active"
android:background="#android:color/transparent"
android:visibility="gone"
android:layout_marginRight="26dp"
android:layout_marginEnd="26dp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/demute"
android:src="#mipmap/ic_action_mute_inactive"
android:background="#android:color/transparent"
android:visibility="visible"
android:layout_marginRight="26dp"
android:layout_marginEnd="26dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/background_floating_material_dark"
style="#style/Theme.Callbox"
android:id="#+id/relativeLayout"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:id="#+id/action_bar_addtarget"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/ic_action_call"
android:background="#drawable/bg_btn_btm_actionbar"
android:visibility="visible"
android:onClick="Call" />
<ImageView
android:id="#+id/action_bar_addtarget_end"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:background="#drawable/bg_btn_btm_actionbar"
android:src="#drawable/ic_action_end_call"
android:visibility="gone"
android:onClick="endCall" />
<ImageView
android:id="#+id/action_bar_dialpad"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/ic_action_dialer"
android:background="#drawable/bg_btn_btm_actionbar"
android:visibility="visible"
android:onClick="showDialpad"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:id="#+id/action_bar_filter"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="#string/dummy"
android:background="#drawable/bg_btn_btm_actionbar"
android:visibility="visible"
android:scaleType="fitCenter"
android:onClick="showCallResult"
android:src="#drawable/ic_action_process_save"
android:layout_below="#+id/action_bar_addtarget_end"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</RelativeLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relativeLayout"
android:visibility="gone"
android:id="#+id/fl_slide_pop">
</FrameLayout>
Several things are bad in your design.
You have too many Layouts, I tried to remove as much as possible some of them.
Also you have 3 ImageButtons for mute/unmute/demute where only one can be set an programmatically changed.
Inflating a view is kind of heavy on android if you don't optimized it.
There is a tool into the SDK that help you to see your layout hierarchy in order to see how to optimized it
You can try to do something simpler like this example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- here is the bottom layout which contains your 3 buttons -->
<LinearLayout
android:id="#+id/third_layout"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="#ff0000"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<!-- Here is the equivalent of the 2nd relative layout, but you just have to show a image
button or a Text view, you don't have to use another relative layout -->
<ImageButton
android:id="#+id/mute"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_above="#id/third_layout"
android:background="#android:color/holo_green_dark"
android:src="#android:drawable/ic_btn_speak_now" />
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_above="#id/third_layout"
/>
<!-- finally the 1st layout which is above the second to the top of its parent -->
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/mute"
android:layout_alignParentTop="true"
android:background="#android:color/holo_blue_bright">
<!-- TAB Widget -->
</android.support.v4.app.FragmentTabHost>
</RelativeLayout>
I encourage you to use less layout in order to have a smoother application.