Android Studio imitation wechat APP interface design

1, Functional requirements

Complete a layout similar to wechat page, which requires:

  1. At the top of the page is the title centered
  2. The content is displayed in the middle interface of the page, and the content is switched with the selection in the lower column
  3. There are four buttons at the bottom of the page
  4. After clicking the button, the button icon will change color and the change content of the display box will be displayed

2, Page layout settings

1. top.xml layout

Create a layout file top.xml, add a text box, add text, set it to center, and modify the text color and LinearLayout background color.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_height="50dp"
    android:background="#0E0D0D"
    >
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="My Wechat"
        android:textColor="@color/white"
        android:textSize="25sp" />
</LinearLayout>

The effects are as follows:

2. bottom.xml layout

Create a new layout file button.xml.
First add a linear layout (vertical), modify the size and color of the linear layout: modify the configuration information corresponding to gravity to center, then modify the size and add id.
Add an ImageButton under the linear layout (vertical) just added, and select the picture to put in

Insert the code slice here<?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="60dp"
    android:background="@color/colorViewNormal"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/chat"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/chat2" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/contacts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/contracts2" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/circle_friend"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/circleoffriend2" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/settings"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/setting1" />

    </LinearLayout>
</LinearLayout>

Copy the three modified linearlayouts, modify the resource path of ImageButton, and modify the id of LinearLayout and ImageView respectively.
The effects are as follows:

3. Middle page setting

Create four layout.xml files, add an ImageView, modify the text content, and center the ImageView

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".chat">

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/chat"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ps: an error message of "Missing Constraints in ConstraintLayout" may appear here
The solution is: Drag the dots around the buttons in the interface to the relative distance you want to set

4. activity_main.xml

The effect we want is that the title is at the top of the page, the text is displayed in the middle, and there are four buttons at the bottom, so in activity_ Add a LinearLayout in main.xml first
Add three sections in order in LinearLayout:
Add top.xml and button.xml through the include tag
Since the four pages displaying text are in the middle, you can choose to place a FrameLayout in the middle of top and button

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.mydemo.MainActivity">

    <include layout="@layout/top"></include>

    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/imageView9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/setting" />
    </FrameLayout>

    <include layout="@layout/bottom"></include>

</LinearLayout>

5. Resource control drawable file

Import the picture file into / res/drawable before use. You can directly drag the windows local file to the target folder

3, Page jump control (java file)

1. MainActivity

First create an instance object for the fragment class
Define a Fragment manager to control fragments

    //FragmentManager
    private FragmentManager fragmentManager;

Write another function to initialize the fragment, and put the four fragments into the FrameLayout

 //Initializes the layer fragment of the middle part
    private void initFragment(){
        fragmentManager=getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.frame_content, Fragment_chat);
        transaction.add(R.id.frame_content, Fragment_contacts);
        transaction.add(R.id.frame_content, Fragment_circleoffriend);
        transaction.add(R.id.frame_content, Fragment_setting);
        //Commit transaction
        transaction.commit();
    }

What we need to achieve is that when we click the button, the button will change color and jump to the corresponding page. Therefore, we need to listen to the LinearLayout of the ImageButton. However, both ImageButton and LinearLayout are part of the layout file and we cannot call them directly. Therefore, we need to create a function initView() to instantiate the ImageButton and LinearLayout controls for our subsequent calls

In order to jump to the corresponding page after clicking the button, we can hide four interfaces first, and then display the selected page after clicking the button. You can choose to customize a * * HideFragment() * * function and call the hide() function to hide the four interfaces.

In order to change color after clicking the button, we can define a Fragment_select() function: pass in a parameter and display the corresponding page by calling the show() function of transaction.

In order to jump to the page by clicking the button, we need to monitor the. After the first MainActivity, add implements View.OnClickListener. There are comments in the specific function code of the function:

package com.example.mydemo;

import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    //Fragment
    private Fragment Fragment_chat =new chat();
    private Fragment Fragment_contacts =new contacts();
    private Fragment Fragment_circleoffriend =new circleoffriend();
    private Fragment Fragment_setting =new setting();

    //Bottom menu bar LinearLayout
    private LinearLayout linear_chat;
    private LinearLayout linear_contacts;
    private LinearLayout linear_ciecleoffriend;
    private LinearLayout linear_setting;

    //Imageview in the bottom menu bar
    private ImageView imageView_chat;
    private ImageView imageView_contacts;
    private ImageView imageView_circleoffriend;
    private ImageView imageView_setting;

    //FragmentManager
    private FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE );
        setContentView(R.layout.activity_main);

        initView();
        initFragment();
        initEvent();
        Fragment_select(0);
        //Set the first icon to selected
        imageView_chat.setImageResource(R.drawable.chat);
        imageView_chat.setImageResource(R.drawable.chat1);
    }

    //The monitor function monitors which icon is hit to display the content of which interface
    @Override
    public void onClick(View view) {
        //After each click, set all imageviews and textviews to unchecked
        restartButton();
        switch(view.getId())
        {
            case R.id.chat:
                //Select the layer segment corresponding to the clicked menu
                Fragment_select(0);
                //Set the click status of the menu to click status
                imageView_chat.setImageResource(R.drawable.chat);
                imageView_chat.setImageResource(R.drawable.chat1);
                break;
            case R.id.contacts:
                Fragment_select(1);
                imageView_contacts.setImageResource(R.drawable.contracts);
                imageView_contacts.setImageResource(R.drawable.contracts1);
                break;
            case R.id.circle_friend:
                Fragment_select(2);
                imageView_circleoffriend.setImageResource(R.drawable.circleoffirend);
                imageView_circleoffriend.setImageResource(R.drawable.circleoffriend1);
                break;
            case R.id.settings:
                Fragment_select(3);
                imageView_setting.setImageResource(R.drawable.setting);
                imageView_setting.setImageResource(R.drawable.setting1);
                break;
            default:
                break;
        }
    }

    //Reset the click status of the menu to no click
    private void restartButton() {
        //Set to not clicked status
        imageView_chat.setImageResource(R.drawable.chat);
        imageView_chat.setImageResource(R.drawable.chat1);
        imageView_contacts.setImageResource(R.drawable.contracts);
        imageView_contacts.setImageResource(R.drawable.contracts1);
        imageView_circleoffriend.setImageResource(R.drawable.circleoffirend);
        imageView_circleoffriend.setImageResource(R.drawable.circleoffriend1);
        imageView_setting.setImageResource(R.drawable.setting);
        imageView_setting.setImageResource(R.drawable.setting1);
    }

    //Initializes the layer fragment of the middle part
    private void initFragment(){
        fragmentManager=getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.frame_content, Fragment_chat);
        transaction.add(R.id.frame_content, Fragment_contacts);
        transaction.add(R.id.frame_content, Fragment_circleoffriend);
        transaction.add(R.id.frame_content, Fragment_setting);
        //Commit transaction
        transaction.commit();
    }

    //Initialize the LinearLayout, ImageView and TextView components at the bottom
    private  void initView(){
        //Change icon color
        linear_chat =findViewById(R.id.chat);
        linear_contacts =findViewById(R.id.contacts);
        linear_ciecleoffriend =findViewById(R.id.circle_friend);
        linear_setting =findViewById(R.id.settings);
        imageView_chat =findViewById(R.id.imageView1);
        imageView_contacts =findViewById(R.id.imageView2);
        imageView_circleoffriend =findViewById(R.id.imageView3);
        imageView_setting =findViewById(R.id.imageView4);

    }

    //Initialize click listening event
    private void initEvent(){
        linear_chat.setOnClickListener(this);
        linear_contacts.setOnClickListener(this);
        linear_ciecleoffriend.setOnClickListener(this);
        linear_setting.setOnClickListener(this);
    }

    //Hide the contents of unused interfaces
    private void hideView(FragmentTransaction transaction){
        transaction.hide(Fragment_chat);
        transaction.hide(Fragment_contacts);
        transaction.hide(Fragment_circleoffriend);
        transaction.hide(Fragment_setting);
    }

    //The content of the selected interface is displayed, and the icon of the selected interface is green
    private void Fragment_select(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        //Call the hide all layers function
        hideView(transaction);
        switch (i){
            case 0:
                transaction.show(Fragment_chat);
                break;
            case 1:
                transaction.show(Fragment_contacts);
                break;
            case 2:
                transaction.show(Fragment_circleoffriend);
                break;
            case 3:
                transaction.show(Fragment_setting);
                break;
            default:
                break;
        }
        //Commit conversion transaction
        transaction.commit();
    }
}

2. Other Java files

There are four pages here, namely chat, contacts, circle of friends and me, corresponding to chat.java, contacts.java, circleoffriend.java and setting.java files.

4, Display of operation interface

Here I have only selected two interfaces for display

ps: the problem of "Emulator: handleCpuAcceleration: feature check for hvf" occurs after running here
terms of settlement: Modify profile

5, Source code

Detailed code uploaded to Code warehouse

Tags: Java Android wechat

Posted on Sat, 09 Oct 2021 04:36:00 -0400 by Bomas